lemuriaOS
creativeb2bb2csaas

Visual Identity System

Define the complete visual language — color palette, typography scale, imagery direction, and spatial rhythm — that makes the website instantly recognizable and internally consistent.

Context

Visual identity is the first thing visitors process — before they read a single word. A coherent system prevents the "designed by committee" look where every section feels like a different site. This skill produces design tokens that every downstream component and page inherits.

Procedure

  1. Translate brand voice descriptors into visual attributes. "Precise and calm" → clean sans-serif, generous whitespace, muted palette. "Bold and energetic" → high-contrast colors, tight spacing, display type.
  2. Select primary and secondary colors. Primary = brand action color (buttons, links). Secondary = accent for highlights. Add semantic colors: success (green), warning (amber), error (red), info (blue).
  3. Build the neutral scale: 10 shades from near-white to near-black. These carry 80% of the UI.
  4. Choose 2 font families: one for display/headings (personality), one for body text (readability). Define the type scale: 6-8 sizes using a modular scale ratio (1.25 or 1.333).
  5. Define the spacing scale using a base unit (4px or 8px) with multipliers: 1x, 2x, 3x, 4x, 6x, 8x, 12x, 16x.
  6. Set imagery direction: photography style (candid vs. staged), illustration style (flat vs. 3D), icon style (outline vs. filled), and any brand-specific visual motifs.
  7. Validate: test the palette on a sample hero section, a card component, and a form — check contrast, hierarchy, and mood alignment.

Output Format

# Visual Identity System

## Color Palette

### Brand Colors
| Role | Name | Hex | HSL | Usage |
|------|------|-----|-----|-------|
| Primary | [name] | #XXXXXX | hsl(X, X%, X%) | Buttons, links, active states |
| Secondary | [name] | #XXXXXX | hsl(X, X%, X%) | Accents, highlights |
| Accent | [name] | #XXXXXX | hsl(X, X%, X%) | Badges, tags |

### Semantic Colors
| Role | Hex | Usage |
|------|-----|-------|
| Success | #XXXXXX | Confirmations, positive metrics |
| Warning | #XXXXXX | Cautions, pending states |
| Error | #XXXXXX | Errors, destructive actions |

### Neutral Scale
| Step | Hex | Usage |
|------|-----|-------|
| 50 | #FAFAFA | Page background (light) |
| 100 | ... | Card background |
| ... | ... | ... |
| 900 | #1A1A1A | Primary text (light mode) |
| 950 | #0A0A0A | Page background (dark) |

## Typography

### Font Stack
- Display: [font-family], [weight range], [source]
- Body: [font-family], [weight range], [source]

### Type Scale
| Token | Size | Weight | Line Height | Letter Spacing | Usage |
|-------|------|--------|-------------|----------------|-------|
| display-xl | 72px | 700 | 1.1 | -0.02em | Hero headlines |
| display | 48px | 600 | 1.15 | -0.01em | Section headlines |
| heading-lg | 32px | 600 | 1.25 | 0 | Sub-sections |
| heading | 24px | 600 | 1.3 | 0 | Card titles |
| body-lg | 18px | 400 | 1.6 | 0 | Lead paragraphs |
| body | 16px | 400 | 1.6 | 0 | Default text |
| caption | 14px | 500 | 1.5 | 0.01em | Labels, metadata |
| small | 12px | 500 | 1.5 | 0.02em | Fine print |

## Spacing
- Base unit: [4px | 8px]
- Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128

## Imagery Direction
- Photography: [style description]
- Illustrations: [style or "none"]
- Icons: [outline | filled | duotone], [size grid]
- Visual motifs: [gradients, patterns, textures]

## Dark Mode Mapping
| Light Token | Dark Token | Notes |
|-------------|------------|-------|
| neutral-50 (bg) | neutral-950 (bg) | Inverted backgrounds |
| neutral-900 (text) | neutral-50 (text) | Inverted text |
| primary-600 | primary-400 | Lighter primary for dark bg |

QA Rubric (scored)

  • Contrast compliance (0-5): every text-on-bg pair meets WCAG AA (4.5:1).
  • Hierarchy clarity (0-5): visual weight decreases predictably from display to caption.
  • Brand alignment (0-5): colors and type reflect the voice descriptors from the brief.
  • Systematic completeness (0-5): no gaps — every UI scenario has a defined token.
  • Dark mode parity (0-5): dark mode is equally polished, not an afterthought.

Examples (good/bad)

  • Good: "Primary: #2563EB (blue-600). Chosen for trust signaling in fintech. Passes 7.2:1 on white, 4.8:1 on dark. Display font: Inter (clean, geometric, high x-height for screen readability). Body: same family for cohesion."
  • Bad: "Primary color: blue. Font: something modern. Dark mode: just invert everything."

Variants

  • Monochrome mode: single-hue palette with tonal variation — elegant for premium brands.
  • Expressive mode: 3-4 color palette with gradient combinations — suits creative and consumer brands.