0.2.2 alpha

Menu

Color

ExperimentalView the source

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

Primitive and semantic tokensChanges with theme

Roles at work

The semantic colors at work, group by group, drawn with the real components in the light theme and the dark theme side by side. Under each pair, a table of the roles it uses: the color in each theme, the CSS variable and what it is for.

Point at or focus a role's name to outline every place the examples use it.

Surfaces

The floors a page is built from. The canvas is the page itself, each step up sits closer to the reader, and a sunken well is cut into the floor around it.

Light

Billing

Workspace settings

18 of 25 seats used this month.
Team plan

$240 a month

Dark

Billing

Workspace settings

18 of 25 seats used this month.
Team plan

$240 a month

Surfaces roles
LightDarkRoleCSS variableUsed for
--smbk-color-surface-canvas
Page background.
--smbk-color-surface-default
Standard surface: cards, panels, the header.
--smbk-color-surface-sunken
Recessed wells: fields, tracks, code.
--smbk-color-surface-raised
One floor above default: popovers, raised panels.
--smbk-color-surface-overlay
Floating panels opened from a control: the dropdown and select list, the combobox list, the date picker and the popover.

See all 18 roles in this group in Tokens below

Text

Text from the main words down to the quietest hints, plus links and text that cannot be used right now, shown here on the canvas, default, raised and sunken surfaces.

Light

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Dark

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Invoice 1042

Paid March 3

Sales tax included

View receipt

Refund unavailable

Text roles
LightDarkRoleCSS variableUsed for
--smbk-color-text-default
Main text.
--smbk-color-text-subtle
Secondary text: descriptions, metadata.
--smbk-color-text-subtlest
Quietest text: hints, captions, placeholders.
--smbk-color-text-link
Link text.
--smbk-color-text-disabled
Text in unavailable controls.

See all 15 roles in this group in Tokens below

Borders

Edges that divide content, edges that show where a control is, and the rings that show where the keyboard is.

Light

Shipping address

Maya Chen, 12 Harbor Street, Portland
Archived

Dark

Shipping address

Maya Chen, 12 Harbor Street, Portland
Archived
Borders roles
LightDarkRoleCSS variableUsed for
--smbk-color-border-subtle
Dividers and quiet edges.
--smbk-color-border-strong
Stronger edges and separators.
--smbk-color-border-control
The edge that marks a control: a checkbox, a radio (must reach 3:1).
--smbk-color-border-rim
The light rim that makes a surface look lit: fields, chosen pills, cards.
--smbk-color-border-focus-field
Keyboard focus ring on fields.
--smbk-color-border-focus
Keyboard focus ring on controls.

See all 17 roles in this group in Tokens below

Actions

Buttons and chips, one family of colors per tone: a fill, a label and an edge. Every disabled action shares one look.

Light

brand
secondary
outline
ghost
danger
disabled
default (chip)

Dark

brand
secondary
outline
ghost
danger
disabled
default (chip)
Actions roles
LightDarkRoleCSS variableUsed for
Brand3
--smbk-color-action-brand-background
Fill at rest.
--smbk-color-action-brand-foreground
Label and icon at rest.
--smbk-color-action-brand-border
Edge at rest.
Secondary2
--smbk-color-action-secondary-background
Fill at rest.
--smbk-color-action-secondary-foreground
Label and icon at rest.
Outline2
--smbk-color-action-outline-border
Edge at rest.
--smbk-color-action-outline-foreground
Label and icon at rest.
Ghost1
--smbk-color-action-ghost-foreground
Label and icon at rest.
Danger3
--smbk-color-action-danger-background
Fill at rest.
--smbk-color-action-danger-foreground
Label and icon at rest.
--smbk-color-action-danger-border
Edge at rest.
Disabled3
--smbk-color-action-disabled-background
Background of a disabled button, in every tone: a faint see-through grey, always fainter than an enabled button.
--smbk-color-action-disabled-foreground
The label and icon of every disabled action, shared by every kind of button.
--smbk-color-action-disabled-border
The edge of every disabled action, shared by every kind of button.
Default1
--smbk-color-action-default-foreground
Label and icon at rest.

See all 48 roles in this group in Tokens below

Feedback

Messages that tell the reader how something went. Each tone has a pale fill for messages and a strong fill for small marks, and always brings its own icon, so color is never the only sign.

Light

Maintenance tonight

The dashboard is offline from 10 to 11 p.m. Eastern.

Payment received

Invoice 1042 is paid in full.

Card expires soon

Update your card before May 1 to keep your plan.

Payment failed

Your bank declined the charge. Try another card.
NewPaidDue soonOverdue

Dark

Maintenance tonight

The dashboard is offline from 10 to 11 p.m. Eastern.

Payment received

Invoice 1042 is paid in full.

Card expires soon

Update your card before May 1 to keep your plan.

Payment failed

Your bank declined the charge. Try another card.
NewPaidDue soonOverdue
Feedback roles
LightDarkRoleCSS variableUsed for
Info6
--smbk-color-feedback-info-surface-subtle
Pale fill.
--smbk-color-feedback-info-border
Edge.
--smbk-color-feedback-info-text-on-subtle
Text on the pale fill.
--smbk-color-feedback-info-icon
The info tone’s own icon (an info sign), so the tone is never shown by colour alone.
--smbk-color-feedback-info-surface
Strong fill.
--smbk-color-feedback-info-text-on-surface
Text on the strong fill.
Success6
--smbk-color-feedback-success-surface-subtle
Pale fill.
--smbk-color-feedback-success-border
Edge.
--smbk-color-feedback-success-text-on-subtle
Text on the pale fill.
--smbk-color-feedback-success-icon
The success tone’s own icon (a check), so the tone is never shown by colour alone.
--smbk-color-feedback-success-surface
Strong fill.
--smbk-color-feedback-success-text-on-surface
Text on the strong fill.
Warning6
--smbk-color-feedback-warning-surface-subtle
Pale fill.
--smbk-color-feedback-warning-border
Edge.
--smbk-color-feedback-warning-text-on-subtle
Text on the pale fill.
--smbk-color-feedback-warning-icon
The warning tone’s own icon (a warning sign), so the tone is never shown by colour alone.
--smbk-color-feedback-warning-surface
Strong fill.
--smbk-color-feedback-warning-text-on-surface
Text on the strong fill.
Danger6
--smbk-color-feedback-danger-surface-subtle
Pale fill.
--smbk-color-feedback-danger-border
Edge; the edge of a field in error (3:1).
--smbk-color-feedback-danger-text-on-subtle
Text on the pale fill.
--smbk-color-feedback-danger-icon
The danger tone’s own icon (an alert sign), so the tone is never shown by colour alone.
--smbk-color-feedback-danger-surface
Strong fill.
--smbk-color-feedback-danger-text-on-surface
Text on the strong fill.

See all 28 roles in this group in Tokens below

Data

The colors a chart draws its series in, always in this order. Every data color, and how far apart they look with color blindness, is under Data colors below.

Light

Spend by service, per week
PeriodHostingStorageEmailAnalyticsSearchBackupsSupportDesign toolsTotal
Week 1$420$180$90$150$75$60$120$55$1,150
Week 2$455$190$95$140$80$60$135$55$1,210
Week 3$470$205$92$165$88$64$110$55$1,249
Week 4$510$210$101$170$95$64$145$70$1,365
  • Hosting$1,855
  • Storage$785
  • Email$378
  • Analytics$625
  • Search$338
  • Backups$248
  • Support$510
  • Design tools$235

Dark

Spend by service, per week
PeriodHostingStorageEmailAnalyticsSearchBackupsSupportDesign toolsTotal
Week 1$420$180$90$150$75$60$120$55$1,150
Week 2$455$190$95$140$80$60$135$55$1,210
Week 3$470$205$92$165$88$64$110$55$1,249
Week 4$510$210$101$170$95$64$145$70$1,365
  • Hosting$1,855
  • Storage$785
  • Email$378
  • Analytics$625
  • Search$338
  • Backups$248
  • Support$510
  • Design tools$235
Data roles
LightDarkRoleCSS variableUsed for
--smbk-color-data-categorical-1
Categorical position 1 (blue).
--smbk-color-data-categorical-2
Categorical position 2 (orange).
--smbk-color-data-categorical-3
Categorical position 3 (neutral).
--smbk-color-data-categorical-4
Categorical position 4 (green).
--smbk-color-data-categorical-5
Categorical position 5 (purple).
--smbk-color-data-categorical-6
Categorical position 6 (teal).
--smbk-color-data-categorical-7
Categorical position 7 (yellow).
--smbk-color-data-categorical-8
Categorical position 8 (pink).

Code

The colors a code block gives each kind of code, so the parts of a line are easy to tell apart.

Light

amount-due.tsx
import { Badge } from './badge';

type Props = { total: number };

// Shows the amount due, tax included.
export function Due({ total }: Props) {
  const sum = total * 1.08;
  return (
    <p className="due">
      ${sum.toFixed(2)}
      <Badge tone="warning">Due</Badge>
    </p>
  );
}

Dark

amount-due.tsx
import { Badge } from './badge';

type Props = { total: number };

// Shows the amount due, tax included.
export function Due({ total }: Props) {
  const sum = total * 1.08;
  return (
    <p className="due">
      ${sum.toFixed(2)}
      <Badge tone="warning">Due</Badge>
    </p>
  );
}
Code roles
LightDarkRoleCSS variableUsed for
--smbk-color-code-keyword
Control flow and modules, such as import, export, from, return, if and await, and CSS at-rules such as @media.
--smbk-color-code-string
Text in quotes.
--smbk-color-code-number
Numbers, CSS lengths and colors, and true, false and null.
--smbk-color-code-function
Function names, CSS functions such as var(), and the command a shell line runs.
--smbk-color-code-type
Type, class and component names.
--smbk-color-code-property
Keys and properties, such as object and JSON keys, CSS properties and custom properties, HTML and JSX attributes, and command flags.
--smbk-color-code-comment
Comments, the quietest part of the code.
--smbk-color-code-punctuation
Brackets, commas, colons and operators.
--smbk-color-code-declaration
Words that declare or name, such as const, let, function, class, interface, type, new and this.
--smbk-color-code-tag
HTML and JSX tags, and CSS selectors.

Data colors

The colors a chart draws its data in, by the job each does. Each token is named color.data, then its group, then the name under its swatch. A chart takes them from here and nowhere else, and never tells its series apart by color alone: it labels them, marks them or gives a table of its values too.

Series

The one color of a chart with a single series, and the stronger step it takes under the pointer.

  1. series
  2. series-hover

Categorical

Series that are different things, in this fixed order and never cycled: the first series takes the first color, the second the second. A ninth series and beyond are gathered as one, in the muted gray of the legend.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8

Sequential

One hue from less to more, for amounts. In the dark theme the scale runs the other way, so more always stands out most.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5

Diverging

Two hues out from a gray middle, for values above and below a point that matters, such as a target or zero.

  1. low-2
  2. low-1
  3. mid
  4. high-1
  5. high-2

Reference line

A line across a chart for a target, an average or a limit.

  1. reference-line

Status

A mark that shows a real state: good, warning or bad. Calmer than the feedback colors, which stay for badges, banners, icons and text, and never a series color. A label or an icon says the state too.

  1. good
  2. warning
  3. bad

Color blindness

Each categorical pair a chart draws side by side, and the last beside the first where a donut closes its circle, measured as far apart as the two look: the distance between them in the OKLab color space, times 100, as each is seen with full color vision and with each of the three kinds of color blindness. 8 or more is told apart by color; from 6, only with a label beside it; with full color vision a pair needs 15. 32 of the 32 checks, each pair in each theme, are told apart by color alone.

All 32 checks
Categorical colors seen with color blindness
PairThemeNormalProtanopiaDeuteranopiaTritanopiaVerdict
1 beside 2Light36.630.635.431.7Told apart
1 beside 2Dark28.524.727.328.1Told apart
1 beside 2Light cockpit22.417.420.422.4Told apart
1 beside 2Dark cockpit21.718.119.123.2Told apart
2 beside 3Light26.316.625.029.6Told apart
2 beside 3Dark21.022.117.223.7Told apart
2 beside 3Light cockpit21.021.619.813.6Told apart
2 beside 3Dark cockpit17.818.116.810.1Told apart
3 beside 4Light23.422.419.018.1Told apart
3 beside 4Dark22.117.117.316.8Told apart
3 beside 4Light cockpit25.320.210.725.2Told apart
3 beside 4Dark cockpit22.817.69.023.8Told apart
4 beside 5Light39.531.627.317.2Told apart
4 beside 5Dark27.820.920.419.4Told apart
4 beside 5Light cockpit21.418.214.014.1Told apart
4 beside 5Dark cockpit19.616.512.413.9Told apart
5 beside 6Light29.821.219.918.7Told apart
5 beside 6Dark28.721.525.226.7Told apart
5 beside 6Light cockpit25.023.621.49.9Told apart
5 beside 6Dark cockpit22.020.818.98.9Told apart
6 beside 7Light18.714.818.817.0Told apart
6 beside 7Dark16.514.215.615.6Told apart
6 beside 7Light cockpit23.222.623.010.3Told apart
6 beside 7Dark cockpit20.519.920.310.2Told apart
7 beside 8Light29.425.315.618.4Told apart
7 beside 8Dark29.627.227.024.1Told apart
7 beside 8Light cockpit22.720.121.523.6Told apart
7 beside 8Dark cockpit19.917.518.921.7Told apart
8 around to 1Light27.916.019.131.2Told apart
8 around to 1Dark20.314.020.622.8Told apart
8 around to 1Light cockpit22.718.916.725.5Told apart
8 around to 1Dark cockpit22.119.416.425.6Told apart

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

Contrast is measured where it matters, by the rules of WCAG 2.2. Text needs 4.5:1 against what it actually sits on (WCAG 1.4.3). A color that is the only way to see a control, its state or where focus is needs 3:1 against what is next to it (WCAG 1.4.11). Only pairs the components really use are listed, in both themes; a pair that falls short is a decision for the Figma file.

249 pairsLight229 pass20 fall shortDark216 pass33 fall shortLight cockpit226 pass23 fall shortDark cockpit217 pass32 fall short

All 249 pairs

Open a row to see where the pair is used.

Contrast of every pair
PairLightDarkLight cockpitDark cockpit
Text, which needs 4.5:1110
text.defaulton surface.canvas12.85:1passes15.66:1passes12.85:1passes15.66:1passes
text.defaulton surface.default14.08:1passes14.58:1passes14.08:1passes14.58:1passes
text.defaulton surface.raised14.72:1passes12.85:1passes14.72:1passes12.85:1passes
text.defaulton surface.sunken11.83:1passes16.47:1passes11.83:1passes16.47:1passes
text.subtleon surface.canvas6.30:1passes7.51:1passes6.30:1passes7.51:1passes
text.subtleon surface.default6.90:1passes6.99:1passes6.90:1passes6.99:1passes
text.subtleon surface.raised7.22:1passes6.16:1passes7.22:1passes6.16:1passes
text.subtleon surface.sunken5.80:1passes7.90:1passes5.80:1passes7.90:1passes
text.subtleston surface.canvas4.60:1passes5.07:1passes4.60:1passes5.07:1passes
text.subtleston surface.default5.04:1passes4.72:1passes5.04:1passes4.72:1passes
text.subtleston surface.raised5.27:1passes4.16:1falls short5.27:1passes4.16:1falls short
text.subtleston surface.sunken4.23:1falls short5.33:1passes4.23:1falls short5.33:1passes
text.brandon surface.canvas4.83:1passes5.06:1passes4.83:1passes5.06:1passes
text.brandon surface.default5.30:1passes4.71:1passes5.30:1passes4.71:1passes
text.brandon surface.raised5.53:1passes4.15:1falls short5.53:1passes4.15:1falls short
text.brandon surface.sunken4.45:1falls short5.32:1passes4.45:1falls short5.32:1passes
text.linkon surface.canvas12.85:1passes15.66:1passes12.85:1passes15.66:1passes
text.linkon surface.default14.08:1passes14.58:1passes14.08:1passes14.58:1passes
text.linkon surface.raised14.72:1passes12.85:1passes14.72:1passes12.85:1passes
text.link-hoveron surface.canvas15.66:1passes17.17:1passes15.66:1passes17.17:1passes
text.link-hoveron surface.default17.17:1passes15.98:1passes17.17:1passes15.98:1passes
text.link-hoveron surface.raised17.95:1passes14.08:1passes17.95:1passes14.08:1passes
text.defaulton surface.selected10.87:1passes13.09:1passes10.87:1passes13.09:1passes
text.subtleon surface.selected5.33:1passes6.28:1passes5.33:1passes6.28:1passes
text.link-pressedon surface.canvas9.18:1passes11.67:1passes9.18:1passes11.67:1passes
text.link-pressedon surface.default10.06:1passes10.86:1passes10.06:1passes10.86:1passes
text.link-pressedon surface.raised10.52:1passes9.57:1passes10.52:1passes9.57:1passes
text.inverseon surface.inverse12.38:1passes12.85:1passes12.38:1passes12.85:1passes
text.on-brandon surface.brand5.53:1passes5.53:1passes5.53:1passes5.53:1passes
text.defaulton surface.overlay15.38:1passes10.81:1passes15.38:1passes10.81:1passes
text.defaulton surface.hover10.03:1passes11.64:1passes10.03:1passes11.64:1passes
text.subtleon surface.overlay7.54:1passes5.18:1passes7.54:1passes5.18:1passes
text.subtleston surface.overlay5.50:1passes3.50:1falls short5.50:1passes3.50:1falls short
text.defaulton surface.neutral-subtle10.87:1passes13.09:1passes10.87:1passes13.09:1passes
text.subtleon surface.neutral-subtle5.33:1passes6.28:1passes5.33:1passes6.28:1passes
action.ghost.foregroundon surface.neutral-subtle9.14:1passes9.75:1passes9.14:1passes9.75:1passes
text.subtleston surface.neutral-subtle3.89:1falls short4.24:1falls short3.89:1falls short4.24:1falls short
text.defaulton feedback.info.surface-subtle12.88:1passes12.56:1passes12.88:1passes12.56:1passes
text.subtleon feedback.info.surface-subtle6.31:1passes6.02:1passes6.31:1passes6.02:1passes
text.defaulton feedback.danger.surface-subtle12.82:1passes12.54:1passes12.82:1passes12.54:1passes
text.defaulton action.default.background-pressed9.57:1passes6.30:1passes9.57:1passes6.30:1passes
text.defaulton action.ghost.background-hover10.03:1passes11.64:1passes10.03:1passes11.64:1passes
text.defaulton action.ghost.background-pressed9.57:1passes10.81:1passes9.57:1passes10.81:1passes
text.subtleon action.ghost.background-hover4.92:1passes5.58:1passes4.92:1passes5.58:1passes
text.subtleon action.ghost.background-pressed4.69:1passes5.18:1passes4.69:1passes5.18:1passes
feedback.danger.text-on-subtleon action.ghost.background-hover4.91:1passes8.72:1passes4.91:1passes8.72:1passes
feedback.danger.text-on-subtleon action.ghost.background-pressed4.69:1passes8.09:1passes4.69:1passes8.09:1passes
text.subtleon action.default.background-pressed4.69:1passes3.02:1falls short4.69:1passes3.02:1falls short
text.on-mediaon surface.scrim9.72:1passes9.72:1passes9.72:1passes9.72:1passes
action.brand.foregroundon action.brand.background5.53:1passes5.53:1passes5.53:1passes5.53:1passes
action.brand.foregroundon action.brand.background-hover7.21:1passes7.21:1passes7.21:1passes7.21:1passes
action.brand.foregroundon action.brand.background-pressed10.52:1passes10.52:1passes10.52:1passes10.52:1passes
action.secondary.foregroundon action.secondary.background8.43:1passes9.75:1passes8.43:1passes9.75:1passes
action.secondary.foregroundon action.secondary.background-hover7.71:1passes8.68:1passes7.71:1passes8.68:1passes
action.secondary.foregroundon action.secondary.background-pressed7.02:1passes7.68:1passes7.02:1passes7.68:1passes
action.inverse.foregroundon action.inverse.background12.38:1passes14.08:1passes12.38:1passes14.08:1passes
action.inverse.foregroundon action.inverse.background-hover14.72:1passes12.85:1passes14.72:1passes12.85:1passes
action.inverse.foregroundon action.inverse.background-pressed16.70:1passes9.57:1passes16.70:1passes9.57:1passes
action.default.foregroundon surface.neutral-subtle9.14:1passes13.09:1passes9.14:1passes13.09:1passes
action.default.foregroundon surface.hover8.43:1passes11.64:1passes8.43:1passes11.64:1passes
action.default.foregroundon action.default.background-pressed8.05:1passes6.30:1passes8.05:1passes6.30:1passes
action.danger.foregroundon action.danger.background6.88:1passes9.39:1passes6.88:1passes9.39:1passes
action.danger.foreground-hoveron action.danger.background-hover7.49:1passes9.17:1passes7.49:1passes9.17:1passes
action.danger.foreground-hoveron action.danger.background-pressed5.07:1passes6.28:1passes5.07:1passes6.28:1passes
action.outline.foregroundon surface.default11.85:1passes10.86:1passes11.85:1passes10.86:1passes
action.outline.foregroundon surface.canvas10.81:1passes11.67:1passes10.81:1passes11.67:1passes
action.outline.foregroundon surface.raised12.38:1passes9.57:1passes12.38:1passes9.57:1passes
action.outline.foregroundon surface.overlay12.94:1passes8.05:1passes12.94:1passes8.05:1passes
action.outline.foregroundon action.outline.background-hover9.14:1passes10.75:1passes9.14:1passes10.75:1passes
action.outline.foregroundon action.outline.background-pressed8.05:1passes8.05:1passes8.05:1passes8.05:1passes
action.ghost.foregroundon surface.default11.85:1passes10.86:1passes11.85:1passes10.86:1passes
action.ghost.foregroundon surface.canvas10.81:1passes11.67:1passes10.81:1passes11.67:1passes
action.ghost.foregroundon surface.raised12.38:1passes9.57:1passes12.38:1passes9.57:1passes
action.ghost.foregroundon action.ghost.background-hover8.43:1passes8.68:1passes8.43:1passes8.68:1passes
action.ghost.foregroundon action.ghost.background-pressed8.05:1passes8.05:1passes8.05:1passes8.05:1passes
action.outline.foregroundon surface.sunken9.95:1passes12.27:1passes9.95:1passes12.27:1passes
feedback.success.text-on-surfaceon feedback.success.surface5.28:1passes5.28:1passes5.28:1passes5.28:1passes
feedback.success.text-on-subtleon feedback.success.surface-subtle6.88:1passes9.39:1passes6.88:1passes9.39:1passes
feedback.info.text-on-surfaceon feedback.info.surface5.25:1passes5.25:1passes5.25:1passes5.25:1passes
feedback.info.text-on-subtleon feedback.info.surface-subtle6.30:1passes9.40:1passes6.30:1passes9.40:1passes
feedback.warning.text-on-surfaceon feedback.warning.surface5.25:1passes5.25:1passes5.25:1passes5.25:1passes
feedback.warning.text-on-subtleon feedback.warning.surface-subtle6.31:1passes9.37:1passes6.31:1passes9.37:1passes
feedback.danger.text-on-surfaceon feedback.danger.surface5.53:1passes5.53:1passes5.53:1passes5.53:1passes
feedback.danger.text-on-subtleon feedback.danger.surface-subtle6.28:1passes9.39:1passes6.28:1passes9.39:1passes
feedback.danger.text-on-subtleon surface.default6.90:1passes10.92:1passes6.90:1passes10.92:1passes
feedback.danger.text-on-subtleon surface.canvas6.29:1passes11.73:1passes6.29:1passes11.73:1passes
feedback.success.text-on-subtleon surface.default6.87:1passes10.88:1passes6.87:1passes10.88:1passes
feedback.success.text-on-subtleon surface.canvas6.27:1passes11.69:1passes6.27:1passes11.69:1passes
feedback.warning.text-on-subtleon surface.default6.89:1passes10.89:1passes6.89:1passes10.89:1passes
feedback.warning.text-on-subtleon surface.canvas6.29:1passes11.70:1passes6.29:1passes11.70:1passes
feedback.danger.text-on-subtleon surface.overlay7.53:1passes8.09:1passes7.53:1passes8.09:1passes
text.linkon feedback.success.surface-subtle14.10:1passes12.58:1passes14.10:1passes12.58:1passes
text.linkon feedback.info.surface-subtle12.88:1passes12.56:1passes12.88:1passes12.56:1passes
text.linkon feedback.warning.surface-subtle12.89:1passes12.54:1passes12.89:1passes12.54:1passes
text.linkon feedback.danger.surface-subtle12.82:1passes12.54:1passes12.82:1passes12.54:1passes
action.ghost.foregroundon surface.sunken9.95:1passes12.27:1passes9.95:1passes12.27:1passes
action.ghost.foregroundon feedback.success.surface-subtle11.86:1passes9.37:1passes11.86:1passes9.37:1passes
action.ghost.foregroundon feedback.info.surface-subtle10.83:1passes9.36:1passes10.83:1passes9.36:1passes
action.ghost.foregroundon feedback.warning.surface-subtle10.84:1passes9.35:1passes10.84:1passes9.35:1passes
action.ghost.foregroundon feedback.danger.surface-subtle10.79:1passes9.35:1passes10.79:1passes9.35:1passes
code.keywordon surface.raised5.28:1passes6.14:1passes5.28:1passes6.14:1passes
code.declarationon surface.raised5.25:1passes6.13:1passes5.25:1passes6.13:1passes
code.stringon surface.raised5.25:1passes6.16:1passes5.25:1passes6.16:1passes
code.numberon surface.raised5.28:1passes9.59:1passes5.28:1passes9.59:1passes
code.functionon surface.raised5.28:1passes9.63:1passes5.28:1passes9.63:1passes
code.typeon surface.raised5.25:1passes6.13:1passes5.25:1passes6.13:1passes
code.tagon surface.raised5.25:1passes6.13:1passes5.25:1passes6.13:1passes
code.propertyon surface.raised10.57:1passes9.61:1passes10.57:1passes9.61:1passes
code.commenton surface.raised5.27:1passes6.16:1passes5.27:1passes6.16:1passes
code.punctuationon surface.raised7.22:1passes9.57:1passes7.22:1passes9.57:1passes
Controls, states and focus, which need 3:1139
text.link-underlineon surface.canvas1.44:1falls short1.67:1falls short1.44:1falls short1.67:1falls short
text.link-underlineon surface.default1.45:1falls short1.71:1falls short1.45:1falls short1.71:1falls short
text.link-underlineon surface.raised1.45:1falls short1.73:1falls short1.45:1falls short1.73:1falls short
text.link-underlineon surface.overlay1.45:1falls short1.71:1falls short1.45:1falls short1.71:1falls short
border.focuson surface.canvas4.83:1passes5.06:1passes4.83:1passes5.06:1passes
border.focuson surface.default5.30:1passes4.71:1passes5.30:1passes4.71:1passes
border.focuson surface.raised5.53:1passes4.15:1passes5.53:1passes4.15:1passes
border.focuson surface.overlay5.78:1passes3.49:1passes5.78:1passes3.49:1passes
border.focuson surface.hover3.77:1passes3.76:1passes3.77:1passes3.76:1passes
border.focuson feedback.success.surface-subtle5.30:1passes4.06:1passes5.30:1passes4.06:1passes
border.focuson feedback.info.surface-subtle4.84:1passes4.06:1passes4.84:1passes4.06:1passes
border.focuson feedback.warning.surface-subtle4.85:1passes4.05:1passes4.85:1passes4.05:1passes
border.focuson feedback.danger.surface-subtle4.82:1passes4.05:1passes4.82:1passes4.05:1passes
border.focuson surface.neutral-subtle4.09:1passes4.23:1passes4.09:1passes4.23:1passes
border.focus-inverseon surface.brand5.53:1passes5.53:1passes5.53:1passes5.53:1passes
border.focus-fieldon surface.sunken5.79:1passes12.35:1passes5.79:1passes12.35:1passes
border.focus-fieldon surface.default6.89:1passes10.93:1passes6.89:1passes10.93:1passes
feedback.danger.borderon surface.sunken2.85:1falls short5.32:1passes2.85:1falls short5.32:1passes
feedback.danger.borderon surface.default3.39:1passes4.71:1passes3.39:1passes4.71:1passes
feedback.danger.borderon surface.canvas3.09:1passes5.06:1passes3.09:1passes5.06:1passes
surface.sunkenon surface.default1.09:1falls short1.09:1falls short1.09:1falls short1.09:1falls short
surface.sunkenon surface.raised1.09:1falls short1.18:1falls short1.09:1falls short1.18:1falls short
border.controlon surface.default3.38:1passes4.72:1passes3.38:1passes4.72:1passes
border.controlon surface.canvas3.09:1passes5.07:1passes3.09:1passes5.07:1passes
feedback.info.borderon surface.default3.39:1passes4.71:1passes3.39:1passes4.71:1passes
feedback.info.borderon surface.sunken2.85:1falls short5.32:1passes2.85:1falls short5.32:1passes
feedback.info.borderon surface.canvas3.10:1passes5.06:1passes3.10:1passes5.06:1passes
border.strongon surface.default2.29:1falls short1.59:1falls short2.29:1falls short1.59:1falls short
border.strongon surface.canvas2.09:1falls short1.71:1falls short2.09:1falls short1.71:1falls short
surface.inverseon surface.default11.85:1passes14.58:1passes11.85:1passes14.58:1passes
surface.inverseon surface.canvas10.81:1passes15.66:1passes10.81:1passes15.66:1passes
action.inverse.backgroundon surface.default11.85:1passes15.98:1passes11.85:1passes15.98:1passes
action.inverse.backgroundon surface.canvas10.81:1passes17.17:1passes10.81:1passes17.17:1passes
surface.brandon surface.default5.30:1passes3.02:1passes5.30:1passes3.02:1passes
surface.brandon surface.canvas4.83:1passes3.24:1passes4.83:1passes3.24:1passes
surface.inverseon surface.track-subtle8.05:1passes10.81:1passes8.05:1passes10.81:1passes
surface.brandon surface.track-subtle3.60:1passes2.24:1falls short3.60:1passes2.24:1falls short
feedback.success.surfaceon surface.track-subtle3.43:1passes2.35:1falls short3.43:1passes2.35:1falls short
feedback.warning.surfaceon surface.track-subtle3.42:1passes2.36:1falls short3.42:1passes2.36:1falls short
feedback.danger.surfaceon surface.track-subtle3.60:1passes2.24:1falls short3.60:1passes2.24:1falls short
surface.inverseon surface.track3.50:1passes6.30:1passes3.50:1passes6.30:1passes
data.serieson surface.track-subtle3.42:1passes5.16:1passes2.68:1falls short4.35:1passes
feedback.success.iconon surface.track-subtle3.43:1passes5.17:1passes3.43:1passes5.17:1passes
feedback.warning.iconon surface.track-subtle3.42:1passes5.18:1passes3.42:1passes5.18:1passes
feedback.danger.iconon surface.track-subtle3.60:1passes5.16:1passes3.60:1passes5.16:1passes
surface.trackon surface.default3.38:1passes2.31:1falls short3.38:1passes2.31:1falls short
surface.trackon surface.canvas3.09:1passes2.49:1falls short3.09:1passes2.49:1falls short
surface.thumbon surface.track3.54:1passes7.22:1passes3.54:1passes7.22:1passes
surface.thumbon surface.brand5.53:1passes5.53:1passes5.53:1passes5.53:1passes
border.controlon surface.sunken2.84:1falls short5.33:1passes2.84:1falls short5.33:1passes
border.brandon surface.sunken4.45:1passes3.41:1passes4.45:1passes3.41:1passes
border.brandon surface.default5.30:1passes3.02:1passes5.30:1passes3.02:1passes
border.brandon surface.canvas4.83:1passes3.24:1passes4.83:1passes3.24:1passes
border.brandon surface.raised5.53:1passes2.66:1falls short5.53:1passes2.66:1falls short
border.brandon surface.sunken4.45:1passes3.41:1passes4.45:1passes3.41:1passes
border.brandon surface.overlay5.78:1passes2.24:1falls short5.78:1passes2.24:1falls short
action.brand.backgroundon surface.overlay5.78:1passes2.24:1falls short5.78:1passes2.24:1falls short
action.brand.backgroundon surface.default5.30:1passes3.02:1passes5.30:1passes3.02:1passes
action.brand.backgroundon surface.canvas4.83:1passes3.24:1passes4.83:1passes3.24:1passes
action.brand.backgroundon surface.neutral-subtle4.09:1passes2.71:1falls short4.09:1passes2.71:1falls short
action.brand.backgroundon surface.sunken4.45:1passes3.41:1passes4.45:1passes3.41:1passes
surface.neutral-subtleon surface.default1.19:1falls short1.21:1falls short1.19:1falls short1.21:1falls short
surface.neutral-subtleon surface.canvas1.18:1falls short1.20:1falls short1.18:1falls short1.20:1falls short
action.brand.foregroundon action.brand.background5.53:1passes5.53:1passes5.53:1passes5.53:1passes
surface.brandon surface.sunken4.45:1passes3.41:1passes4.45:1passes3.41:1passes
icon.defaulton surface.canvas12.85:1passes15.66:1passes12.85:1passes15.66:1passes
icon.defaulton surface.default14.08:1passes14.58:1passes14.08:1passes14.58:1passes
icon.defaulton surface.raised14.72:1passes12.85:1passes14.72:1passes12.85:1passes
icon.defaulton surface.selected10.87:1passes13.09:1passes10.87:1passes13.09:1passes
surface.defaulton surface.canvas1.10:1falls short1.07:1falls short1.10:1falls short1.07:1falls short
icon.subtleon surface.canvas6.30:1passes11.67:1passes6.30:1passes11.67:1passes
icon.subtleon surface.default6.90:1passes10.86:1passes6.90:1passes10.86:1passes
icon.subtleon surface.raised7.22:1passes9.57:1passes7.22:1passes9.57:1passes
icon.subtleon surface.overlay7.54:1passes8.05:1passes7.54:1passes8.05:1passes
surface.raisedon surface.canvas1.15:1falls short1.22:1falls short1.15:1falls short1.22:1falls short
surface.canvason surface.default1.10:1falls short1.07:1falls short1.10:1falls short1.07:1falls short
action.ghost.background-pressedon surface.default1.47:1falls short1.35:1falls short1.47:1falls short1.35:1falls short
icon.defaulton action.secondary.background10.03:1passes13.09:1passes10.03:1passes13.09:1passes
feedback.danger.surfaceon surface.default5.30:1passes3.02:1passes5.30:1passes3.02:1passes
feedback.danger.surfaceon surface.canvas4.83:1passes3.24:1passes4.83:1passes3.24:1passes
data.serieson surface.canvas4.58:1passes7.48:1passes3.59:1passes6.31:1passes
data.serieson surface.default5.03:1passes6.96:1passes3.94:1passes5.87:1passes
data.serieson surface.raised5.25:1passes6.13:1passes4.12:1passes5.18:1passes
data.categorical.1on surface.canvas4.58:1passes7.48:1passes3.59:1passes6.31:1passes
data.categorical.1on surface.default5.03:1passes6.96:1passes3.94:1passes5.87:1passes
data.categorical.1on surface.raised5.25:1passes6.13:1passes4.12:1passes5.18:1passes
data.categorical.2on surface.canvas3.09:1passes7.51:1passes3.12:1passes5.98:1passes
data.categorical.2on surface.default3.39:1passes6.99:1passes3.42:1passes5.57:1passes
data.categorical.2on surface.raised3.54:1passes6.16:1passes3.58:1passes4.91:1passes
data.categorical.3on surface.canvas6.30:1passes11.67:1passes5.59:1passes3.98:1passes
data.categorical.3on surface.default6.90:1passes10.86:1passes6.12:1passes3.71:1passes
data.categorical.3on surface.raised7.22:1passes9.57:1passes6.40:1passes3.27:1passes
data.categorical.4on surface.canvas3.08:1passes7.49:1passes3.12:1passes6.42:1passes
data.categorical.4on surface.default3.38:1passes6.97:1passes3.42:1passes5.97:1passes
data.categorical.4on surface.raised3.53:1passes6.14:1passes3.58:1passes5.27:1passes
data.categorical.5on surface.canvas3.10:1passes11.73:1passes4.80:1passes4.41:1passes
data.categorical.5on surface.default3.39:1passes10.91:1passes5.26:1passes4.10:1passes
data.categorical.5on surface.raised3.55:1passes9.62:1passes5.50:1passes3.61:1passes
data.categorical.6on surface.canvas4.58:1passes5.04:1passes3.18:1passes6.30:1passes
data.categorical.6on surface.default5.02:1passes4.69:1passes3.48:1passes5.87:1passes
data.categorical.6on surface.raised5.25:1passes4.14:1passes3.64:1passes5.17:1passes
data.categorical.7on surface.canvas3.10:1passes5.05:1passes4.65:1passes4.55:1passes
data.categorical.7on surface.default3.40:1passes4.70:1passes5.10:1passes4.23:1passes
data.categorical.7on surface.raised3.55:1passes4.14:1passes5.33:1passes3.73:1passes
data.categorical.8on surface.canvas4.61:1passes11.68:1passes4.82:1passes4.39:1passes
data.categorical.8on surface.default5.05:1passes10.87:1passes5.28:1passes4.08:1passes
data.categorical.8on surface.raised5.28:1passes9.58:1passes5.52:1passes3.60:1passes
surface.trackon surface.canvas3.09:1passes2.49:1falls short3.09:1passes2.49:1falls short
surface.trackon surface.default3.38:1passes2.31:1falls short3.38:1passes2.31:1falls short
surface.trackon surface.raised3.54:1passes2.04:1falls short3.54:1passes2.04:1falls short
data.series-hoveron surface.canvas6.28:1passes11.72:1passes5.10:1passes8.47:1passes
data.series-hoveron surface.default6.89:1passes10.90:1passes5.59:1passes7.88:1passes
data.series-hoveron surface.raised7.20:1passes9.61:1passes5.85:1passes6.94:1passes
data.reference-lineon surface.canvas9.18:1passes15.66:1passes6.30:1passes7.51:1passes
data.reference-lineon surface.default10.06:1passes14.58:1passes6.90:1passes6.99:1passes
data.reference-lineon surface.raised10.52:1passes12.85:1passes7.22:1passes6.16:1passes
data.sequential.3on surface.canvas3.10:1passes3.42:1passes2.62:1falls short3.80:1passes
data.sequential.3on surface.default3.39:1passes3.18:1passes2.87:1falls short3.54:1passes
data.sequential.3on surface.raised3.55:1passes2.80:1falls short3.00:1passes3.12:1passes
data.sequential.4on surface.canvas4.58:1passes5.06:1passes4.10:1passes5.54:1passes
data.sequential.4on surface.default5.03:1passes4.71:1passes4.50:1passes5.15:1passes
data.sequential.4on surface.raised5.25:1passes4.15:1passes4.70:1passes4.54:1passes
data.sequential.5on surface.canvas6.28:1passes11.72:1passes6.62:1passes8.33:1passes
data.sequential.5on surface.default6.89:1passes10.90:1passes7.25:1passes7.75:1passes
data.sequential.5on surface.raised7.20:1passes9.61:1passes7.58:1passes6.83:1passes
feedback.success.iconon surface.canvas4.61:1passes7.49:1passes4.61:1passes7.49:1passes
feedback.success.iconon surface.default5.05:1passes6.97:1passes5.05:1passes6.97:1passes
feedback.success.iconon surface.raised5.28:1passes6.14:1passes5.28:1passes6.14:1passes
feedback.warning.iconon surface.canvas4.59:1passes7.51:1passes4.59:1passes7.51:1passes
feedback.warning.iconon surface.default5.03:1passes6.99:1passes5.03:1passes6.99:1passes
feedback.warning.iconon surface.raised5.25:1passes6.16:1passes5.25:1passes6.16:1passes
feedback.danger.iconon surface.canvas4.83:1passes7.47:1passes4.83:1passes7.47:1passes
feedback.danger.iconon surface.default5.30:1passes6.95:1passes5.30:1passes6.95:1passes
feedback.danger.iconon surface.raised5.53:1passes6.13:1passes5.53:1passes6.13:1passes
icon.on-brandon action.brand.background5.53:1passes5.53:1passes5.53:1passes5.53:1passes
border.inverseon surface.overlay15.38:1passes12.38:1passes15.38:1passes12.38:1passes
border.inverseon surface.canvas12.85:1passes17.95:1passes12.85:1passes17.95:1passes
border.inverseon surface.default14.08:1passes16.70:1passes14.08:1passes16.70:1passes
border.inverseon surface.raised14.72:1passes14.72:1passes14.72:1passes14.72:1passes
Not measured, and why
Colors not measured
WhatWhy not
Disabled text and controls
WCAG exempts controls that cannot be used. They must still read as disabled, which is checked by eye, not by a ratio.
Dividers, card and panel edges, the highlight and shade edges
They separate or polish. What they surround is identified by its text, its fill or its place, so their color is not what makes anything usable.
Button borders
A button is identified by its label and its fill; the border only styles it. The label is measured.
A soft badge's and a tag's pale edge
The badge and the tag say their status in words, which are measured on their pale fill; the edge only sets the pill off from what it sits on.
Hover and pressed fills against the page, a selected chip's fill, a chosen list option's fill, the current sidebar item's fill, and a tree view's chosen row's fill
Hover is not needed to find or use a control. The label on each hover and pressed fill is measured as text. A selected chip and a chosen list option show the choice by their tick, measured on their fill, and the current sidebar item and a tree view's chosen row by their bolder label, measured on their fill, so their fills are extra.
Logos and text straight on pictures
Logos are exempt. Text on a photograph with no band under it depends on the photograph, so it is checked by eye where it is used. The card's band over its picture is measured.
A card's warning and danger edges and its corner brackets
The edges draw attention to a card whose trouble is said in words inside it, measured as text; the brackets are decoration and say nothing a reader needs.
Shadows and elevation
They show depth, not what a control is or which state it is in.
Skeletons
A skeleton holds the place of content that has not arrived and is hidden from assistive technology; the region around it says it is loading. Its see-through gray shows on every surface, which is checked by eye.
A toolbar's rim and a docked toolbar's line
They draw the edge of a bar that is not a control itself; each tool in it carries its own look, and the floating bar's raised surface and shadow set it off too.
A code block's line numbers
They help a reader point at a line; they are hidden from screen readers, left out when the code is selected or copied, and say nothing the code does not. The code itself is measured.
Icons beside a text label
The label carries the meaning; the icon is decoration for this rule. Icons that stand alone, in icon-only buttons, are measured with the ghost button pairs.
A stepper's connecting lines, its finished steps' gray marks, and its summary's track
The lines join the steps and repeat their order; each step's status is in its mark's number, check or warning sign and in words. A finished step is shown by its check, measured on the mark. The summary's track repeats its count, which is words, and is hidden from screen readers.
A timeline's dots and lines
The kind of event is said in the title's words and, for screen readers, in words before it; the dot repeats it in color and the line joins the events in their order. The words are measured.
A splitter's line at rest and under the pointer
The line is the divider's groove: it separates the two panes. The grip's dots on their pill show where to take hold and are measured; under the pointer the hit area takes the hover fill and the pointer changes shape, and while it is dragged the line turns brand and twice as thick, which is measured. A splitter without its grip is found by its place between the panes.
A tree view's lines and its changed dot
The lines repeat the levels the rows' indents already show. The changed dot is said in words after the label, which a screen reader hears; a page says it in the pane beside the tree as well.
A sparkline's soft area
It repeats the line above it, which is measured; the figure beside the sparkline carries the meaning.
A heatmap's empty squares and its lightest level
They show the rhythm of the weeks at a glance, not a value to read: every day's value is in the heatmap's table, which a screen reader reads and a page can show. The three stronger levels are measured.
A chart's grid lines, the area under a line, the drop line and the ring round a marked point
The grid lines and the drop line help the eye read a value across to its label; the area repeats the line above it; the ring keeps the point clear of the line. The values themselves are in each chart's table, and the line, the bars and the parts are measured.
A fill slider's marks
They are a scale to read by eye between the lowest and highest values, not the value itself, which the red part, the handle and the words show.
A status dot's dot, and the dot on a navigation item or a sidebar item
The status is said in the words beside the dot, or in its name when it stands alone; on a navigation or sidebar item the dot's words are part of the item's name. The dot is a cue for the eye, so its color is not what makes the status known.
The sidebar's tree line, the line under a row of line tabs, and the subtle underline of a line tab under the pointer
The tree line repeats what the children's indent already shows; the line under the tabs separates them from their panel; hover is not needed to find or use a tab. The chosen tab's brand underline is measured.
An empty state's icon, an error summary's icon and its edge, and the cue at the end of a page header's tabs
The empty state and the error summary say what happened in words, which are measured; the icon and the edge repeat the tone. The cue only hints that the row of tabs scrolls; the tabs past it are reached by scrolling and by the arrow keys, and each tab's label is measured.
A chosen picture tile's rim and an avatar group's rings
The tick on the chosen tile shows the choice and is measured; the rim repeats it. The rings only keep overlapping faces apart.
The colors a color range's steps, a contrast pair's sample and a shadow editor's preview show; a curve editor's curve, arms, straight line and limit; a ruler's breakpoint lines and width ticks; a corner sample's edges
The colors are the reader's data, each told in words beside it (a step's name and ratio, the roles, the ratio and the mark, the layers' numbers). The lines draw numbers that the curve editor's boxes and handles, and the ruler's figures and handle, give in words; a corner sample is a picture whose step and size are written beside it.
The colors a color swatch, a color slider's strip and a color area show, their edges, the checkerboard, and a color thumb's light ring
The colors are the reader's data, not the system's, so no pair can be fixed; each color is also said in words (a swatch's name, a slider's or an area's value and color name, a code). The edges and the checkerboard only show where a color ends and how see-through it is. The thumb's ring is light on any color and its focus ring, with the page's color in the gap, is measured with the focus pairs.

Tokens

314 tokens in 11 groups. Open a group to see its tokens. The button beside a CSS name copies it, ready to paste; open a row for what the token is for and which components read it.

Rampsprimitive · 141 tokens

The raw shades the semantic colors point at. No component reads them, and they do not reach CSS. A step number means the same contrast with white in every hue; a see-through ramp shows its steps over a checkerboard.

White, see-through10 steps
  1. white, 3
  2. white, 5
  3. white, 10
  4. white, 15
  5. white, 20
  6. white, 30
  7. white, 40
  8. white, 50
  9. white, 90
  10. white, 100
Black, see-through9 steps
  1. black, 5
  2. black, 10
  3. black, 15
  4. black, 20
  5. black, 30
  6. black, 40
  7. black, 50
  8. black, 60
  9. black, 90
Red, see-through3 steps
  1. dark vibrant red, 70% transparent, 30
  2. dark vibrant red, 60% transparent, 40
  3. dark vibrant red, 50% transparent, 50
Grey-200, see-through1 step
  1. very light pale cyan blue, 81% transparent, 19
Grey-400, see-through1 step
  1. light pale cyan blue, 50% transparent, 50
Grey-600, see-through6 steps
  1. dark grayish cyan blue, 90% transparent, 10
  2. dark grayish cyan blue, 80% transparent, 20
  3. dark grayish cyan blue, 75% transparent, 25
  4. dark grayish cyan blue, 70% transparent, 30
  5. dark grayish cyan blue, 65% transparent, 35
  6. dark grayish cyan blue, 60% transparent, 40
Grey-700, see-through1 step
  1. dark grayish cyan blue, 50% transparent, 50
Grey-800, see-through7 steps
  1. dark grayish cyan blue, 95% transparent, 5
  2. dark grayish cyan blue, 92% transparent, 8
  3. dark grayish cyan blue, 90% transparent, 10
  4. dark grayish cyan blue, 85% transparent, 15
  5. dark grayish cyan blue, 80% transparent, 20
  6. dark grayish cyan blue, 75% transparent, 25
  7. dark grayish cyan blue, 70% transparent, 30
Grey-900, see-through1 step
  1. very dark grayish cyan blue, 81% transparent, 19
Grey-950, see-through1 step
  1. very dark grayish cyan blue, 20% transparent, 80
Grey13 steps
  1. very light pale cyan blue, 50, contrast 1.0 to 1
  2. very light pale cyan blue, 100, contrast 1.0 to 1
  3. very light pale cyan blue, 200, contrast 1.1 to 1
  4. light pale cyan blue, 300, contrast 1.6 to 1
  5. light pale cyan blue, 400, contrast 2.4 to 1
  6. grayish cyan blue, 500, contrast 3.6 to 1
  7. dark grayish cyan blue, 600, contrast 5.5 to 1
  8. dark grayish cyan blue, 700, contrast 7.5 to 1
  9. dark grayish cyan blue, 800, contrast 10.9 to 1
  10. dark grayish cyan blue, 850, contrast 12.9 to 1
  11. very dark grayish cyan blue, 900, contrast 15.3 to 1
  12. very dark grayish cyan blue, 925, contrast 17.4 to 1
  13. very dark grayish cyan blue, 950, contrast 18.7 to 1
Red11 steps
  1. very light pale red, 50, contrast 1.0 to 1
  2. very light pale red, 100, contrast 1.0 to 1
  3. very light pale red, 200, contrast 1.1 to 1
  4. very light pale red, 300, contrast 1.5 to 1
  5. light vibrant red, 400, contrast 2.5 to 1
  6. vibrant red, 500, contrast 3.7 to 1
  7. dark vibrant red, 600, contrast 5.7 to 1
  8. dark vibrant red, 700, contrast 7.5 to 1
  9. dark red, 800, contrast 10.9 to 1
  10. very dark grayish red, 900, contrast 15.0 to 1
  11. very dark grayish red, 950, contrast 18.7 to 1
Blue11 steps
  1. very light pale blue, 50, contrast 1.0 to 1
  2. very light pale blue, 100, contrast 1.0 to 1
  3. very light pale blue, 200, contrast 1.1 to 1
  4. light pale blue, 300, contrast 1.6 to 1
  5. light blue, 400, contrast 2.5 to 1
  6. vibrant blue, 500, contrast 3.7 to 1
  7. dark vibrant blue, 600, contrast 5.4 to 1
  8. dark vibrant blue, 700, contrast 7.5 to 1
  9. dark blue, 800, contrast 11.0 to 1
  10. very dark grayish blue, 900, contrast 15.0 to 1
  11. very dark grayish blue, 950, contrast 18.7 to 1
Green11 steps
  1. very light pale green, 50, contrast 1.0 to 1
  2. very light pale green, 100, contrast 1.0 to 1
  3. very light pale green, 200, contrast 1.1 to 1
  4. light green, 300, contrast 1.6 to 1
  5. light vibrant green, 400, contrast 2.5 to 1
  6. vibrant green, 500, contrast 3.6 to 1
  7. dark vibrant green, 600, contrast 5.5 to 1
  8. dark green, 700, contrast 7.5 to 1
  9. dark green, 800, contrast 10.9 to 1
  10. very dark grayish green, 900, contrast 15.0 to 1
  11. very dark grayish green, 950, contrast 18.7 to 1
Orange11 steps
  1. very light pale orange, 50, contrast 1.0 to 1
  2. very light pale red orange, 100, contrast 1.0 to 1
  3. very light pale red orange, 200, contrast 1.1 to 1
  4. very light pale red orange, 300, contrast 1.6 to 1
  5. light vibrant red orange, 400, contrast 2.4 to 1
  6. vibrant red orange, 500, contrast 3.7 to 1
  7. dark vibrant red orange, 600, contrast 5.4 to 1
  8. dark red orange, 700, contrast 7.5 to 1
  9. dark red orange, 800, contrast 10.9 to 1
  10. very dark grayish red orange, 900, contrast 15.0 to 1
  11. very dark grayish red orange, 950, contrast 18.7 to 1
Yellow11 steps
  1. very light pale yellow, 50, contrast 1.0 to 1
  2. very light pale yellow, 100, contrast 1.0 to 1
  3. very light pale yellow, 200, contrast 1.1 to 1
  4. light yellow green, 300, contrast 1.5 to 1
  5. light yellow green, 400, contrast 2.5 to 1
  6. yellow green, 500, contrast 3.7 to 1
  7. dark yellow green, 600, contrast 5.5 to 1
  8. dark grayish yellow green, 700, contrast 7.4 to 1
  9. dark grayish yellow green, 800, contrast 11.0 to 1
  10. very dark grayish yellow green, 900, contrast 14.9 to 1
  11. very dark grayish yellow green, 950, contrast 18.7 to 1
Purple11 steps
  1. very light pale purple magenta, 50, contrast 1.0 to 1
  2. very light pale purple magenta, 100, contrast 1.0 to 1
  3. very light pale purple magenta, 200, contrast 1.1 to 1
  4. very light pale purple magenta, 300, contrast 1.5 to 1
  5. light vibrant purple magenta, 400, contrast 2.5 to 1
  6. vibrant purple magenta, 500, contrast 3.7 to 1
  7. vibrant purple magenta, 600, contrast 5.5 to 1
  8. dark vibrant purple magenta, 700, contrast 7.5 to 1
  9. dark vibrant purple magenta, 800, contrast 10.9 to 1
  10. very dark purple magenta, 900, contrast 15.0 to 1
  11. very dark grayish purple magenta, 950, contrast 18.7 to 1
Pink11 steps
  1. very light pale pink, 50, contrast 1.0 to 1
  2. very light pale pink, 100, contrast 1.0 to 1
  3. very light pale pink, 200, contrast 1.1 to 1
  4. very light pale pink, 300, contrast 1.6 to 1
  5. light vibrant pink, 400, contrast 2.5 to 1
  6. vibrant pink, 500, contrast 3.7 to 1
  7. dark vibrant pink, 600, contrast 5.5 to 1
  8. dark vibrant pink, 700, contrast 7.5 to 1
  9. dark pink, 800, contrast 10.9 to 1
  10. very dark grayish pink, 900, contrast 14.9 to 1
  11. very dark grayish pink, 950, contrast 18.7 to 1
Teal11 steps
  1. very light pale cyan, 50, contrast 1.0 to 1
  2. very light pale cyan, 100, contrast 1.0 to 1
  3. very light pale cyan, 200, contrast 1.1 to 1
  4. light cyan, 300, contrast 1.6 to 1
  5. light cyan, 400, contrast 2.5 to 1
  6. grayish cyan, 500, contrast 3.7 to 1
  7. dark grayish cyan, 600, contrast 5.4 to 1
  8. dark grayish cyan, 700, contrast 7.5 to 1
  9. dark grayish cyan, 800, contrast 11.0 to 1
  10. very dark grayish cyan, 900, contrast 15.0 to 1
  11. very dark grayish cyan, 950, contrast 18.7 to 1
Surfacesemantic · 18 tokens
Color tokens: Surface
TokenLightDarkCSS
canvas#e7ebf0#111213--smbk-color-surface-canvas
default#f3f5f8#181a1c--smbk-color-surface-default
disabled#e7ebf0#373d43--smbk-color-surface-disabled
raised#f9fafb#232527--smbk-color-surface-raised
brand#cc0d0d#cc0d0d--smbk-color-surface-brand
inverse#2d3237#e7ebf0--smbk-color-surface-inverse
sunken#373d430d#00000066--smbk-color-surface-sunken
translucent#ffffff66#00000066--smbk-color-surface-translucent
translucent-subtle#ffffff26#00000026--smbk-color-surface-translucent-subtle
overlay#ffffff#2d3237--smbk-color-surface-overlay
track#7c8692#4e555e--smbk-color-surface-track
skeleton#373d431a#606a7533--smbk-color-surface-skeleton
hover#373d4326#606a754d--smbk-color-surface-hover
track-subtle#c4cdd8#2d3237--smbk-color-surface-track-subtle
neutral-subtle#373d431a#606a7533--smbk-color-surface-neutral-subtle
thumb#f9fafb#f9fafb--smbk-color-surface-thumb
selected#373d431a#606a7533--smbk-color-surface-selected
scrim#111213cc#111213cc--smbk-color-surface-scrim
Textsemantic · 15 tokens
Color tokens: Text
TokenLightDarkCSS
default#232527#e7ebf0--smbk-color-text-default
subtle#4e555e#9ba5b1--smbk-color-text-subtle
subtlest#606a75#7c8692--smbk-color-text-subtlest
disabled#7c8692#606a75--smbk-color-text-disabled
brand#cc0d0d#f34336--smbk-color-text-brand
inverse#f9fafb#232527--smbk-color-text-inverse
on-brand#f9fafb#f9fafb--smbk-color-text-on-brand
on-media#f9fafb#f9fafb--smbk-color-text-on-media
link#232527#e7ebf0--smbk-color-text-link
link-hover#111213#f3f5f8--smbk-color-text-link-hover
link-pressed#373d43#c4cdd8--smbk-color-text-link-pressed
link-underline#23252730#e7ebf030--smbk-color-text-link-underline
link-underline-hover#4e555e80#9ba5b180--smbk-color-text-link-underline-hover
link-underline-pressed#4e555e#9ba5b1--smbk-color-text-link-underline-pressed
link-disabled#606a75#9ba5b1--smbk-color-text-link-disabled
Bordersemantic · 17 tokens
Color tokens: Border
TokenLightDarkCSS
subtle#c4cdd8#2d3237--smbk-color-border-subtle
strong#9ba5b1#373d43--smbk-color-border-strong
control#7c8692#7c8692--smbk-color-border-control
control-hover#606a75#9ba5b1--smbk-color-border-control-hover
control-disabled#c4cdd8#606a75--smbk-color-border-control-disabled
control-selected#ffffff1a#ffffff80--smbk-color-border-control-selected
focus#cc0d0d#f34336--smbk-color-border-focus
focus-field#2f4ab8#dfce64--smbk-color-border-focus-field
brand#cc0d0d#cc0d0d--smbk-color-border-brand
inverse#232527#f9fafb--smbk-color-border-inverse
groove-top#c4cdd8#00000066--smbk-color-border-groove-top
groove-bottom#ffffff#ffffff0d--smbk-color-border-groove-bottom
rim#ffffffe6#ffffff0d--smbk-color-border-rim
rim-subtle#ffffff33#ffffff08--smbk-color-border-rim-subtle
edge-shade-subtle#0000001a#00000033--smbk-color-border-edge-shade-subtle
focus-inverse#f9fafb#f9fafb--smbk-color-border-focus-inverse
on-media#f9fafb#f9fafb--smbk-color-border-on-media
Actionsemantic · 48 tokens
Color tokens: Action
TokenLightDarkCSS
Brand9
background#cc0d0d#cc0d0d--smbk-color-action-brand-background
background-hover#a51d17#a51d17--smbk-color-action-brand-background-hover
background-pressed#761812#761812--smbk-color-action-brand-background-pressed
background-disabled#cc0d0d66#cc0d0d80--smbk-color-action-brand-background-disabled
foreground#f9fafb#f9fafb--smbk-color-action-brand-foreground
foreground-disabled#ffffff4d#ffffff4d--smbk-color-action-brand-foreground-disabled
border#ffffff1a#ffffff1a--smbk-color-action-brand-border
border-hover#0000000d#0000000d--smbk-color-action-brand-border-hover
border-disabled#0000000d#0000000d--smbk-color-action-brand-border-disabled
Default6
background#f3f5f8#2d3237--smbk-color-action-default-background
background-hover#e7ebf0#373d43--smbk-color-action-default-background-hover
background-pressed#c4cdd8#4e555e--smbk-color-action-default-background-pressed
foreground#2d3237#e7ebf0--smbk-color-action-default-foreground
border#f9fafb#373d43--smbk-color-action-default-border
border-hover#9ba5b1#606a75--smbk-color-action-default-border-hover
Secondary4
background#373d4326#606a7533--smbk-color-action-secondary-background
background-hover#373d4333#606a754d--smbk-color-action-secondary-background-hover
background-pressed#373d4340#606a7566--smbk-color-action-secondary-background-pressed
foreground#2d3237#c4cdd8--smbk-color-action-secondary-foreground
Outline7
border#c4cdd8#373d43--smbk-color-action-outline-border
border-hover#9ba5b1#4e555e--smbk-color-action-outline-border-hover
border-pressed#7c8692#606a75--smbk-color-action-outline-border-pressed
foreground#2d3237#c4cdd8--smbk-color-action-outline-foreground
foreground-disabled#9ba5b1#606a75--smbk-color-action-outline-foreground-disabled
background-hover#373d431a#606a751a--smbk-color-action-outline-background-hover
background-pressed#c4cdd8#2d3237--smbk-color-action-outline-background-pressed
Ghost3
background-hover#373d4326#606a754d--smbk-color-action-ghost-background-hover
background-pressed#c4cdd8#2d3237--smbk-color-action-ghost-background-pressed
foreground#2d3237#c4cdd8--smbk-color-action-ghost-foreground
Inverse6
background#2d3237#f3f5f8--smbk-color-action-inverse-background
background-hover#232527#e7ebf0--smbk-color-action-inverse-background-hover
background-pressed#181a1c#c4cdd8--smbk-color-action-inverse-background-pressed
foreground#f9fafb#232527--smbk-color-action-inverse-foreground
border#373d43#f9fafb--smbk-color-action-inverse-border
border-hover#2d3237#9ba5b1--smbk-color-action-inverse-border-hover
Danger10
background#febdb2#4b130e--smbk-color-action-danger-background
background-hover#fe7d6d#761812--smbk-color-action-danger-background-hover
background-pressed#f34336#a51d17--smbk-color-action-danger-background-pressed
background-disabled#cc0d0d4d#cc0d0d4d--smbk-color-action-danger-background-disabled
foreground#761812#febdb2--smbk-color-action-danger-foreground
foreground-hover#2a0403#fee5e1--smbk-color-action-danger-foreground-hover
foreground-disabled#cc0d0d80#cc0d0d80--smbk-color-action-danger-foreground-disabled
border#0000000d#0000000d--smbk-color-action-danger-border
border-hover#cc0d0d4d#f34336--smbk-color-action-danger-border-hover
border-disabled#0000000d#0000000d--smbk-color-action-danger-border-disabled
Disabled3
background#373d4314#606a751a--smbk-color-action-disabled-background
foreground#7c8692#606a75--smbk-color-action-disabled-foreground
border#c4cdd8#2d3237--smbk-color-action-disabled-border
Feedbacksemantic · 28 tokens
Color tokens: Feedback
TokenLightDarkCSS
Success7
surface#037a1f#037a1f--smbk-color-feedback-success-surface
surface-subtle#dffddf#0a2d0e--smbk-color-feedback-success-surface-subtle
text-on-surface#f9fafb#f9fafb--smbk-color-feedback-success-text-on-surface
text-on-subtle#016317#8ddf90--smbk-color-feedback-success-text-on-subtle
border#269936#269936--smbk-color-feedback-success-border
border-subtle#8ddf90#084712--smbk-color-feedback-success-border-subtle
icon#037a1f#54b85b--smbk-color-feedback-success-icon
Warning7
surface#b14904#b14904--smbk-color-feedback-warning-surface
surface-subtle#ffe6db#431b07--smbk-color-feedback-warning-surface-subtle
text-on-surface#f9fafb#f9fafb--smbk-color-feedback-warning-text-on-surface
text-on-subtle#913900#febea2--smbk-color-feedback-warning-text-on-subtle
border#da601a#da601a--smbk-color-feedback-warning-border
border-subtle#febea2#692903--smbk-color-feedback-warning-border-subtle
icon#b14904#fa8349--smbk-color-feedback-warning-icon
Danger7
surface#cc0d0d#cc0d0d--smbk-color-feedback-danger-surface
surface-subtle#fee5e1#4b130e--smbk-color-feedback-danger-surface-subtle
text-on-surface#f9fafb#f9fafb--smbk-color-feedback-danger-text-on-surface
text-on-subtle#a51d17#febdb2--smbk-color-feedback-danger-text-on-subtle
border#f34336#f34336--smbk-color-feedback-danger-border
border-subtle#febdb2#761812--smbk-color-feedback-danger-border-subtle
icon#cc0d0d#fe7d6d--smbk-color-feedback-danger-icon
Info7
surface#3b5ce3#3b5ce3--smbk-color-feedback-info-surface
surface-subtle#e3ebfe#162352--smbk-color-feedback-info-surface-subtle
text-on-surface#f9fafb#f9fafb--smbk-color-feedback-info-text-on-surface
text-on-subtle#2f4ab8#b8ccff--smbk-color-feedback-info-text-on-subtle
border#557bff#557bff--smbk-color-feedback-info-border
border-subtle#b8ccff#213583--smbk-color-feedback-info-border-subtle
icon#3b5ce3#7fa0ff--smbk-color-feedback-info-icon
Shadowsemantic · 5 tokens
Color tokens: Shadow
TokenLightDarkCSS
xs#373d430d#0000001a--smbk-color-shadow-xs
sm#373d431a#00000026--smbk-color-shadow-sm
md#373d4326#00000033--smbk-color-shadow-md
lg#373d4333#0000004d--smbk-color-shadow-lg
xl#373d434d#00000066--smbk-color-shadow-xl
Iconsemantic · 7 tokens
Color tokens: Icon
TokenLightDarkCSS
default#232527#e7ebf0--smbk-color-icon-default
subtle#4e555e#c4cdd8--smbk-color-icon-subtle
disabled#9ba5b1#606a75--smbk-color-icon-disabled
brand#cc0d0d#fe7d6d--smbk-color-icon-brand
on-brand#f9fafb#f9fafb--smbk-color-icon-on-brand
subtlest#606a75#9ba5b1--smbk-color-icon-subtlest
on-thumb#4e555e#4e555e--smbk-color-icon-on-thumb
Datasemantic · 24 tokens
Color tokens: Data
TokenLightDarkCSS
seriesdefault: #3b5ce3 · cockpit: #0a85a1default: #7fa0ff · cockpit: #34a2bf--smbk-color-data-series
series-hoverdefault: #2f4ab8 · cockpit: #056b83default: #b8ccff · cockpit: #52bbda--smbk-color-data-series-hover
categorical.1default: #3b5ce3 · cockpit: #0a85a1default: #7fa0ff · cockpit: #34a2bf--smbk-color-data-categorical-1
categorical.2default: #da601a · cockpit: #b5771cdefault: #fa8349 · cockpit: #c28535--smbk-color-data-categorical-2
categorical.3default: #4e555e · cockpit: #8e4170default: #c4cdd8 · cockpit: #a35d85--smbk-color-data-categorical-3
categorical.4default: #269936 · cockpit: #11957cdefault: #54b85b · cockpit: #3ca88f--smbk-color-data-categorical-4
categorical.5default: #ae5bf9 · cockpit: #6f59a6default: #dac3f7 · cockpit: #8270b5--smbk-color-data-categorical-5
categorical.6default: #137575 · cockpit: #688e3bdefault: #1d9393 · cockpit: #7ea059--smbk-color-data-categorical-6
categorical.7default: #968507 · cockpit: #4167addefault: #968507 · cockpit: #5a7dbc--smbk-color-data-categorical-7
categorical.8default: #c41883 · cockpit: #a04f27default: #f8bbd7 · cockpit: #b06846--smbk-color-data-categorical-8
sequential.1default: #b8ccff · cockpit: #b8dbe7default: #213583 · cockpit: #1a434f--smbk-color-data-sequential-1
sequential.2default: #7fa0ff · cockpit: #7ebcd0default: #2f4ab8 · cockpit: #1d5e70--smbk-color-data-sequential-2
sequential.3default: #557bff · cockpit: #389db9default: #3b5ce3 · cockpit: #1d7a93--smbk-color-data-sequential-3
sequential.4default: #3b5ce3 · cockpit: #027b96default: #557bff · cockpit: #3097b3--smbk-color-data-sequential-4
sequential.5default: #2f4ab8 · cockpit: #01596ddefault: #b8ccff · cockpit: #64b8d2--smbk-color-data-sequential-5
diverging.low-2default: #913900 · cockpit: #734803default: #febea2 · cockpit: #d79e59--smbk-color-data-diverging-low-2
diverging.low-1default: #da601a · cockpit: #966b34default: #da601a · cockpit: #a57e4f--smbk-color-data-diverging-low-1
diverging.middefault: #7c8692 · cockpit: #95999ddefault: #7c8692 · cockpit: #686c70--smbk-color-data-diverging-mid
diverging.high-1default: #557bff · cockpit: #268099default: #557bff · cockpit: #4892a8--smbk-color-data-diverging-high-1
diverging.high-2default: #2f4ab8 · cockpit: #005c71default: #b8ccff · cockpit: #4abbdb--smbk-color-data-diverging-high-2
reference-linedefault: #373d43 · cockpit: #4e555edefault: #e7ebf0 · cockpit: #9ba5b1--smbk-color-data-reference-line
status.gooddefault: #016317 · cockpit: #22864adefault: #269936 · cockpit: #61bf7e--smbk-color-data-status-good
status.warningdefault: #776906 · cockpit: #b26f03default: #b9a405 · cockpit: #e7b551--smbk-color-data-status-warning
status.baddefault: #a51d17 · cockpit: #ae2d2fdefault: #f34336 · cockpit: #d85e59--smbk-color-data-status-bad
Codesemantic · 10 tokens
Color tokens: Code
TokenLightDarkCSS
keyword#9b1cef#c18cf9--smbk-color-code-keyword
string#b14904#fa8349--smbk-color-code-string
number#037a1f#8ddf90--smbk-color-code-number
function#776906#dfce64--smbk-color-code-function
type#137575#2ab5b5--smbk-color-code-type
property#213583#b8ccff--smbk-color-code-property
comment#606a75#9ba5b1--smbk-color-code-comment
punctuation#4e555e#c4cdd8--smbk-color-code-punctuation
declaration#3b5ce3#7fa0ff--smbk-color-code-declaration
tag#3b5ce3#7fa0ff--smbk-color-code-tag
Other color tokenssemantic · 1 token
Color tokens: Other color tokens
TokenLightDarkCSS
scrim#00000080#00000099--smbk-color-overlay-scrim