JM Family
Design System
A single source of truth for UX workflow, brand standards, design tokens, components, patterns, editorial guidelines, and governance. It is not a wiki; it is a product, with interactive tools, a searchable web app, and structured data that both teams and AI agents can consume.
The system is more than a component library: shared standards for product teams, reusable patterns for faster delivery, and stable, structured guidance for AI agents.
I built this solo as a UX strategist, using AI coding agents as the primary implementation tool. The workflow is spec-driven: I write a detailed specification, an agent generates the implementation against the tokens and app shell, and I review for quality, accuracy, and brand compliance. If the framework or styling approach changes, the specs survive, so the highest-value work is clear, durable documentation, not disposable code.
Foundations, principles, and editorial standards give every decision a shared, documented baseline.
A two-tier token architecture: global primitives carry the raw values; semantic aliases give them purpose and adapt across light and dark themes. Tokens are authored as JSON and transformed at build time into CSS custom properties and TypeScript constants, with color contrast validated automatically so accessibility is enforced, not hoped for.
299 tokens across global primitives and semantic aliases, with dedicated dark-theme overrides.
WCAG 2.2 AA is the baseline on every element, checked at build time rather than bolted on later.
Each component standard pairs usage rules with accessibility guidance and conformance cues for both people and agents.
The system serves two audiences at once. People get a fast, searchable web app with live examples. AI agents get structured data: registries, stable IDs, anti-pattern catalogs, and an Agent Kit, a portable bundle of tokens, principles, and agent directives that teams drop into their own repos so coding agents build UI that conforms to the system, even when they can't see the source.
The Agent Kit packages the system into a versioned, downloadable bundle generated from the same source of truth that powers the web app.
- A single source of truth that aligns designers, engineers, PMs, content strategists, and QA around shared standards.
- Faster, more consistent delivery through reusable tokens, components, and patterns.
- An AI-ready foundation designed for AI agents as first-class consumers, not an afterthought.
- A portable Agent Kit that lets teams bring the system's tokens, principles, and guardrails into delivery repos.
- Benchmarked against best-in-class systems like Microsoft's Fluent 2.