Open-sourcing our design system

Why open-source it

Our design system started as an internal tool — the components, tokens, and patterns we use to build Ion. Over the last year, it's matured into something we're proud of. So we're open-sourcing it.

The reasons are mostly selfish:

• Recruiting. Engineers who care about craft want to see your code. A public design system is a recruiting magnet.
• Quality. Knowing the world can read your code makes you write better code.
• Ecosystem. If your design system is good, other teams adopt it. That's free QA and free feature requests.

What's included

The open-source release includes:

• 60+ React components built on Radix UI.
• A complete token system (colors, typography, spacing, motion) with light + dark mode.
• Documentation site with live examples.
• Figma library matching the code 1:1.

What we learned

Tokens before components

We spent the first 3 months on tokens alone — getting the color system, typography scale, and spacing right before building a single component. It felt slow at the time, but it meant every component we built afterwards was consistent by default.

Accessibility is a feature, not a chore

We treated WCAG AA as the floor, not the ceiling. Every component is keyboard-navigable, screen-reader-tested, and respects prefers-reduced-motion. This isn't just ethical — it's good product sense. Users who can't use your product because of an accessibility bug are users you've lost forever.

Document everything

Undocumented components are useless components. Every component in the system has a doc page with usage guidelines, do's and don'ts, and live examples. The docs took as long to write as the components took to build.

Where to find it

The design system is at github.com/ion/design-system. MIT licensed. We'd love your feedback.