Web Design Director

Visual design direction framework organized by emotional intent (Warm/Cold x Active/Calm). The first design reference system that categorizes sites by what they make you FEEL, not how they look. Includes 48 annotated public website references.

When to Use This Skill

• Starting a new website project and deciding the visual direction before coding
• A client says "I want it to feel professional but warm" and you need to translate that into concrete design decisions
• You have a brand positioning (Dunford, StoryBrand) and need to map it to visual language
• Choosing between design approaches (dark mode vs light, minimal vs rich, editorial vs product)
• Building a mood board from references that match the brand's emotional territory
• When AI-generated designs come back looking "template-y" because they lack intentional direction

Methodology Foundation

Sources:

• Emotional Design (Don Norman, 2004) — visceral, behavioral, reflective processing
• Brand positioning theory (April Dunford, "Obviously Awesome") — competitive alternatives define visual territory
• Color psychology research — warm/cool spectrum and behavioral response
• Web design pattern analysis — 48 public sites analyzed across 4 emotional quadrants
• Gap analysis of 12 design inspiration platforms (Awwwards, Dribbble, Godly, Mobbin, etc.)

Core Insight: Every existing design inspiration platform (Awwwards, Dribbble, Behance, Godly, Mobbin, SiteInspire, Lapa.ninja) categorizes by visual style, industry, platform, or color. ZERO platforms organize by emotional intent. This is the gap. A "minimal dark site" can feel luxurious (Cartier) or threatening (CrowdStrike) — the visual style is the same, the emotional effect is opposite. Style without intent is decoration. Intent without style is a wireframe.

The Emotional Quadrant:

              WARM
         (approach, trust)
               |
    Warm+Active | Warm+Calm
    (energy,    | (comfort,
     delight)   |  safety)
               |
ACTIVE --------+-------- CALM
(momentum,     |    (restraint,
 disruption)   |     authority)
               |
    Cold+Active | Cold+Calm
    (innovation,| (luxury,
     power)     |  exclusivity)
               |
              COLD
         (distance, precision)

Why This Matters: Brand positioning determines which quadrant you design in. A child psychologist belongs in Warm+Calm. A developer tool belongs in Cold+Active. Designing a child psychologist's site with Vercel's aesthetic is a positioning mismatch — no matter how "clean" it looks.

---

What Claude Does vs What You Decide

"Claude selects the references and patterns. You validate the emotional fit."

Claude handles	You provide
Mapping brand positioning to emotional quadrant	Brand values, target audience, competitive alternatives
Selecting relevant references from the library	Gut-check: does this reference FEEL like my brand?
Extracting design patterns (typography, spacing, color, motion)	Budget and technical constraints
Generating a design direction document with rationale	Final approval on direction before coding begins
Flagging positioning mismatches (warm brand + cold design)	Client context Claude can't see

Remember: The reference library is a starting point for conversation, not a prescription. The best design direction often comes from combining elements across quadrants — a Warm+Calm palette with Cold+Active typography, for example.

---

What This Skill Does

1. Emotional Positioning — Maps brand positioning to the correct emotional quadrant
2. Reference Selection — Surfaces 3-5 annotated public websites that match the target feeling
3. Pattern Extraction — Identifies the specific design mechanics that create each emotional effect
4. Direction Document — Generates a design brief with palette, typography, spacing, motion, and layout decisions
5. Mismatch Detection — Flags when design choices contradict brand positioning
6. Cross-Quadrant Blending — Guides intentional mixing of elements from different quadrants

How to Use

Get design direction for a new website

I'm designing a website for [brand/business type].
Target audience: [who].
Brand feeling: [2-3 emotional words].
Competitive alternatives: [what they'd use instead of this brand].
Load the web-design-director skill.

Find references for a specific feeling

I need website references that feel [emotional description].
Not [what to avoid]. The brand is in [industry].
Show me 5 annotated references from the library.

Audit an existing design against brand positioning

Here's our current site: [URL or screenshot].
Our brand positioning is: [positioning statement].
Does the design match the emotional intent? What's misaligned?

---

Instructions

Step 1: Determine the Emotional Quadrant

Ask these questions to place the brand:

## Brand Emotional Mapping

**1. What should a visitor feel in the first 3 seconds?**
   [ ] Safe, welcomed, at ease (→ Warm)
   [ ] Impressed, curious, intrigued (→ Cold)

**2. What should the site's energy level be?**
   [ ] Dynamic, forward-moving, "things are happening" (→ Active)
   [ ] Restrained, spacious, "take your time" (→ Calm)

**3. What's the brand's relationship with the visitor?**
   [ ] Peer/friend/guide (→ Warm)
   [ ] Expert/authority/institution (→ Cold)

**4. Competitive alternatives — what would people use instead?**
   (This determines your visual territory — you must look DIFFERENT from alternatives)

Quadrant determination:

Combination	Quadrant	Signature feeling
Warm + Active	Energetic Warmth	"This is exciting AND friendly"
Warm + Calm	Nurturing Comfort	"I feel safe and understood here"
Cold + Active	Innovative Power	"This is cutting-edge and serious"
Cold + Calm	Refined Authority	"This is elevated and exclusive"

---

Step 2: Select References from the Library

Choose 3-5 references from the matching quadrant. For each, note:

• What specific design mechanic creates the emotional effect
• Which section/page demonstrates it best
• What to borrow vs what to leave behind

Cross-quadrant blending rules:

• Borrow ONE element from an adjacent quadrant for contrast (e.g., Cold+Active typography on Warm+Calm palette)
• NEVER borrow from the opposite quadrant (Cold+Calm elements on a Warm+Active site = confusion)
• Adjacent quadrants share one axis: Warm+Calm and Warm+Active share warmth; Cold+Calm and Cold+Active share precision

---

Step 3: Extract Design Decisions

For each design dimension, reference the library to make a specific choice:

## Design Direction Document

**Quadrant**: [Warm+Calm / Warm+Active / Cold+Active / Cold+Calm]
**Primary references**: [3 sites from library]
**Cross-quadrant accent**: [1 element from adjacent quadrant, if any]

### Color Palette
- **Background**: [specific color + reference site that uses it]
- **Primary accent**: [specific color + emotional rationale]
- **Text**: [dark/light + contrast ratio reasoning]
- **System**: [monochromatic / complementary / analogous]

### Typography
- **Headings**: [serif/sans/display + weight + specific font suggestion]
- **Body**: [font + size + line-height + rationale from reference]
- **Personality**: [what the type says about the brand]

### Spacing & Layout
- **Density**: [generous/moderate/compact + reference]
- **Grid**: [columns + max-width + rationale]
- **White space**: [aggressive/balanced/minimal]
- **Section rhythm**: [alternating/consistent/progressive]

### Motion & Interaction
- **Animation style**: [subtle/expressive/none + reference]
- **Scroll behavior**: [smooth/standard/parallax]
- **Hover states**: [transform type + timing]
- **Page transitions**: [type or none]

### Photography & Imagery
- **Style**: [photography/illustration/abstract/mixed]
- **Emotional direction**: [reference to minimalist-image-director quadrant]
- **Treatment**: [full-color/muted/duotone/grain]

### Layout Pattern
- **Hero**: [full-bleed/contained/split/text-only]
- **Cards**: [bordered/borderless/elevated/flat]
- **Navigation**: [top/side/minimal/hidden]

---

Step 4: Validate Against Positioning

Before finalizing, run the mismatch check:

## Positioning Mismatch Check

- [ ] Does the color temperature match the brand warmth? (warm brand = warm colors)
- [ ] Does the animation level match the brand energy? (calm brand ≠ aggressive animations)
- [ ] Does the typography match the brand authority level? (playful brand ≠ all-caps sans-serif)
- [ ] Would a visitor from the target audience feel welcomed or intimidated?
- [ ] Does this look DIFFERENT from the competitive alternatives?
- [ ] Would this design work for the brand's WORST day? (not just launch day)

---

Reference Library — 48 Annotated Public Websites

WARM + CALM — Nurturing Comfort

"I feel safe and understood here"

Sites in this quadrant use: warm color palettes, generous spacing, soft imagery, approachable typography, gentle transitions. They prioritize readability and emotional comfort over visual impact.

#	Site	Industry	Key Design Mechanic	Best Page to Study	Anti-Pattern Warning
1	Headspace	Wellness/Meditation	Rounded shapes + warm illustration + pastel palette. Feels like a gentle hug.	Homepage hero + onboarding flow	Illustrations can tip into childish if not carefully balanced
2	Allbirds	Sustainable Fashion	Earth tone photography + natural textures + clean grid. Product-first but warm.	Product detail pages	Can feel too "eco-corporate" without personality
3	Wildling Shoes	Children's Footwear	Nature photography + warm neutrals + organic flow. Feels like a forest walk.	Homepage scroll narrative	Easy to lose product focus in the nature imagery
4	Kinfolk	Lifestyle Editorial	Typography-led + generous whitespace + warm photography. Quiet confidence.	Article layouts	Can feel too sparse if content is thin
5	Cereal Magazine	Travel/Design	Muted warm palette + editorial grid + contemplative imagery. Slow-paced.	Travel guides	Low contrast can hurt readability
6	Aesop	Beauty/Skincare	Warm-toned product photography + serif typography + restrained layout. Sophisticated warmth.	Store locator + product pages	Walks the line between Warm+Calm and Cold+Calm
7	Everlane	Ethical Fashion	Clean layout + warm lifestyle photography + transparent pricing. Honest warmth.	"About" page + factory stories	Transparency messaging can feel preachy if overdone
8	Patagonia	Outdoor/Purpose	Bold warm photography + purpose-driven content + editorial depth. Activist warmth.	Environmental stories	Activism-forward design may alienate non-activist audiences
9	Nurture Life	Children's Meals	Soft pastels + rounded UI + warm food photography. Parent-friendly.	Meal plan page	Pastel overuse can feel generic "baby brand"
10	Organic Basics	Sustainable Essentials	Neutral tones + breathing space + minimal navigation. Calm commerce.	Product category pages	Too minimal can feel like "nothing to see here"
11	Ritual	Wellness/Supplements	Warm yellow accent + clean layout + scientific warmth. Trust through transparency.	Ingredient traceability page	Yellow accent can feel clinical if overdone
12	Mejuri	Accessible Jewelry	Warm lifestyle photography + soft gold accents + clean e-commerce grid. Approachable luxury.	Collection pages	Balancing luxury feel with accessible pricing

Cross-quadrant pattern: All Warm+Calm sites share generous line-height (1.6-1.8), muted/earthy palettes, and photography featuring real humans in natural environments. Navigation is always simple. Animations are always subtle.

---

WARM + ACTIVE — Energetic Warmth

"This is exciting AND friendly"

Sites in this quadrant use: bold colors, dynamic animations, playful illustrations, energetic typography, interactive elements. They feel like an enthusiastic friend showing you something amazing.

#	Site	Industry	Key Design Mechanic	Best Page to Study	Anti-Pattern Warning
1	Notion	Productivity	Warm illustrations + clean product UI + friendly micro-interactions. Organized enthusiasm.	Templates gallery + homepage	Illustration style is heavily copied — find your own
2	Figma	Design Tool	Vibrant gradients + collaborative energy + bold type. Design-forward without being cold.	Community/plugins page	Gradient-heavy design ages fast
3	Mailchimp	Email Marketing	Distinctive illustration + warm brand yellow + playful UI. Personality-driven.	Homepage + pricing page	Quirky illustration style requires strong brand commitment
4	Loom	Video Communication	Warm purple + approachable UI + product-led animations. Tech that doesn't feel techy.	Product demo sections	Purple warmth can feel corporate if oversaturated
5	Intercom	Customer Comms	Bold colors + conversational copy + dynamic layout. Friendly authority.	Product tour pages	Bold palette can overwhelm without whitespace discipline
6	Monday.com	Work Management	Vibrant multi-color + energetic animations + bold grid. High energy, high clarity.	Homepage product demo	Color explosion needs strict hierarchy or it's chaos
7	Miro	Collaboration	Warm yellow + collaborative imagery + dynamic canvas previews. Creative energy.	Use case pages	Collaboration-focused imagery can feel generic
8	Webflow	Web Builder	Bold typography + empowering copy + creative showcases. Builder energy.	Showcase gallery + homepage	"Empowerment" messaging is crowded territory
9	Framer	Design/Publish	Design-forward + bold motion + dark-warm hybrid. Creative tool confidence.	Templates + homepage	Motion-heavy design can slow page loads
10	Shopify	E-commerce Platform	Warm green + entrepreneurial energy + success stories. Optimistic commerce.	Success stories + homepage	Entrepreneurial energy can feel "hustle culture"
11	Asana	Project Management	Warm coral/gradient + clean product UI + purposeful animation. Organized delight.	Product features page	Gradient overuse dates quickly
12	Canva	Design Platform	Vibrant purple + accessible design + template showcases. Creative democratization.	Template gallery	Accessibility focus can lower perceived quality

Cross-quadrant pattern: All Warm+Active sites use bold primary colors (not pastels), dynamic scroll animations, product-in-action demonstrations, and copy that speaks directly to the user ("you"). Typography is sans-serif, medium-to-heavy weight. Illustrations are distinctive, not generic.

---

COLD + CALM — Refined Authority

"This is elevated and exclusive"

Sites in this quadrant use: restrained palettes (black/white/grey + one accent), generous negative space, serif or refined sans-serif typography, minimal animation, large-scale imagery. They communicate through what they DON'T show.

#	Site	Industry	Key Design Mechanic	Best Page to Study	Anti-Pattern Warning
1	Cartier	Luxury Jewelry	Gold + black + cinematic photography + restrained interaction. Pure luxury.	High jewelry collections	Luxury codes translate poorly to non-luxury brands
2	Givenchy	High Fashion	All-black + full-bleed photography + minimal type. Fashion authority.	Campaign pages	Dark + minimal = intimidating for mass-market brands
3	Monocle	Global Editorial	Clean editorial grid + restrained palette + typographic hierarchy. Intellectual confidence.	Magazine features	Editorial density requires deep content to justify
4	Herzog & de Meuron	Architecture	Pure white + project photography + minimal navigation. Architecture as interface.	Project pages	Ultra-minimal navigation frustrates casual visitors
5	White Cube	Gallery	Gallery-white + art-first + invisible UI. The content IS the design.	Exhibition pages	Works only when content is visually stunning
6	Eleven Madison Park	Fine Dining	Dark + restrained + cinematic food photography. Culinary theater.	Menu/experience pages	Restaurant-level restraint only works at prestige price points
7	Apple	Technology	Heroic product photography + clean sections + precise typography. Controlled reveal.	Product launch pages	Apple's resources are unreplicable — adapt principles, not execution
8	Porsche	Automotive	Dark + performance photography + precise grid + controlled motion. Engineered elegance.	Model configurator	Automotive drama requires studio-quality photography
9	Bang & Olufsen	Audio/Design	Product-as-sculpture + neutral backgrounds + design-led layout. Object worship.	Product detail pages	Requires genuinely beautiful physical products
10	Bottega Veneta	Luxury Fashion	Green accent + editorial photography + dramatic scale shifts. Confident restraint.	Digital journal	Bold restraint requires creative director-level judgment
11	Ace & Tate	Eyewear	Clean photography + muted palette + editorial storytelling. Accessible refinement.	Stories/editorial section	Can feel "trying too hard" for luxury if product doesn't match
12	The Row	Luxury Fashion	Near-invisible navigation + maximal whitespace + whisper-quiet typography. Peak restraint.	Homepage	Extreme minimalism only works with strong brand recognition

Cross-quadrant pattern: All Cold+Calm sites use serif or thin sans-serif type, monochromatic or near-monochromatic palettes, full-bleed imagery, and a high content-to-chrome ratio. Navigation is minimized. Animation is rare and subtle. Copy is sparse — the imagery carries the message.

---

COLD + ACTIVE — Innovative Power

"This is cutting-edge and serious"

Sites in this quadrant use: dark backgrounds, sharp typography, bold gradients, technical demonstrations, fast-paced scroll animations, code/data visualizations. They communicate speed, precision, and technical authority.

#	Site	Industry	Key Design Mechanic	Best Page to Study	Anti-Pattern Warning
1	Vercel	Infrastructure	Dark mode + sharp type + speed metrics visualization. Performance as brand.	Homepage + framework pages	Dark mode developer aesthetic alienates non-technical audiences
2	Linear	Issue Tracking	Dark + precise animations + product-first UI. Tool confidence.	Homepage scroll sequence	Ultra-refined dark UI requires significant engineering investment
3	Stripe	Payments	Deep gradients + technical elegance + interactive demos. Beautiful complexity.	Documentation + payment flows	Stripe's production quality is a benchmark but requires dedicated design team
4	Supabase	Database Platform	Dark green + developer-friendly + open source aesthetic. Technical warmth.	Dashboard preview + docs	Open-source aesthetic can feel "unfinished" to enterprise buyers
5	Railway	Cloud Platform	Dark purple + clean deployment UI + minimal friction design. Developer delight.	Dashboard + deploy flow	Purple dark mode is becoming cliche in dev tools
6	Anthropic	AI Research	Clean white + research depth + restrained authority. Scientific confidence.	Research papers page	Borders Cold+Calm — uses restraint over aggression
7	Plaid	Financial API	Structured layout + technical diagrams + clean documentation. Fintech precision.	API documentation + use cases	Financial/API aesthetic can feel dry without product visualization
8	Wiz	Cloud Security	Dark + bold gradients + threat visualization. Security authority.	Platform overview	Security aesthetic (dark+aggressive) can feel threatening
9	CrowdStrike	Cybersecurity	Dark red-black + aggressive typography + threat intelligence dashboards. Protective power.	Platform pages	Aggressive design repels non-security audiences
10	Raycast	Developer Productivity	Dark + smooth animations + keyboard-first design. Speed culture.	Extensions store + homepage	Keyboard-first aesthetic limits mobile appeal
11	Arc Browser	Browser	Bold gradients + playful-dark hybrid + product innovation showcase. Tech with personality.	Homepage + feature reveals	Playful-dark is hard to maintain across an entire site
12	Resend	Email API	Dark + minimal + typographic focus + code-first. Developer minimalism.	Homepage + documentation	Ultra-minimal dev sites can feel empty to non-developers

Cross-quadrant pattern: All Cold+Active sites use dark backgrounds (#000-#1a1a1a), monospace or geometric sans-serif type, gradient accents (purple/blue/green), product demos as hero elements, and performance/speed messaging. Copy is technical and precise. Motion is deliberate and fast.

---

Cross-Quadrant Pattern Analysis

Design Dimensions by Quadrant