| name | canva-design-terminology |
| description | Design knowledge base for understanding design terminology, concepts, and best practices.
Use this skill when user asks about design terms, needs guidance on design principles,
or wants to understand Canva-specific features. Provides educational information,
not direct Canva operations. Reference skill for other skills to consult.
|
| allowed-tools | ["Read","Glob","Grep"] |
Canva Design Terminology Skill
A knowledge base for design terminology, principles, and Canva-specific concepts.
Scope of This Skill
This skill handles:
- Explaining design terminology
- Design principles and best practices
- Canva-specific features and terms
- Color theory basics
- Typography fundamentals
- Layout principles
- Format and dimension guidance
- When to use which design type
NOT handled by this skill:
- Actually editing designs → Use editing skills
- API operations → Use other skills
- Generating content → Use
canva-content-generator
Design Principles Reference
The Fundamentals
1. Hierarchy
The arrangement of elements to show importance.
- Visual hierarchy uses size, color, contrast to guide the eye
- Most important element should be most prominent
- Create clear reading order
2. Balance
Distribution of visual weight.
- Symmetrical: Mirror image, formal, stable
- Asymmetrical: Unequal but balanced, dynamic
- Radial: Elements radiate from center
3. Contrast
Difference between elements to create interest.
- Light vs. dark
- Large vs. small
- Thick vs. thin
- Color opposites
4. Alignment
How elements line up with each other.
- Creates clean, organized appearance
- Invisible lines connect elements
- Left, right, center, or justified
5. Repetition
Recurring elements create unity.
- Repeat colors, fonts, shapes
- Creates brand consistency
- Establishes visual rhythm
6. Proximity
Grouping related elements together.
- Related items should be close
- Unrelated items should have space
- Creates logical groupings
7. White Space (Negative Space)
Empty areas in design.
- Gives elements room to breathe
- Increases readability
- Creates elegance and sophistication
Color Theory
Color Models
| Model | Use Case | Components |
|---|
| RGB | Digital screens | Red, Green, Blue (0-255) |
| HEX | Web colors | #RRGGBB format |
| CMYK | Print | Cyan, Magenta, Yellow, Black |
| HSL | Design tools | Hue, Saturation, Lightness |
Color Harmonies
- Complementary: Opposite colors (high contrast)
- Analogous: Adjacent colors (harmonious)
- Triadic: Three evenly spaced colors
- Split-complementary: One color + two adjacent to its complement
- Monochromatic: Variations of one color
Color Psychology
| Color | Associations | Best For |
|---|
| Red | Energy, urgency, passion | Sales, food, action |
| Blue | Trust, calm, professional | Corporate, tech, healthcare |
| Green | Nature, growth, health | Eco, finance, wellness |
| Yellow | Optimism, warmth, attention | Caution, youth, creativity |
| Orange | Friendly, confident, fun | Entertainment, food, sports |
| Purple | Luxury, creativity, wisdom | Beauty, spirituality, premium |
| Pink | Feminine, playful, romantic | Beauty, fashion, youth |
| Black | Elegant, powerful, sophisticated | Luxury, fashion, tech |
| White | Clean, pure, simple | Minimalist, healthcare, tech |
Typography
Font Categories
| Category | Characteristics | Best For |
|---|
| Serif | Small decorative strokes | Print, formal, traditional |
| Sans-serif | Clean, no strokes | Digital, modern, minimal |
| Display | Decorative, unique | Headlines, logos, impact |
| Script | Handwriting-like | Invitations, elegant, personal |
| Monospace | Equal character width | Code, technical, retro |
Typography Terms
- Kerning: Space between specific letter pairs
- Tracking: Overall letter spacing
- Leading: Line spacing (line-height)
- Font weight: Thickness (light, regular, bold)
- X-height: Height of lowercase letters
- Baseline: Line text sits on
- Ascender: Part above x-height (like 'h')
- Descender: Part below baseline (like 'g')
Typography Best Practices
- Limit fonts - 2-3 maximum per design
- Create contrast - Pair different styles
- Hierarchy - Different sizes for different purposes
- Readability - Adequate size and contrast
- Line length - 45-75 characters ideal
Canva-Specific Terms
Design Elements
| Term | Definition |
|---|
| Element | Any object in a design (text, image, shape) |
| Frame | Container for images that masks them |
| Grid | Layout structure for organizing content |
| Layer | Stacking order of elements |
| Group | Multiple elements combined as one |
| Lock | Prevent element from being moved |
| Alignment guides | Lines showing element alignment |
Canva Features
| Feature | Description |
|---|
| Brand Kit | Saved brand colors, fonts, logos |
| Magic Resize | Automatically resize designs |
| Background Remover | Remove image backgrounds |
| Magic Eraser | Remove objects from images |
| Text Effects | Shadow, lift, splice, etc. |
| Animate | Add motion to elements |
| Transparency | Element opacity level |
| Blur | Soften images or backgrounds |
Design Types
| Type | Use Case | Typical Dimensions |
|---|
| Presentation | Slideshows, pitches | 1920x1080 |
| Social Media Post | Instagram, Facebook | Platform-specific |
| Story | Vertical social content | 1080x1920 |
| Document | Reports, letters | A4, Letter |
| Video | Motion content | Various |
| Print | Physical materials | Various with bleed |
Image Terms
Resolution & Quality
| Term | Definition |
|---|
| PPI/DPI | Pixels/dots per inch (quality measure) |
| 72 PPI | Standard screen resolution |
| 300 PPI | Standard print resolution |
| Vector | Scalable graphics (no pixels) |
| Raster | Pixel-based images |
Image Formats
| Format | Best For | Transparency |
|---|
| PNG | Web, graphics | Yes |
| JPG/JPEG | Photos | No |
| SVG | Icons, logos (vector) | Yes |
| GIF | Simple animations | Yes (limited) |
| WebP | Web optimization | Yes |
| PDF | Print, documents | Varies |
Composition Terms
| Term | Definition |
|---|
| Rule of thirds | Grid dividing image 3x3 |
| Golden ratio | 1:1.618 proportion |
| Focal point | Main area of interest |
| Leading lines | Lines guiding the eye |
| Framing | Using elements to frame subject |
| Negative space | Empty areas around subject |
Layout Principles
Grid Systems
- Column grid: Vertical divisions
- Modular grid: Rows and columns
- Hierarchical grid: Based on content importance
- Baseline grid: Aligns text across columns
Common Layouts
| Layout | Description | Best For |
|---|
| Single column | One main content area | Mobile, articles |
| Split | Two equal halves | Comparisons, before/after |
| Asymmetrical | Unequal divisions | Dynamic, modern |
| Grid | Equal boxes | Galleries, portfolios |
| Z-pattern | Follows Z reading path | Landing pages |
| F-pattern | Follows F reading path | Content-heavy pages |
Print vs. Digital
Key Differences
| Aspect | Print | Digital |
|---|
| Color mode | CMYK | RGB |
| Resolution | 300 DPI minimum | 72-150 PPI |
| Bleed | Required (usually 0.125") | Not needed |
| Safe area | Keep text away from edges | Full edge usage |
| File format | PDF (print-ready) | PNG, JPG, WebP |
Print Terminology
| Term | Definition |
|---|
| Bleed | Design extends past trim line |
| Trim | Final cut line |
| Safe zone | Area guaranteed to be visible |
| Crop marks | Lines showing where to cut |
| CMYK | Cyan, Magenta, Yellow, Black printing |
| Spot color | Specific ink color (Pantone) |
Accessibility
Design for All Users
- Color contrast - WCAG 2.1 minimum 4.5:1 for text
- Don't rely on color alone - Use patterns, labels
- Readable fonts - Adequate size, clear typeface
- Alt text - Describe images for screen readers
- Logical order - Clear reading sequence
Contrast Checker
Good contrast examples:
- Black text on white: 21:1 ✓
- Dark gray on light gray: 4.5:1+ ✓
Poor contrast examples:
- Light gray on white: 2:1 ✗
- Yellow on white: 1.5:1 ✗
Quick Reference Cards
Social Media Dimensions (2024)
Instagram:
- Post: 1080x1080 (1:1)
- Story: 1080x1920 (9:16)
- Reel: 1080x1920 (9:16)
Facebook:
- Post: 1200x630
- Cover: 820x312
- Story: 1080x1920
LinkedIn:
- Post: 1200x1200
- Banner: 1584x396
Twitter/X:
- Post: 1600x900
- Header: 1500x500
YouTube:
- Thumbnail: 1280x720
- Banner: 2560x1440
Font Pairing Suggestions
Classic combinations:
- Montserrat + Merriweather
- Playfair Display + Source Sans Pro
- Roboto + Lora
- Oswald + Open Sans
- Raleway + Libre Baskerville
Using This Skill
When other skills need design knowledge:
- Query this skill for terminology
- Get recommended practices
- Check dimension requirements
- Verify accessibility guidelines
This is a reference skill - it provides information but doesn't perform actions.
