Design System Component Library

Act as a design systems architect at a product company. Define a complete design system for [PRODUCT TYPE — e.g. B2B project management tool]. Format this as a Figma documentation page that a team of 5 designers and 10 developers will reference daily.

SECTION 1 — DESIGN TOKENS

Color Tokens:
• Primary: main brand color + 9 tint/shade steps (100–900 scale) — provide all hex codes
• Secondary: same 9-step scale
• Semantic colors: success, warning, error, info — light and dark variants for each
• Neutral: 10-step grey scale (50–950)
• Background levels: 6 levels for dark mode (not just one black)
• Border colors: default, hover, focus, error states

Typography Tokens:
• Font family: heading and body — name and fallback stack
• Type scale: 10 steps (xs through 5xl) — px sizes, rem values, line heights
• Font weights used: list the 3–4 weights and their use cases
• Letter spacing: normal, tight, wide values

Spacing Tokens:
• Base: 4px
• Full scale: 1 through 20 (4px–80px) — list all values
• Named aliases: space-xs, space-sm, space-md, space-lg, space-xl

Border Radius:
• 5 levels: none, sm (2px), md (6px), lg (12px), full (9999px)

Shadow:
• 4 elevation levels: flat, low, medium, high — describe each with css box-shadow values

SECTION 2 — CORE COMPONENTS

For each component below, define: anatomy, all variants, all states, do/don't usage rules, and ARIA/accessibility requirements.

BUTTON:
• 5 variants: Primary, Secondary, Ghost, Destructive, Link
• 3 sizes: sm, md, lg — exact height, padding, font size for each
• 4 states: default, hover, active, disabled, loading
• Icon-only version: when to use, min tap target size

INPUT FIELD:
• Label placement: above (not placeholder-only — explain why)
• States: default, focused, filled, error, disabled, read-only
• Helper text and error message placement
• Character count display

BADGE / TAG / CHIP:
• Variants: status badge (success/warning/error/info), label tag, removable chip
• Size options and icon placement

AVATAR:
• Sizes: xs through xl
• Fallback: initials, generic icon
• Group/stack treatment (overlapping avatars)

TOOLTIP:
• Trigger: hover and focus
• Placement: top, right, bottom, left — with arrow
• Max width and text wrapping

MODAL / DIALOG:
• Sizes: sm, md, lg, full-screen
• Header, body, footer anatomy
• Close button placement
• Overlay and focus trap behaviour

TOAST NOTIFICATION:
• 4 types: success, error, warning, info
• Position: top-right, bottom-center
• Auto-dismiss timing and progress bar
• Stack behaviour (multiple toasts)

SECTION 3 — LAYOUT SYSTEM
• 12-column grid: gutter size, column width at each breakpoint
• Breakpoints: define xs, sm, md, lg, xl, 2xl — with px values
• Container max-widths per breakpoint
• Common layout patterns: sidebar + content, centered narrow, full-bleed

SECTION 4 — MOTION SYSTEM
• Easing curves: ease-in, ease-out, ease-in-out — cubic-bezier values
• Duration tokens: instant (0ms), fast (100ms), normal (200ms), slow (300ms), deliberate (500ms)
• Which interactions animate vs. which should be instant (and why)
• Reduced motion: how to handle prefers-reduced-motion