---

name: designing-systems description: Create and manage design systems with tokens, color palettes, typography scales, and spacing systems. Use when user asks about design tokens, theming, color schemes, or consistent styling. allowed-tools: Read, Write, Edit, Glob, Grep, Task user-invocable: true

Designing Systems

Create consistent, scalable design systems with tokens.

APEX WORKFLOW

Phase 0: ANALYZE EXISTING (CRITICAL)

CopyTask: explore-codebase
Prompt: "Find existing design tokens: CSS variables, Tailwind config,
color palette, typography, spacing patterns"

If design system exists: Document and extend it. If no design system: Create new following this guide.

Design Token Categories

Color System (OKLCH 2026)

Copy/* Primary palette - OKLCH for P3 wide gamut */
--color-primary-500: oklch(55% 0.20 260);
--color-primary-600: oklch(48% 0.18 260);

/* Semantic mapping */
--color-background: var(--color-neutral-50);
--color-foreground: var(--color-neutral-900);
--color-muted: var(--color-neutral-100);
--color-border: var(--color-neutral-200);

/* Dark mode */
.dark {
  --color-background: var(--color-neutral-900);
  --color-foreground: var(--color-neutral-50);
}

Typography Scale (1.25 ratio)

Copy/* FORBIDDEN: Inter, Roboto, Arial */
/* USE: Clash Display, Satoshi, Bricolage Grotesque */

--font-display: 'Clash Display', sans-serif;
--font-sans: 'Satoshi', sans-serif;
--font-mono: 'JetBrains Mono', monospace;

--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */

Spacing (4px grid)

Copy--spacing-1: 0.25rem;  /* 4px */
--spacing-2: 0.5rem;   /* 8px */
--spacing-4: 1rem;     /* 16px */
--spacing-6: 1.5rem;   /* 24px */
--spacing-8: 2rem;     /* 32px */

Tailwind v4 Config

Copy/* app.css - CSS-first config */
@import "tailwindcss";

@theme {
  --color-primary-*: oklch(55% 0.20 260);
  --font-display: 'Clash Display', sans-serif;
  --radius-lg: 0.75rem;
}

Validation

Copy[ ] Existing tokens documented (Phase 0)
[ ] No forbidden fonts (Inter/Roboto/Arial)
[ ] OKLCH colors for wide gamut
[ ] Dark mode variables defined
[ ] Tailwind v4 @theme configured

References

• APEX Design: references/design/01-analyze-design.md
• Color System: references/color-system.md
• Typography: references/typography.md