Skip to main content
Graphite UI
36 React components

One color.
A whole theme.

Pick a color. Graphite builds the scales, roles and both themes, checking contrast as it goes.

Get startedBrowse components

Accent

900800700600500source400300200100050

Secondary

900800700600500400300200100050

Neutral

900800700600500400300200100050

Neutral variant

900800700600500400300200100050

Four of the eight ramps; the status ramps are danger, warning, success and info. Select a swatch to copy its hex. The outlined stop is your source color.

Create a theme

The components, live

The real components, built from the Figma kit and painted by the same tokens as this page, so they repaint when the color above changes. Each badge is a contract version: a contract is the component's written spec, and automated checks compare the code against it. Glossary

One decision, resolved all the way down

The engine does the work Figma cannot: it derives, it measures, and it does both themes at once. Automated checks then compare each component to its contract and each token to the Figma kit.

  • Any hex. It is resolved in OKLab and sampled at fixed tone stops, so the steps read as evenly spaced at any hue.

1 / 6

#5e44aathe one input

900800700600500400300200100050

The outlined stop is the source. Labels are steps, 900 darkest to 050 lightest.

Make it yours from one color

The builder derives a full theme from any color, holds it to your contrast target as it goes, and hands you CSS variables or JSON tokens at the end.

Open the theme builderRead how theming works

Two ways in

Designers work from the Figma kit. Developers work from React components. Both read the same tokens.

For designers

Design in the Figma kit, a published library with the same tokens as the code. Shown: the Accordion's color tokens, live.

Open the Figma Kit

For developers

Install each component as source you own, with one command. Shown: the Accordion, installed, styled and used.

Browse the components

Questions people actually ask

Yes, for the theme and the 36 components: they install today with the shadcn CLI, and automated checks compare each one to its contract on every change. The Figma kit is a published library. Graphite is at v0.1.0, so expect changes. There is no npm package.

Yes. The code is MIT licensed and free for personal and commercial use. Built with React 19, Next.js 16 and SCSS modules. The Graphite UI and Simorka Designs names and logos, including the SD System mark in the footer, are not covered by the licence.

No. Graphite’s components, theme file and theme provider do not use Carbon. The Figma kit descends from IBM’s Carbon Design System, and this site’s own chrome still runs on Carbon, mapped to Graphite’s colors through 59 --cds-* variables while it moves off.

That is the only input. Any hex is resolved in OKLab and sampled at fixed tone stops to build the ramps, the roles and both themes. One caveat worth knowing: a source that sits on a status hue collapses the two, so a red brand color resolves primary and danger to nearly the same value.

Automated checks compare each component to its contract, and each token to a saved copy of the Figma kit. Where the kit and a contract disagree, the kit wins and the contract is updated. Refreshing that copy from Figma is a manual step.

Start with the contract, not the code: it lists what the component may use, and the checks compare the code against it. Every change lands through a pull request with the checks passing. The contributing guide on GitHub has the details.