Canvas Design

Canvas Design

A two-step design workflow: first articulate a design philosophy, then create visual designs on canvas. Based on the anthropics/skills canvas-design approach.

• Leverage native parallel subagent dispatch and 200k+ context windows where available.

When to Use This Skill

Use symptom -> action triggers: when one matches, apply this skill and verify with the protocol below.

• Creating design philosophy documents (.md)
• Generating visual canvas designs (.png/.pdf)
• Articulating design principles and aesthetic rationale
• Crafting multi-page design documents
• Exploring design thinking and intentional visual communication

---

Step 1: Design Philosophy Document

Create a markdown document that articulates the design philosophy before any visual creation.

Philosophy Document Structure

## Core Intent
What is this design trying to communicate? What feeling should it evoke?

## Guiding Principles
1. **[Principle Name]** — Explanation of how this shapes decisions
2. **[Principle Name]** — Explanation
3. **[Principle Name]** — Explanation

## Aesthetic Direction
- **Color Philosophy**: Why these colors, what they represent
- **Typography Philosophy**: What the type choices communicate
- **Spatial Philosophy**: How whitespace and layout serve the intent
- **Material/Texture**: Physical or digital texture decisions

## Inspirations & References
- [Reference 1]: What specifically resonates and why
- [Reference 2]: The element to borrow vs. what to avoid

## Step 2: Canvas Creation

After establishing the philosophy, create visual designs that embody those principles.

### Canvas Workflow
1. **Review philosophy** — Reread the design philosophy document
2. **Define canvas** — Set dimensions, background, grid system
3. **Establish hierarchy** — Place primary elements first
4. **Apply philosophy** — Every decision references a stated principle
5. **Refine** — Remove anything that doesn't serve the core intent

### Essential Design Principles

| Principle | Description |
|-----------|-------------|
| **Intentionality** | Every element exists for a reason |
| **Hierarchy** | Guide the eye through deliberate contrast and spacing |
| **Consistency** | Repeated patterns build trust and comprehension |
| **Restraint** | Fewer elements, each carrying more weight |
| **Craftsmanship** | Pixel-perfect alignment, harmonious proportions |

### Multi-Page Documents
For multi-page designs:
- Maintain consistent margins and grid across pages
- Use a master color palette derived from the philosophy
- Create a visual rhythm — varying density to prevent monotony
- Include breathing pages (minimal content) between dense sections

## Anti-Patterns

- Starting from a generic template without adapting it: The output may look polished but still miss the real audience or medium.
- Ignoring final render or export review: Layout bugs often appear only after the asset is opened in its destination tool.
- Fixing content and presentation in one pass: It becomes hard to tell whether a problem is structural or visual.

## Verification Protocol

Before claiming "skill applied successfully":

1. Pass/fail: The Canvas Design implementation names the target runtime, framework version, and affected files.
2. Pass/fail: Build, lint, test, or equivalent local validation is run for the changed surface.
3. Pass/fail: Edge cases for errors, dependency drift, and environment differences are addressed or explicitly out of scope.
4. Pressure-test scenario: Apply the workflow to a change that passes happy-path tests but fails one boundary condition.
5. Success metric: Zero untested success claims; every implementation claim maps to a command or artifact.


### Quality Checklist
- [ ] Every element traces back to a stated principle
- [ ] Color choices align with the documented philosophy
- [ ] Typography serves the content hierarchy
- [ ] Whitespace is intentional, not leftover
- [ ] The design could be explained purely through its philosophy doc
- [ ] Nothing decorative exists without purpose

---

## Craftsmanship Emphasis

Design is a craft. The difference between good and great design:

- **Alignment**: Not "close enough" but mathematically precise
- **Spacing**: Consistent rhythm using a base unit (4px, 8px)
- **Color**: Not just "looks nice" but optically balanced, accessible (WCAG AA+)
- **Typography**: Line height, letter spacing, and measure all tuned for readability
- **Details**: Transitions, hover states, focus indicators — the invisible work

> "The details are not the details. They make the design." — Charles Eames
---

## References & Resources

### Documentation
- [Design Principles](./references/design-principles.md) — Gestalt principles, visual hierarchy, typography pairing, golden ratio, and grid systems
- [Color Psychology](./references/color-psychology.md) — Color emotional associations, harmony types, industry palettes, and accessibility

### Scripts
- [Palette Generator](./scripts/generate-palette.py) — Python script to generate color palettes with WCAG contrast ratio checking

### Examples
- [Kitchen Odyssey Design Philosophy](./examples/design-philosophy-example.md) — Complete design philosophy document example for a recipe sharing platform


---

<!-- PORTABILITY:START -->
## Cross-Client Portability

This skill is written to stay usable across GitHub Copilot, Claude Code, Codex, and Gemini CLI.

- GitHub Copilot: keep the folder in a Copilot-visible skill or plugin path, or wrap the workflow as project instructions if the host does not support portable skill folders directly.
- Claude Code: keep the folder in a local skills directory or a compatible plugin or marketplace source.
- Codex: install or sync the folder into `$CODEX_HOME/skills/<skill-name>` and restart Codex after major changes.
- Gemini CLI: this repository generates a project command named `/skills:canvas-design` from this skill. Rebuild commands with `python scripts/export-gemini-skill.py canvas-design` and then run `/commands reload` inside Gemini CLI.

<!-- PORTABILITY:END -->

<!-- MCP:START -->
## MCP Availability And Fallback

Preferred MCP Server: None required

- Fallback prompt: "Use the Canvas Design skill without MCP. Rely on the local `SKILL.md`, bundled references or scripts, and manual verification. Show the exact commands, evidence, and final checks you used before concluding."
- If the current host does not expose a matching server, use the bundled references, scripts, native toolchain, and manual workflow already described in this skill.
- Treat direct local verification, rendered output, logs, tests, or screenshots as the fallback evidence path before completion.

<!-- MCP:END -->

## Related Skills

- [frontend-design](../frontend-design/SKILL.md): Use it when the workflow also needs UI composition and front-end design direction.
- [premium-frontend-ui](../premium-frontend-ui/SKILL.md): Use it when the workflow also needs high-fidelity UI polish and interaction detail.
- [web-design-reviewer](../web-design-reviewer/SKILL.md): Use it when the workflow also needs browser-based UI review and responsive QA.
- [stitch-design](../stitch-design/SKILL.md): Use it when the workflow also needs turning interface designs into implementation-ready assets.

Changelog

[2026-04-25] - Version 1.2 Verification Protocol Refresh

Added

• Added a Verification Protocol section with skill-specific pass/fail checks, one pressure-test scenario, and a measurable success metric.
• Added guidance to leverage native parallel subagent dispatch and 200k+ context windows where available.

Changed

• Updated SKILL.md frontmatter to version: "1.2" and last_updated: 2026-04-25.
• Reframed activation guidance toward symptom -> action triggers and standardized two-stage review wording where applicable.

[2026-04-24] - Version 1.1 Refresh

Changed

• Updated the SKILL frontmatter version to 1.1 for the 2026-04-24 catalog refresh.

[2026-04-24] - Verification Follow-Up

Fixed

• Moved the Anti-Patterns section so it now sits directly before the quality checklist, matching the catalog placement rule.

[2026-04-24] - Skill Refresh

Changed

• Standardized the SKILL frontmatter with version metadata, last-updated date, tags, and a concise catalog description.
• Reformatted the portability and MCP guidance with a preferred server line, a copy-paste fallback prompt, and consistent bullet lists.
• Added a catalog-standard Anti-Patterns section and refreshed the Related Skills links at the end of the skill.

[2026-04-24] - Catalog Audit Cleanup

Fixed

• Removed obsolete standalone Skill Paths guidance that duplicated the generated portability section.
• Removed a stray closing code fence so the Markdown structure is balanced after cleanup.

All notable changes to this skill will be documented in this file.

[2026-04-04] - Cross-Client Portability Refresh

Changed

• Added a standard portability note covering GitHub Copilot, Claude Code, Codex, and Gemini CLI.
• Clarified that the core workflow does not require a dedicated MCP server and can run with local tools alone.

Tested

• Validated SKILL.md frontmatter, portability sections, and Gemini export readiness with python scripts/validate-skills.py.

[2026-03-09] - Workspace Modernization

Changed

• Removed duplicated related-skill content from SKILL.md to keep the skill concise

[2026-02-28] — Description Rewrite & Cross-References

Changed

• Rewrote skill description to ~200 characters with clear, specific activation keywords
• Improved keyword specificity to reduce overlap with related skills

Added

• ## Related Skills cross-reference table with 2-4 related skills and "Use When" guidance

Design Philosophy: Kitchen Odyssey

A Modern Recipe Sharing Platform

---

Core Intent

Kitchen Odyssey exists to make cooking feel like an adventure, not a chore. Every design decision serves one question: Does this help someone discover, cook, and share a recipe with less friction and more joy?

The design should feel like opening a well-loved cookbook in a sunlit kitchen — warm, inviting, practical, and personal.

---

Guiding Principles

1. Clarity Over Cleverness

Recipe platforms deal with structured, instruction-heavy content. The design must prioritize scanability and readability above visual flair. If a user can't find the ingredient list in under two seconds, the design has failed.

• Headings clearly separate recipe sections (ingredients, steps, notes)
• No decorative elements that obscure content
• Actions are labeled, not hidden behind ambiguous icons

2. Warmth Through Restraint

A warm palette and generous whitespace create a sense of comfort without visual noise. The design should feel curated but not cluttered — like a kitchen with everything in its place.

• Limit color usage to 3–4 intentional tones
• Let food photography be the hero element
• Use whitespace as an active ingredient in every layout

3. Cook-First, Browse-Second

The primary user journey is find → cook → done. Browsing, bookmarking, and social features are secondary. Layout, hierarchy, and navigation all serve the cooking workflow.

• Recipe detail pages prioritize the recipe content, not comments or related recipes
• Step-by-step mode is the highest-fidelity experience
• Timer and checkbox interactions are designed for flour-covered fingers (large touch targets)

4. Accessible by Default

Cooking is universal. The design must work for users with visual impairments, motor difficulties, and cognitive accessibility needs.

• All text meets WCAG AA contrast ratios (4.5:1 minimum)
• Interactive elements have minimum 44×44px touch targets
• Color is never the sole indicator of state (always paired with icons or text)
• Semantic HTML and ARIA labels are non-negotiable

5. Progressive Disclosure

Show what matters now, reveal the rest when needed. Don't overwhelm a user with nutritional data, scaling options, substitution suggestions, and review scores all at once.

• Default view: photo, title, time, ingredients, steps
• Expandable: nutrition, reviews, notes, scaling, print view
• Hidden until needed: share options, report, admin controls

---

Aesthetic Direction

Color

Rationale: The warm white + cream foundation evokes kitchen warmth. Tomato red and saffron orange reference actual food colors, creating a subconscious appetite connection. Sage green provides a natural, fresh counterpoint.

60-30-10 Application:

• 60% warm white/cream (backgrounds, surfaces)
• 30% charcoal/gray (text, structure)
• 10% tomato red + saffron orange (interactive elements, emphasis)

Typography

Rationale: Fraunces is a soft, slightly quirky serif that feels handcrafted and warm — like a recipe written by someone who cares. Work Sans is a clean, geometric sans-serif that provides excellent readability for ingredient lists and instructions.

Type scale: Major Third (1.250 ratio) from a 16px base: 12, 14, 16, 20, 25, 31, 39, 49.

Spatial System

• Base unit: 8px
• Component padding: 16px (compact), 24px (default), 32px (spacious)
• Card gap: 24px
• Section spacing: 48–64px
• Page margins: 24px (mobile), 64px (desktop)
• Max content width: 1200px
• Recipe content max-width: 720px (optimal reading width)

Material & Elevation

The design uses a flat-with-subtle-depth approach. No hard drop shadows. Instead:

Level 0: Page background — #FFFDF7, no shadow
Level 1: Cards, inputs  — #FFFFFF, shadow: 0 1px 3px rgba(0,0,0,0.06)
Level 2: Dropdowns, popovers — #FFFFFF, shadow: 0 4px 12px rgba(0,0,0,0.08)
Level 3: Modals, dialogs — #FFFFFF, shadow: 0 8px 24px rgba(0,0,0,0.12)
         + background overlay: rgba(0,0,0,0.4)

Iconography

• Style: Outlined, 1.5px stroke, 24px default size
• Roundness: Slightly rounded corners (matching border-radius: 8px)
• Set: Lucide Icons (consistent, open-source, tree-shakable)
• Filled variant only for "active" states (e.g., filled heart = bookmarked)

Border Radius

Small (badges, tags):    4px
Medium (buttons, inputs): 8px
Large (cards):           12px
XL (modals, hero images): 16px
Full (avatars):          9999px

Motion

• Duration: 150ms (micro), 250ms (standard), 400ms (complex/page)
• Easing: cubic-bezier(0.4, 0, 0.2, 1) for enters; cubic-bezier(0, 0, 0.2, 1) for exits
• Philosophy: Motion should feel natural and swift. No bouncing, no slow fades. Think of a confident hand turning a cookbook page, not a dramatic curtain reveal.

---

Inspirations

---

Anti-Patterns

These are design choices Kitchen Odyssey explicitly rejects:

---

Philosophy → UI Translation

How abstract principles become concrete interface decisions:

Recipe Card (Home/Search Grid)

┌─────────────────────────┐
│                         │
│      [Food Photo]       │  ← Hero image — "warmth through restraint"
│                         │     Full width, 3:2 aspect ratio, rounded top
│                         │
├─────────────────────────┤
│  Pasta Carbonara        │  ← Fraunces SemiBold, 20px — "clarity over cleverness"
│  ⏱ 35 min  👤 4 servings│  ← Work Sans Regular, 14px, warm gray
│                         │
│  [Italian] [Quick]      │  ← Badges: 4px radius, muted backgrounds
│                         │
│  ♡ 42    ★ 4.8         │  ← Outlined heart (unfilled = not saved)
└─────────────────────────┘
   ↑ 12px border-radius
   ↑ Level 1 shadow
   ↑ 24px gap between cards

Recipe Detail Page

Photo (full-width, max 480px height)
│
├── Title (Fraunces Bold, 36px)
├── Meta row: author avatar + name, date, cook time, servings
├── Action bar: ♡ Save | 🖨 Print | ↗ Share | ⚙ Scale
│
├── Ingredients (left column, sticky on desktop)
│   ├── [ ] 200g spaghetti          ← Checkboxes for tracking
│   ├── [ ] 150g guanciale
│   └── ... (scrollable independently)
│
├── Steps (right column, numbered)
│   ├── 1. Bring a large pot...
│   ├── 2. While the pasta cooks...
│   └── ...
│
├── Notes (collapsible)             ← "progressive disclosure"
├── Nutrition (collapsible)
└── Reviews (collapsible, paginated)

Navigation

┌──────────────────────────────────────────────────────┐
│  🍳 Kitchen Odyssey          [Search...]    [👤 Profile] │
├──────────────────────────────────────────────────────┤
│  Home   Explore   Create   My Recipes                │
└──────────────────────────────────────────────────────┘

- Text labels always visible (no icon-only nav)
- Active state: tomato red underline + bold weight
- Search is persistent and prominent — "cook-first" principle

Empty States

Empty states are opportunities to be warm and encouraging, not clinical.

┌─────────────────────────────────┐
│                                 │
│     🍳                          │
│                                 │
│  Your recipe book is empty      │  ← Fraunces, 24px
│                                 │
│  Every great chef starts        │  ← Work Sans, 16px, warm gray
│  somewhere. Create your         │
│  first recipe or explore        │
│  what others are cooking.       │
│                                 │
│  [Create Recipe]  [Explore]     │  ← Primary + Secondary buttons
│                                 │
└─────────────────────────────────┘

---

Living Document

This philosophy is not static. It evolves as Kitchen Odyssey grows and as we learn more about how people actually cook with the platform. Each design decision should be traceable back to a principle listed here. If a decision can't be justified by a principle, either the decision is wrong or a new principle is needed.

Review cadence: Revisit this document quarterly or when major features are introduced.

Color Psychology Reference

Comprehensive reference for color psychology, harmony theory, and practical palette construction for digital design.

---

Emotional Associations of Colors

Red

Hex: #E53E3E / #C53030 / #FC8181

Use for: CTAs, sale banners, error states, notifications, food/appetite stimulation. Avoid for: Financial dashboards (implies loss), health/calm contexts.

---

Orange

Hex: #ED8936 / #DD6B20 / #FBD38D

Use for: Calls to action (less aggressive than red), playful brands, food apps, kids' products.

---

Yellow

Hex: #ECC94B / #D69E2E / #FEFCBF

Use for: Highlights, badges, attention-grabbing accents. Use sparingly — high saturation yellow is fatiguing. Accessibility note: Pure yellow (#FFFF00) fails WCAG contrast on white. Always use darkened variants (#92700C or darker) for text.

---

Green

Hex: #48BB78 / #38A169 / #C6F6D5

Use for: Success states, health/wellness apps, sustainability, finance (profit), agriculture, eco-brands.

---

Blue

Hex: #4299E1 / #3182CE / #BEE3F8

Use for: Corporate/enterprise apps, finance, healthcare, social media, technology. Blue is the most universally "safe" color. Note: Blue is the world's most popular favorite color across cultures.

---

Purple

Hex: #805AD5 / #6B46C1 / #E9D8FD

Use for: Premium/luxury products, creative tools, beauty brands, spiritual/wellness apps.

---

Pink

Hex: #ED64A6 / #D53F8C / #FED7E2

Use for: Beauty, fashion, dating apps, youth-oriented products. Hot pink works well for disruptive/modern tech brands.

---

Black

Hex: #1A202C / #2D3748 / #000000

Use for: Luxury brands, high-fashion, premium products, dark mode UI, editorial/photography.

---

White

Hex: #FFFFFF / #F7FAFC / #EDF2F7

Use for: Backgrounds, whitespace-heavy designs, minimalist brands, healthcare, tech products.

---

Gray

Hex: #A0AEC0 / #718096 / #E2E8F0

Use for: Backgrounds, borders, secondary text, disabled states, neutral UI chrome.

---

Brown / Earth Tones

Hex: #8B6914 / #A0522D / #D2B48C

Use for: Food/coffee brands, outdoor/nature products, artisan/craft brands, recipe platforms.

---

Cultural Color Meanings

Colors carry different associations across cultures. Consider your audience.

---

Color Harmony Types

Complementary

Colors directly opposite on the color wheel. Maximum contrast and visual tension.

Example: Blue (#4299E1) ←→ Orange (#ED8936)

Best for: CTAs against a dominant background, emphasis
Caution: Don't use at equal saturation/proportion — one should dominate

Analogous

Three colors adjacent on the color wheel. Harmonious and serene.

Example: Blue (#4299E1) — Blue-Green (#38B2AC) — Green (#48BB78)

Best for: Cohesive, unified designs, nature themes, gradients
Caution: Can lack contrast — add a neutral for balance

Triadic

Three colors equally spaced (120° apart). Vibrant and balanced.

Example: Red (#E53E3E) — Blue (#4299E1) — Yellow (#ECC94B)

Best for: Playful, dynamic designs, children's products
Caution: Use one dominant color, two as accents (60-30-10 rule)

Split-Complementary

A base color plus the two colors adjacent to its complement. High contrast with less tension than pure complementary.

Base:        Blue (#4299E1)
Complement:  Orange (#ED8936)
Split:       Red-Orange (#E53E3E) + Yellow-Orange (#ECC94B)

Best for: Beginners — easier to balance than complementary

Tetradic (Rectangle)

Four colors forming a rectangle on the wheel — two complementary pairs.

Example: Blue (#4299E1) + Orange (#ED8936) + Green (#48BB78) + Red (#E53E3E)

Best for: Rich, complex palettes (dashboards, data visualization)
Caution: Hard to balance — let one color dominate strongly

Monochromatic

Single hue with variations in lightness and saturation.

Example: Blue family
  #2A4365 (dark)
  #3182CE (base)
  #63B3ED (light)
  #BEE3F8 (very light)

Best for: Elegant, focused designs, single-brand emphasis
Caution: Can feel monotonous — add one accent color for energy

---

Industry Color Palettes

Technology / SaaS

Primary:    #3182CE (Blue — trust, professionalism)
Secondary:  #805AD5 (Purple — innovation)
Accent:     #38B2AC (Teal — modern freshness)
Neutral:    #2D3748 → #EDF2F7 (Gray scale)

Examples: Stripe, Slack, Notion, Linear

Health & Wellness

Primary:    #38A169 (Green — health, vitality)
Secondary:  #4299E1 (Blue — calm, trust)
Accent:     #48BB78 (Light green — freshness)
Neutral:    #F7FAFC → #1A202C (Clean whites/darks)

Examples: Headspace, Calm, MyFitnessPal

Food & Recipe

Primary:    #E53E3E (Red — appetite, warmth)
Secondary:  #ED8936 (Orange — warmth, energy)
Accent:     #48BB78 (Green — freshness, ingredients)
Neutral:    #FFFAF0 → #2D3748 (Warm whites, dark text)
Background: #FFFDF7 (Warm off-white)

Examples: Allrecipes, Tasty, Epicurious

Luxury / Premium

Primary:    #1A202C (Black — sophistication)
Secondary:  #D4AF37 (Gold — premium, exclusivity)
Accent:     #FFFFFF (White — clean contrast)
Neutral:    #2D3748 → #F7FAFC (Dark-dominant palette)

Examples: Rolex, Louis Vuitton, Tesla

Finance

Primary:    #2B6CB0 (Dark blue — trust, stability)
Secondary:  #38A169 (Green — growth, profit)
Accent:     #E53E3E (Red — loss, alerts)
Neutral:    #1A202C → #EDF2F7

Examples: Robinhood, Stripe, PayPal

Education

Primary:    #4299E1 (Blue — knowledge, trust)
Secondary:  #ECC94B (Yellow — optimism, learning)
Accent:     #48BB78 (Green — progress, achievement)
Neutral:    #FFFFFF → #2D3748

Examples: Duolingo, Coursera, Khan Academy

---

Accessibility Considerations

WCAG Contrast Ratios

Common Problematic Combinations

Color Blindness Considerations

~8% of men and ~0.5% of women have some form of color vision deficiency.

• Never use color alone to convey information — pair with icons, labels, or patterns
• Deuteranopia (red-green): Most common. Avoid red/green only distinctions for status
• Protanopia (red weakness): Red appears dark/black. Ensure red elements have sufficient luminance contrast
• Tritanopia (blue-yellow): Rarest. Blue and yellow may look similar

Safe status palette:

Success:  #38A169 (Green) + ✓ checkmark icon
Warning:  #D69E2E (Amber) + ⚠ triangle icon
Error:    #E53E3E (Red)   + ✕ cross icon
Info:     #3182CE (Blue)  + ℹ info icon

---

Palette Generation Tools

Manual / Algorithmic

• HSL manipulation: Start with a base hue, shift hue ±30° for analogous, ±180° for complementary
• Lightness variants: Keep hue/saturation fixed, vary lightness (25%, 45%, 65%, 85%)
• Saturation variants: Keep hue/lightness fixed, vary saturation for muted vs vibrant

Online Tools

The 60-30-10 Rule

A simple distribution formula for balanced palette application:

60% — Dominant color (backgrounds, large surfaces)
30% — Secondary color (cards, sections, supporting elements)
10% — Accent color (CTAs, highlights, interactive elements)

Example for a recipe platform:

60% — #FFFDF7 (Warm white — page backgrounds)
30% — #FFF5EB (Warm cream — card backgrounds, sections)
10% — #E53E3E (Red — buttons, hearts, key CTAs)

---

Quick Reference: Color Selection Decision Tree

1. What emotion should the design evoke?
   → Map to primary color family (see associations above)

2. What industry/context?
   → Check industry palettes for conventions

3. Choose a harmony type
   → Complementary for energy, analogous for calm, triadic for vibrancy

4. Build the full palette
   → Primary + Secondary + Accent + Neutral scale (gray)

5. Test accessibility
   → Check all text/background combinations against WCAG AA (4.5:1)

6. Test for color blindness
   → Simulate deuteranopia, protanopia, tritanopia

7. Apply the 60-30-10 rule
   → Assign distribution percentages to each color

Design Principles Reference

Comprehensive reference for fundamental design principles applied to digital and canvas-based visual creation.

---

Gestalt Principles

The Gestalt principles describe how humans perceive visual elements as organized patterns and unified wholes rather than isolated parts.

Proximity

Elements placed close together are perceived as a group.

Application:

• Group related form fields (label + input + helper text) with tight spacing
• Separate distinct sections with generous margins
• Navigation items clustered by category signal relatedness

Canvas example:

✅ Grouped (perceived as related)     ❌ Even spacing (no grouping)

  [Icon] Title                         [Icon]
  Description text                     Title
  [Action Button]                      Description text
                                       [Action Button]
  [Icon] Title
  Description text
  [Action Button]

Practical values:

• Related elements: 4–8px gap
• Grouped sections: 24–48px gap
• Major page sections: 64–96px gap

---

Similarity

Elements sharing visual characteristics (color, shape, size, texture) are perceived as related.

Application:

• All primary actions share the same button style (color, border-radius, font weight)
• Card components across a grid use identical structure so users recognize them as a collection
• Tags/badges use a consistent pill shape with varied background colors to signal category

Canvas example:

Primary actions → all solid, rounded, brand-colored
Secondary actions → all outlined, same border-radius
Destructive actions → all solid, red-toned

Tip: Break similarity intentionally to draw attention. A single red card in a grid of white cards immediately becomes a focal point.

---

Closure

The mind fills in missing visual information to perceive a complete shape.

Application:

• Progress indicators (partially filled circles/bars) imply completion without drawing every state
• Icon design: simple outlines suggest objects without drawing every detail
• Cropped images at container edges imply content continues beyond the viewport

Canvas example:

[████████░░░░] 65% complete
     ↑
Users perceive a full bar with a "filled" portion —
closure completes the empty segment as "remaining."

---

Continuity

Elements arranged along a line or curve are perceived as more related than randomly placed elements.

Application:

• Horizontal timelines guide the eye left-to-right through sequential steps
• Curved paths in onboarding flows create a sense of journey
• Alignment along a grid column makes vertical lists feel connected

Canvas example:

Step 1 ──────── Step 2 ──────── Step 3 ──────── Step 4
  ●                ●                ●                ○

The connecting line guides the eye and implies order.

---

Figure/Ground

The brain separates visual fields into a foreground subject (figure) and background.

Application:

• Modal overlays use dimmed/blurred backgrounds to push content behind and elevate the dialog
• Cards with subtle shadows float above the page background
• Selected list items use a highlighted background to distinguish them from siblings

Canvas example:

┌──────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░  │  ← Background (dimmed)
│  ░░┌────────────────┐░░░░░  │
│  ░░│  Modal Content  │░░░░░  │  ← Figure (elevated)
│  ░░│  [Confirm] [X]  │░░░░░  │
│  ░░└────────────────┘░░░░░  │
│  ░░░░░░░░░░░░░░░░░░░░░░░░░  │
└──────────────────────────────┘

---

Visual Hierarchy

Visual hierarchy controls the order in which the eye processes information. It is achieved by manipulating size, weight, color, contrast, spacing, and position.

Size Scale

Larger elements are perceived as more important.

Weight & Emphasis

• Bold (600–700) for headings and labels
• Medium (500) for buttons and interactive text
• Regular (400) for body copy
• Light (300) used sparingly for large display text

Color as Hierarchy

• High-contrast text (near-black on white) for primary content
• Medium-contrast (gray-600) for secondary/supporting text
• Low-contrast (gray-400) for placeholders, disabled states, metadata

Position

• Top-left (in LTR layouts) is scanned first — place the most important element there
• F-pattern and Z-pattern scanning models guide content placement
• "Above the fold" content gets more attention

---

Balance & Symmetry

Symmetrical Balance

Equal visual weight distributed on both sides of a central axis. Creates stability, formality, and order.

Use for: Landing pages, centered hero sections, login forms, about pages.

        ┌──────────────────┐
        │   Brand Logo     │
        │                  │
        │  Headline Text   │
        │  Subheading      │
        │                  │
        │  [Get Started]   │
        └──────────────────┘

Asymmetrical Balance

Unequal elements balanced by visual weight (a large light element can counterbalance a small dark element).

Use for: Dashboards, magazine-style layouts, editorial content, creative portfolios.

┌───────────────┬─────────┐
│               │  Small  │
│  Large Image  │  Text   │
│               │  Block  │
│               │  +CTA   │
└───────────────┴─────────┘

Radial Balance

Elements radiate from a central point, drawing the eye inward.

Use for: Infographics, feature overviews arranged in a circle, dashboard widgets around a central metric.

---

Contrast

Contrast creates visual distinction and draws attention. It operates across multiple dimensions:

WCAG Contrast Requirements:

• Normal text (< 18px): minimum 4.5:1 ratio against background
• Large text (≥ 18px or 14px bold): minimum 3:1 ratio
• UI components and graphical objects: minimum 3:1 ratio

---

Repetition & Pattern

Repeating visual elements creates consistency, rhythm, and learnability.

Application:

• Consistent card structure across recipe listings (image → title → meta → action)
• Repeated icon style (outlined, 24px, 1.5px stroke) throughout the UI
• Uniform spacing rhythm (multiples of 4px or 8px)
• Same animation easing for all micro-interactions

Spacing rhythm example (8px base):

8px  → icon padding, inline gaps
16px → form field spacing, card padding
24px → section internal padding
32px → between card groups
48px → major section gaps
64px → page section dividers

---

Alignment

Alignment creates visual connections and order. Even when elements differ in size or type, alignment along shared edges or axes unifies them.

Types of Alignment

Rule: Every element on a canvas should be visually connected to at least one other element through alignment. If something looks "off," check alignment first.

---

Whitespace (Negative Space)

Whitespace is not empty — it is an active design element that provides breathing room, focus, and elegance.

Micro vs Macro Whitespace

• Micro whitespace: Space between letters (tracking), lines (leading), inline elements. Affects readability.
• Macro whitespace: Space between sections, around page content, margins. Affects layout and emphasis.

Whitespace Guidelines

Principle: When in doubt, add more whitespace. Cramped layouts feel amateur; generous spacing feels premium.

---

Typography Pairing Rules

The Core Rules

1. Limit to 2 typefaces — one for headings, one for body. Three is the absolute maximum. 2. Contrast in structure, harmony in quality — pair a serif with a sans-serif, or a geometric sans with a humanist sans. 3. Match x-heights — typefaces with similar x-heights feel cohesive at the same size. 4. Avoid pairing fonts from the same classification — two geometric sans-serifs compete rather than complement.

Proven Pairings

Type Scale

Use a modular scale for consistent sizing. Common ratios:

---

The Golden Ratio (φ ≈ 1.618)

The golden ratio appears throughout nature and has been used in art and architecture for centuries. In digital design, it provides a mathematically pleasing proportion.

Applications

Layout proportions:

Total width: 960px
├── Content area: 593px  (960 / 1.618)
└── Sidebar: 367px       (960 - 593)

Typography scale:

Body: 16px
H3:  16 × 1.618 ≈ 26px
H2:  26 × 1.618 ≈ 42px
H1:  42 × 1.618 ≈ 68px

Spacing:

Base unit: 8px
Next: 8 × 1.618 ≈ 13px
Next: 13 × 1.618 ≈ 21px
Next: 21 × 1.618 ≈ 34px
Next: 34 × 1.618 ≈ 55px

Golden rectangle in image composition: Divide a rectangle into a square and a smaller rectangle — the smaller rectangle has the same aspect ratio as the whole. Use the spiral to guide focal point placement.

---

Grid Systems

Grids provide structure, consistency, and alignment across layouts.

12-Column Grid

The most common grid for web design. 12 divides evenly by 1, 2, 3, 4, 6, and 12, enabling flexible layouts.

|  1 |  2 |  3 |  4 |  5 |  6 |  7 |  8 |  9 | 10 | 11 | 12 |

Full width:      ├──────────────────────────────────────────────┤
Two halves:      ├─────────────────────┤├─────────────────────┤
Thirds:          ├──────────────┤├──────────────┤├──────────────┤
Sidebar + Main:  ├──────┤├──────────────────────────────────────┤
                  (3 col)              (9 col)

Grid Terminology

Responsive Breakpoints

8px Grid (Spatial Grid)

All dimensions and spacing snap to multiples of 8px. This creates a consistent rhythm and simplifies responsive math.

Padding: 8, 16, 24, 32, 40, 48 ...
Heights: 32 (small), 40 (medium), 48 (large)
Icon size: 16, 24, 32
Border radius: 4, 8, 12, 16

Why 8px: Scales cleanly across screen densities (1x, 1.5x, 2x, 3x) without sub-pixel rendering issues.

---

Quick Reference: Principle Checklist

Use this checklist when reviewing any canvas or digital design:

• [ ] Proximity — Are related items grouped? Are unrelated items separated?
• [ ] Similarity — Do similar elements share visual treatment?
• [ ] Closure — Can shapes or patterns be simplified while still being understood?
• [ ] Continuity — Do elements guide the eye along intentional paths?
• [ ] Figure/Ground — Is the focal element clearly distinguished from the background?
• [ ] Hierarchy — Can a viewer identify the #1, #2, #3 most important elements within 3 seconds?
• [ ] Balance — Does the layout feel stable (symmetrical or intentionally asymmetrical)?
• [ ] Contrast — Is there sufficient contrast for readability and emphasis?
• [ ] Repetition — Are patterns and components used consistently?
• [ ] Alignment — Is every element visually anchored to at least one other?
• [ ] Whitespace — Is there enough breathing room? Does the layout feel spacious, not cramped?
• [ ] Typography — Are fonts limited to 2–3? Is the type scale consistent?
• [ ] Grid — Are elements placed on a consistent grid or spatial system?