Generic Design System

Design system reference adapting to any project's visual language.

Research First for New Systems

When creating a NEW design system (not following an existing one):

Skill(ui-research)  # Research modern patterns first

References:

• UI Inspiration Sources - Research sources
• Design Patterns - Visual tokens

When to Use This Skill

Use for:

• Implementing UI components
• Choosing colors or typography
• Creating animations or transitions
• Ensuring visual consistency
• Setting up design tokens
• Reviewing design system compliance

Don't use when:

• UX flow design → use generic-ux-designer
• Feature architecture → use generic-feature-developer
• Code quality review → use generic-code-reviewer

Design System Architecture

When to Build vs Reference

Token Organization

Decision: Use semantic tokens in code, primitive tokens as foundation only.

Consistency Decision Tree

1. Component exists? → Use existing pattern
2. Similar exists? → Adapt existing (don't create competing pattern)
3. New category? → Propose to user, document reasoning

Color System

Every project should define:

• Primary, Secondary, Accent
• Background, Foreground, Muted
• Destructive, Success, Warning

Contrast Requirements

Typography

Font Stack

--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-mono: "SF Mono", Monaco, "Courier New", monospace;

Type Scale

Spacing System

Base unit: 4px or 8px

Animation

GPU-Accelerated Only

DO animate: transform, opacity
AVOID: width, height, top, left, margin, padding

Duration

Timing

--ease-default: cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

Components

Component States

Touch Targets

• Minimum: 44x44px (WCAG 2.1 AAA)
• Spacing: 8px between adjacent targets
• Mobile: Consider 48x48px for primary actions

Buttons

Form Inputs

• Clear focus states (2px visible ring)
• Error states with messages
• Label always visible
• Required indicator

Modals

• Focus trapped inside
• Escape to close
• Dark overlay (50-70% opacity)

Responsive Breakpoints

Dark Mode

:root {
  --background: #ffffff;
  --foreground: #000000;
}
[data-theme="dark"] {
  --background: #000000;
  --foreground: #ffffff;
}

See Also

• Design Patterns - Atomic Design, tokens, component docs
• Code Review Standards - Accessibility checks
• generic-ux-designer - For UX flow and research decisions
• Project CLAUDE.md - Project-specific design constraints

READ references when:

• Setting up new design system → DESIGN_PATTERNS.md (full structure)
• Complex component patterns → DESIGN_PATTERNS.md (Atomic Design section)