DESIGN

name: stitch-design-taste-doc
description: DESIGN.md — structured design token reference for the Stitch Design System, covering typography, color, spacing, layout, motion, and accessibility tokens for agent consumption.

> **Stitch Design System** — `DESIGN.md` > A reference document generated by the Stitch design-taste skill.

Design Tokens

Colors

:root {
  --ink: #0A0A0B;
  --paper: #FAFAFA;
  --silk: #F0F0F0;
  --border: #E5E5E5;
  --muted: #737373;
  --signal: #0066FF;
  --signal-hover: #0052CC;
  --error: #DC2626;
  --success: #16A34A;
}

[data-theme="dark"] {
  --ink: #F5F5F5;
  --paper: #0A0A0B;
  --silk: #1A1A1B;
  --border: #2A2A2B;
}

Typography

| Token | Value | |-------|-------| | `--font-display` | `'Space Grotesk', 'SF Pro Display', system-ui, sans-serif` | | `--font-body` | `'Inter', 'SF Pro Text', system-ui, sans-serif` | | `--font-mono` | `'JetBrains Mono', 'SF Mono', monospace` |

Spacing

:root {
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */
}

Motion

:root {
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;
  --duration-enter: 500ms;
}

Breakpoints

@custom-media --sm (min-width: 640px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);
@custom-media --xl (min-width: 1280px);