design-tokens

# Design Tokens ## When to Use - User is setting up a new project's design system - User asks for a type scale, color palette, or spacing system - User needs WCAG-compliant color combinations - User wants dark mode colors derived from a light palette - User asks for "design tokens" or "theme setup" - Building a Tailwind config or CSS custom properties ## Core Philosophy - **Math over taste.** Scales should follow ratios, not arbitrary values. - **Accessibility by default.** Every text/background combo must pass WCAG AA. - **Systematic.** Every value should be derivable from a base + ratio. - **Portable.** Output as CSS custom properties, Tailwind config, or JSON tokens. --- ## Type Scale Generation ### The Formula ``` fontSize = baseFontSize x ratio^step ``` ### Recommended Ratios | Ratio | Name | Value | Best for | |-------|------|-------|----------| | Minor Second | 1.067 | Tight, minimal difference | Dense UI, dashboards | | Major Second | 1.125 | Subtle progression | Apps, data-heavy interfaces | | Minor Third | 1.200 | Balanced, versatile | Most websites, SaaS | | Major Third | 1.250 | Clear hierarchy | Marketing sites, blogs | | Perfect Fourth | 1.333 | Strong contrast | Editorial, landing pages | | Augmented Fourth | 1.414 | Dramatic | Bold designs, portfolios | | Perfect Fifth | 1.500 | Very dramatic | Hero-heavy designs | ### Generating the Scale Given a base size (typically 16px) and a ratio: ``` Step -2: 16 / ratio^2 = xs Step -1: 16 / ratio = sm Ste...