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);
}