| name | visual-identity |
| description | Use after ux-methodology-design is complete. Defines brand personality keywords, explores typography, expands the color system, and locks a motion vocabulary before any code is written. Outputs design-system.md ready for motion-web-design. Award-winning studios run this phase before implementation. |
Visual Identity
Lock the design language before touching code. Locomotive, Active Theory, and Resn consistently define brand personality, typography, and motion vocabulary as a deliberate pre-build phase. Skipping it produces sites that look "professional but generic" — correct structure, flat feeling. This skill formalizes that phase.
Distinction: ux-methodology-design determines how to present content (hierarchy, CTA emphasis, feedback timing). This skill determines what the brand looks and moves like — the personality, typeface, color depth, and motion signature that make the site feel distinctly itself.
When to Apply
- After ux-methodology-design — you have architecture and design rules, but no visual language
- Before motion-web-design — the build needs a visual brief, not just a layout spec
- When a site looks "correct but generic" — usually a missing visual identity phase
- When the team can't agree on what the site should "feel like"
Workflow
Copy this checklist:
Visual Identity:
- [ ] 1. Brand personality — 4–5 keyword adjectives
- [ ] 2. Visual translation — map each keyword to a design decision
- [ ] 3. Typography exploration — test 3 display treatments
- [ ] 4. Typography selection — document the pair and rationale
- [ ] 5. Color system — expand from palette seeds to full token set
- [ ] 6. Texture decision — grain, gradient, or clean
- [ ] 7. Motion vocabulary — name 4 signature moves with GSAP shorthand
- [ ] 8. Preset selection — match to motion-web-design archetype
- [ ] 9. Write design-system.md
Phase 1: Brand Personality Keywords
Define 4–5 adjectives that capture how the brand should feel. These act as a creative filter: if a design decision doesn't serve one of these words, cut it.
How to find them: Look at the primary persona's core tension (want vs. fear from persona-archetypes), the copy tone already established, and the trust signals the audience values from audience-research.
Output format:
| Keyword | Visual Translation |
|---|
| [word] | [what this means in type, color, spacing, and motion] |
Example (sports hydration brand, Hero archetype, Achiever VALS):
| Keyword | Visual Translation |
|---|
| Electric | Neon/lime accent; fast stagger animations; high contrast on dark |
| Earned | Subtle grain texture; heavy type weights; no decorative illustration |
| Precise | Strict grid; ingredient numbers sized as display type; no visual noise |
| Raw | Maximum font weight (900); athlete photography over product renders |
| Clean | One accent color; generous whitespace; restraint over ornament |
Rules:
- More than 5 keywords means you haven't made choices — compress to 5 max
- Each keyword must have a concrete visual translation, not just a vibe
- Contradictory keywords (e.g., "bold" AND "delicate") expose a positioning conflict to resolve before design starts
Phase 2: Typography Exploration
Test exactly 3 display font pairs. More creates paralysis; fewer creates false certainty.
What to test: Render the hero headline (primary H1 from page architecture) at full display scale (~96px). The right pair makes that headline feel physically powerful and differentiated.
Font candidates by brand personality:
| Brand feel | Display options | Body pair |
|---|
| Athletic / Performance | Barlow Condensed, Bebas Neue, Anton, Big Shoulders Display | Inter, DM Sans |
| Technical / Precise | Space Grotesk, IBM Plex Mono, Neue Haas Display | Inter, Roboto Mono |
| Premium / Luxury | Playfair Display, Cormorant Garamond, Editorial New | DM Sans, Plus Jakarta Sans |
| Bold / Rebel | Black Han Sans, Alfa Slab One, Syne | Inter, Space Grotesk |
| Creative / Editorial | Clash Display, Syne, PP Neue Montreal | Plus Jakarta Sans, Space Grotesk |
| Clean / Minimal | Geist, Instrument Sans, Satoshi | Inter |
Evaluation criteria:
- Personality match — Does it reinforce the keyword list?
- Scale legibility — Does it read at 96px AND remain clear at 24px?
- Character distinction — Does it look like something, or just a default sans?
- Weight range — Are 700–900 weights available for maximum emphasis?
Selection output (put in design-system.md):
## Typography
- Display/H1: [Font] [weights used] — [1-sentence rationale tied to keyword]
- Body: [Font] [weights used]
- Google Fonts import: [URL]
Phase 3: Color System
Expand from palette seeds to a full named token set. Color systems fail when they have only 2–3 named values; you need semantic names for every shade used in the build.
Derivation pattern (from one accent + one background):
{accent}-bright: +15% lightness — highlight, hover glow
{accent}: Source color — primary CTAs, key accents
{accent}-muted: -15% lightness — secondary usage, text on accent bg
{accent}-dim: 90% white + 10% accent — badge fills, tinted light sections
dark: Page base (darkest bg)
dark-surface: Secondary sections (+4–6% lightness)
dark-card: Elevated cards (+3% lightness from surface)
dark-border: Borders, dividers (subtle, ~15% lightness)
white: #FFFFFF
gray-light: Body text on dark (high legibility — ~75% lightness)
gray: Secondary text, labels (~55% lightness)
Minimum token count: 12 named variables. Fewer forces ad-hoc colors during build.
Texture Decision (mandatory, not optional)
Choose one — this single decision closes most "flatness" gaps:
| Option | When to use | Implementation |
|---|
| Grain overlay | Earned, Raw, bold brands | SVG noise filter, 3–5% opacity, position: fixed |
| Gradient surface | Precise, Premium, Clean | Subtle linear-gradient on dark sections (~5° color shift) |
| Textured gradient | Electric, Creative | Radial glow spots + grain combined |
| Flat / none | Minimal, Lithos, pure architecture | Only if whitespace alone carries the weight |
Grain implementation (copy-paste):
body::after {
content: '';
position: fixed; inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.04;
pointer-events: none;
z-index: 9998;
}
Phase 4: Motion Vocabulary
Name exactly 4 signature moves. Every animation in the built site derives from one of these. No ad-hoc, one-off animations.
Template:
| Name | Description | GSAP shorthand | Used in |
|---|
| LIFT | Element rises from below with fade, cubic ease-out | from({y:40, opacity:0}, {ease:'power3.out', duration:0.6}) | All section entrances |
| REVEAL | Text unmasks left→right behind a clipping rect | from({clipPath:'inset(0 100% 0 0)'}, {clipPath:'inset(0 0% 0 0)', ease:'power3.inOut', duration:0.7}) | Hero H1, section headings |
| COUNT | Number animates 0 → final on scroll enter | gsap.to({val:0},{val:target,onUpdate: ()=>el.textContent=Math.round(this.targets()[0].val)}) | Stats bar, social proof |
| PULSE | Scale 1→1.03 + glow on hover, spring overshoot | to(el,{scale:1.03,ease:'back.out(1.7)',duration:0.2}) | CTAs, primary buttons |
Intensity calibration by personality:
| Brand personality | LIFT duration | REVEAL speed | PULSE overshoot |
|---|
| Electric / Bold | 0.5s, power3.out | 0.55s, fast | back.out(2.5) |
| Precise / Clean | 0.7s, power2.out | 0.8s, measured | back.out(1.4) |
| Premium / Luxury | 1.0s, power1.out | 1.1s, very slow | back.out(1.2) |
| Creative / Editorial | 0.65s, power3.inOut | 0.75s, cinematic | back.out(1.8) |
Phase 5: Preset Selection
Match the brand personality to a visual archetype from motion-web-design/presets.md. The preset sets default values for colors, spacing, typography usage, and motion intensity — overrides are specified per module.
See motion-web-design/archetypes.md for the persona → preset mapping table.
Phase 6: Design System Output
Write design-system.md in the project directory. This is the complete handoff to motion-web-design.
# Design System: [Project Name]
## Brand Personality
| Keyword | Visual Translation |
[5 rows]
## Typography
- Display: [font, weights, rendering at hero scale]
- H1–H3: [per-level specs]
- Body, Caption: [specs]
- Import: `[Google Fonts URL]`
## Color Tokens
```css
:root {
--accent-bright: [hex];
--accent: [hex];
--accent-muted: [hex];
--accent-dim: [hex];
--dark: [hex];
--dark-surface: [hex];
--dark-card: [hex];
--dark-border: [hex];
--white: #FFFFFF;
--gray-light: [hex];
--gray: [hex];
}
Texture
[Choice + implementation note]
Motion Vocabulary
| Name | GSAP shorthand | When |
[4 rows with intensity calibrated to brand]
Preset
[Preset name] — [rationale in 1 sentence linking persona to preset]
---
## Quality Gate
Before handing off to motion-web-design:
- [ ] Brand keywords feel specific, not generic ("electric" not "modern")
- [ ] Each keyword has a concrete visual translation (not just a vibe)
- [ ] Typography renders the hero headline with personality at 96px
- [ ] Color token set has ≥12 named variables with semantic names
- [ ] Texture decision made — not deferred
- [ ] All 4 motion vocabulary moves named with GSAP shorthand
- [ ] Motion intensity calibrated to brand keywords
- [ ] Preset selection justified by persona signals (reference archetypes.md)
- [ ] design-system.md is written and self-contained
---
## Anti-Patterns
- **Too many adjectives** — 8 "brand values" is not a personality; it's a hedge. Force the 5-max rule.
- **Generic fonts** — "I'll just use Inter" skips the exploration phase and produces bland output
- **Color before personality** — picking lime because it looks good before defining keywords creates arbitrary choices
- **Motion without vocabulary** — adding "some animation" without naming the moves creates an inconsistent experience
- **Deferred texture** — "We'll add texture later" never happens; the site ships flat
- **Adjectives without translations** — "minimalist" with no CSS/typography rule attached is worthless in a brief
---
## Additional Resources
- [motion-web-design/presets.md](../motion-web-design/presets.md) — 8 visual archetypes
- [motion-web-design/archetypes.md](../motion-web-design/archetypes.md) — Persona → preset mapping
- [persona-archetypes/synthesis.md](../persona-archetypes/synthesis.md) — Persona psychology → site style mapping
