Stop rebuilding. Start solving.
Every common UI piece is already designed, accessible, and ready to drop in. The system gives you back the hours you used to spend on buttons and inputs — so you can spend them on the problems only design can solve.
Why this helps you
Skip the busywork
Buttons, inputs, modals, navigation — already designed, already accessible, already approved. Pull them from the library and move on.
Stay in lockstep
When the system updates, your work updates with it. No manual rework when the brand color shifts or a button radius changes.
Defend your decisions
Every pattern has documented rationale. Reference it in critique — you’re not arguing aesthetics, you’re citing the standard.
How to start
Five concrete moves you can make today — each links to the page that gets you unstuck fastest.
- Open Brand
Anchor in the brand
Color, typography, logo usage, and imagery — the visual rules that make a JM Family product look like one.
- Open Color
Pull tokens straight from Color System
Click any swatch to copy the token name. Use the contrast checker to validate any pairing before review.
- Open Iconography
Use the icon library
Browse the Lucide starter set on the Iconography page; full catalog at
lucide.dev/icons. - Open Imagery
Lead with associate photography
Real moments outperform stock every time. The Imagery page shows what we should aim for and how to source it.
- Open Accessibility
Check accessibility before review
Run the pre-merge checklist. Most accessibility findings come from the same handful of misses; this page keeps you ahead of them.
Where to go next
The pages most often referenced by designers. Bookmark them — you’ll be back.
- Color System
Brand palette, semantic tokens, theme preview, and a contrast checker.
- Spacing
The 4px scale and the principles for picking the right value.
- Components
Buttons, inputs, modals — the production-ready building blocks.
- Imagery
How to choose and treat photographs across product surfaces.
- Accessibility
WCAG 2.2 AA standards baked into the system.
Found a gap? Help us close it.
If a pattern you need isn't in the system yet, you're probably not the only designer hitting that wall. Document the use case and propose it — that's how the system grows.