Tokens
The complete list of what Graphite exposes as CSS variables. Color is generated in the browser from one source color; everything else is declared once in app/globals.scss and checked against the kit. Nothing below is typed into the page: the colors come from the engine and the rest is read from the stylesheet when the page is built.
Two layers
Graphite’s variables come from two places. Both are --graphite-*, and both are in the theme file.
- --graphite-* color
- Generated by the color engine from your source color, for light and dark. Names come from the engine’s own role keys, so the list cannot drift from what it produces.
- --graphite-* foundations
- Space, density, radius, breakpoints, motion and type, from the kit. They do not depend on the source color.
Color roles
Every role the engine resolves, with the ramp and tone it came from, in both themes. The theme on screen is marked active in the column head. How the roles are chosen is on Theming; the ramps are on Color.
--graphite-primaryprimary#4C2F93accent 40#BEB1FFaccent 80--graphite-on-primaryonPrimary#F8F7FFaccent 98#1A0044accent 20--graphite-primary-containerprimaryContainer#DDD9FFaccent 90#340B74accent 30--graphite-on-primary-containeronPrimaryContainer#040015accent 10#DDD9FFaccent 90--graphite-secondarysecondary#005542secondary 40#7DD1B6secondary 80--graphite-on-secondaryonSecondary#E7FFF6secondary 98#001C14secondary 20--graphite-secondary-containersecondaryContainer#9EF2D6secondary 90#00372Asecondary 30--graphite-on-secondary-containeronSecondaryContainer#000503secondary 10#9EF2D6secondary 90--graphite-surfacesurface#F8F8FCneutral 98#121215neutral 18.2--graphite-surface-elevatedsurfaceElevated#FFFFFFneutral 100#201F23neutral 24.2--graphite-on-surfaceonSurface#030305neutral 10#DEDDE2neutral 90--graphite-surface-variantsurfaceVariant#DEDCEAneutralVariant 90#2E2C37neutralVariant 30--graphite-on-surface-variantonSurfaceVariant#2E2C37neutralVariant 30#BDBCC9neutralVariant 80--graphite-outlineoutline#63626DneutralVariant 50#807E8BneutralVariant 60--graphite-backgroundbackground#F8F8FCneutral 98#121215neutral 18.2--graphite-on-backgroundonBackground#030305neutral 10#DEDDE2neutral 90--graphite-dangerdanger#880C06danger 40#FFA192danger 80--graphite-on-dangeronDanger#FFF6F5danger 98#330000danger 20--graphite-danger-containerdangerContainer#FFD2CAdanger 90#5D0000danger 30--graphite-on-danger-containeronDangerContainer#0E0000danger 10#FFD2CAdanger 90--graphite-warningwarning#733300warning 40#FFA570warning 80--graphite-on-warningonWarning#FFF7F2warning 98#280D00warning 20--graphite-warning-containerwarningContainer#FFD4BCwarning 90#4C1F00warning 30--graphite-on-warning-containeronWarningContainer#0A0100warning 10#FFD4BCwarning 90--graphite-successsuccess#00572Fsuccess 40#5ADB91success 80--graphite-on-successonSuccess#E9FFF0success 98#001C0Csuccess 20--graphite-success-containersuccessContainer#7DFCB0success 90#00381Dsuccess 30--graphite-on-success-containeronSuccessContainer#000501success 10#7DFCB0success 90--graphite-infoinfo#00478Ainfo 40#8FC1FFinfo 80--graphite-on-infoonInfo#F4F9FFinfo 98#001632info 20--graphite-info-containerinfoContainer#C8E1FFinfo 90#002D5Cinfo 30--graphite-on-info-containeronInfoContainer#00030Einfo 10#C8E1FFinfo 90Interaction states
The families that carry a full state set are primary, secondary, danger. States are tone steps on the family’s own ramp, not opacity overlays; disabled drops to the neutral ramp so it reads the same in every family. The focus ring and the scrim close the list.
--graphite-primary-hover#3D1B80accent 34#D0C9FFaccent 86--graphite-primary-pressed#2F016Daccent 28#E4E0FFaccent 92--graphite-primary-selected#3D1B80accent 34#D0C9FFaccent 86--graphite-primary-disabled#DEDDE2neutral 90#2E2D31neutral 30--graphite-primary-disabled-content#47474Bneutral 40#808084neutral 60--graphite-primary-focus#664DB4accent 50#A08AF7accent 70--graphite-secondary-hover#004333secondary 34#91E5C9secondary 86--graphite-secondary-pressed#003125secondary 28#A4F9DCsecondary 92--graphite-secondary-selected#004333secondary 34#91E5C9secondary 86--graphite-secondary-disabled#DEDDE2neutral 90#2E2D31neutral 30--graphite-secondary-disabled-content#47474Bneutral 40#808084neutral 60--graphite-secondary-focus#16745Csecondary 50#5DB197secondary 70--graphite-danger-hover#6F0100danger 34#FFBFB4danger 86--graphite-danger-pressed#540000danger 28#FFDBD5danger 92--graphite-danger-selected#6F0100danger 34#FFBFB4danger 86--graphite-danger-disabled#DEDDE2neutral 90#2E2D31neutral 30--graphite-danger-disabled-content#47474Bneutral 40#808084neutral 60--graphite-danger-focus#AA3428danger 50#F07463danger 70--graphite-focus#664DB4accent 50#A08AF7accent 70--graphite-scrimrgb(3 3 5 / 0.5)rgb(3 3 5 / 0.7)Elevation and outline ladders
Two short ladders the kit files beside the roles rather than among them. Elevation runs from the ground (00) through the resting layer (01) to hover (02) and pressed (03); in light, 01 equals the ground, because the ramp has no tone between 98 and 90. Outline strength runs from subtle, for decorative rules, to strong, for load-bearing edges such as a field’s bottom rule.
--graphite-elevation-00#F8F8FCneutral 98#121215neutral 18.2--graphite-elevation-01#F8F8FCneutral 98#2E2D31neutral 30--graphite-elevation-02#DEDDE2neutral 90#47474Bneutral 40--graphite-elevation-03#BDBDC1neutral 80#636367neutral 50--graphite-outline-subtle#DEDCEAneutralVariant 90#2E2C37neutralVariant 30--graphite-outline-strong#474651neutralVariant 40#9E9DAAneutralVariant 70Reading the variables on the page root…
Foundation tokens
101 variables in 9 groups, the same in both themes. Mobile restates 30 type values below 672px.
Space · 14
In rem. The suffix is Carbon’s step index, not a size: --graphite-space-02 is 4px, not 2px. More on this.
| Variable | Value | Preview |
|---|---|---|
| --graphite-space-00 | 0 · 0px | |
| --graphite-space-01 | 0.125rem · 2px | |
| --graphite-space-02 | 0.25rem · 4px | |
| --graphite-space-03 | 0.5rem · 8px | |
| --graphite-space-04 | 0.75rem · 12px | |
| --graphite-space-05 | 1rem · 16px | |
| --graphite-space-06 | 1.5rem · 24px | |
| --graphite-space-07 | 2rem · 32px | |
| --graphite-space-08 | 2.5rem · 40px | |
| --graphite-space-09 | 3rem · 48px | |
| --graphite-space-10 | 4rem · 64px | |
| --graphite-space-11 | 5rem · 80px | |
| --graphite-space-12 | 6rem · 96px | |
| --graphite-space-13 | 10rem · 160px |
Density · 3
Aliases onto the space scale, so components that bind here move together from one edit. More on this.
| Variable | Value |
|---|---|
| --graphite-density-compact | var(--graphite-space-03) |
| --graphite-density-default | var(--graphite-space-05) |
| --graphite-density-spacious | var(--graphite-space-06) |
Radius · 8
In px, and the suffix is the pixel value, deliberately unlike space. Graphite components take their corners from radius-none. More on this.
| Variable | Value | Preview |
|---|---|---|
| --graphite-radius-none | 0 | |
| --graphite-radius-2 | 2px | |
| --graphite-radius-4 | 4px | |
| --graphite-radius-6 | 6px | |
| --graphite-radius-8 | 8px | |
| --graphite-radius-16 | 16px | |
| --graphite-radius-20 | 20px | |
| --graphite-radius-full | 999px |
Breakpoint · 5
Reference values. A custom property cannot be used in a media query, so these are for reading from script; the @media rules carry their numbers literally. More on this.
| Variable | Value |
|---|---|
| --graphite-breakpoint-sm | 320px |
| --graphite-breakpoint-md | 672px |
| --graphite-breakpoint-lg | 1056px |
| --graphite-breakpoint-xl | 1312px |
| --graphite-breakpoint-max | 1584px |
Motion · 5
The site’s easing and durations, plus the indeterminate sweep Progress bar uses.
| Variable | Value |
|---|---|
| --graphite-motion-indeterminate | 1400ms |
| --graphite-motion-indeterminate-ease | linear |
| --graphite-motion-ease | cubic-bezier(0.16, 1, 0.3, 1) |
| --graphite-motion-fast | 120ms |
| --graphite-motion-base | 240ms |
Font family · 3
Three roles. font-1 and font-2 hold the same face today and have no fallback stack. More on this.
| Variable | Value | Preview |
|---|---|---|
| --graphite-font-1 | 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | Aa Gg 0123 |
| --graphite-font-2 | 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif | Aa Gg 0123 |
| --graphite-font-mono | 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace | Aa Gg 0123 |
Font weight · 4
The kit stores style names; the number is mapped once, here. More on this.
| Variable | Value |
|---|---|
| --graphite-text-weight-bold | 700 · Bold |
| --graphite-text-weight-medium | 500 · Medium |
| --graphite-text-weight-regular | 400 · Regular |
| --graphite-text-weight-semibold | 600 · SemiBold |
Shadow · 1
The kit’s menu shadow, under every overlay.
| Variable | Value |
|---|---|
| --graphite-shadow-overlay | 0 2px 6px rgb(0 0 0 / 0.3) |
Type steps · 58
Desktop values. The Mobile block restates only the steps that change. Each is shown set in its own step on Typography.
| Variable | Value |
|---|---|
| --graphite-text-body-1-size | 1.125rem · 18px |
| --graphite-text-body-1-line-height | 1.75rem · 28px |
| --graphite-text-body-2-size | 1rem · 16px |
| --graphite-text-body-2-line-height | 1.5rem · 24px |
| --graphite-text-body-3-size | 0.875rem · 14px |
| --graphite-text-body-3-line-height | 1.25rem · 20px |
| --graphite-text-caption-1-size | 0.75rem · 12px |
| --graphite-text-caption-1-line-height | 1rem · 16px |
| --graphite-text-caption-2-size | 0.75rem · 12px |
| --graphite-text-caption-2-line-height | 1rem · 16px |
| --graphite-text-code-1-size | 1rem · 16px |
| --graphite-text-code-1-line-height | 1.5rem · 24px |
| --graphite-text-code-2-size | 0.875rem · 14px |
| --graphite-text-code-2-line-height | 1.25rem · 20px |
| --graphite-text-code-3-size | 0.75rem · 12px |
| --graphite-text-code-3-line-height | 1rem · 16px |
| --graphite-text-component-button-1-size | 1rem · 16px |
| --graphite-text-component-button-1-line-height | 1.5rem · 24px |
| --graphite-text-component-button-2-size | 0.875rem · 14px |
| --graphite-text-component-button-2-line-height | 1.25rem · 20px |
| --graphite-text-component-button-3-size | 0.75rem · 12px |
| --graphite-text-component-button-3-line-height | 1rem · 16px |
| --graphite-text-component-input-1-size | 1rem · 16px |
| --graphite-text-component-input-1-line-height | 1.5rem · 24px |
| --graphite-text-component-input-2-size | 0.75rem · 12px |
| --graphite-text-component-input-2-line-height | 1rem · 16px |
| --graphite-text-component-input-3-size | 0.75rem · 12px |
| --graphite-text-component-input-3-line-height | 1rem · 16px |
| --graphite-text-component-table-1-size | 0.875rem · 14px |
| --graphite-text-component-table-1-line-height | 1.5rem · 24px |
| --graphite-text-component-tooltip-1-size | 0.75rem · 12px |
| --graphite-text-component-tooltip-1-line-height | 1rem · 16px |
| --graphite-text-display-1-size | 6rem · 96px |
| --graphite-text-display-1-line-height | 7.5rem · 120px |
| --graphite-text-footnote-1-size | 0.875rem · 14px |
| --graphite-text-footnote-1-line-height | 1.25rem · 20px |
| --graphite-text-heading-1-size | 4rem · 64px |
| --graphite-text-heading-1-line-height | 5rem · 80px |
| --graphite-text-heading-2-size | 3.5rem · 56px |
| --graphite-text-heading-2-line-height | 4.5rem · 72px |
| --graphite-text-heading-3-size | 3rem · 48px |
| --graphite-text-heading-3-line-height | 4rem · 64px |
| --graphite-text-heading-4-size | 2.5rem · 40px |
| --graphite-text-heading-4-line-height | 3rem · 48px |
| --graphite-text-heading-5-size | 2rem · 32px |
| --graphite-text-heading-5-line-height | 2.5rem · 40px |
| --graphite-text-heading-6-size | 1.5rem · 24px |
| --graphite-text-heading-6-line-height | 2rem · 32px |
| --graphite-text-title-1-size | 2rem · 32px |
| --graphite-text-title-1-line-height | 2.5rem · 40px |
| --graphite-text-title-2-size | 1.5rem · 24px |
| --graphite-text-title-2-line-height | 2rem · 32px |
| --graphite-text-title-3-size | 1.125rem · 18px |
| --graphite-text-title-3-line-height | 1.75rem · 28px |
| --graphite-text-title-4-size | 1rem · 16px |
| --graphite-text-title-4-line-height | 1.5rem · 24px |
| --graphite-text-title-5-size | 0.875rem · 14px |
| --graphite-text-title-5-line-height | 1.25rem · 20px |
Exporting
Create’s Get the code hands you the theme as CSS or JSON, from the engine’s own exporter, so what you take is what the site resolves. This excerpt is that exporter, run live for the current source.
:root, [data-theme="light"] {
--graphite-primary: #4c2f93;
--graphite-primary-hover: #3d1b80;
--graphite-primary-pressed: #2f016d;
--graphite-primary-selected: #3d1b80;
--graphite-primary-disabled: #dedde2;
--graphite-primary-disabled-content: #47474b;
--graphite-primary-focus: #664db4;
…
}The colors come in 3 blocks (:root, [data-theme="light"], :root:not([data-theme="light"]) and [data-theme="dark"]), 58 declarations each: every role, state, ladder step and the scrim, under the same --graphite-* names the components read. The middle block sits inside @media (prefers-color-scheme: dark), so a page that sets no data-theme follows the visitor’s OS. The JSON carries the same values, with the ramp and tone each one came from, under source, primitives and semantic, with each theme split into tokens, contrast, states and ladders.
Next steps
- Create
Pick a source color and take the theme with Get the code.
- Theming
How one source color becomes the ramps and roles listed here.
- Typography
The type steps, set in their own sizes.