v0.2.0 — Phase 2 Complete

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-tokens

Usage

@import '@verdigristech/design-tokens/css/oklch';
.hero { color: var(--color-brand-verdigris); }

import designPreset from '@verdigristech/design-tokens/tailwind';

v0.1.0 — MVP: Tokens + Build + Foundations

Initial release of @verdigristech/design-tokens.

What's included

• 133 design tokens in W3C DTCG JSON format
• Color palette extracted from Patina (OKLch canonical) + www (HSL legacy)
• Typography, spacing, motion, radius, breakpoint tokens
• Build pipeline generating: oklch.css, hsl.css, hex/colors.json, tailwind/preset.js
• Foundation docs: color, typography, motion, spacing, accessibility, dark mode
• visual-rules.yml for evaluator integration
• AGENTS.md for AI agent consumption

Install

npm install @verdigristech/design-tokens