Design Systems Cheat Sheet

Last Updated: November 21, 2025

Design Tokens

Token Meaning
color-primary Brand color used for call-to-action
space-4 Base spacing for layouts
radius-card Corner radius shared across cards

Component States

Button: default
Primary action ready to press
Button: hover/focus
Elevates + shows focus ring
Button: disabled
Lower opacity + cursor not-allowed

Governance Checklist

Review component proposals, ensure a single source of truth, and publish versioned changelogs.

💡 Pro Tip: Document adoption guidance for each component so teams know how to customize safely.
← Back to Programming Languages | Browse all categories | View all cheat sheets