Skip to main content
Graphite UI
Wave 4 · 22 governed components

One color.
A whole design system.

Pick a color. Graphite resolves eight ramps, thirty-two semantic roles and both themes from it, measures every pairing as it goes, and keeps the Figma kit and the code provably in step.

Get startedBrowse components

Accent

900800700600500source400300200100050

Secondary

900800700600500400300200100050

Neutral

900800700600500400300200100050

Neutral variant

900800700600500400300200100050

Select any swatch to copy its hex. The outlined stop is where your source color landed.

The components, live

Not a screenshot of a dashboard. These are the real component sets from the kit, rendering from the same tokens the rest of the page uses, so they repaint when the color above changes.

  • Button

    Contract 2.3.0
  • Tag

    Tag

    Contract 2.3.0

  • Toggle

    Contract 2.1.0
  • Optional helper text

    Text input

    Contract 2.0.0

  • Title

    Message

    Notification

    Contract 2.2.0

  • Progress bar label

    Optional helper text

    Progress bar

    Contract 1.2.0

  • Select

    Contract 2.0.0

  • Checkbox

    Contract 2.0.0

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. Three checks in CI then keep the result honest.

  • 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. Numbers are OKLab tones.

Make it yours in one control

The builder derives a full theme from any color, shows you the contrast report as it goes, and hands you CSS variables, JSON tokens or Figma variables at the end.

Read how theming works

Two ways in

Designers and developers consume the same system through different artefacts, and the site should not pretend otherwise.

For designers

The kit is the source of truth. Where it and a contract disagree, the kit wins.

Open the Figma Kit

For developers

Contracts are the written spec the code is checked against, and they are versioned.

See the code

Questions people actually ask

  • Twenty-two components carry a versioned contract and are checked against the kit on every build. The kit ships more than that, and anything without a contract is labelled ungoverned on its own page rather than left for you to find out.

  • No, but it is built on it today. The components style themselves from the --graphite-* tokens, and the engine also emits a Carbon compatibility layer so an existing Carbon build repaints without touching a component. Moving off Carbon is a tracked migration, not a rewrite.

  • 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.

  • The kit is canonical: where it and a contract disagree, the kit wins and the contract is corrected. Three checks in CI enforce it, reading committed snapshots of the kit rather than the network, so they run offline. Re-extracting a snapshot is still a manual step.

  • Start with the contract, not the code. It declares the roles and variables the component may touch, and drift-check then holds the implementation to it. Main is protected, so everything lands through a pull request with the governance job green.