JM Family Design System
Welcome

Build faster, stay aligned, ship better.

The Enterprise Design System is the single source of truth for how we design, build, and write JM Family products. This page is the fastest way to understand what the system contains, how it is organized, and where to start based on your role.

What this is

A working system, not a static style guide. Every page on this site is generated from the same tokens, components, and rules that production applications consume — so the documentation stays honest and the system stays consistent.

The system covers four kinds of work: the visual language (foundations, brand), the building blocks (tokens, components, patterns), the language we use to talk to users (content), and the processes that get a product from idea to release (UX workflow, AI toolkit, governance).

What’s inside

Nine sections, organized from the most foundational ideas to the processes that govern them. Each one has its own overview page once you are ready to dive in.

FoundationsColor, type, layout, motionThe visual and structural rules every product builds on — color, typography, spacing, grid, elevation, and accessibility standards.BrandIdentity standardsBrand color, typography, logo usage, and imagery rules that distinguish JM Family products from generic UI.TokensThe single source of valuesA two-tier token architecture — global primitives and semantic aliases — that powers every theme and component in the system.ComponentsReusable building blocksAccessible, themeable UI components with documented states, variants, and usage guidance.PatternsComposed solutionsRecurring user-experience patterns — forms, navigation, data tables, empty states — assembled from components.ContentVoice, tone, and languageEditorial standards covering voice, grammar, terminology, inclusive language, and AI writing guardrails.UX WorkflowHow we shipA six-stage workflow from empathy through implementation, with prompts and checklists for each phase.AI ToolkitBuild AI-aware product workThe Agent Kit gives coding agents the system as a first-class input, and the AI guardrails set the bar for what AI can ship versus what stays with a human.GovernanceHow the system evolvesContribution guidelines, review process, versioning, decision log, and roadmap.

Who is this for

Different roles need different entry points. The Get Started section has a tailored guide for each of the audiences below.

Designers
Figma libraries, foundations, and the UX workflow that frames every project.
Engineers
Tokens, components, and the integration paths for consuming the system in code.
Product Managers
How the system speeds delivery, where to plug it into your roadmap, and how to request changes.
Content Strategists
Voice, tone, terminology, and the editorial standards that keep the product sounding like one product.
QA
Accessibility expectations, component states to verify, and the Definition of Done for design-system work.

Guiding principles

Six commitments that shape every decision in the system. When two options compete, the one that better honors these principles wins.

  • 01Tokens are the source of truthComponents consume semantic tokens, not raw values. A color, a spacing step, or a type ramp lives in one place — change it once and it propagates everywhere.
  • 02Accessible by defaultWCAG 2.2 AA is the minimum standard. Contrast, keyboard support, focus indication, and screen-reader semantics are part of every component, not an afterthought.
  • 03Consistent before cleverA predictable system beats a flashy one. We add patterns when they earn their place, and remove anything we cannot explain.
  • 04Themed, not hardcodedLight and dark themes share the same semantic vocabulary. If a value resists theming, the token is wrong — fix the token, not the component.
  • 05Documented where it is usedEvery component, pattern, and token includes the guidance you need to use it correctly. Documentation is part of the deliverable.
  • 06AI is a teammate, not a shortcutAI accelerates the workflow when the inputs are good. We document prompts, guardrails, and review steps so AI output meets the same bar as human output.

How to navigate

  • SidebarThe left sidebar is the canonical map of the system. On smaller screens it collapses into the menu icon in the header.
  • SearchPress / or ⌘ K / Ctrl K to jump to any component, token, or guideline.
  • ThemeThe theme toggle in the header switches between light and dark. Your choice is remembered across visits, and the system honors your OS preference on first load.
  • Click to copyOn token pages, every swatch and token name is click-to-copy. The value lands on your clipboard ready to paste into code or Figma.

Where to start

Pick the path that matches what you are about to do.

See it workingOpen the Color SystemThe most complete reference page in the system today — brand palette, semantic tokens, theme comparison, and an interactive contrast checker.Onboard your rolePick your role guideTailored entry points for designers, engineers, product managers, content strategists, and QA.Contribute backHow to propose a changeThe intake, review, and release process for adding tokens, components, or patterns to the system.