# Color

Colors named by the job they do, each with a light and a dark value, so one stylesheet serves both themes.

Status: experimental. Changes with theme.

## Guidelines

### Purpose

The color vocabulary every component and every site built on the system draws from. Each semantic color answers a role question — what a page sits on, what body text is, what a control's edge is, what a brand button looks like when pressed — and resolves to a different raw shade in the light and dark themes. Components never know which shade they end up painting; they only know the role, which is what lets one stylesheet serve both themes without a line of theme-specific code.

### How it is structured

Two layers, and only the top one is ever consumed.

Underneath sit the ramps: one grey, and a family for each hue the roles need, each a run of steps from lightest to darkest, plus see-through ramps of black, white, the brand red and the greys for tints and shades that must work over anything. Every family shares one contrast ladder: a step number means the same contrast against white in every family, so a role that needs more contrast moves one step in any family and no in-between shade is invented. The steps were worked out in OKLCH, so a family keeps its hue as it gets lighter or darker, and are stored as hex, the value that ships and is measured.

On top sit the roles, grouped by what they are for:

- **Surfaces** — the things content sits on: the canvas of the page, the default surface, a raised surface above it, a sunken one below it, the brand fill, the inverse fill for dark-on-light moments, and see-through overlays.
- **Text and icons** — a hierarchy from default through subtle to subtlest, plus disabled, brand, accent, the inverse and on-brand variants, and a family of link states with their underlines.
- **Borders** — subtle and strong separation, control edges with hover, disabled and selected states, focus edges for controls and for fields, the brand and inverse edges, and the edge pairs that draw the highlight and shade lines of a divider.
- **Actions** — one group per button kind, each carrying its own background, foreground and border with hover, pressed and disabled states. This is where interactive color lives, and a component that is a button reads from here rather than from surfaces and text.
- **Feedback** — success, information, warning and danger, each with a solid surface, a subtle surface, text for each, and a border for each.
- **Shadows and the scrim** — the tints that elevation shadows are built from, and the darkening layer behind modal surfaces.
- **Data** — the colors charts draw their data in, grouped by the job they do: a series color for a chart with one series, with a stronger step under the pointer; categorical colors for series that are different things, in a fixed order; a sequential scale of one hue from less to more; a diverging scale of two hues out from a gray middle; a reference line for a target or a limit; and three status colors, good, warning and bad, for a mark that shows a real state. The sequential scale runs the other way in the dark theme, so more always stands out most. The data colors come in two palettes, the default one and cockpit (Context behavior).

The colors are grouped by role: surface, text and icon, border, action and feedback roles, with primitives beneath. A role belongs to the group that describes *what the color is doing*, not what it looks like. Shadow tints are colors because elevation is composed from them and they must follow the theme.

### Tiers

The ramps are primitive. The roles are semantic. Only semantic colors reach CSS at all; the build does not emit a primitive color as a custom property, so a component cannot reference one even by accident. This is deliberate: a component painted with a ramp step looks right in one theme and wrong in the other, and nothing catches it until someone switches.

A new semantic color is warranted when a role appears in more than one component and no existing role describes it. It aliases a ramp step; it never carries its own literal. The cockpit palette's shades are the one exception: they are tuned together for charts, each lighter or darker by a measured amount in OKLCH, and no ramp step holds them, so they are written as they are. They reach CSS only through the data colors. A new ramp step changes the ladder every family shares, so it is added in Figma to the whole ladder or not at all.

### Context behavior

Every semantic color has one name and two values. The theme is chosen by the person reading the page — through an attribute on the page element, or by their system preference when the page has not chosen — and each role re-points to a different ramp step. Most roles flip in some way; a few, such as text on the brand fill, are the same shade in both themes because the surface they sit on does not change.

The data colors also follow the data palette, which the project chooses once for the whole page. The default palette is bright and clear, made of the ramps' own steps. Cockpit is calmer: every hue at about the same lightness and a low, even strength, the way an instrument panel is lit, with its own shades worked out in OKLCH for the charts rather than taken from the ramps. Choose cockpit for a dashboard or a tool that people read for long stretches, where a page of bright charts tires the eye and full-strength hues beside pale ones look like a toy; keep the default where a chart must stand out on a page that is mostly words. The palette is set with `data-palette="cockpit"` on the page's root element, and a palette set on any other element does nothing. Each palette has a light and a dark value for every data color, so the theme still applies, and only the data colors change: every other role is the same in both palettes.

Density and text size do not touch color.

### Usage rules

#### Do

- Reference a semantic color for every color expression in component CSS: backgrounds, text, borders, shadows, scrims.
- Pair a foreground with the surface it was designed for. Body text goes on the surface roles; the on-brand text goes on the brand fill; a button's foreground goes on that same button's background. The feedback text roles say in their name which feedback surface they belong on.
- Use the subtle feedback surface with its own text role for low-noise status: chips, inline notes, callouts. The solid feedback surfaces are strong fills.
- Use a see-through overlay or the scrim when something must darken or frost whatever is behind it, because those roles are tints and work over any content.
- Treat the feedback roles as real state — this succeeded, this is dangerous — not as a taxonomy for categories.
- Draw a chart's data in the data colors only, and give its series the categorical colors in their order: the first series the first color, the second the second.
- Keep to three hues in one chart where you can. A fourth series often reads better as a second chart, or gathered into "Others".
- Draw an order, such as sizes or ranks, as steps of the sequential scale, one hue from less to more, never as different hues.
- Use the status data colors only for a real state that a mark shows: on target or over a limit, healthy or failing. A label or an icon beside the mark says the state too.
- Choose one palette for the whole project and set it once on the root element.
- Gather the series past the last categorical color into one, such as "Others", in the gray of a muted legend swatch.
- Tell series apart by more than color: a label on the chart, a marker on a line, a legend, and a table of the values. Leave a thin gap in the background color between marks that touch.

#### Don't

- Reference a ramp step from a component. There is no custom property for it, so this cannot compile; the conformance checker also rejects it in any site built on the system.
- Write a hex, rgb or hsl value anywhere outside the token source. The conformance checker rejects it.
- Reach for a surface role to paint a button, or a text role to paint a button's label. The action group exists so that buttons can be retuned without moving every surface.
- Put text on a solid feedback surface without checking that pairing in both themes.
- Use a shadow tint as a border or a text color. They are calibrated as shadow ingredients.
- Check the theme attribute in a stylesheet to choose between two colors. Use a semantic role, which already carries both values.
- Choose a surface role by importance, or give a component a higher surface than the one it visibly sits on. The surface roles go by height: canvas is the page, default sits on it, raised sits on that, and sunken is a well cut into a surface. A card on the page is raised; a code block inside a card is sunken. The elevation shadows are tuned to these steps.
- Color a link in running text with the accent text role. Links use the link roles, which carry their own pressed and disabled states and a separate underline color. The accent text is for emphasis that is not a link.
- Cover the whole page with any role but the scrim. It is the only one meant to sit over the whole page.
- Cycle the categorical colors, or make up a color for a fifth series. A repeated color says two series are one.
- Draw a chart's series in the feedback or status colors, or a state in a series color. The status data colors mean good, warning and bad; the series colors mean only which series.
- Use the status data colors outside a chart. Badges, banners, icons and text that say a state take the feedback colors, which are stronger and pair with their own text.
- Mix the two palettes on one page, or try to set a palette on one chart. The palette is the page's.
- Put a value or a label on a mark in the mark's color. Text takes the text roles, on the chart's background.

## Contrast

249 pairs. Light: 229 pass, 20 fall short. Dark: 216 pass, 33 fall short. Light cockpit: 226 pass, 23 fall short. Dark cockpit: 217 pass, 32 fall short.

| Color | On | Needs | Light | Dark | Light cockpit | Dark cockpit | Where it is used |
|---|---|---|---|---|---|---|---|
| `text.default` | `surface.canvas` | 4.5:1 | 12.85:1 passes | 15.66:1 passes | 12.85:1 passes | 15.66:1 passes | Titles, values and body text across the components |
| `text.default` | `surface.default` | 4.5:1 | 14.08:1 passes | 14.58:1 passes | 14.08:1 passes | 14.58:1 passes | Titles, values and body text across the components |
| `text.default` | `surface.raised` | 4.5:1 | 14.72:1 passes | 12.85:1 passes | 14.72:1 passes | 12.85:1 passes | Titles, values and body text across the components |
| `text.default` | `surface.sunken` | 4.5:1 | 11.83:1 passes | 16.47:1 passes | 11.83:1 passes | 16.47:1 passes | Titles, values and body text across the components |
| `text.subtle` | `surface.canvas` | 4.5:1 | 6.30:1 passes | 7.51:1 passes | 6.30:1 passes | 7.51:1 passes | Descriptions, labels and links at rest in navigation |
| `text.subtle` | `surface.default` | 4.5:1 | 6.90:1 passes | 6.99:1 passes | 6.90:1 passes | 6.99:1 passes | Descriptions, labels and links at rest in navigation |
| `text.subtle` | `surface.raised` | 4.5:1 | 7.22:1 passes | 6.16:1 passes | 7.22:1 passes | 6.16:1 passes | Descriptions, labels and links at rest in navigation |
| `text.subtle` | `surface.sunken` | 4.5:1 | 5.80:1 passes | 7.90:1 passes | 5.80:1 passes | 7.90:1 passes | Descriptions, labels and links at rest in navigation |
| `text.subtlest` | `surface.canvas` | 4.5:1 | 4.60:1 passes | 5.07:1 passes | 4.60:1 passes | 5.07:1 passes | Placeholders, captions and key hints. Placeholder text is not exempt. A tree view row's count |
| `text.subtlest` | `surface.default` | 4.5:1 | 5.04:1 passes | 4.72:1 passes | 5.04:1 passes | 4.72:1 passes | Placeholders, captions and key hints. Placeholder text is not exempt. A tree view row's count |
| `text.subtlest` | `surface.raised` | 4.5:1 | 5.27:1 passes | 4.16:1 falls short | 5.27:1 passes | 4.16:1 falls short | Placeholders, captions and key hints. Placeholder text is not exempt. A tree view row's count |
| `text.subtlest` | `surface.sunken` | 4.5:1 | 4.23:1 falls short | 5.33:1 passes | 4.23:1 falls short | 5.33:1 passes | Placeholders, captions and key hints. Placeholder text is not exempt. A tree view row's count |
| `text.brand` | `surface.canvas` | 4.5:1 | 4.83:1 passes | 5.06:1 passes | 4.83:1 passes | 5.06:1 passes | The card eyebrow at rest, on every card surface the well's sunken one included |
| `text.brand` | `surface.default` | 4.5:1 | 5.30:1 passes | 4.71:1 passes | 5.30:1 passes | 4.71:1 passes | The card eyebrow at rest, on every card surface the well's sunken one included |
| `text.brand` | `surface.raised` | 4.5:1 | 5.53:1 passes | 4.15:1 falls short | 5.53:1 passes | 4.15:1 falls short | The card eyebrow at rest, on every card surface the well's sunken one included |
| `text.brand` | `surface.sunken` | 4.5:1 | 4.45:1 falls short | 5.32:1 passes | 4.45:1 falls short | 5.32:1 passes | The card eyebrow at rest, on every card surface the well's sunken one included |
| `text.link` | `surface.canvas` | 4.5:1 | 12.85:1 passes | 15.66:1 passes | 12.85:1 passes | 15.66:1 passes | Links in running text |
| `text.link` | `surface.default` | 4.5:1 | 14.08:1 passes | 14.58:1 passes | 14.08:1 passes | 14.58:1 passes | Links in running text |
| `text.link` | `surface.raised` | 4.5:1 | 14.72:1 passes | 12.85:1 passes | 14.72:1 passes | 12.85:1 passes | Links in running text |
| `text.link-hover` | `surface.canvas` | 4.5:1 | 15.66:1 passes | 17.17:1 passes | 15.66:1 passes | 17.17:1 passes | Links while hovered; hovered navigation items, tabs, segments and sidebar items |
| `text.link-hover` | `surface.default` | 4.5:1 | 17.17:1 passes | 15.98:1 passes | 17.17:1 passes | 15.98:1 passes | Links while hovered; hovered navigation items, tabs, segments and sidebar items |
| `text.link-hover` | `surface.raised` | 4.5:1 | 17.95:1 passes | 14.08:1 passes | 17.95:1 passes | 14.08:1 passes | Links while hovered; hovered navigation items, tabs, segments and sidebar items |
| `text.default` | `surface.selected` | 4.5:1 | 10.87:1 passes | 13.09:1 passes | 10.87:1 passes | 13.09:1 passes | The current sidebar item, an open group's item and the current link in a sidebar flyout: the bolder label on the see-through selected fill. A chosen option in a selectable list: its title on the same fill. A tree view's chosen row: its bolder label on the same fill |
| `text.subtle` | `surface.selected` | 4.5:1 | 5.33:1 passes | 6.28:1 passes | 5.33:1 passes | 6.28:1 passes | A chosen option in a selectable list: its quiet line on the see-through selected fill |
| `text.link-pressed` | `surface.canvas` | 4.5:1 | 9.18:1 passes | 11.67:1 passes | 9.18:1 passes | 11.67:1 passes | Links while pressed |
| `text.link-pressed` | `surface.default` | 4.5:1 | 10.06:1 passes | 10.86:1 passes | 10.06:1 passes | 10.86:1 passes | Links while pressed |
| `text.link-pressed` | `surface.raised` | 4.5:1 | 10.52:1 passes | 9.57:1 passes | 10.52:1 passes | 9.57:1 passes | Links while pressed |
| `text.link-underline` | `surface.canvas` | 3:1 | 1.44:1 falls short | 1.67:1 falls short | 1.44:1 falls short | 1.67:1 falls short | The line under a link at rest, which tells a link in running text, or words that can be pressed, from the words around it. It is quiet on purpose and falls short of the ratio; the link's words, stronger than the paragraph around them, mark it too |
| `text.link-underline` | `surface.default` | 3:1 | 1.45:1 falls short | 1.71:1 falls short | 1.45:1 falls short | 1.71:1 falls short | The line under a link at rest, which tells a link in running text, or words that can be pressed, from the words around it. It is quiet on purpose and falls short of the ratio; the link's words, stronger than the paragraph around them, mark it too |
| `text.link-underline` | `surface.raised` | 3:1 | 1.45:1 falls short | 1.73:1 falls short | 1.45:1 falls short | 1.73:1 falls short | The line under a link at rest, which tells a link in running text, or words that can be pressed, from the words around it. It is quiet on purpose and falls short of the ratio; the link's words, stronger than the paragraph around them, mark it too |
| `text.link-underline` | `surface.overlay` | 3:1 | 1.45:1 falls short | 1.71:1 falls short | 1.45:1 falls short | 1.71:1 falls short | The line under a link in a popover's text. It is quiet on purpose and falls short of the ratio; the link's words, stronger than the paragraph around them, mark it too |
| `text.inverse` | `surface.inverse` | 4.5:1 | 12.38:1 passes | 12.85:1 passes | 12.38:1 passes | 12.85:1 passes | Inverse tooltips, default avatars, the tick in a checked checkbox and a line chart's marked value |
| `text.on-brand` | `surface.brand` | 4.5:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | Initials on a brand avatar, text on brand tags |
| `text.default` | `surface.overlay` | 4.5:1 | 15.38:1 passes | 10.81:1 passes | 15.38:1 passes | 10.81:1 passes | Dropdown items and the popover's title, on the overlay panel, and an item under the pointer or keyboard focus on its hover fill; a calendar's month and days in the date picker's panel. A tree view's row under the pointer: its label on the hover fill |
| `text.default` | `surface.hover` | 4.5:1 | 10.03:1 passes | 11.64:1 passes | 10.03:1 passes | 11.64:1 passes | Dropdown items and the popover's title, on the overlay panel, and an item under the pointer or keyboard focus on its hover fill; a calendar's month and days in the date picker's panel. A tree view's row under the pointer: its label on the hover fill |
| `text.subtle` | `surface.overlay` | 4.5:1 | 7.54:1 passes | 5.18:1 passes | 7.54:1 passes | 5.18:1 passes | The popover's description, body and helper text, a combobox list's no results and loading rows, and a calendar's weekday names in the date picker's panel, on the overlay panel |
| `text.subtlest` | `surface.overlay` | 4.5:1 | 5.50:1 passes | 3.50:1 falls short | 5.50:1 passes | 3.50:1 falls short | Dropdown group labels and icons, and the popover's close cross, on the overlay panel |
| `text.default` | `surface.neutral-subtle` | 4.5:1 | 10.87:1 passes | 13.09:1 passes | 10.87:1 passes | 13.09:1 passes | Default badges: the label on the see-through gray. A filled table's sorted heading and the words in its foot |
| `text.subtle` | `surface.neutral-subtle` | 4.5:1 | 5.33:1 passes | 6.28:1 passes | 5.33:1 passes | 6.28:1 passes | Default tags: the label on the see-through gray. A ruler's layout state names on the shaded stretches of its band. A filled table's headings and arrows, and a range pagination's words in its foot |
| `action.ghost.foreground` | `surface.neutral-subtle` | 4.5:1 | 9.14:1 passes | 9.75:1 passes | 9.14:1 passes | 9.75:1 passes | A filled table: the ghost filter and info buttons in its heading, and the pagination's page buttons in its foot |
| `text.subtlest` | `surface.neutral-subtle` | 4.5:1 | 3.89:1 falls short | 4.24:1 falls short | 3.89:1 falls short | 4.24:1 falls short | A filled table's foot: the pagination's gap between page numbers |
| `text.default` | `feedback.info.surface-subtle` | 4.5:1 | 12.88:1 passes | 12.56:1 passes | 12.88:1 passes | 12.56:1 passes | A highlighted table row: its values on the info tint |
| `text.subtle` | `feedback.info.surface-subtle` | 4.5:1 | 6.31:1 passes | 6.02:1 passes | 6.31:1 passes | 6.02:1 passes | A highlighted table row: a value's description on the tint, one step darker than elsewhere |
| `text.default` | `feedback.danger.surface-subtle` | 4.5:1 | 12.82:1 passes | 12.54:1 passes | 12.82:1 passes | 12.54:1 passes | The error summary's intro line, on its danger tint |
| `text.default` | `action.default.background-pressed` | 4.5:1 | 9.57:1 passes | 6.30:1 passes | 9.57:1 passes | 6.30:1 passes | A chosen table row, or the current one: its values and links on the row's fill |
| `text.default` | `action.ghost.background-hover` | 4.5:1 | 10.03:1 passes | 11.64:1 passes | 10.03:1 passes | 11.64:1 passes | A list row that can be pressed, under the pointer and pressed: its title on the row's fill. A calendar day under the pointer: its figure on the hover fill. A stepper's step that can be gone back to, under the pointer and pressed: its name on the step's fill |
| `text.default` | `action.ghost.background-pressed` | 4.5:1 | 9.57:1 passes | 10.81:1 passes | 9.57:1 passes | 10.81:1 passes | A list row that can be pressed, under the pointer and pressed: its title on the row's fill. A calendar day under the pointer: its figure on the hover fill. A stepper's step that can be gone back to, under the pointer and pressed: its name on the step's fill |
| `text.subtle` | `action.ghost.background-hover` | 4.5:1 | 4.92:1 passes | 5.58:1 passes | 4.92:1 passes | 5.58:1 passes | A list row that can be pressed, under the pointer and pressed: its quiet line on the row's fill. A stepper's step that can be gone back to, under the pointer and pressed: its status line on the step's fill |
| `text.subtle` | `action.ghost.background-pressed` | 4.5:1 | 4.69:1 passes | 5.18:1 passes | 4.69:1 passes | 5.18:1 passes | A list row that can be pressed, under the pointer and pressed: its quiet line on the row's fill. A stepper's step that can be gone back to, under the pointer and pressed: its status line on the step's fill |
| `feedback.danger.text-on-subtle` | `action.ghost.background-hover` | 4.5:1 | 4.91:1 passes | 8.72:1 passes | 4.91:1 passes | 8.72:1 passes | A stepper's step with an error, under the pointer and pressed: what is wrong, on the step's fill |
| `feedback.danger.text-on-subtle` | `action.ghost.background-pressed` | 4.5:1 | 4.69:1 passes | 8.09:1 passes | 4.69:1 passes | 8.09:1 passes | A stepper's step with an error, under the pointer and pressed: what is wrong, on the step's fill |
| `text.subtle` | `action.default.background-pressed` | 4.5:1 | 4.69:1 passes | 3.02:1 falls short | 4.69:1 passes | 3.02:1 falls short | A chosen table row, or the current one: a value's description on the row's fill, one step darker than elsewhere |
| `text.on-media` | `surface.scrim` | 4.5:1 | 9.72:1 passes | 9.72:1 passes | 9.72:1 passes | 9.72:1 passes | A card with its picture behind: the title, eyebrow and text on the dark band at its foot, over the brightest and the darkest picture |
| `action.brand.foreground` | `action.brand.background` | 4.5:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | Brand buttons and chips: the label on the fill, at rest, hovered and pressed; on a chip also the tick of a selected one and the focus ring of its remove button. The chosen calendar day: its figure on the fill, at rest and hovered. A stepper's current step: its number on the brand mark |
| `action.brand.foreground` | `action.brand.background-hover` | 4.5:1 | 7.21:1 passes | 7.21:1 passes | 7.21:1 passes | 7.21:1 passes | Brand buttons and chips: the label on the fill, at rest, hovered and pressed; on a chip also the tick of a selected one and the focus ring of its remove button. The chosen calendar day: its figure on the fill, at rest and hovered. A stepper's current step: its number on the brand mark |
| `action.brand.foreground` | `action.brand.background-pressed` | 4.5:1 | 10.52:1 passes | 10.52:1 passes | 10.52:1 passes | 10.52:1 passes | Brand buttons and chips: the label on the fill, at rest, hovered and pressed; on a chip also the tick of a selected one and the focus ring of its remove button. The chosen calendar day: its figure on the fill, at rest and hovered. A stepper's current step: its number on the brand mark |
| `action.secondary.foreground` | `action.secondary.background` | 4.5:1 | 8.43:1 passes | 9.75:1 passes | 8.43:1 passes | 9.75:1 passes | Secondary buttons: the label on the fill, at rest, hovered and pressed |
| `action.secondary.foreground` | `action.secondary.background-hover` | 4.5:1 | 7.71:1 passes | 8.68:1 passes | 7.71:1 passes | 8.68:1 passes | Secondary buttons: the label on the fill, at rest, hovered and pressed |
| `action.secondary.foreground` | `action.secondary.background-pressed` | 4.5:1 | 7.02:1 passes | 7.68:1 passes | 7.02:1 passes | 7.68:1 passes | Secondary buttons: the label on the fill, at rest, hovered and pressed |
| `action.inverse.foreground` | `action.inverse.background` | 4.5:1 | 12.38:1 passes | 14.08:1 passes | 12.38:1 passes | 14.08:1 passes | Inverse chips: the label on the fill, at rest, hovered and pressed, the tick of a selected one and the focus ring of the remove button |
| `action.inverse.foreground` | `action.inverse.background-hover` | 4.5:1 | 14.72:1 passes | 12.85:1 passes | 14.72:1 passes | 12.85:1 passes | Inverse chips: the label on the fill, at rest, hovered and pressed, the tick of a selected one and the focus ring of the remove button |
| `action.inverse.foreground` | `action.inverse.background-pressed` | 4.5:1 | 16.70:1 passes | 9.57:1 passes | 16.70:1 passes | 9.57:1 passes | Inverse chips: the label on the fill, at rest, hovered and pressed, the tick of a selected one and the focus ring of the remove button |
| `action.default.foreground` | `surface.neutral-subtle` | 4.5:1 | 9.14:1 passes | 13.09:1 passes | 9.14:1 passes | 13.09:1 passes | Default chips: the label on the see-through gray, hovered and pressed, and the tick of a selected one |
| `action.default.foreground` | `surface.hover` | 4.5:1 | 8.43:1 passes | 11.64:1 passes | 8.43:1 passes | 11.64:1 passes | Default chips: the label on the see-through gray, hovered and pressed, and the tick of a selected one |
| `action.default.foreground` | `action.default.background-pressed` | 4.5:1 | 8.05:1 passes | 6.30:1 passes | 8.05:1 passes | 6.30:1 passes | Default chips: the label on the see-through gray, hovered and pressed, and the tick of a selected one |
| `action.danger.foreground` | `action.danger.background` | 4.5:1 | 6.88:1 passes | 9.39:1 passes | 6.88:1 passes | 9.39:1 passes | Destructive buttons: the label on the fill at rest |
| `action.danger.foreground-hover` | `action.danger.background-hover` | 4.5:1 | 7.49:1 passes | 9.17:1 passes | 7.49:1 passes | 9.17:1 passes | Destructive buttons: the hover label on the fill, hovered and pressed |
| `action.danger.foreground-hover` | `action.danger.background-pressed` | 4.5:1 | 5.07:1 passes | 6.28:1 passes | 5.07:1 passes | 6.28:1 passes | Destructive buttons: the hover label on the fill, hovered and pressed |
| `action.outline.foreground` | `surface.default` | 4.5:1 | 11.85:1 passes | 10.86:1 passes | 11.85:1 passes | 10.86:1 passes | Outline buttons and chips: the label on the page, in a drawer or a popover, hovered and pressed, and the tick of a selected chip |
| `action.outline.foreground` | `surface.canvas` | 4.5:1 | 10.81:1 passes | 11.67:1 passes | 10.81:1 passes | 11.67:1 passes | Outline buttons and chips: the label on the page, in a drawer or a popover, hovered and pressed, and the tick of a selected chip |
| `action.outline.foreground` | `surface.raised` | 4.5:1 | 12.38:1 passes | 9.57:1 passes | 12.38:1 passes | 9.57:1 passes | Outline buttons and chips: the label on the page, in a drawer or a popover, hovered and pressed, and the tick of a selected chip |
| `action.outline.foreground` | `surface.overlay` | 4.5:1 | 12.94:1 passes | 8.05:1 passes | 12.94:1 passes | 8.05:1 passes | Outline buttons and chips: the label on the page, in a drawer or a popover, hovered and pressed, and the tick of a selected chip |
| `action.outline.foreground` | `action.outline.background-hover` | 4.5:1 | 9.14:1 passes | 10.75:1 passes | 9.14:1 passes | 10.75:1 passes | Outline buttons and chips: the label on the page, in a drawer or a popover, hovered and pressed, and the tick of a selected chip |
| `action.outline.foreground` | `action.outline.background-pressed` | 4.5:1 | 8.05:1 passes | 8.05:1 passes | 8.05:1 passes | 8.05:1 passes | Outline buttons and chips: the label on the page, in a drawer or a popover, hovered and pressed, and the tick of a selected chip |
| `action.ghost.foreground` | `surface.default` | 4.5:1 | 11.85:1 passes | 10.86:1 passes | 11.85:1 passes | 10.86:1 passes | Ghost buttons and icon-only buttons: the label or icon on the page or in a drawer, hovered and pressed |
| `action.ghost.foreground` | `surface.canvas` | 4.5:1 | 10.81:1 passes | 11.67:1 passes | 10.81:1 passes | 11.67:1 passes | Ghost buttons and icon-only buttons: the label or icon on the page or in a drawer, hovered and pressed |
| `action.ghost.foreground` | `surface.raised` | 4.5:1 | 12.38:1 passes | 9.57:1 passes | 12.38:1 passes | 9.57:1 passes | Ghost buttons and icon-only buttons: the label or icon on the page or in a drawer, hovered and pressed |
| `action.ghost.foreground` | `action.ghost.background-hover` | 4.5:1 | 8.43:1 passes | 8.68:1 passes | 8.43:1 passes | 8.68:1 passes | Ghost buttons and icon-only buttons: the label or icon on the page or in a drawer, hovered and pressed |
| `action.ghost.foreground` | `action.ghost.background-pressed` | 4.5:1 | 8.05:1 passes | 8.05:1 passes | 8.05:1 passes | 8.05:1 passes | Ghost buttons and icon-only buttons: the label or icon on the page or in a drawer, hovered and pressed |
| `action.outline.foreground` | `surface.sunken` | 4.5:1 | 9.95:1 passes | 12.27:1 passes | 9.95:1 passes | 12.27:1 passes | A toggle button that is on: its label or icon on the sunken fill |
| `feedback.success.text-on-surface` | `feedback.success.surface` | 4.5:1 | 5.28:1 passes | 5.28:1 passes | 5.28:1 passes | 5.28:1 passes | Flat success badges |
| `feedback.success.text-on-subtle` | `feedback.success.surface-subtle` | 4.5:1 | 6.88:1 passes | 9.39:1 passes | 6.88:1 passes | 9.39:1 passes | Success alerts, toasts, tags and soft badges |
| `feedback.info.text-on-surface` | `feedback.info.surface` | 4.5:1 | 5.25:1 passes | 5.25:1 passes | 5.25:1 passes | 5.25:1 passes | Flat info badges |
| `feedback.info.text-on-subtle` | `feedback.info.surface-subtle` | 4.5:1 | 6.30:1 passes | 9.40:1 passes | 6.30:1 passes | 9.40:1 passes | Info alerts, toasts, tags and soft badges |
| `feedback.warning.text-on-surface` | `feedback.warning.surface` | 4.5:1 | 5.25:1 passes | 5.25:1 passes | 5.25:1 passes | 5.25:1 passes | Flat warning badges |
| `feedback.warning.text-on-subtle` | `feedback.warning.surface-subtle` | 4.5:1 | 6.31:1 passes | 9.37:1 passes | 6.31:1 passes | 9.37:1 passes | Warning alerts, toasts, tags and soft badges |
| `feedback.danger.text-on-surface` | `feedback.danger.surface` | 4.5:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | Flat danger badges. A stepper's step with an error: the warning sign on its red mark |
| `feedback.danger.text-on-subtle` | `feedback.danger.surface-subtle` | 4.5:1 | 6.28:1 passes | 9.39:1 passes | 6.28:1 passes | 9.39:1 passes | Danger alerts, toasts, tags and soft badges. The error summary: its heading and its mistakes |
| `feedback.danger.text-on-subtle` | `surface.default` | 4.5:1 | 6.90:1 passes | 10.92:1 passes | 6.90:1 passes | 10.92:1 passes | A failed progress bar: what failed and Try again; a field message of the error type, under a field or a field group or in a file upload; a file row that failed or was not added: its reason; a stepper's step with an error: what is wrong; a diff stat: the lines removed; on the page |
| `feedback.danger.text-on-subtle` | `surface.canvas` | 4.5:1 | 6.29:1 passes | 11.73:1 passes | 6.29:1 passes | 11.73:1 passes | A failed progress bar: what failed and Try again; a field message of the error type, under a field or a field group or in a file upload; a file row that failed or was not added: its reason; a stepper's step with an error: what is wrong; a diff stat: the lines removed; on the page |
| `feedback.success.text-on-subtle` | `surface.default` | 4.5:1 | 6.87:1 passes | 10.88:1 passes | 6.87:1 passes | 10.88:1 passes | A file row that has gone through: the word Uploaded, on the row and on the page. A diff stat: the lines added. The goal row block: On track |
| `feedback.success.text-on-subtle` | `surface.canvas` | 4.5:1 | 6.27:1 passes | 11.69:1 passes | 6.27:1 passes | 11.69:1 passes | A file row that has gone through: the word Uploaded, on the row and on the page. A diff stat: the lines added. The goal row block: On track |
| `feedback.warning.text-on-subtle` | `surface.default` | 4.5:1 | 6.89:1 passes | 10.89:1 passes | 6.89:1 passes | 10.89:1 passes | The goal row block: At risk, on the page |
| `feedback.warning.text-on-subtle` | `surface.canvas` | 4.5:1 | 6.29:1 passes | 11.70:1 passes | 6.29:1 passes | 11.70:1 passes | The goal row block: At risk, on the page |
| `feedback.danger.text-on-subtle` | `surface.overlay` | 4.5:1 | 7.53:1 passes | 8.09:1 passes | 7.53:1 passes | 8.09:1 passes | A combobox list that could not load: what went wrong and what to do, on the overlay panel |
| `text.link` | `feedback.success.surface-subtle` | 4.5:1 | 14.10:1 passes | 12.58:1 passes | 14.10:1 passes | 12.58:1 passes | Banners in a feedback tone: the link on the tone's surface |
| `text.link` | `feedback.info.surface-subtle` | 4.5:1 | 12.88:1 passes | 12.56:1 passes | 12.88:1 passes | 12.56:1 passes | Banners in a feedback tone: the link on the tone's surface. A highlighted table row: a link in a cell on the tint |
| `text.link` | `feedback.warning.surface-subtle` | 4.5:1 | 12.89:1 passes | 12.54:1 passes | 12.89:1 passes | 12.54:1 passes | Banners in a feedback tone: the link on the tone's surface |
| `text.link` | `feedback.danger.surface-subtle` | 4.5:1 | 12.82:1 passes | 12.54:1 passes | 12.82:1 passes | 12.54:1 passes | Banners in a feedback tone: the link on the tone's surface |
| `action.ghost.foreground` | `surface.sunken` | 4.5:1 | 9.95:1 passes | 12.27:1 passes | 9.95:1 passes | 12.27:1 passes | Ghost icon buttons inside a field: the password field's eye, the number field's minus and plus, an input's trailing action, on the sunken well. A ghost toggle button that is on, a toolbar's tool: its icon or label on the sunken fill |
| `action.ghost.foreground` | `feedback.success.surface-subtle` | 4.5:1 | 11.86:1 passes | 9.37:1 passes | 11.86:1 passes | 9.37:1 passes | Banners in a feedback tone: the dismiss cross on the tone's surface |
| `action.ghost.foreground` | `feedback.info.surface-subtle` | 4.5:1 | 10.83:1 passes | 9.36:1 passes | 10.83:1 passes | 9.36:1 passes | Banners in a feedback tone: the dismiss cross on the tone's surface |
| `action.ghost.foreground` | `feedback.warning.surface-subtle` | 4.5:1 | 10.84:1 passes | 9.35:1 passes | 10.84:1 passes | 9.35:1 passes | Banners in a feedback tone: the dismiss cross on the tone's surface |
| `action.ghost.foreground` | `feedback.danger.surface-subtle` | 4.5:1 | 10.79:1 passes | 9.35:1 passes | 10.79:1 passes | 9.35:1 passes | Banners in a feedback tone: the dismiss cross on the tone's surface |
| `border.focus` | `surface.canvas` | 3:1 | 4.83:1 passes | 5.06:1 passes | 4.83:1 passes | 5.06:1 passes | The focus ring around buttons, links and controls, against the page; and the ring inside the command palette's search box, on the panel |
| `border.focus` | `surface.default` | 3:1 | 5.30:1 passes | 4.71:1 passes | 5.30:1 passes | 4.71:1 passes | The focus ring around buttons, links and controls, against the page; and the ring inside the command palette's search box, on the panel |
| `border.focus` | `surface.raised` | 3:1 | 5.53:1 passes | 4.15:1 passes | 5.53:1 passes | 4.15:1 passes | The focus ring around buttons, links and controls, against the page; and the ring inside the command palette's search box, on the panel |
| `border.focus` | `surface.overlay` | 3:1 | 5.78:1 passes | 3.49:1 passes | 5.78:1 passes | 3.49:1 passes | The focus ring of a dropdown item, and inside the select's highlighted choice and the combobox's active option, on the overlay panel and on the hover fill; around a calendar day in the date picker's panel |
| `border.focus` | `surface.hover` | 3:1 | 3.77:1 passes | 3.76:1 passes | 3.77:1 passes | 3.76:1 passes | The focus ring of a dropdown item, and inside the select's highlighted choice and the combobox's active option, on the overlay panel and on the hover fill; around a calendar day in the date picker's panel |
| `border.focus` | `feedback.success.surface-subtle` | 3:1 | 5.30:1 passes | 4.06:1 passes | 5.30:1 passes | 4.06:1 passes | The focus ring of a dismiss or remove button, or a link, on an alert, toast, banner or tag in a feedback tone, and of a mistake's link in the error summary |
| `border.focus` | `feedback.info.surface-subtle` | 3:1 | 4.84:1 passes | 4.06:1 passes | 4.84:1 passes | 4.06:1 passes | The focus ring of a dismiss or remove button, or a link, on an alert, toast, banner or tag in a feedback tone, and of a mistake's link in the error summary |
| `border.focus` | `feedback.warning.surface-subtle` | 3:1 | 4.85:1 passes | 4.05:1 passes | 4.85:1 passes | 4.05:1 passes | The focus ring of a dismiss or remove button, or a link, on an alert, toast, banner or tag in a feedback tone, and of a mistake's link in the error summary |
| `border.focus` | `feedback.danger.surface-subtle` | 3:1 | 4.82:1 passes | 4.05:1 passes | 4.82:1 passes | 4.05:1 passes | The focus ring of a dismiss or remove button, or a link, on an alert, toast, banner or tag in a feedback tone, and of a mistake's link in the error summary |
| `border.focus` | `surface.neutral-subtle` | 3:1 | 4.09:1 passes | 4.23:1 passes | 4.09:1 passes | 4.23:1 passes | The focus ring of the remove button on a default chip or tag |
| `border.focus-inverse` | `surface.brand` | 3:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | The focus ring of a brand tag's remove button, on the tag |
| `border.focus-field` | `surface.sunken` | 3:1 | 5.79:1 passes | 12.35:1 passes | 5.79:1 passes | 12.35:1 passes | A focused field: its border against the field inside it |
| `border.focus-field` | `surface.default` | 3:1 | 6.89:1 passes | 10.93:1 passes | 6.89:1 passes | 10.93:1 passes | A focused field: its border against the page around it |
| `feedback.danger.border` | `surface.sunken` | 3:1 | 2.85:1 falls short | 5.32:1 passes | 2.85:1 falls short | 5.32:1 passes | A field, checkbox, radio or file upload in error: its red edge or ring, the sign of the error besides the message, against the field or the drop zone inside it and the page around it |
| `feedback.danger.border` | `surface.default` | 3:1 | 3.39:1 passes | 4.71:1 passes | 3.39:1 passes | 4.71:1 passes | A field, checkbox, radio or file upload in error: its red edge or ring, the sign of the error besides the message, against the field or the drop zone inside it and the page around it |
| `feedback.danger.border` | `surface.canvas` | 3:1 | 3.09:1 passes | 5.06:1 passes | 3.09:1 passes | 5.06:1 passes | A field, checkbox, radio or file upload in error: its red edge or ring, the sign of the error besides the message, against the field or the drop zone inside it and the page around it |
| `surface.sunken` | `surface.default` | 3:1 | 1.09:1 falls short | 1.09:1 falls short | 1.09:1 falls short | 1.09:1 falls short | Inputs, selects and search fields: the well that shows where to type, against the page. The command palette's highlighted command: the sunken fill that marks it, against the panel; the command's bolder label marks it too. A toggle button that is on: the sunken fill that shows it, against the page; its rim and the shadow along its top mark it too. |
| `surface.sunken` | `surface.raised` | 3:1 | 1.09:1 falls short | 1.18:1 falls short | 1.09:1 falls short | 1.18:1 falls short | A ghost toggle button that is on, a toolbar's tool: the sunken fill that shows it, against the raised bar; its rim and the shadow along its top mark it too, and it says it is pressed |
| `border.control` | `surface.default` | 3:1 | 3.38:1 passes | 4.72:1 passes | 3.38:1 passes | 4.72:1 passes | An unchecked checkbox or radio: its edge is all that shows it is there. A standard slider: the gray line past the value, which shows where the range runs, against the page |
| `border.control` | `surface.canvas` | 3:1 | 3.09:1 passes | 5.07:1 passes | 3.09:1 passes | 5.07:1 passes | An unchecked checkbox or radio: its edge is all that shows it is there. A standard slider: the gray line past the value, which shows where the range runs, against the page |
| `feedback.info.border` | `surface.default` | 3:1 | 3.39:1 passes | 4.71:1 passes | 3.39:1 passes | 4.71:1 passes | The diagram node block, chosen: its thicker edge, which marks the box a reader is reading about, on the box and the page |
| `feedback.info.border` | `surface.sunken` | 3:1 | 2.85:1 falls short | 5.32:1 passes | 2.85:1 falls short | 5.32:1 passes | The diagram node block, chosen: its thicker edge, which marks the box a reader is reading about, on the box and the page |
| `feedback.info.border` | `surface.canvas` | 3:1 | 3.10:1 passes | 5.06:1 passes | 3.10:1 passes | 5.06:1 passes | The diagram node block, chosen: its thicker edge, which marks the box a reader is reading about, on the box and the page |
| `border.strong` | `surface.default` | 3:1 | 2.29:1 falls short | 1.59:1 falls short | 2.29:1 falls short | 1.59:1 falls short | An unchecked subtle checkbox: its edge against the page. A drop zone: its dashed edge, which shows where files can be dropped, against the zone inside it and the page around it. A stepper's step not started: the ring around its number |
| `border.strong` | `surface.canvas` | 3:1 | 2.09:1 falls short | 1.71:1 falls short | 2.09:1 falls short | 1.71:1 falls short | An unchecked subtle checkbox: its edge against the page. A drop zone: its dashed edge, which shows where files can be dropped, against the zone inside it and the page around it. A stepper's step not started: the ring around its number |
| `surface.inverse` | `surface.default` | 3:1 | 11.85:1 passes | 14.58:1 passes | 11.85:1 passes | 14.58:1 passes | A checked checkbox: the filled shape that shows the state |
| `surface.inverse` | `surface.canvas` | 3:1 | 10.81:1 passes | 15.66:1 passes | 10.81:1 passes | 15.66:1 passes | A checked checkbox: the filled shape that shows the state |
| `action.inverse.background` | `surface.default` | 3:1 | 11.85:1 passes | 15.98:1 passes | 11.85:1 passes | 15.98:1 passes | A chosen radio: the filled mark that shows the choice |
| `action.inverse.background` | `surface.canvas` | 3:1 | 10.81:1 passes | 17.17:1 passes | 10.81:1 passes | 17.17:1 passes | A chosen radio: the filled mark that shows the choice |
| `surface.brand` | `surface.default` | 3:1 | 5.30:1 passes | 3.02:1 passes | 5.30:1 passes | 3.02:1 passes | A switch that is on: the filled track. A standard slider: the round thumb, which marks the value, against the page beside its thin line |
| `surface.brand` | `surface.canvas` | 3:1 | 4.83:1 passes | 3.24:1 passes | 4.83:1 passes | 3.24:1 passes | A switch that is on: the filled track. A standard slider: the round thumb, which marks the value, against the page beside its thin line |
| `surface.inverse` | `surface.track-subtle` | 3:1 | 8.05:1 passes | 10.81:1 passes | 8.05:1 passes | 10.81:1 passes | A progress bar's default fill: the amount, against the empty track it runs along |
| `surface.brand` | `surface.track-subtle` | 3:1 | 3.60:1 passes | 2.24:1 falls short | 3.60:1 passes | 2.24:1 falls short | A progress bar's brand fill: the amount, against the empty track it runs along |
| `feedback.success.surface` | `surface.track-subtle` | 3:1 | 3.43:1 passes | 2.35:1 falls short | 3.43:1 passes | 2.35:1 falls short | A progress bar's success fill: the amount, against the empty track it runs along |
| `feedback.warning.surface` | `surface.track-subtle` | 3:1 | 3.42:1 passes | 2.36:1 falls short | 3.42:1 passes | 2.36:1 falls short | A progress bar's warning fill: the amount, against the empty track it runs along |
| `feedback.danger.surface` | `surface.track-subtle` | 3:1 | 3.60:1 passes | 2.24:1 falls short | 3.60:1 passes | 2.24:1 falls short | A progress bar's danger fill: the amount, against the empty track it runs along |
| `surface.inverse` | `surface.track` | 3:1 | 3.50:1 passes | 6.30:1 passes | 3.50:1 passes | 6.30:1 passes | A capacity meter's taken places against its free ones: the filled bars beside the empty bars |
| `data.series` | `surface.track-subtle` | 3:1 | 3.42:1 passes | 5.16:1 passes | 2.68:1 falls short | 4.35:1 passes | A meter's series fill and a progress ring's done part: the amount, against the empty track it runs along |
| `feedback.success.icon` | `surface.track-subtle` | 3:1 | 3.43:1 passes | 5.17:1 passes | 3.43:1 passes | 5.17:1 passes | A meter's success fill: the amount, against the empty track it runs along |
| `feedback.warning.icon` | `surface.track-subtle` | 3:1 | 3.42:1 passes | 5.18:1 passes | 3.42:1 passes | 5.18:1 passes | A meter's warning fill: the amount, against the empty track it runs along |
| `feedback.danger.icon` | `surface.track-subtle` | 3:1 | 3.60:1 passes | 5.16:1 passes | 3.60:1 passes | 5.16:1 passes | A meter's danger fill: the amount, against the empty track it runs along |
| `surface.track` | `surface.default` | 3:1 | 3.38:1 passes | 2.31:1 falls short | 3.38:1 passes | 2.31:1 falls short | A switch that is off: its filled track is what shows it is there |
| `surface.track` | `surface.canvas` | 3:1 | 3.09:1 passes | 2.49:1 falls short | 3.09:1 passes | 2.49:1 falls short | A switch that is off: its filled track is what shows it is there |
| `surface.thumb` | `surface.track` | 3:1 | 3.54:1 passes | 7.22:1 passes | 3.54:1 passes | 7.22:1 passes | A switch's thumb, whose place shows on or off, against the track it sits on |
| `surface.thumb` | `surface.brand` | 3:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | A switch's thumb, whose place shows on or off, against the track it sits on |
| `border.control` | `surface.sunken` | 3:1 | 2.84:1 falls short | 5.33:1 passes | 2.84:1 falls short | 5.33:1 passes | A slider: the gray lines on their band, which show where the range runs |
| `border.brand` | `surface.sunken` | 3:1 | 4.45:1 passes | 3.41:1 passes | 4.45:1 passes | 3.41:1 passes | A slider: the red lines up to the value, on their band. A drop zone with files held over it: its brand edge against the sunken surface inside it |
| `border.brand` | `surface.default` | 3:1 | 5.30:1 passes | 3.02:1 passes | 5.30:1 passes | 3.02:1 passes | A chosen choice card: its brand edge, which shows the choice beside the filled mark, against the card inside it and the page around it. A selected card: its brand edge, against each card surface inside it and the page around it. Today in a calendar: the ring inside its mark, on the page. A drop zone with files held over it: its brand edge against the page around it. A splitter being dragged: its brand line, twice as thick, against the page. A chosen tab in the line look: its brand underline, or its side bar in a vertical bar, which is how the choice shows. A pinned table row: its brand edge at the start, beside the pin |
| `border.brand` | `surface.canvas` | 3:1 | 4.83:1 passes | 3.24:1 passes | 4.83:1 passes | 3.24:1 passes | A chosen choice card: its brand edge, which shows the choice beside the filled mark, against the card inside it and the page around it. A selected card: its brand edge, against each card surface inside it and the page around it. Today in a calendar: the ring inside its mark, on the page. A drop zone with files held over it: its brand edge against the page around it. A splitter being dragged: its brand line, twice as thick, against the page. A chosen tab in the line look: its brand underline, or its side bar in a vertical bar, which is how the choice shows. A pinned table row: its brand edge at the start, beside the pin |
| `border.brand` | `surface.raised` | 3:1 | 5.53:1 passes | 2.66:1 falls short | 5.53:1 passes | 2.66:1 falls short | A chosen choice card: its brand edge, which shows the choice beside the filled mark, against the card inside it and the page around it. A selected card: its brand edge, against each card surface inside it and the page around it. Today in a calendar: the ring inside its mark, on the page. A drop zone with files held over it: its brand edge against the page around it. A splitter being dragged: its brand line, twice as thick, against the page. A chosen tab in the line look: its brand underline, or its side bar in a vertical bar, which is how the choice shows. A pinned table row: its brand edge at the start, beside the pin |
| `border.brand` | `surface.sunken` | 3:1 | 4.45:1 passes | 3.41:1 passes | 4.45:1 passes | 3.41:1 passes | A chosen choice card: its brand edge, which shows the choice beside the filled mark, against the card inside it and the page around it. A selected card: its brand edge, against each card surface inside it and the page around it. Today in a calendar: the ring inside its mark, on the page. A drop zone with files held over it: its brand edge against the page around it. A splitter being dragged: its brand line, twice as thick, against the page. A chosen tab in the line look: its brand underline, or its side bar in a vertical bar, which is how the choice shows. A pinned table row: its brand edge at the start, beside the pin |
| `border.brand` | `surface.overlay` | 3:1 | 5.78:1 passes | 2.24:1 falls short | 5.78:1 passes | 2.24:1 falls short | Today in a calendar: the ring inside its mark, in the date picker's panel |
| `action.brand.background` | `surface.overlay` | 3:1 | 5.78:1 passes | 2.24:1 falls short | 5.78:1 passes | 2.24:1 falls short | The chosen calendar day: the filled mark that shows the choice, in the date picker's panel and on the page. A standard slider's red line up to the value, and a fill slider's red part, against the page. A stepper's current step: the brand mark that shows it, against the page |
| `action.brand.background` | `surface.default` | 3:1 | 5.30:1 passes | 3.02:1 passes | 5.30:1 passes | 3.02:1 passes | The chosen calendar day: the filled mark that shows the choice, in the date picker's panel and on the page. A standard slider's red line up to the value, and a fill slider's red part, against the page. A stepper's current step: the brand mark that shows it, against the page |
| `action.brand.background` | `surface.canvas` | 3:1 | 4.83:1 passes | 3.24:1 passes | 4.83:1 passes | 3.24:1 passes | The chosen calendar day: the filled mark that shows the choice, in the date picker's panel and on the page. A standard slider's red line up to the value, and a fill slider's red part, against the page. A stepper's current step: the brand mark that shows it, against the page |
| `action.brand.background` | `surface.neutral-subtle` | 3:1 | 4.09:1 passes | 2.71:1 falls short | 4.09:1 passes | 2.71:1 falls short | A fill slider: the red part up to the value, against the empty bar beside it. A ruler's handle, the width now, on a shaded stretch of its band |
| `action.brand.background` | `surface.sunken` | 3:1 | 4.45:1 passes | 3.41:1 passes | 4.45:1 passes | 3.41:1 passes | A curve editor's handles, their brand ring, on the sunken plot; a ruler's handle, the width now, on the plain stretch of its band |
| `surface.neutral-subtle` | `surface.default` | 3:1 | 1.19:1 falls short | 1.21:1 falls short | 1.19:1 falls short | 1.21:1 falls short | A fill slider: the empty bar past the value, which shows where the range runs, against the page |
| `surface.neutral-subtle` | `surface.canvas` | 3:1 | 1.18:1 falls short | 1.20:1 falls short | 1.18:1 falls short | 1.20:1 falls short | A fill slider: the empty bar past the value, which shows where the range runs, against the page |
| `action.brand.foreground` | `action.brand.background` | 3:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | A fill slider: the thin handle, which marks the value, on the red part around it |
| `surface.brand` | `surface.sunken` | 3:1 | 4.45:1 passes | 3.41:1 passes | 4.45:1 passes | 3.41:1 passes | A slider: the thumb, which marks the value, against the band it crosses |
| `icon.default` | `surface.canvas` | 3:1 | 12.85:1 passes | 15.66:1 passes | 12.85:1 passes | 15.66:1 passes | A spinner: the turning ring, which shows that something is being worked on, against the page; its words say what |
| `icon.default` | `surface.default` | 3:1 | 14.08:1 passes | 14.58:1 passes | 14.08:1 passes | 14.58:1 passes | A spinner: the turning ring, which shows that something is being worked on, against the page; its words say what |
| `icon.default` | `surface.raised` | 3:1 | 14.72:1 passes | 12.85:1 passes | 14.72:1 passes | 12.85:1 passes | A spinner: the turning ring, which shows that something is being worked on, against the page; its words say what |
| `icon.default` | `surface.selected` | 3:1 | 10.87:1 passes | 13.09:1 passes | 10.87:1 passes | 13.09:1 passes | A chosen option in a selectable list: the tick that shows it is chosen, on the option's see-through selected fill |
| `surface.default` | `surface.canvas` | 3:1 | 1.10:1 falls short | 1.07:1 falls short | 1.10:1 falls short | 1.07:1 falls short | The current row of a navigation list: the default fill that marks it, against the page; its rim and its bolder title mark it too |
| `icon.subtle` | `surface.canvas` | 3:1 | 6.30:1 passes | 11.67:1 passes | 6.30:1 passes | 11.67:1 passes | A subtle spinner: the turning ring against the page, as in a file row that is uploading. A splitter's grip: the dots that show where to take hold, on the raised pill |
| `icon.subtle` | `surface.default` | 3:1 | 6.90:1 passes | 10.86:1 passes | 6.90:1 passes | 10.86:1 passes | A subtle spinner: the turning ring against the page, as in a file row that is uploading. A splitter's grip: the dots that show where to take hold, on the raised pill |
| `icon.subtle` | `surface.raised` | 3:1 | 7.22:1 passes | 9.57:1 passes | 7.22:1 passes | 9.57:1 passes | A subtle spinner: the turning ring against the page, as in a file row that is uploading. A splitter's grip: the dots that show where to take hold, on the raised pill |
| `icon.subtle` | `surface.overlay` | 3:1 | 7.54:1 passes | 8.05:1 passes | 7.54:1 passes | 8.05:1 passes | A combobox list that is loading: the subtle spinner's ring on the overlay panel; its words say what |
| `surface.raised` | `surface.canvas` | 3:1 | 1.15:1 falls short | 1.22:1 falls short | 1.15:1 falls short | 1.22:1 falls short | The chosen tab, the chosen segment of a segmented control and the chosen theme in the theme switch: the raised pill against the bar, which is how the choice shows |
| `surface.canvas` | `surface.default` | 3:1 | 1.10:1 falls short | 1.07:1 falls short | 1.10:1 falls short | 1.07:1 falls short | The current navigation item, pressed into the bar: the canvas fill that marks it, against the bar |
| `action.ghost.background-pressed` | `surface.default` | 3:1 | 1.47:1 falls short | 1.35:1 falls short | 1.47:1 falls short | 1.35:1 falls short | The current page of a pagination: its pressed fill against the page |
| `icon.default` | `action.secondary.background` | 3:1 | 10.03:1 passes | 13.09:1 passes | 10.03:1 passes | 13.09:1 passes | A stepper's finished step: the check that shows it, on its gray mark |
| `feedback.danger.surface` | `surface.default` | 3:1 | 5.30:1 passes | 3.02:1 passes | 5.30:1 passes | 3.02:1 passes | A stepper's step with an error: the red mark around the warning sign, against the page |
| `feedback.danger.surface` | `surface.canvas` | 3:1 | 4.83:1 passes | 3.24:1 passes | 4.83:1 passes | 3.24:1 passes | A stepper's step with an error: the red mark around the warning sign, against the page |
| `code.keyword` | `surface.raised` | 4.5:1 | 5.28:1 passes | 6.14:1 passes | 5.28:1 passes | 6.14:1 passes | A code block's keywords, colored by kind on its well |
| `code.declaration` | `surface.raised` | 4.5:1 | 5.25:1 passes | 6.13:1 passes | 5.25:1 passes | 6.13:1 passes | A code block's declarations, colored by kind on its well |
| `code.string` | `surface.raised` | 4.5:1 | 5.25:1 passes | 6.16:1 passes | 5.25:1 passes | 6.16:1 passes | A code block's strings, colored by kind on its well |
| `code.number` | `surface.raised` | 4.5:1 | 5.28:1 passes | 9.59:1 passes | 5.28:1 passes | 9.59:1 passes | A code block's numbers, colored by kind on its well |
| `code.function` | `surface.raised` | 4.5:1 | 5.28:1 passes | 9.63:1 passes | 5.28:1 passes | 9.63:1 passes | A code block's functions, colored by kind on its well |
| `code.type` | `surface.raised` | 4.5:1 | 5.25:1 passes | 6.13:1 passes | 5.25:1 passes | 6.13:1 passes | A code block's types, colored by kind on its well |
| `code.tag` | `surface.raised` | 4.5:1 | 5.25:1 passes | 6.13:1 passes | 5.25:1 passes | 6.13:1 passes | A code block's tags, colored by kind on its well |
| `code.property` | `surface.raised` | 4.5:1 | 10.57:1 passes | 9.61:1 passes | 10.57:1 passes | 9.61:1 passes | A code block's propertys, colored by kind on its well |
| `code.comment` | `surface.raised` | 4.5:1 | 5.27:1 passes | 6.16:1 passes | 5.27:1 passes | 6.16:1 passes | A code block's comments, colored by kind on its well |
| `code.punctuation` | `surface.raised` | 4.5:1 | 7.22:1 passes | 9.57:1 passes | 7.22:1 passes | 9.57:1 passes | A code block's punctuation, colored by kind on its well |
| `data.series` | `surface.canvas` | 3:1 | 4.58:1 passes | 7.48:1 passes | 3.59:1 passes | 6.31:1 passes | A sparkline's line and end dot, a line chart's line and marked point, plain bars, and a legend item's series swatch: the one series of a chart |
| `data.series` | `surface.default` | 3:1 | 5.03:1 passes | 6.96:1 passes | 3.94:1 passes | 5.87:1 passes | A sparkline's line and end dot, a line chart's line and marked point, plain bars, and a legend item's series swatch: the one series of a chart |
| `data.series` | `surface.raised` | 3:1 | 5.25:1 passes | 6.13:1 passes | 4.12:1 passes | 5.18:1 passes | A sparkline's line and end dot, a line chart's line and marked point, plain bars, and a legend item's series swatch: the one series of a chart |
| `data.categorical.1` | `surface.canvas` | 3:1 | 4.58:1 passes | 7.48:1 passes | 3.59:1 passes | 6.31:1 passes | A legend item's swatch 1, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.1` | `surface.default` | 3:1 | 5.03:1 passes | 6.96:1 passes | 3.94:1 passes | 5.87:1 passes | A legend item's swatch 1, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.1` | `surface.raised` | 3:1 | 5.25:1 passes | 6.13:1 passes | 4.12:1 passes | 5.18:1 passes | A legend item's swatch 1, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.2` | `surface.canvas` | 3:1 | 3.09:1 passes | 7.51:1 passes | 3.12:1 passes | 5.98:1 passes | A legend item's swatch 2, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.2` | `surface.default` | 3:1 | 3.39:1 passes | 6.99:1 passes | 3.42:1 passes | 5.57:1 passes | A legend item's swatch 2, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.2` | `surface.raised` | 3:1 | 3.54:1 passes | 6.16:1 passes | 3.58:1 passes | 4.91:1 passes | A legend item's swatch 2, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.3` | `surface.canvas` | 3:1 | 6.30:1 passes | 11.67:1 passes | 5.59:1 passes | 3.98:1 passes | A legend item's swatch 3, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.3` | `surface.default` | 3:1 | 6.90:1 passes | 10.86:1 passes | 6.12:1 passes | 3.71:1 passes | A legend item's swatch 3, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.3` | `surface.raised` | 3:1 | 7.22:1 passes | 9.57:1 passes | 6.40:1 passes | 3.27:1 passes | A legend item's swatch 3, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.4` | `surface.canvas` | 3:1 | 3.08:1 passes | 7.49:1 passes | 3.12:1 passes | 6.42:1 passes | A legend item's swatch 4, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.4` | `surface.default` | 3:1 | 3.38:1 passes | 6.97:1 passes | 3.42:1 passes | 5.97:1 passes | A legend item's swatch 4, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.4` | `surface.raised` | 3:1 | 3.53:1 passes | 6.14:1 passes | 3.58:1 passes | 5.27:1 passes | A legend item's swatch 4, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.5` | `surface.canvas` | 3:1 | 3.10:1 passes | 11.73:1 passes | 4.80:1 passes | 4.41:1 passes | A legend item's swatch 5, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.5` | `surface.default` | 3:1 | 3.39:1 passes | 10.91:1 passes | 5.26:1 passes | 4.10:1 passes | A legend item's swatch 5, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.5` | `surface.raised` | 3:1 | 3.55:1 passes | 9.62:1 passes | 5.50:1 passes | 3.61:1 passes | A legend item's swatch 5, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.6` | `surface.canvas` | 3:1 | 4.58:1 passes | 5.04:1 passes | 3.18:1 passes | 6.30:1 passes | A legend item's swatch 6, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.6` | `surface.default` | 3:1 | 5.02:1 passes | 4.69:1 passes | 3.48:1 passes | 5.87:1 passes | A legend item's swatch 6, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.6` | `surface.raised` | 3:1 | 5.25:1 passes | 4.14:1 passes | 3.64:1 passes | 5.17:1 passes | A legend item's swatch 6, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.7` | `surface.canvas` | 3:1 | 3.10:1 passes | 5.05:1 passes | 4.65:1 passes | 4.55:1 passes | A legend item's swatch 7, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.7` | `surface.default` | 3:1 | 3.40:1 passes | 4.70:1 passes | 5.10:1 passes | 4.23:1 passes | A legend item's swatch 7, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.7` | `surface.raised` | 3:1 | 3.55:1 passes | 4.14:1 passes | 5.33:1 passes | 3.73:1 passes | A legend item's swatch 7, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.8` | `surface.canvas` | 3:1 | 4.61:1 passes | 11.68:1 passes | 4.82:1 passes | 4.39:1 passes | A legend item's swatch 8, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.8` | `surface.default` | 3:1 | 5.05:1 passes | 10.87:1 passes | 5.28:1 passes | 4.08:1 passes | A legend item's swatch 8, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `data.categorical.8` | `surface.raised` | 3:1 | 5.28:1 passes | 9.58:1 passes | 5.52:1 passes | 3.60:1 passes | A legend item's swatch 8, a stacked bar's segment and a donut's part in it: the color that matches a series to its name |
| `surface.track` | `surface.canvas` | 3:1 | 3.09:1 passes | 2.49:1 falls short | 3.09:1 passes | 2.49:1 falls short | A legend item's muted swatch, and Other in a stacked bar or a donut: the gray of everything else |
| `surface.track` | `surface.default` | 3:1 | 3.38:1 passes | 2.31:1 falls short | 3.38:1 passes | 2.31:1 falls short | A legend item's muted swatch, and Other in a stacked bar or a donut: the gray of everything else |
| `surface.track` | `surface.raised` | 3:1 | 3.54:1 passes | 2.04:1 falls short | 3.54:1 passes | 2.04:1 falls short | A legend item's muted swatch, and Other in a stacked bar or a donut: the gray of everything else |
| `data.series-hover` | `surface.canvas` | 3:1 | 6.28:1 passes | 11.72:1 passes | 5.10:1 passes | 8.47:1 passes | A bar chart's current bar, such as today's: a step darker than the rest, also named by its label |
| `data.series-hover` | `surface.default` | 3:1 | 6.89:1 passes | 10.90:1 passes | 5.59:1 passes | 7.88:1 passes | A bar chart's current bar, such as today's: a step darker than the rest, also named by its label |
| `data.series-hover` | `surface.raised` | 3:1 | 7.20:1 passes | 9.61:1 passes | 5.85:1 passes | 6.94:1 passes | A bar chart's current bar, such as today's: a step darker than the rest, also named by its label |
| `data.reference-line` | `surface.canvas` | 3:1 | 9.18:1 passes | 15.66:1 passes | 6.30:1 passes | 7.51:1 passes | A line chart's dashed line for the period compared with, and the baseline at zero of the line and bar charts |
| `data.reference-line` | `surface.default` | 3:1 | 10.06:1 passes | 14.58:1 passes | 6.90:1 passes | 6.99:1 passes | A line chart's dashed line for the period compared with, and the baseline at zero of the line and bar charts |
| `data.reference-line` | `surface.raised` | 3:1 | 10.52:1 passes | 12.85:1 passes | 7.22:1 passes | 6.16:1 passes | A line chart's dashed line for the period compared with, and the baseline at zero of the line and bar charts |
| `data.sequential.3` | `surface.canvas` | 3:1 | 3.10:1 passes | 3.42:1 passes | 2.62:1 falls short | 3.80:1 passes | A heatmap's level 2 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.3` | `surface.default` | 3:1 | 3.39:1 passes | 3.18:1 passes | 2.87:1 falls short | 3.54:1 passes | A heatmap's level 2 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.3` | `surface.raised` | 3:1 | 3.55:1 passes | 2.80:1 falls short | 3.00:1 passes | 3.12:1 passes | A heatmap's level 2 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.4` | `surface.canvas` | 3:1 | 4.58:1 passes | 5.06:1 passes | 4.10:1 passes | 5.54:1 passes | A heatmap's level 3 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.4` | `surface.default` | 3:1 | 5.03:1 passes | 4.71:1 passes | 4.50:1 passes | 5.15:1 passes | A heatmap's level 3 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.4` | `surface.raised` | 3:1 | 5.25:1 passes | 4.15:1 passes | 4.70:1 passes | 4.54:1 passes | A heatmap's level 3 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.5` | `surface.canvas` | 3:1 | 6.28:1 passes | 11.72:1 passes | 6.62:1 passes | 8.33:1 passes | A heatmap's level 4 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.5` | `surface.default` | 3:1 | 6.89:1 passes | 10.90:1 passes | 7.25:1 passes | 7.75:1 passes | A heatmap's level 4 of 4: a day's square, the amount in its shade, which its table also holds |
| `data.sequential.5` | `surface.raised` | 3:1 | 7.20:1 passes | 9.61:1 passes | 7.58:1 passes | 6.83:1 passes | A heatmap's level 4 of 4: a day's square, the amount in its shade, which its table also holds |
| `feedback.success.icon` | `surface.canvas` | 3:1 | 4.61:1 passes | 7.49:1 passes | 4.61:1 passes | 7.49:1 passes | An uptime bar's up bars, which the summary and the share up also say in words |
| `feedback.success.icon` | `surface.default` | 3:1 | 5.05:1 passes | 6.97:1 passes | 5.05:1 passes | 6.97:1 passes | An uptime bar's up bars, which the summary and the share up also say in words |
| `feedback.success.icon` | `surface.raised` | 3:1 | 5.28:1 passes | 6.14:1 passes | 5.28:1 passes | 6.14:1 passes | An uptime bar's up bars, which the summary and the share up also say in words |
| `feedback.warning.icon` | `surface.canvas` | 3:1 | 4.59:1 passes | 7.51:1 passes | 4.59:1 passes | 7.51:1 passes | An uptime bar's incident bars, which the summary and the share up also say in words |
| `feedback.warning.icon` | `surface.default` | 3:1 | 5.03:1 passes | 6.99:1 passes | 5.03:1 passes | 6.99:1 passes | An uptime bar's incident bars, which the summary and the share up also say in words |
| `feedback.warning.icon` | `surface.raised` | 3:1 | 5.25:1 passes | 6.16:1 passes | 5.25:1 passes | 6.16:1 passes | An uptime bar's incident bars, which the summary and the share up also say in words |
| `feedback.danger.icon` | `surface.canvas` | 3:1 | 4.83:1 passes | 7.47:1 passes | 4.83:1 passes | 7.47:1 passes | An uptime bar's outage bars, which the summary and the share up also say in words |
| `feedback.danger.icon` | `surface.default` | 3:1 | 5.30:1 passes | 6.95:1 passes | 5.30:1 passes | 6.95:1 passes | An uptime bar's outage bars, which the summary and the share up also say in words |
| `feedback.danger.icon` | `surface.raised` | 3:1 | 5.53:1 passes | 6.13:1 passes | 5.53:1 passes | 6.13:1 passes | An uptime bar's outage bars, which the summary and the share up also say in words |
| `icon.on-brand` | `action.brand.background` | 3:1 | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | 5.53:1 passes | A chosen picture tile: the tick on its brand disc, which shows the choice as a shape |
| `border.inverse` | `surface.overlay` | 3:1 | 15.38:1 passes | 12.38:1 passes | 15.38:1 passes | 12.38:1 passes | A color swatch picker's chosen color: the ring with a gap round its swatch, which shows the choice as a shape, against the surface in the gap and around it, in the color picker's panel and on the page |
| `border.inverse` | `surface.canvas` | 3:1 | 12.85:1 passes | 17.95:1 passes | 12.85:1 passes | 17.95:1 passes | A color swatch picker's chosen color: the ring with a gap round its swatch, which shows the choice as a shape, against the surface in the gap and around it, in the color picker's panel and on the page |
| `border.inverse` | `surface.default` | 3:1 | 14.08:1 passes | 16.70:1 passes | 14.08:1 passes | 16.70:1 passes | A color swatch picker's chosen color: the ring with a gap round its swatch, which shows the choice as a shape, against the surface in the gap and around it, in the color picker's panel and on the page |
| `border.inverse` | `surface.raised` | 3:1 | 14.72:1 passes | 14.72:1 passes | 14.72:1 passes | 14.72:1 passes | A color swatch picker's chosen color: the ring with a gap round its swatch, which shows the choice as a shape, against the surface in the gap and around it, in the color picker's panel and on the page |

## Tokens

### Ramps

Primitive, 141 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.alpha.white.3` | not in CSS | #ffffff08 |
| `color.alpha.white.5` | not in CSS | #ffffff0d |
| `color.alpha.white.10` | not in CSS | #ffffff1a |
| `color.alpha.white.15` | not in CSS | #ffffff26 |
| `color.alpha.white.20` | not in CSS | #ffffff33 |
| `color.alpha.white.30` | not in CSS | #ffffff4d |
| `color.alpha.white.40` | not in CSS | #ffffff66 |
| `color.alpha.white.50` | not in CSS | #ffffff80 |
| `color.alpha.white.90` | not in CSS | #ffffffe6 |
| `color.alpha.white.100` | not in CSS | #ffffff |
| `color.alpha.black.5` | not in CSS | #0000000d |
| `color.alpha.black.10` | not in CSS | #0000001a |
| `color.alpha.black.15` | not in CSS | #00000026 |
| `color.alpha.black.20` | not in CSS | #00000033 |
| `color.alpha.black.30` | not in CSS | #0000004d |
| `color.alpha.black.40` | not in CSS | #00000066 |
| `color.alpha.black.50` | not in CSS | #00000080 |
| `color.alpha.black.60` | not in CSS | #00000099 |
| `color.alpha.black.90` | not in CSS | #000000e6 |
| `color.alpha.red.30` | not in CSS | #cc0d0d4d |
| `color.alpha.red.40` | not in CSS | #cc0d0d66 |
| `color.alpha.red.50` | not in CSS | #cc0d0d80 |
| `color.alpha.grey-200.19` | not in CSS | #e7ebf030 |
| `color.alpha.grey-400.50` | not in CSS | #9ba5b180 |
| `color.alpha.grey-600.10` | not in CSS | #606a751a |
| `color.alpha.grey-600.20` | not in CSS | #606a7533 |
| `color.alpha.grey-600.25` | not in CSS | #606a7540 |
| `color.alpha.grey-600.30` | not in CSS | #606a754d |
| `color.alpha.grey-600.35` | not in CSS | #606a7559 |
| `color.alpha.grey-600.40` | not in CSS | #606a7566 |
| `color.alpha.grey-700.50` | not in CSS | #4e555e80 |
| `color.alpha.grey-800.5` | not in CSS | #373d430d |
| `color.alpha.grey-800.8` | not in CSS | #373d4314 |
| `color.alpha.grey-800.10` | not in CSS | #373d431a |
| `color.alpha.grey-800.15` | not in CSS | #373d4326 |
| `color.alpha.grey-800.20` | not in CSS | #373d4333 |
| `color.alpha.grey-800.25` | not in CSS | #373d4340 |
| `color.alpha.grey-800.30` | not in CSS | #373d434d |
| `color.alpha.grey-900.19` | not in CSS | #23252730 |
| `color.alpha.grey-950.80` | not in CSS | #111213cc |
| `color.grey.50` | not in CSS | #f9fafb |
| `color.grey.100` | not in CSS | #f3f5f8 |
| `color.grey.200` | not in CSS | #e7ebf0 |
| `color.grey.300` | not in CSS | #c4cdd8 |
| `color.grey.400` | not in CSS | #9ba5b1 |
| `color.grey.500` | not in CSS | #7c8692 |
| `color.grey.600` | not in CSS | #606a75 |
| `color.grey.700` | not in CSS | #4e555e |
| `color.grey.800` | not in CSS | #373d43 |
| `color.grey.850` | not in CSS | #2d3237 |
| `color.grey.900` | not in CSS | #232527 |
| `color.grey.925` | not in CSS | #181a1c |
| `color.grey.950` | not in CSS | #111213 |
| `color.red.50` | not in CSS | #fef9f8 |
| `color.red.100` | not in CSS | #fef2f1 |
| `color.red.200` | not in CSS | #fee5e1 |
| `color.red.300` | not in CSS | #febdb2 |
| `color.red.400` | not in CSS | #fe7d6d |
| `color.red.500` | not in CSS | #f34336 |
| `color.red.600` | not in CSS | #cc0d0d |
| `color.red.700` | not in CSS | #a51d17 |
| `color.red.800` | not in CSS | #761812 |
| `color.red.900` | not in CSS | #4b130e |
| `color.red.950` | not in CSS | #2a0403 |
| `color.blue.50` | not in CSS | #f8faff |
| `color.blue.100` | not in CSS | #f1f5ff |
| `color.blue.200` | not in CSS | #e3ebfe |
| `color.blue.300` | not in CSS | #b8ccff |
| `color.blue.400` | not in CSS | #7fa0ff |
| `color.blue.500` | not in CSS | #557bff |
| `color.blue.600` | not in CSS | #3b5ce3 |
| `color.blue.700` | not in CSS | #2f4ab8 |
| `color.blue.800` | not in CSS | #213583 |
| `color.blue.900` | not in CSS | #162352 |
| `color.blue.950` | not in CSS | #070f30 |
| `color.green.50` | not in CSS | #effeef |
| `color.green.100` | not in CSS | #dffddf |
| `color.green.200` | not in CSS | #c1f9c1 |
| `color.green.300` | not in CSS | #8ddf90 |
| `color.green.400` | not in CSS | #54b85b |
| `color.green.500` | not in CSS | #269936 |
| `color.green.600` | not in CSS | #037a1f |
| `color.green.700` | not in CSS | #016317 |
| `color.green.800` | not in CSS | #084712 |
| `color.green.900` | not in CSS | #0a2d0e |
| `color.green.950` | not in CSS | #011603 |
| `color.orange.50` | not in CSS | #fff9f6 |
| `color.orange.100` | not in CSS | #fff2ed |
| `color.orange.200` | not in CSS | #ffe6db |
| `color.orange.300` | not in CSS | #febea2 |
| `color.orange.400` | not in CSS | #fa8349 |
| `color.orange.500` | not in CSS | #da601a |
| `color.orange.600` | not in CSS | #b14904 |
| `color.orange.700` | not in CSS | #913900 |
| `color.orange.800` | not in CSS | #692903 |
| `color.orange.900` | not in CSS | #431b07 |
| `color.orange.950` | not in CSS | #250a01 |
| `color.yellow.50` | not in CSS | #fdfbe8 |
| `color.yellow.100` | not in CSS | #fcf6d1 |
| `color.yellow.200` | not in CSS | #f7eca7 |
| `color.yellow.300` | not in CSS | #dfce64 |
| `color.yellow.400` | not in CSS | #b9a405 |
| `color.yellow.500` | not in CSS | #968507 |
| `color.yellow.600` | not in CSS | #776906 |
| `color.yellow.700` | not in CSS | #615502 |
| `color.yellow.800` | not in CSS | #453c00 |
| `color.yellow.900` | not in CSS | #2d2700 |
| `color.yellow.950` | not in CSS | #161200 |
| `color.purple.50` | not in CSS | #fbf9fe |
| `color.purple.100` | not in CSS | #f8f3fe |
| `color.purple.200` | not in CSS | #f0e7fc |
| `color.purple.300` | not in CSS | #dac3f7 |
| `color.purple.400` | not in CSS | #c18cf9 |
| `color.purple.500` | not in CSS | #ae5bf9 |
| `color.purple.600` | not in CSS | #9b1cef |
| `color.purple.700` | not in CSS | #7b21bd |
| `color.purple.800` | not in CSS | #581988 |
| `color.purple.900` | not in CSS | #381357 |
| `color.purple.950` | not in CSS | #1e0532 |
| `color.pink.50` | not in CSS | #fef9fb |
| `color.pink.100` | not in CSS | #fef2f7 |
| `color.pink.200` | not in CSS | #fce5ef |
| `color.pink.300` | not in CSS | #f8bbd7 |
| `color.pink.400` | not in CSS | #fa76ba |
| `color.pink.500` | not in CSS | #f524a4 |
| `color.pink.600` | not in CSS | #c41883 |
| `color.pink.700` | not in CSS | #9c1d69 |
| `color.pink.800` | not in CSS | #71164b |
| `color.pink.900` | not in CSS | #491030 |
| `color.pink.950` | not in CSS | #280418 |
| `color.teal.50` | not in CSS | #eafefe |
| `color.teal.100` | not in CSS | #d0fefd |
| `color.teal.200` | not in CSS | #96fcfb |
| `color.teal.300` | not in CSS | #53e0e0 |
| `color.teal.400` | not in CSS | #2ab5b5 |
| `color.teal.500` | not in CSS | #1d9393 |
| `color.teal.600` | not in CSS | #137575 |
| `color.teal.700` | not in CSS | #175e5e |
| `color.teal.800` | not in CSS | #114343 |
| `color.teal.900` | not in CSS | #0d2b2b |
| `color.teal.950` | not in CSS | #031515 |

### Surface

Semantic, 18 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.surface.canvas` | `--smbk-color-surface-canvas` | light: #e7ebf0 · dark: #111213 (changes with theme) |
| `color.surface.default` | `--smbk-color-surface-default` | light: #f3f5f8 · dark: #181a1c (changes with theme) |
| `color.surface.disabled` | `--smbk-color-surface-disabled` | light: #e7ebf0 · dark: #373d43 (changes with theme) |
| `color.surface.raised` | `--smbk-color-surface-raised` | light: #f9fafb · dark: #232527 (changes with theme) |
| `color.surface.brand` | `--smbk-color-surface-brand` | #cc0d0d |
| `color.surface.inverse` | `--smbk-color-surface-inverse` | light: #2d3237 · dark: #e7ebf0 (changes with theme) |
| `color.surface.sunken` | `--smbk-color-surface-sunken` | light: #373d430d · dark: #00000066 (changes with theme) |
| `color.surface.translucent` | `--smbk-color-surface-translucent` | light: #ffffff66 · dark: #00000066 (changes with theme) |
| `color.surface.translucent-subtle` | `--smbk-color-surface-translucent-subtle` | light: #ffffff26 · dark: #00000026 (changes with theme) |
| `color.surface.overlay` | `--smbk-color-surface-overlay` | light: #ffffff · dark: #2d3237 (changes with theme) |
| `color.surface.track` | `--smbk-color-surface-track` | light: #7c8692 · dark: #4e555e (changes with theme) |
| `color.surface.skeleton` | `--smbk-color-surface-skeleton` | light: #373d431a · dark: #606a7533 (changes with theme) |
| `color.surface.hover` | `--smbk-color-surface-hover` | light: #373d4326 · dark: #606a754d (changes with theme) |
| `color.surface.track-subtle` | `--smbk-color-surface-track-subtle` | light: #c4cdd8 · dark: #2d3237 (changes with theme) |
| `color.surface.neutral-subtle` | `--smbk-color-surface-neutral-subtle` | light: #373d431a · dark: #606a7533 (changes with theme) |
| `color.surface.thumb` | `--smbk-color-surface-thumb` | #f9fafb |
| `color.surface.selected` | `--smbk-color-surface-selected` | light: #373d431a · dark: #606a7533 (changes with theme) |
| `color.surface.scrim` | `--smbk-color-surface-scrim` | #111213cc |

### Text

Semantic, 15 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.text.default` | `--smbk-color-text-default` | light: #232527 · dark: #e7ebf0 (changes with theme) |
| `color.text.subtle` | `--smbk-color-text-subtle` | light: #4e555e · dark: #9ba5b1 (changes with theme) |
| `color.text.subtlest` | `--smbk-color-text-subtlest` | light: #606a75 · dark: #7c8692 (changes with theme) |
| `color.text.disabled` | `--smbk-color-text-disabled` | light: #7c8692 · dark: #606a75 (changes with theme) |
| `color.text.brand` | `--smbk-color-text-brand` | light: #cc0d0d · dark: #f34336 (changes with theme) |
| `color.text.inverse` | `--smbk-color-text-inverse` | light: #f9fafb · dark: #232527 (changes with theme) |
| `color.text.on-brand` | `--smbk-color-text-on-brand` | #f9fafb |
| `color.text.on-media` | `--smbk-color-text-on-media` | #f9fafb |
| `color.text.link` | `--smbk-color-text-link` | light: #232527 · dark: #e7ebf0 (changes with theme) |
| `color.text.link-hover` | `--smbk-color-text-link-hover` | light: #111213 · dark: #f3f5f8 (changes with theme) |
| `color.text.link-pressed` | `--smbk-color-text-link-pressed` | light: #373d43 · dark: #c4cdd8 (changes with theme) |
| `color.text.link-underline` | `--smbk-color-text-link-underline` | light: #23252730 · dark: #e7ebf030 (changes with theme) |
| `color.text.link-underline-hover` | `--smbk-color-text-link-underline-hover` | light: #4e555e80 · dark: #9ba5b180 (changes with theme) |
| `color.text.link-underline-pressed` | `--smbk-color-text-link-underline-pressed` | light: #4e555e · dark: #9ba5b1 (changes with theme) |
| `color.text.link-disabled` | `--smbk-color-text-link-disabled` | light: #606a75 · dark: #9ba5b1 (changes with theme) |

### Border

Semantic, 17 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.border.subtle` | `--smbk-color-border-subtle` | light: #c4cdd8 · dark: #2d3237 (changes with theme) |
| `color.border.strong` | `--smbk-color-border-strong` | light: #9ba5b1 · dark: #373d43 (changes with theme) |
| `color.border.control` | `--smbk-color-border-control` | #7c8692 |
| `color.border.control-hover` | `--smbk-color-border-control-hover` | light: #606a75 · dark: #9ba5b1 (changes with theme) |
| `color.border.control-disabled` | `--smbk-color-border-control-disabled` | light: #c4cdd8 · dark: #606a75 (changes with theme) |
| `color.border.control-selected` | `--smbk-color-border-control-selected` | light: #ffffff1a · dark: #ffffff80 (changes with theme) |
| `color.border.focus` | `--smbk-color-border-focus` | light: #cc0d0d · dark: #f34336 (changes with theme) |
| `color.border.focus-field` | `--smbk-color-border-focus-field` | light: #2f4ab8 · dark: #dfce64 (changes with theme) |
| `color.border.brand` | `--smbk-color-border-brand` | #cc0d0d |
| `color.border.inverse` | `--smbk-color-border-inverse` | light: #232527 · dark: #f9fafb (changes with theme) |
| `color.border.groove-top` | `--smbk-color-border-groove-top` | light: #c4cdd8 · dark: #00000066 (changes with theme) |
| `color.border.groove-bottom` | `--smbk-color-border-groove-bottom` | light: #ffffff · dark: #ffffff0d (changes with theme) |
| `color.border.rim` | `--smbk-color-border-rim` | light: #ffffffe6 · dark: #ffffff0d (changes with theme) |
| `color.border.rim-subtle` | `--smbk-color-border-rim-subtle` | light: #ffffff33 · dark: #ffffff08 (changes with theme) |
| `color.border.edge-shade-subtle` | `--smbk-color-border-edge-shade-subtle` | light: #0000001a · dark: #00000033 (changes with theme) |
| `color.border.focus-inverse` | `--smbk-color-border-focus-inverse` | #f9fafb |
| `color.border.on-media` | `--smbk-color-border-on-media` | #f9fafb |

### Action

Semantic, 48 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.action.brand.background` | `--smbk-color-action-brand-background` | #cc0d0d |
| `color.action.brand.background-hover` | `--smbk-color-action-brand-background-hover` | #a51d17 |
| `color.action.brand.background-pressed` | `--smbk-color-action-brand-background-pressed` | #761812 |
| `color.action.brand.background-disabled` | `--smbk-color-action-brand-background-disabled` | light: #cc0d0d66 · dark: #cc0d0d80 (changes with theme) |
| `color.action.brand.foreground` | `--smbk-color-action-brand-foreground` | #f9fafb |
| `color.action.brand.foreground-disabled` | `--smbk-color-action-brand-foreground-disabled` | #ffffff4d |
| `color.action.brand.border` | `--smbk-color-action-brand-border` | #ffffff1a |
| `color.action.brand.border-hover` | `--smbk-color-action-brand-border-hover` | #0000000d |
| `color.action.brand.border-disabled` | `--smbk-color-action-brand-border-disabled` | #0000000d |
| `color.action.default.background` | `--smbk-color-action-default-background` | light: #f3f5f8 · dark: #2d3237 (changes with theme) |
| `color.action.default.background-hover` | `--smbk-color-action-default-background-hover` | light: #e7ebf0 · dark: #373d43 (changes with theme) |
| `color.action.default.background-pressed` | `--smbk-color-action-default-background-pressed` | light: #c4cdd8 · dark: #4e555e (changes with theme) |
| `color.action.default.foreground` | `--smbk-color-action-default-foreground` | light: #2d3237 · dark: #e7ebf0 (changes with theme) |
| `color.action.default.border` | `--smbk-color-action-default-border` | light: #f9fafb · dark: #373d43 (changes with theme) |
| `color.action.default.border-hover` | `--smbk-color-action-default-border-hover` | light: #9ba5b1 · dark: #606a75 (changes with theme) |
| `color.action.secondary.background` | `--smbk-color-action-secondary-background` | light: #373d4326 · dark: #606a7533 (changes with theme) |
| `color.action.secondary.background-hover` | `--smbk-color-action-secondary-background-hover` | light: #373d4333 · dark: #606a754d (changes with theme) |
| `color.action.secondary.background-pressed` | `--smbk-color-action-secondary-background-pressed` | light: #373d4340 · dark: #606a7566 (changes with theme) |
| `color.action.secondary.foreground` | `--smbk-color-action-secondary-foreground` | light: #2d3237 · dark: #c4cdd8 (changes with theme) |
| `color.action.outline.border` | `--smbk-color-action-outline-border` | light: #c4cdd8 · dark: #373d43 (changes with theme) |
| `color.action.outline.border-hover` | `--smbk-color-action-outline-border-hover` | light: #9ba5b1 · dark: #4e555e (changes with theme) |
| `color.action.outline.border-pressed` | `--smbk-color-action-outline-border-pressed` | light: #7c8692 · dark: #606a75 (changes with theme) |
| `color.action.outline.foreground` | `--smbk-color-action-outline-foreground` | light: #2d3237 · dark: #c4cdd8 (changes with theme) |
| `color.action.outline.foreground-disabled` | `--smbk-color-action-outline-foreground-disabled` | light: #9ba5b1 · dark: #606a75 (changes with theme) |
| `color.action.outline.background-hover` | `--smbk-color-action-outline-background-hover` | light: #373d431a · dark: #606a751a (changes with theme) |
| `color.action.outline.background-pressed` | `--smbk-color-action-outline-background-pressed` | light: #c4cdd8 · dark: #2d3237 (changes with theme) |
| `color.action.ghost.background-hover` | `--smbk-color-action-ghost-background-hover` | light: #373d4326 · dark: #606a754d (changes with theme) |
| `color.action.ghost.background-pressed` | `--smbk-color-action-ghost-background-pressed` | light: #c4cdd8 · dark: #2d3237 |
| `color.action.ghost.foreground` | `--smbk-color-action-ghost-foreground` | light: #2d3237 · dark: #c4cdd8 (changes with theme) |
| `color.action.inverse.background` | `--smbk-color-action-inverse-background` | light: #2d3237 · dark: #f3f5f8 (changes with theme) |
| `color.action.inverse.background-hover` | `--smbk-color-action-inverse-background-hover` | light: #232527 · dark: #e7ebf0 (changes with theme) |
| `color.action.inverse.background-pressed` | `--smbk-color-action-inverse-background-pressed` | light: #181a1c · dark: #c4cdd8 (changes with theme) |
| `color.action.inverse.foreground` | `--smbk-color-action-inverse-foreground` | light: #f9fafb · dark: #232527 (changes with theme) |
| `color.action.inverse.border` | `--smbk-color-action-inverse-border` | light: #373d43 · dark: #f9fafb (changes with theme) |
| `color.action.inverse.border-hover` | `--smbk-color-action-inverse-border-hover` | light: #2d3237 · dark: #9ba5b1 (changes with theme) |
| `color.action.danger.background` | `--smbk-color-action-danger-background` | light: #febdb2 · dark: #4b130e (changes with theme) |
| `color.action.danger.background-hover` | `--smbk-color-action-danger-background-hover` | light: #fe7d6d · dark: #761812 (changes with theme) |
| `color.action.danger.background-pressed` | `--smbk-color-action-danger-background-pressed` | light: #f34336 · dark: #a51d17 (changes with theme) |
| `color.action.danger.background-disabled` | `--smbk-color-action-danger-background-disabled` | #cc0d0d4d |
| `color.action.danger.foreground` | `--smbk-color-action-danger-foreground` | light: #761812 · dark: #febdb2 (changes with theme) |
| `color.action.danger.foreground-hover` | `--smbk-color-action-danger-foreground-hover` | light: #2a0403 · dark: #fee5e1 (changes with theme) |
| `color.action.danger.foreground-disabled` | `--smbk-color-action-danger-foreground-disabled` | #cc0d0d80 |
| `color.action.danger.border` | `--smbk-color-action-danger-border` | #0000000d |
| `color.action.danger.border-hover` | `--smbk-color-action-danger-border-hover` | light: #cc0d0d4d · dark: #f34336 (changes with theme) |
| `color.action.danger.border-disabled` | `--smbk-color-action-danger-border-disabled` | #0000000d |
| `color.action.disabled.background` | `--smbk-color-action-disabled-background` | light: #373d4314 · dark: #606a751a (changes with theme) |
| `color.action.disabled.foreground` | `--smbk-color-action-disabled-foreground` | light: #7c8692 · dark: #606a75 (changes with theme) |
| `color.action.disabled.border` | `--smbk-color-action-disabled-border` | light: #c4cdd8 · dark: #2d3237 (changes with theme) |

### Feedback

Semantic, 28 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.feedback.success.surface` | `--smbk-color-feedback-success-surface` | #037a1f |
| `color.feedback.success.surface-subtle` | `--smbk-color-feedback-success-surface-subtle` | light: #dffddf · dark: #0a2d0e (changes with theme) |
| `color.feedback.success.text-on-surface` | `--smbk-color-feedback-success-text-on-surface` | #f9fafb |
| `color.feedback.success.text-on-subtle` | `--smbk-color-feedback-success-text-on-subtle` | light: #016317 · dark: #8ddf90 (changes with theme) |
| `color.feedback.success.border` | `--smbk-color-feedback-success-border` | #269936 |
| `color.feedback.success.border-subtle` | `--smbk-color-feedback-success-border-subtle` | light: #8ddf90 · dark: #084712 (changes with theme) |
| `color.feedback.success.icon` | `--smbk-color-feedback-success-icon` | light: #037a1f · dark: #54b85b (changes with theme) |
| `color.feedback.warning.surface` | `--smbk-color-feedback-warning-surface` | #b14904 |
| `color.feedback.warning.surface-subtle` | `--smbk-color-feedback-warning-surface-subtle` | light: #ffe6db · dark: #431b07 (changes with theme) |
| `color.feedback.warning.text-on-surface` | `--smbk-color-feedback-warning-text-on-surface` | #f9fafb |
| `color.feedback.warning.text-on-subtle` | `--smbk-color-feedback-warning-text-on-subtle` | light: #913900 · dark: #febea2 (changes with theme) |
| `color.feedback.warning.border` | `--smbk-color-feedback-warning-border` | #da601a |
| `color.feedback.warning.border-subtle` | `--smbk-color-feedback-warning-border-subtle` | light: #febea2 · dark: #692903 (changes with theme) |
| `color.feedback.warning.icon` | `--smbk-color-feedback-warning-icon` | light: #b14904 · dark: #fa8349 (changes with theme) |
| `color.feedback.danger.surface` | `--smbk-color-feedback-danger-surface` | #cc0d0d |
| `color.feedback.danger.surface-subtle` | `--smbk-color-feedback-danger-surface-subtle` | light: #fee5e1 · dark: #4b130e (changes with theme) |
| `color.feedback.danger.text-on-surface` | `--smbk-color-feedback-danger-text-on-surface` | #f9fafb |
| `color.feedback.danger.text-on-subtle` | `--smbk-color-feedback-danger-text-on-subtle` | light: #a51d17 · dark: #febdb2 (changes with theme) |
| `color.feedback.danger.border` | `--smbk-color-feedback-danger-border` | #f34336 |
| `color.feedback.danger.border-subtle` | `--smbk-color-feedback-danger-border-subtle` | light: #febdb2 · dark: #761812 (changes with theme) |
| `color.feedback.danger.icon` | `--smbk-color-feedback-danger-icon` | light: #cc0d0d · dark: #fe7d6d (changes with theme) |
| `color.feedback.info.surface` | `--smbk-color-feedback-info-surface` | #3b5ce3 |
| `color.feedback.info.surface-subtle` | `--smbk-color-feedback-info-surface-subtle` | light: #e3ebfe · dark: #162352 (changes with theme) |
| `color.feedback.info.text-on-surface` | `--smbk-color-feedback-info-text-on-surface` | #f9fafb |
| `color.feedback.info.text-on-subtle` | `--smbk-color-feedback-info-text-on-subtle` | light: #2f4ab8 · dark: #b8ccff (changes with theme) |
| `color.feedback.info.border` | `--smbk-color-feedback-info-border` | #557bff |
| `color.feedback.info.border-subtle` | `--smbk-color-feedback-info-border-subtle` | light: #b8ccff · dark: #213583 (changes with theme) |
| `color.feedback.info.icon` | `--smbk-color-feedback-info-icon` | light: #3b5ce3 · dark: #7fa0ff (changes with theme) |

### Shadow

Semantic, 5 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.shadow.xs` | `--smbk-color-shadow-xs` | light: #373d430d · dark: #0000001a (changes with theme) |
| `color.shadow.sm` | `--smbk-color-shadow-sm` | light: #373d431a · dark: #00000026 (changes with theme) |
| `color.shadow.md` | `--smbk-color-shadow-md` | light: #373d4326 · dark: #00000033 (changes with theme) |
| `color.shadow.lg` | `--smbk-color-shadow-lg` | light: #373d4333 · dark: #0000004d (changes with theme) |
| `color.shadow.xl` | `--smbk-color-shadow-xl` | light: #373d434d · dark: #00000066 (changes with theme) |

### Icon

Semantic, 7 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.icon.default` | `--smbk-color-icon-default` | light: #232527 · dark: #e7ebf0 (changes with theme) |
| `color.icon.subtle` | `--smbk-color-icon-subtle` | light: #4e555e · dark: #c4cdd8 (changes with theme) |
| `color.icon.disabled` | `--smbk-color-icon-disabled` | light: #9ba5b1 · dark: #606a75 (changes with theme) |
| `color.icon.brand` | `--smbk-color-icon-brand` | light: #cc0d0d · dark: #fe7d6d (changes with theme) |
| `color.icon.on-brand` | `--smbk-color-icon-on-brand` | #f9fafb |
| `color.icon.subtlest` | `--smbk-color-icon-subtlest` | light: #606a75 · dark: #9ba5b1 (changes with theme) |
| `color.icon.on-thumb` | `--smbk-color-icon-on-thumb` | #4e555e |

### Data

Semantic, 24 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.data.series` | `--smbk-color-data-series` | light: default: #3b5ce3 · cockpit: #0a85a1 · dark: default: #7fa0ff · cockpit: #34a2bf (changes with theme) |
| `color.data.series-hover` | `--smbk-color-data-series-hover` | light: default: #2f4ab8 · cockpit: #056b83 · dark: default: #b8ccff · cockpit: #52bbda (changes with theme) |
| `color.data.categorical.1` | `--smbk-color-data-categorical-1` | light: default: #3b5ce3 · cockpit: #0a85a1 · dark: default: #7fa0ff · cockpit: #34a2bf (changes with theme) |
| `color.data.categorical.2` | `--smbk-color-data-categorical-2` | light: default: #da601a · cockpit: #b5771c · dark: default: #fa8349 · cockpit: #c28535 (changes with theme) |
| `color.data.categorical.3` | `--smbk-color-data-categorical-3` | light: default: #4e555e · cockpit: #8e4170 · dark: default: #c4cdd8 · cockpit: #a35d85 (changes with theme) |
| `color.data.categorical.4` | `--smbk-color-data-categorical-4` | light: default: #269936 · cockpit: #11957c · dark: default: #54b85b · cockpit: #3ca88f (changes with theme) |
| `color.data.categorical.5` | `--smbk-color-data-categorical-5` | light: default: #ae5bf9 · cockpit: #6f59a6 · dark: default: #dac3f7 · cockpit: #8270b5 (changes with theme) |
| `color.data.categorical.6` | `--smbk-color-data-categorical-6` | light: default: #137575 · cockpit: #688e3b · dark: default: #1d9393 · cockpit: #7ea059 (changes with theme) |
| `color.data.categorical.7` | `--smbk-color-data-categorical-7` | light: default: #968507 · cockpit: #4167ad · dark: default: #968507 · cockpit: #5a7dbc |
| `color.data.categorical.8` | `--smbk-color-data-categorical-8` | light: default: #c41883 · cockpit: #a04f27 · dark: default: #f8bbd7 · cockpit: #b06846 (changes with theme) |
| `color.data.sequential.1` | `--smbk-color-data-sequential-1` | light: default: #b8ccff · cockpit: #b8dbe7 · dark: default: #213583 · cockpit: #1a434f (changes with theme) |
| `color.data.sequential.2` | `--smbk-color-data-sequential-2` | light: default: #7fa0ff · cockpit: #7ebcd0 · dark: default: #2f4ab8 · cockpit: #1d5e70 (changes with theme) |
| `color.data.sequential.3` | `--smbk-color-data-sequential-3` | light: default: #557bff · cockpit: #389db9 · dark: default: #3b5ce3 · cockpit: #1d7a93 (changes with theme) |
| `color.data.sequential.4` | `--smbk-color-data-sequential-4` | light: default: #3b5ce3 · cockpit: #027b96 · dark: default: #557bff · cockpit: #3097b3 (changes with theme) |
| `color.data.sequential.5` | `--smbk-color-data-sequential-5` | light: default: #2f4ab8 · cockpit: #01596d · dark: default: #b8ccff · cockpit: #64b8d2 (changes with theme) |
| `color.data.diverging.low-2` | `--smbk-color-data-diverging-low-2` | light: default: #913900 · cockpit: #734803 · dark: default: #febea2 · cockpit: #d79e59 (changes with theme) |
| `color.data.diverging.low-1` | `--smbk-color-data-diverging-low-1` | light: default: #da601a · cockpit: #966b34 · dark: default: #da601a · cockpit: #a57e4f |
| `color.data.diverging.mid` | `--smbk-color-data-diverging-mid` | light: default: #7c8692 · cockpit: #95999d · dark: default: #7c8692 · cockpit: #686c70 |
| `color.data.diverging.high-1` | `--smbk-color-data-diverging-high-1` | light: default: #557bff · cockpit: #268099 · dark: default: #557bff · cockpit: #4892a8 |
| `color.data.diverging.high-2` | `--smbk-color-data-diverging-high-2` | light: default: #2f4ab8 · cockpit: #005c71 · dark: default: #b8ccff · cockpit: #4abbdb (changes with theme) |
| `color.data.reference-line` | `--smbk-color-data-reference-line` | light: default: #373d43 · cockpit: #4e555e · dark: default: #e7ebf0 · cockpit: #9ba5b1 (changes with theme) |
| `color.data.status.good` | `--smbk-color-data-status-good` | light: default: #016317 · cockpit: #22864a · dark: default: #269936 · cockpit: #61bf7e (changes with theme) |
| `color.data.status.warning` | `--smbk-color-data-status-warning` | light: default: #776906 · cockpit: #b26f03 · dark: default: #b9a405 · cockpit: #e7b551 (changes with theme) |
| `color.data.status.bad` | `--smbk-color-data-status-bad` | light: default: #a51d17 · cockpit: #ae2d2f · dark: default: #f34336 · cockpit: #d85e59 (changes with theme) |

### Code

Semantic, 10 tokens.

| Token | CSS | Value |
|---|---|---|
| `color.code.keyword` | `--smbk-color-code-keyword` | light: #9b1cef · dark: #c18cf9 (changes with theme) |
| `color.code.string` | `--smbk-color-code-string` | light: #b14904 · dark: #fa8349 (changes with theme) |
| `color.code.number` | `--smbk-color-code-number` | light: #037a1f · dark: #8ddf90 (changes with theme) |
| `color.code.function` | `--smbk-color-code-function` | light: #776906 · dark: #dfce64 (changes with theme) |
| `color.code.type` | `--smbk-color-code-type` | light: #137575 · dark: #2ab5b5 (changes with theme) |
| `color.code.property` | `--smbk-color-code-property` | light: #213583 · dark: #b8ccff (changes with theme) |
| `color.code.comment` | `--smbk-color-code-comment` | light: #606a75 · dark: #9ba5b1 (changes with theme) |
| `color.code.punctuation` | `--smbk-color-code-punctuation` | light: #4e555e · dark: #c4cdd8 (changes with theme) |
| `color.code.declaration` | `--smbk-color-code-declaration` | light: #3b5ce3 · dark: #7fa0ff (changes with theme) |
| `color.code.tag` | `--smbk-color-code-tag` | light: #3b5ce3 · dark: #7fa0ff (changes with theme) |

### Other color tokens

Semantic, 1 token.

| Token | CSS | Value |
|---|---|---|
| `color.overlay.scrim` | `--smbk-color-overlay-scrim` | light: #00000080 · dark: #00000099 (changes with theme) |