Glossary
The words Graphite uses, in plain language.
The system
How the design file, the code and the checks are named.
- Kit
- The Figma file: every component and token, as designed. It is the source of truth.
- Engine
- The code that turns your source color into ramps, roles and both themes.
- Contract
- A component’s written spec. It lists what the component may use and do, and it is versioned.
- Governed
- A component with a contract. Automated checks hold its code to that contract.
- Ungoverned
- A component in the kit with no contract. It is labelled so you know before you use it.
- Token
- A named design value, such as a color or a spacing step, stored as a CSS variable.
Color
In the order you meet the terms, from one color to a full theme.
- Source color
- The one color you choose. Everything else is calculated from it.
- Hue
- Which color it is: red, green, blue. Changing hue turns a red into an orange.
- Chroma
- How intense the color is. High chroma is vivid; zero chroma is gray.
- Tone
- How light or dark, from 0 (black) to 100 (white). Tone 40 is dark; tone 90 is pale.
- Ramp
- One hue from dark to light: the same color at ten tones, like a paint strip.
- Step
- A named stop on a ramp, from 900 (darkest) to 050 (lightest). Each stands for a tone: 900 is tone 10, 800 is 20, on to 050 at 98. Your source color replaces the nearest step on accent.
- OKLab
- The color model the math runs in. Equal steps in its numbers look like equal steps to the eye.
- Primitive
- A raw color on a ramp, with no job attached. Useful to look at, never to build with.
- Role
- A named color with a job, such as page background or button fill. You build with these.
- On-color
- The text or icon color for on top of another. onSurface goes on surface, and is guaranteed readable there.
- Container
- A quieter version of a color, for filling an area rather than drawing the eye.
- Theme
- Light or dark. Same role names in both; different values behind them.
- Contrast ratio
- How different two colors are in lightness, written like 4.5:1. Higher is easier to read.
- AA / AAA
- Two bars from the WCAG standard. AA is the common minimum; AAA is stricter.