design-systemlisted

Mechanical implementation invariants for frontend design: token architecture, typography hierarchy, loading order, FOUT prevention, chrome stability, motion timing, color semantics. Use with design when building components, pages, or design systems. (Aesthetic direction lives in design-thinking; anti-trend/anti-slop in design-spatial.)
connerkward/claude-design-skills · ★ 0 · Web & Frontend · score 75

Install: claude install-skill connerkward/claude-design-skills

# Design system Apply with **design** when implementing UI: components, pages, or design systems. Every color, type, and motion choice should trace back to these rules. ## Token architecture All colors map to a small set of primitives. No random hex values. - **Foreground**: Text hierarchy (primary, secondary, muted). - **Background**: Surface elevation (base, raised, overlay). - **Border**: Separation hierarchy (subtle, default, emphasis). - **Brand**: Identity and primary accent. - **Semantic**: Destructive, warning, success (and optional info). Use tokens in code (CSS variables, theme objects); never hardcode hex for UI. ## Typography - **Hierarchy**: Headlines — heavier weight, tighter letter-spacing for presence. Body — comfortable weight for readability. Labels/UI — medium weight, works at smaller sizes. Data — monospace, `tabular-nums` for alignment. - Combine size, weight, and letter-spacing so hierarchy is clear at a glance. If you squint and can't tell headline from body, hierarchy is too weak. - **Fonts**: pair a display font with a body font; keep hierarchy legible at a glance. *Which* fonts is direction, not mechanics — pick from the domain and push off your first/default instinct (the mean); see design-spatial §2. - **Data (functional only)**: real aligned numbers, IDs, timestamps in monospace with `tabular-nums` — mono earns its place when values line up in a column. Do NOT sprinkle mono on decorative eyebrow/metadata microtext ("35MM · DEVELOP · SCAN",