amézquita design system
Token-first. Automated. Production.
Every page on this site is the design system running in production. This reference updates automatically whenever a change merges — no manual documentation writing.
Token reference
Every design token in one searchable table — colour, spacing, typography, motion, and component tokens. Toggle between axes to see how each value responds to dark mode and the bold expression.
Explore →Component library
Per-component pages with live story embeds and token tables. Derived from component source files — no hand-written docs.
Explore →Foundations
Visual reference for the core design decisions — color across all four theme axes, typography specimens, spacing scale, and motion timing.
Explore →Changelog
Version history grouped by git tags, with conventional-commit changelogs generated automatically from the source.
Explore →Guidelines
Governance, versioning, and how AI agents work with this system — AGENTS.md, the skill, and the MCP server.
Explore →How it works
JSON tokens
Design tokens live in DTCG-format JSON files. Three token tiers: global primitives, brand semantics, and component decisions.
Style Dictionary
Style Dictionary compiles tokens into three CSS files — one per axis combination — and generates the token manifest and reference tables.
CI gate
Every PR runs token linting, contrast checking, story coverage, and visual regression via Chromatic before any change reaches main.
Live docs
On merge, this site rebuilds automatically. The token reference reads the same JSON that drives the CSS — impossible to drift.