First published release of @verdigristech/design-tokens
What's included
Tokens (W3C DTCG format, OKLch-first)
- Color: brand palette, semantic light/dark mappings (50 color tokens)
- Typography: font families (Inter, Lato, JetBrains Mono), scale, weights
- Spacing: 4px grid, layout tokens, breakpoints
- Motion: durations, easing curves
- Elevation: shadow tokens, z-index layers
- Radius: border radius scale
Output formats
| Format | Path | Consumer |
|---|---|---|
| OKLch CSS vars | css/oklch.css |
Patina, modern browsers |
| HSL CSS vars | css/hsl.css |
www (legacy) |
| Hex JSON | hex/colors.json |
Email, print, Figma |
| Tailwind preset | tailwind/preset.js |
Both codebases |
Foundation docs — rationale for color, typography, spacing, motion, dark mode, accessibility, elevation
Category guides — web components (buttons, cards, forms, feedback, data display, layout, navigation), animation (guidelines, hover states, scroll reveal, reduced motion)
Visual rules — rules/visual-rules.yml v1.0 for evaluator pipeline (color, contrast, gradient, dark mode constraints)
Install
npm install @verdigristech/design-tokensUsage
@import '@verdigristech/design-tokens/css/oklch';
.hero { color: var(--color-brand-verdigris); }import designPreset from '@verdigristech/design-tokens/tailwind';