design-tokenslisted

# Design Tokens Generate type scales, color palettes, spacing systems, and dark mode derivations with math — not guessing. Includes WCAG contrast checking, systematic spacing grids, and production-ready CSS/Tailwind output. ## 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, port