| layout | default |
|---|---|
| title | Home |
Canonical design tokens, guidelines, and visual rules for all Verdigris surfaces -- web, sales collateral, ads, and physical goods.
Patina is the reference implementation. When this repo makes design decisions, Patina's existing implementation is the default. The www site converges toward Patina, not the other way around.
Core design decisions with rationale.
- Color -- Palette, OKLch rationale, WCAG, dark mode
- Typography -- Scale, font stacks, weight rules
- Spacing -- 4px grid, radius, breakpoints
- Motion -- Animation philosophy, specs, reduced-motion
- Accessibility -- WCAG AA requirements
- Dark Mode -- Strategy, Patina hue shift
- Elevation -- Shadow and z-index systems
Medium-specific visual guidelines.
- 3D and Spline -- WebGL waveform spec, Three.js patterns
- Ads and Templates -- LinkedIn/Google Display specs
- Illustration -- Icon style, diagram conventions
- Photography -- Photo style, composition rules
- Physical Goods -- Trade show, merchandise, print
See categories/README.md for contribution guidance.
Machine-readable design tokens in W3C DTCG format.
Machine-enforceable visual rules for evaluator pipelines.
Annotated good and bad visual references.
npm install @verdigristech/design-tokens/* OKLch (recommended) */
@import '@verdigristech/design-tokens/css/oklch';
.hero { color: var(--color-brand-verdigris); }// Tailwind
import designPreset from '@verdigristech/design-tokens/tailwind';
export default { presets: [designPreset] };See the README for all output formats and the Contributing guide for how to add tokens, docs, or examples.