Introduction
Graphite UI turns one source color into a full theme: eight color scales, thirty-two named roles, and light and dark themes, with contrast checked on the text and UI pairings. Thirty-six components are built on those roles. Each has a written spec, called a contract, that automated checks hold the code to.
New to ramps, roles and tones? See the glossary.
What you can use today
Three parts. Use any of them on its own.
Theme Usable today
Your color as one CSS file, light and dark. Import it once and you are themed; it needs no Graphite code. One command adds it, the Tailwind file and a components.json (your hex in place of 0f766e). Or pick the color in Create and download the file.
npx shadcn@latest add https://www.graphite-ui.com/r/init.json https://www.graphite-ui.com/r/theme/0f766e.json https://www.graphite-ui.com/r/tailwind.jsonFigma kit Usable today
Every component, drawn in light and dark, as a published library. Open the kit and add it to your team libraries. It is drawn in the default color: there is no way yet to bring a theme from Create into it.
Components Usable today
All thirty-six governed components install with the shadcn CLI, with the files each one uses. Set up the project first, as above. Quick start walks through it.
npx shadcn@latest add https://www.graphite-ui.com/r/button.jsonWhat Graphite is
A color engine, a component library that reads what it emits, and a Figma kit both are held to.
You give it a hex. The engine resolves it in OKLab and samples eight ramps at ten fixed tone stops each. Two follow the source (accent, and a secondary set 120° round the hue wheel), two are neutrals tinted by it, and four carry status (danger, warning, success, info), pinned to their own hue so red still reads as danger whatever you pick.
From the ramps it assigns thirty-two roles such as primary, surface and onPrimaryContainer, once for each theme, and measures eighteen foreground and background pairings against the contrast target you choose (AA or AAA). The three interactive families also get hover, pressed, selected, disabled and focus states, taken as tone steps on the same ramp rather than opacity overlays.
The result lands on the page as --graphite-* CSS variables, and every governed component styles itself from those and nothing else. Change the source and the whole site repaints, including this page.
What it is built from
Three parts. Where they disagree, the kit outranks the contracts, and the contracts outrank the code.
| Engine | lib/color.js, plain JavaScript with no dependencies. components/theme-provider.tsx runs it on every change of source, theme or contrast target and writes the variables onto <html>. |
|---|---|
| Figma kit | The Graphite UI Kit, and it is canonical: where the kit and a contract disagree, the kit wins and the contract is corrected. |
| Components | Thirty-six governed components in components/ui, each with a versioned contract in docs/contracts that declares the roles and variables it may use. |
How it is governed
Written contracts, checked in CI.
Every governed component has a written contract, and automated checks compare each component to its contract and each token to the kit on every change. You do not need any of it to use Graphite.
Updates and help
Take an update. Each component page shows its contract version. When it changes, run the component’s install command again. The CLI asks before it overwrites a file, so if you edited the component, compare before you accept. Releases list what changed.
Ask a question in GitHub Discussions.
Report a problem in GitHub Issues. For a security issue, use private reporting instead (see the security policy).
What is here
Where to go next, by what you came to do.
- Quick start
Pick a color, use a component, style with the variables, take the tokens out.
- Theming
How one source becomes eight ramps and thirty-two roles, and how the roles are meant to be used.
- Accessibility
What the contrast checks guarantee, and the known gaps they do not cover.
- Contribute
Running Graphite locally, the rules and checks, and how it is kept in step with the kit.
- Foundations
Color, typography, spacing, radius, layout and the full token list.
- Components
All thirty-six governed components, each with its contract version beside it.
- Create
Build a theme against a live preview, then take it away as one CSS file.
- Tokens
Every variable the system defines, generated and static.