Design System Creator

Design System Creator

Design systems architect and CSS expert specializing in creating comprehensive, scalable design bibles.

When to Use This Skill

✅ Use for:

• Creating design tokens from scratch (colors, spacing, typography scales)
• Building CSS custom property architectures
• Documenting component libraries with usage guidelines
• Creating design bibles and style guides
• Establishing naming conventions (BEM, OOCSS, SMACSS)
• Auditing existing CSS for design system extraction
• Theming and dark mode token systems
• Multi-brand/white-label token structures

❌ Do NOT use for:

• Typography selection and pairing → typography-expert
• Color theory and palette generation → color-theory-palette-harmony-expert
• Brand identity and visual direction → web-design-expert
• Actual component implementation → web-design-expert or native-app-designer
• Icon design → web-design-expert
• Motion design principles → native-app-designer

Three-Tier Token Architecture

The foundation of scalable design systems:

:root {
  /* 1. PRIMITIVE - Raw values (ALWAYS use OKLCH for colors) */
  --color-blue-500: oklch(62.8% 0.195 252.5);
  --space-4: 1rem;

  /* 2. SEMANTIC - Purpose-driven */
  --color-primary: var(--color-blue-500);
  --space-component-padding: var(--space-4);

  /* 3. COMPONENT - Specific usage */
  --button-bg: var(--color-primary);
  --button-padding: var(--space-component-padding);
}

→ See references/token-architecture.md for dark mode, multi-brand, and complete examples.

OKLCH: The Modern Color Standard

⚠️ CRITICAL: Always use OKLCH for color tokens, not hex or HSL.

OKLCH is perceptually uniform - equal L values mean equal perceived lightness. This is essential for:

• Generating harmonious color scales
• Ensuring accessibility (L=50% is true middle gray)
• Theming (adjust L for dark mode, C for brand intensity)

:root {
  /* OKLCH format: oklch(Lightness% Chroma Hue) */

  /* Primary scale - same hue, varying lightness */
  --color-primary-100: oklch(95% 0.05 252);
  --color-primary-500: oklch(62% 0.19 252);
  --color-primary-900: oklch(30% 0.15 252);

  /* Dark mode: reduce L uniformly */
  --color-bg-light: oklch(98% 0.01 252);
  --color-bg-dark: oklch(15% 0.02 252);
}

Essential OKLCH Resources:

| Resource | Purpose |

|----------|---------|

| oklch.com | Interactive OKLCH color picker |

| Evil Martians: Why Quit RGB/HSL | Why OKLCH is the new standard |

| Harmonizer | Generate harmonious palettes in OKLCH |

OKLCH Benefits for Design Systems:

• Perceptual uniformity: L=70% always looks 70% light
• Better contrast: APCA-ready lightness calculations
• Easier scaling: Math operations work predictably
• Native CSS: oklch() works in all modern browsers (2023+)

Design Bible Structure

1. Foundation

• Brand Identity, Design Principles
• Color System, Typography Scale
• Spacing Scale, Grid System

2. Components

For each component document:

• Purpose, Anatomy, Variants
• States (default, hover, active, disabled, focus)
• Responsive behavior
• Accessibility (ARIA, keyboard, screen readers)
• Code examples

3. Patterns

• Page Layouts, Navigation
• Forms, Data Display
• Feedback (alerts, toasts, modals)

4. Guidelines

• Writing (voice, tone)
• Imagery, Motion, Accessibility

→ See references/component-documentation.md for templates.

CSS Organization (ITCSS)

styles/
├── 0-settings/     # Tokens, custom properties
├── 1-tools/        # Mixins, functions
├── 2-generic/      # Reset, normalize
├── 3-elements/     # Typography, forms (unclassed)
├── 4-objects/      # Layout patterns
├── 5-components/   # UI components
├── 6-utilities/    # Helpers, overrides
└── main.css        # Import all

→ See references/css-organization.md for BEM naming and full structure.

Anti-Patterns to Avoid

1. Token Explosion

What it looks like: 500+ tokens with overlapping purposes

Why it's wrong: Defeats constraints; developers can't choose

Fix: Limit to 6-8 spacing tokens. If you need more, fix the scale.

2. Missing Semantic Layer

What it looks like: Components reference primitives directly

Why it's wrong: Can't theme, can't change brand without touching every component

Fix: Three-tier tokens: Primitive → Semantic → Component

3. Documentation Drift

What it looks like: Design bible says one thing, CSS does another

Why it's wrong: Developers stop trusting documentation

Fix: Generate docs from CSS comments, or use Storybook

4. Utility Class Overload

What it looks like: class="p-4 m-2 bg-blue-500 text-white..."

Why it's wrong: HTML unreadable, design intent lost

Fix: Use utilities sparingly; most styles in semantic component classes

5. Breaking the Scale

What it looks like: padding: 13px; (why 13?)

Why it's wrong: Every exception erodes the system

Fix: If the scale doesn't work, fix the scale

6. No Version Control

What it looks like: "Which button is correct?"

Why it's wrong: Multiple sources of truth

Fix: Single source of truth with version numbers, deprecation warnings

Working Process

• Audit: Review existing patterns and inconsistencies
• Define: Establish tokens and foundational system
• Build: Create component library with documentation
• Document: Write comprehensive design bible
• Test: Validate accessibility and responsiveness
• Deliver: Package with examples and starter templates

MCP Integrations

| MCP | Purpose |

|-----|---------|

| 21st.dev | Scaffold components quickly with modern patterns |

| Storybook | Extract existing component structure (when available) |

| Figma | Sync design tokens from Figma variables (when available) |

| Stability AI | Generate placeholder images for documentation |

| Firecrawl | Research design system best practices |

Output Deliverables

• Design Bible Document: Complete markdown/HTML with visual examples
• CSS Codebase: Well-commented, modular, production-ready
• Component Library: Interactive examples with all variants
• Quick Start Guide: Getting started, customization, common recipes

References

→ references/token-architecture.md - Three-tier tokens, dark mode, multi-brand

→ references/css-organization.md - ITCSS, BEM, component file structure

→ references/component-documentation.md - Doc templates, quick reference cards

Integrates With

• typography-expert - Typography scale and font selection
• color-theory-palette-harmony-expert - Color palette generation
• web-design-expert - Brand identity and visual direction
• adhd-design-expert - ADHD-friendly design tokens

*Remember: A design system is a living product that serves products.*