Smithery is now a part of Arcade.dev! Read more in our announcement here
Frameworks for analyzing visual inspiration and translating it into actionable design specifications...
Good design briefs turn subjective preferences into objective specifications. This skill provides frameworks for systematically analyzing inspiration and producing implementation-ready design systems.
Don't look at reference sites and say "I like it." Instead, dissect them layer by layer.
INSPIRATION ANALYSIS LAYERS
┌─────────────────────────────────────────────────────────────┐
│ LAYER 1: TYPOGRAPHY │
│ What fonts? What sizes? What weights? What spacing? │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ LAYER 2: COLOR │
│ What palette? Warm or cool? Saturated or muted? Contrast? │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ LAYER 3: LAYOUT │
│ Grid structure? White space? Density? Alignment? │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ LAYER 4: IMAGERY │
│ Photo style? Illustrations? Graphics? Treatment? │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ LAYER 5: DETAILS │
│ Corners? Shadows? Borders? Icons? Micro-interactions? │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ LAYER 6: FEELING │
│ Energy level? Personality? Era? What emotion does it evoke? │
└─────────────────────────────────────────────────────────────┘
## Reference: [URL]
### Client Said
"[Their exact words about why they like it]"
### Typography Analysis
- **Heading typeface:** [Serif/Sans-serif/Slab] - [Style: geometric, humanist, etc.]
- **Body typeface:** [Same/Different]
- **Size contrast:** [Extreme/Moderate/Subtle] between headings and body
- **Weight usage:** [Light/Regular/Bold predominant]
- **Case:** [Sentence/Title/UPPERCASE for headings]
- **Letter-spacing:** [Tight/Normal/Wide]
### Color Analysis
- **Dominant color:** [Hex estimate or description]
- **Accent color:** [If present]
- **Background:** [White/Off-white/Colored/Dark]
- **Temperature:** [Warm/Neutral/Cool]
- **Saturation:** [Muted/Moderate/Vibrant]
- **Overall contrast:** [High/Medium/Low]
### Layout Analysis
- **Grid:** [Visible structure/Organic/Mixed]
- **White space:** [Minimal/Moderate/Generous]
- **Density:** [Content-heavy/Balanced/Sparse]
- **Alignment:** [Strict/Relaxed]
- **Section rhythm:** [Consistent/Varied heights]
### Imagery Analysis
- **Photography style:** [Editorial/Lifestyle/Product/Abstract]
- **Treatment:** [Natural/Filtered/Duotone/B&W]
- **Illustrations:** [Present/Absent] - [Style if present]
- **Graphics/shapes:** [Geometric/Organic/None]
### Detail Analysis
- **Border radius:** [Sharp/Slight/Rounded/Pill]
- **Shadows:** [None/Subtle/Pronounced]
- **Borders:** [Used/Not used]
- **Icons:** [Style if present]
- **Animation:** [None/Subtle/Prominent]
### Emotional Analysis
- **Energy:** [Calm — — — — Dynamic] (1-5)
- **Personality:** [Serious — — — — Playful] (1-5)
- **Sophistication:** [Accessible — — — — Premium] (1-5)
### Key Takeaways
- **Adopt:** [What to bring into our design]
- **Adapt:** [What to modify for our context]
- **Avoid:** [What doesn't fit our brand]
After analyzing multiple references:
## Pattern Synthesis
### Consistent Patterns (High Confidence)
Elements appearing in 3+ references = likely core to what client wants
- [Pattern 1]
- [Pattern 2]
- [Pattern 3]
### Variable Patterns (Needs Decision)
Elements that differ across references
- [Element]: Reference A does [X], Reference B does [Y]
→ Recommendation: [Pick one with rationale]
### Contradictions (Needs Client Input)
When client preferences conflict with each other
- [Contradiction]
→ Question for client: [Specific question]
### Client Explicit Preferences
- Likes: [What they explicitly said they want]
- Dislikes: [What they explicitly said to avoid]
TYPE CLASSIFICATIONS
SERIF (Traditional, trustworthy, editorial)
├── Old Style (Garamond, Caslon) - Classic, bookish
├── Transitional (Times, Baskerville) - Balanced, professional
├── Modern (Bodoni, Didot) - High contrast, fashion/luxury
└── Slab (Rockwell, Clarendon) - Strong, confident
SANS-SERIF (Modern, clean, digital-native)
├── Grotesque (Helvetica, Arial) - Neutral, corporate
├── Neo-Grotesque (Inter, SF Pro) - Clean, contemporary
├── Geometric (Futura, Poppins) - Modern, friendly
└── Humanist (Gill Sans, Open Sans) - Warm, readable
DISPLAY (Headlines only, personality)
├── Script - Elegant, personal
├── Decorative - Unique, brand-specific
└── Monospace - Technical, code-like
VOICE-TO-TYPE MATRIX
Voice Attribute Serif Choice Sans Choice
─────────────────────────────────────────────────────────────
Formal (8-10) Modern serif (Bodoni) Grotesque (Helvetica)
Friendly (1-3) Old Style (Caslon) Geometric (Poppins)
Premium (8-10) Modern serif Geometric (Futura)
Approachable (1-3) Slab serif Humanist (Open Sans)
Technical (8-10) None (use sans) Grotesque or Mono
Creative (high) Display/Script accent Geometric with display
Traditional Transitional Avoid or minimal
Contemporary Avoid or accent only Neo-Grotesque (Inter)
MODULAR SCALES
Base: 16px (1rem) - industry standard body size
Scale Ratio Options:
- 1.125 (Major Second) - Subtle, dense designs
- 1.200 (Minor Third) - Most common, balanced
- 1.250 (Major Third) - Clear hierarchy
- 1.333 (Perfect Fourth) - Strong hierarchy
- 1.500 (Perfect Fifth) - Very dramatic
Example with 1.250 (Major Third), base 16px:
- Display: 49px (3.052rem)
- H1: 39px (2.441rem)
- H2: 31px (1.953rem)
- H3: 25px (1.563rem)
- H4: 20px (1.25rem)
- Body: 16px (1rem)
- Small: 13px (0.8rem)
- Caption: 10px (0.64rem)
LINE HEIGHT BY USE CASE
Headlines (Display, H1-H2):
- Tight: 1.1 - 1.2
- Works for: Short headlines, display text
- Avoid for: Multi-line headings
Subheadings (H3-H4):
- Medium: 1.2 - 1.3
- Works for: Section headings
Body Text:
- Comfortable: 1.5 - 1.7
- 1.5 = More compact
- 1.6 = Standard
- 1.7 = Airy, premium feel
Small Text / Captions:
- Slightly tighter: 1.4 - 1.5
LETTER SPACING (Tracking)
Headlines:
- Normal to tight: 0 to -0.02em
- Uppercase: Always add +0.05em to +0.1em
Body Text:
- Usually 0 (normal)
- Never negative
Small Text:
- Slightly positive: +0.01em to +0.02em
- Improves readability at small sizes
Uppercase Text:
- Always add spacing: +0.05em minimum
- Prevents letters from crowding
COLOR PSYCHOLOGY FOR BRANDS
Blue
- Trust, professionalism, calm, corporate
- Use for: Finance, tech, healthcare, B2B
- Avoid when: Want to stand out, warmth needed
Green
- Nature, health, growth, sustainability
- Use for: Wellness, eco, finance (growth)
- Avoid when: Appetite appeal needed
Red
- Energy, urgency, passion, appetite
- Use for: Food, sales, entertainment
- Avoid when: Calm/trust needed
Orange
- Friendly, energetic, affordable, creative
- Use for: Calls to action, youth brands
- Avoid when: Premium positioning
Yellow
- Optimism, warmth, caution, attention
- Use for: Highlights, warning states
- Avoid as: Primary (hard to read)
Purple
- Luxury, creativity, spirituality
- Use for: Premium, creative, wellness
- Avoid when: Mass market appeal needed
Pink
- Feminine, playful, modern, care
- Use for: Beauty, youth, healthcare
- Stereotyped: Use intentionally
Black
- Sophistication, luxury, power, elegance
- Use for: Fashion, luxury, minimalist
- Caution: Can feel cold/heavy
White/Off-white
- Clean, pure, minimal, space
- Use for: Backgrounds, breathing room
- Pure white (#fff) = Clinical
- Off-white = Warmer, natural
COLOR PALETTE STRUCTURE
CORE COLORS (3 max for brand recognition)
├── Primary: Main brand color, CTAs, key actions
├── Secondary: Supporting, alternative actions
└── Accent: Highlights, special moments (use sparingly)
NEUTRALS (Essential for UI)
├── Background: Page background (usually white/off-white)
├── Surface: Cards, elevated elements
├── Border: Dividers, subtle separation
├── Text Primary: Main body text (not pure black—use #1a1a1a)
├── Text Secondary: Supporting text, labels
└── Text Muted: Disabled, placeholder
SEMANTIC (For states and feedback)
├── Success: Positive actions, confirmation (green family)
├── Warning: Caution states (yellow/orange family)
├── Error: Errors, destructive actions (red family)
└── Info: Informational messages (blue family)
WCAG CONTRAST REQUIREMENTS
AA Standard (Minimum):
- Regular text: 4.5:1 contrast ratio
- Large text (18px+ or 14px bold): 3:1
- UI components: 3:1
AAA Standard (Enhanced):
- Regular text: 7:1
- Large text: 4.5:1
COMMON ACCESSIBLE COMBINATIONS
On White Background (#FFFFFF):
- Black text (#000000): 21:1 ✓
- Dark gray (#1a1a1a): 16.1:1 ✓
- Medium gray (#666666): 5.7:1 ✓
- Light gray (#999999): 2.8:1 ✗ (fails for small text)
Blue on White:
- Navy (#1e3a5f): 10.5:1 ✓
- Medium blue (#2563eb): 4.6:1 ✓
- Light blue (#60a5fa): 2.4:1 ✗
CHECK YOUR COLORS: Use https://webaim.org/resources/contrastchecker/
WARM vs COOL PALETTES
WARM (Inviting, friendly, energetic)
- Reds, oranges, yellows
- Warm grays (beige, taupe)
- Off-white backgrounds
- Use for: Hospitality, food, lifestyle, approachable brands
COOL (Professional, calm, trustworthy)
- Blues, greens, purples
- Cool grays (slate, charcoal)
- Pure white or blue-tinted backgrounds
- Use for: Corporate, tech, healthcare, finance
NEUTRAL (Versatile, sophisticated)
- True grays
- Black and white
- Use for: Luxury, minimalist, editorial
MIXING TEMPERATURES
- Warm primary + cool neutral = Balanced, approachable
- Cool primary + warm accent = Professional with energy
- All warm = Can feel unsophisticated
- All cool = Can feel cold/distant
WHY 8PX BASE?
- Divisible by 2 (half-step: 4px)
- Divisible by 4 (quarter-step)
- Scales cleanly across screen sizes
- Matches common device pixels
- Standard in design systems (Material, Apple)
SPACING SCALE (8px base)
Token Value Use For
────────────────────────────────────
4xs 4px Tight gaps, inline spacing
3xs 8px Icon-to-text, tight padding
2xs 12px Small component padding
xs 16px Default component padding
sm 24px Between related items
md 32px Between distinct elements
lg 48px Section padding (mobile)
xl 64px Section padding (desktop)
2xl 96px Major section breaks
3xl 128px Hero/footer spacing
4xl 192px Maximum breathing room
SPACING HIERARCHY
Within Components (Tight)
- Icon to label: 8px
- Input padding: 12-16px
- Button padding: 12px vertical, 24px horizontal
Between Related Items (Medium)
- Stack of form fields: 16-24px
- List items: 16px
- Paragraph spacing: 1.5em
Between Components (Generous)
- Card to card: 24-32px
- Form to CTA: 32px
Between Sections (Very Generous)
- Mobile: 48-64px
- Desktop: 64-96px
Page Margins
- Mobile: 16-24px
- Tablet: 32-48px
- Desktop: 64px+ or percentage
12-COLUMN GRID (Standard)
Why 12?
- Divisible by 2, 3, 4, 6
- Flexible layouts: 50/50, 33/33/33, 25/25/25/25
- Industry standard, familiar to developers
COMMON COLUMN CONFIGURATIONS
Full width: 12 columns
Two equal: 6 + 6
Two unequal: 4 + 8, 3 + 9
Three equal: 4 + 4 + 4
Three unequal: 2 + 8 + 2 (centered content)
Four equal: 3 + 3 + 3 + 3
Sidebar + Content: 3 + 9 or 4 + 8
RESPONSIVE BREAKPOINTS (Common)
- Mobile: 0-639px (full width, stacked)
- Tablet: 640-1023px (2-column possible)
- Desktop: 1024-1279px (full grid)
- Large: 1280px+ (max-width container)
MAX-WIDTH OPTIONS
- 1200px: Comfortable, common
- 1280px: Slightly wider
- 1440px: Very wide, modern displays
- Percentage (90%): Fluid, needs max-width cap
COMPONENT TAXONOMY
NAVIGATION
- Header / Navbar
- Footer
- Sidebar navigation
- Breadcrumbs
- Pagination
- Tabs
- Mobile menu
CONTENT DISPLAY
- Hero sections
- Feature blocks
- Card layouts
- Lists
- Tables
- Accordions
- Timelines
SOCIAL PROOF
- Testimonials
- Reviews
- Logo bars
- Case study cards
- Stats/numbers
MEDIA
- Image galleries
- Video embeds
- Sliders/carousels
- Lightboxes
- Before/after
FORMS & INPUT
- Text inputs
- Selects
- Checkboxes/radios
- File uploads
- Search
- Multi-step forms
ACTIONS
- Buttons (primary, secondary, tertiary)
- Links
- CTAs (banner, sticky, popup)
FEEDBACK
- Alerts/notifications
- Toast messages
- Progress indicators
- Loading states
- Empty states
- Error states
OVERLAYS
- Modals
- Drawers
- Tooltips
- Popovers
- Dropdowns
## Component: [Name]
### Purpose
What problem does this solve? When is it used?
### Visual Specification
**Layout**
- Structure: [How elements are arranged]
- Alignment: [Left/Center/Right]
- Responsive: [How it changes on mobile]
**Typography**
- Heading: [Size/Weight/Font]
- Body: [Size/Weight/Font]
- Meta: [Size/Weight/Font]
**Colors**
- Background: [Token or hex]
- Text: [Token or hex]
- Border: [Token or hex]
- Hover state: [Changes]
**Spacing**
- Internal padding: [Value]
- Between elements: [Value]
- External margin: [Value]
**Details**
- Border radius: [Value]
- Shadow: [Value]
- Border: [Value]
### Content Slots
| Slot | Type | Required | Max Length | Notes |
|------|------|----------|------------|-------|
| [Name] | [text/image/etc] | [Y/N] | [chars/dimensions] | [guidance] |
### States
- Default: [Description]
- Hover: [Changes]
- Active/Pressed: [Changes]
- Focus: [Outline/ring]
- Disabled: [Appearance]
- Loading: [Behavior]
- Error: [Appearance]
### Accessibility
- Focus visible: [Yes + how]
- Keyboard navigable: [Yes + how]
- Screen reader: [Aria labels needed]
- Color contrast: [Verified]
### Usage Guidelines
- Do: [Best practices]
- Don't: [Anti-patterns]
### Code Notes
- [Implementation hints for developers]
COMPREHENSIVE VOICE-TO-VISUAL TRANSLATION
┌─────────────────────────────────────────────────────────────┐
│ FORMALITY (Voice: 1-10) │
├─────────────────────────────────────────────────────────────┤
│ Low (1-3): Casual, conversational │
│ → Sans-serif, especially geometric (Poppins, Nunito) │
│ → Rounded corners │
│ → Warmer colors │
│ → Relaxed spacing │
│ → Casual photography (candid, lifestyle) │
│ │
│ High (8-10): Professional, authoritative │
│ → Serif or clean sans (Times, Helvetica) │
│ → Sharp or subtle corners │
│ → Cooler, muted colors │
│ → Precise alignment │
│ → Professional photography (polished, composed) │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ ENTHUSIASM (Voice: 1-10) │
├─────────────────────────────────────────────────────────────┤
│ Low (1-3): Calm, measured │
│ → Subtle color palette (muted, monochromatic) │
│ → Consistent, predictable layouts │
│ → Minimal animation │
│ → Even rhythm between sections │
│ │
│ High (8-10): Energetic, exciting │
│ → Vibrant, saturated colors │
│ → Dynamic layouts (asymmetry, varied sections) │
│ → Motion and animation │
│ → Bold size contrasts │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ WARMTH (Voice: 1-10) │
├─────────────────────────────────────────────────────────────┤
│ Low (1-3): Professional, objective │
│ → Cool color temperature (blues, grays) │
│ → Pure white backgrounds │
│ → Minimal imagery or abstract │
│ → Geometric shapes │
│ │
│ High (8-10): Friendly, personal │
│ → Warm color temperature (yellows, oranges, warm neutrals) │
│ → Off-white or cream backgrounds │
│ → People in photography (faces, lifestyle) │
│ → Organic shapes, rounded elements │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ DIRECTNESS (Voice: 1-10) │
├─────────────────────────────────────────────────────────────┤
│ Low (1-3): Subtle, nuanced │
│ → Softer CTAs (outline buttons, text links) │
│ → Gradual information reveal │
│ → Subtle hover states │
│ │
│ High (8-10): Bold, clear │
│ → Strong CTAs (high contrast buttons) │
│ → Prominent value propositions │
│ → Clear visual hierarchy │
│ → Obvious interactive elements │
└─────────────────────────────────────────────────────────────┘
┌─────────────────────────────────────────────────────────────┐
│ TECHNICAL COMPLEXITY (Voice: 1-10) │
├─────────────────────────────────────────────────────────────┤
│ Low (1-3): Simple, accessible │
│ → Large, simple typography │
│ → Generous white space │
│ → Minimal data/charts │
│ → Icon-based communication │
│ │
│ High (8-10): Detailed, sophisticated │
│ → Denser information layouts │
│ → Data visualization comfort │
│ → Smaller supporting text sizes │
│ → Technical imagery acceptable │
└─────────────────────────────────────────────────────────────┘
MARKET POSITIONING → VISUAL EXPRESSION
Premium/Luxury
- Generous white space (xl+ between sections)
- High-quality photography
- Restrained color (1-2 colors max)
- Elegant typography (serifs or refined sans)
- Subtle details (thin borders, soft shadows)
- Animation: Slow, refined
Accessible/Affordable
- Efficient use of space
- Friendly, approachable photography
- More color variety acceptable
- Rounded, friendly typography
- Bolder, more obvious UI elements
- Animation: Quick, functional
Innovative/Disruptive
- Unexpected layouts (break the grid)
- Bold color choices
- Contemporary typography
- Unique visual elements
- Animation: Prominent, delightful
Trustworthy/Established
- Classic, proven layouts
- Muted, professional colors
- Traditional typography
- Predictable patterns
- Animation: Minimal, functional
Playful/Fun
- Asymmetric, dynamic layouts
- Bright, saturated colors
- Rounded, bouncy typography
- Illustrations, graphics
- Animation: Bouncy, playful
For additional frameworks and examples, see:
references/typography-pairings.md - Proven font combinationsreferences/color-palette-examples.md - Real-world palette analysisreferences/component-patterns.md - Common component implementations