JM Family Design System
For qa

Know exactly what 'good' looks like.

The system documents states, behaviors, and accessibility requirements per component — so testing isn’t a guessing game. Find issues at the pattern level and you fix them everywhere they appear, not just one product at a time.

Why this helps you

Documented states, every time

Each component lists its default, hover, focus, active, disabled, loading, and error states. Build your test plan from the documentation.

A shared definition of quality

When the system says a button must meet 4.5:1 contrast, you have an authoritative source. Fewer “by design” debates, more clean closes.

Catch issues at the pattern level

A bug in color.action.primary shows up everywhere a primary button lives. Filing it once at the system level fixes a hundred surfaces.

How to start

Five concrete moves you can make today — each links to the page that gets you unstuck fastest.

  1. Use the Accessibility checklist as your baseline

    The pre-merge checklist on the Accessibility page covers the issues that surface most often. Run through it on every PR you review.

    Open Checklist
  2. Reference component pages for documented states

    Each component lists its expected states and behaviors. Use them as the spec for your test plan.

    Open Components
  3. File pattern-level bugs, not just product-level

    When a bug recurs across three products, the root cause is probably in the system. File it there too — fixes propagate.

    Open Governance
  4. Watch for brand drift

    Logo Usage and Imagery pages set the bar. Custom logo crops, stretched marks, or off-brand stock photos are bugs.

    Open Logo
  5. Verify changes against the changelog

    When the system updates, check the changelog for what moved. Regressions are easier to spot when you know what's new.

    Open Changelog

Where to go next

The pages most often referenced by qa. Bookmark them — you’ll be back.

Find a recurring bug? Promote it.

A bug in three products isn’t three bugs. File it at the system level, link the products that exhibit it, and the fix lands everywhere at once.