Tokens
One set of tokens builds the Figma variables and the CSS. Components read the semantic and component tokens, never raw colours, so a theme, density or brand is a change of values, not of components. Every value below is read live from the real CSS.
637 tokens: 247 primitive, 19 brand, 189 semantic, 182 component. From design-system-v2 at fa3abf8. In Figma they’re 681 variables.
Colour
Semantic colours, named by job. Text and icon colours keep 7:1 or more on the surfaces they’re meant for, in light, dark and both high-contrast themes.
Surfaces
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.canvasPage background. | #ffffff | --sd-color-bg-canvas |
| color.bg.subtle | #f5f6fb | --sd-color-bg-subtle |
| color.bg.mutedHover rows, ghost button hover, sunken wells. | #eaeef4 | --sd-color-bg-muted |
| color.bg.raisedA raised surface on a muted tray (keyboard keys, chips on a well). Lighter than color.bg.muted in every theme, including Dark. | #ffffff | --sd-color-bg-raised |
| color.bg.inverse | #16161b | --sd-color-bg-inverse |
| color.bg.brand-subtle | #fff4f1 | --sd-color-bg-brand-subtle |
| color.bg.brand-subtle-hover | #fdeae1 | --sd-color-bg-brand-subtle-hover |
| color.bg.danger-subtle | #fef4f4 | --sd-color-bg-danger-subtle |
| color.bg.success-subtle | #dffee6 | --sd-color-bg-success-subtle |
| color.bg.warning-subtle | #fef7d3 | --sd-color-bg-warning-subtle |
| color.bg.info-subtle | #f1f7fd | --sd-color-bg-info-subtle |
| color.bg.scrimModal backdrop. Never carries text. | rgb(12 14 19 / 0.6) | --sd-color-bg-scrim |
| color.bg.on-mediaBacking for text and controls laid over media (caption chips, play buttons, image actions). Proven against a white image underneath, the worst case. | rgb(12 14 19 / 0.85) | --sd-color-bg-on-media |
| color.bg.on-media-hoverHover and pressed backing over media. | rgb(12 14 19 / 0.92) | --sd-color-bg-on-media-hover |
Actions
| Token | Value now | CSS variable |
|---|---|---|
| color.action.primary | #16161b | --sd-color-action-primary |
| color.action.primary-hover | #000000 | --sd-color-action-primary-hover |
| color.action.primary-pressed | #232429 | --sd-color-action-primary-pressed |
| color.action.neutral | #16161b | --sd-color-action-neutral |
| color.action.neutral-hover | #000000 | --sd-color-action-neutral-hover |
| color.action.neutral-pressedPressed fill of a neutral action. Differs from hover (pressed is never the hover colour). | #232429 | --sd-color-action-neutral-pressed |
| color.action.danger | #991528 | --sd-color-action-danger |
| color.action.danger-hover | #750e1d | --sd-color-action-danger-hover |
| color.action.danger-pressedPressed fill of a destructive action. | #4e060f | --sd-color-action-danger-pressed |
Text
| Token | Value now | CSS variable |
|---|---|---|
| color.text.default | #16161b | --sd-color-text-default |
| color.text.secondary | #373a3f | --sd-color-text-secondary |
| color.text.tertiaryLowest-emphasis text that still meets AAA. Also placeholders. | #4c4d52 | --sd-color-text-tertiary |
| color.text.inverse | #ffffff | --sd-color-text-inverse |
| color.text.on-primaryText and icons on primary fills. Black or white depending on the brand's polarity. | #ffffff | --sd-color-text-on-primary |
| color.text.on-action | #ffffff | --sd-color-text-on-action |
| color.text.on-mediaWhite labels and icons on media (photos, video, maps) and on the on-media backing. Stays white in every theme, unlike color.text.inverse. Only on color.bg.on-media or color.bg.on-media-hover: never straight on an image. | #ffffff | --sd-color-text-on-media |
| color.text.link | #0e4c96 | --sd-color-text-link |
| color.text.link-pressedLink text while pressed. One step stronger than color.text.link; the underline also thickens. | #02244b | --sd-color-text-link-pressed |
| color.text.link-visited | #961546 | --sd-color-text-link-visited |
| color.text.brand | #83360d | --sd-color-text-brand |
| color.text.danger | #991528 | --sd-color-text-danger |
| color.text.success | #11592e | --sd-color-text-success |
| color.text.warning | #594d0e | --sd-color-text-warning |
| color.text.info | #0e4c96 | --sd-color-text-info |
| color.text.disabled | #898c8f | --sd-color-text-disabled |
| color.text.on-dangerText on color.action.danger fills. Light in Light, dark in Dark, where the danger fill is pale. | #ffffff | --sd-color-text-on-danger |
Icons
| Token | Value now | CSS variable |
|---|---|---|
| color.icon.default | #5f6164 | --sd-color-icon-default |
| color.icon.strong | #16161b | --sd-color-icon-strong |
| color.icon.brand | #83360d | --sd-color-icon-brand |
| color.icon.danger | #bd1c34 | --sd-color-icon-danger |
| color.icon.success | #186f3d | --sd-color-icon-success |
| color.icon.warning | #6e6113 | --sd-color-icon-warning |
| color.icon.info | #155fba | --sd-color-icon-info |
| color.icon.on-dangerIcons on color.action.danger fills (destructive buttons, danger badges). Light on the dark danger fill in Light, dark on the pale danger fill in Dark. | #ffffff | --sd-color-icon-on-danger |
Borders
| Token | Value now | CSS variable |
|---|---|---|
| color.border.subtle | #cbced2 | --sd-color-border-subtle |
| color.border.default | #bdbfc5 | --sd-color-border-default |
| color.border.controlBoundary of inputs, checkboxes, radios, switches (1.4.11). | #727679 | --sd-color-border-control |
| color.border.strong | #4c4d52 | --sd-color-border-strong |
| color.border.brand | #c1551b | --sd-color-border-brand |
| color.border.dangerInvalid input boundary. | #bd1c34 | --sd-color-border-danger |
| color.border.successValid or completed input boundary (a field that passed a check), next to the success text. Never the only cue: pair it with text or an icon. | #186f3d | --sd-color-border-success |
Focus
| Token | Value now | CSS variable |
|---|---|---|
| color.focus.ringOuter ring. 2.4.13: at least 3:1 against the surface it sits on. | #155fba | --sd-color-focus-ring |
| color.focus.ring-innerInner ring, sits in focus.offset. Makes the two-tone ring visible on any fill. | #ffffff | --sd-color-focus-ring-inner |
| color.focus.ring-on-inverse | #98c2f9 | --sd-color-focus-ring-on-inverse |
More colour roles: charts, media, code and more59 tokens
Charts
| Token | Value now | CSS variable |
|---|---|---|
| color.chart.1 | #1974dd | --sd-color-chart-1 |
| color.chart.2 | #1e8284 | --sd-color-chart-2 |
| color.chart.3 | #c1551b | --sd-color-chart-3 |
| color.chart.4 | #1f864a | --sd-color-chart-4 |
| color.chart.5 | #1c7dad | --sd-color-chart-5 |
| color.chart.6 | #6c7d19 | --sd-color-chart-6 |
| color.chart.7 | #d7336d | --sd-color-chart-7 |
| color.chart.8 | #727679 | --sd-color-chart-8 |
| color.chart.seq.1.bg | #e3effd | --sd-color-chart-seq-1-bg |
| color.chart.seq.1.fg | #000000 | --sd-color-chart-seq-1-fg |
| color.chart.seq.2.bg | #cbdffb | --sd-color-chart-seq-2-bg |
| color.chart.seq.2.fg | #000000 | --sd-color-chart-seq-2-fg |
| color.chart.seq.3.bg | #0e4c96 | --sd-color-chart-seq-3-bg |
| color.chart.seq.3.fg | #ffffff | --sd-color-chart-seq-3-fg |
| color.chart.seq.4.bg | #083972 | --sd-color-chart-seq-4-bg |
| color.chart.seq.4.fg | #ffffff | --sd-color-chart-seq-4-fg |
| color.chart.seq.5.bg | #031632 | --sd-color-chart-seq-5-bg |
| color.chart.seq.5.fg | #ffffff | --sd-color-chart-seq-5-fg |
Decorative tints
| Token | Value now | CSS variable |
|---|---|---|
| color.decor.1.bg | #fdd5c4 | --sd-color-decor-1-bg |
| color.decor.1.fg | #421704 | --sd-color-decor-1-fg |
| color.decor.1.solidMid-tone drawing colour for decor 1: pen colours, label dots, swatches and chart-free markers. Non-text: 3:1 on every surface. Never carries text (use decor/1/fg on decor/1/bg). | #c1551b | --sd-color-decor-1-solid |
| color.decor.2.bg | #cbdffb | --sd-color-decor-2-bg |
| color.decor.2.fg | #02244b | --sd-color-decor-2-fg |
| color.decor.2.solidMid-tone drawing colour for decor 2: pen colours, label dots, swatches and chart-free markers. Non-text: 3:1 on every surface. Never carries text (use decor/2/fg on decor/2/bg). | #1974dd | --sd-color-decor-2-solid |
| color.decor.3.bg | #6af89b | --sd-color-decor-3-bg |
| color.decor.3.fg | #032b12 | --sd-color-decor-3-fg |
| color.decor.3.solidMid-tone drawing colour for decor 3: pen colours, label dots, swatches and chart-free markers. Non-text: 3:1 on every surface. Never carries text (use decor/3/fg on decor/3/bg). | #1f864a | --sd-color-decor-3-solid |
| color.decor.4.bg | #fddc3c | --sd-color-decor-4-bg |
| color.decor.4.fg | #2b2402 | --sd-color-decor-4-fg |
| color.decor.4.solidMid-tone drawing colour for decor 4: pen colours, label dots, swatches and chart-free markers. Non-text: 3:1 on every surface. Never carries text (use decor/4/fg on decor/4/bg). | #877519 | --sd-color-decor-4-solid |
| color.decor.5.bg | #82eef2 | --sd-color-decor-5-bg |
| color.decor.5.fg | #03292b | --sd-color-decor-5-fg |
| color.decor.5.solidMid-tone drawing colour for decor 5: pen colours, label dots, swatches and chart-free markers. Non-text: 3:1 on every surface. Never carries text (use decor/5/fg on decor/5/bg). | #1e8284 | --sd-color-decor-5-solid |
| color.decor.6.bg | #dcdde2 | --sd-color-decor-6-bg |
| color.decor.6.fg | #2d3032 | --sd-color-decor-6-fg |
| color.decor.6.solidMid-tone drawing colour for decor 6: pen colours, label dots, swatches and chart-free markers. Non-text: 3:1 on every surface. Never carries text (use decor/6/fg on decor/6/bg). | #727679 | --sd-color-decor-6-solid |
Media
| Token | Value now | CSS variable |
|---|---|---|
| color.media.stageVideo and image stage behind media (letterbox, player background). | #000000 | --sd-color-media-stage |
| color.media.trackUnfilled part of a scrubber or volume track laid over media. Decorative: the fill and the thumb carry the value. | rgb(255 255 255 / 0.3) | --sd-color-media-track |
| color.media.track-fillFilled part of a scrubber or volume track over media, and its thumb. | #ffffff | --sd-color-media-track-fill |
| color.media.caption-bgBacking for captions and subtitles over video (color.text.on-media on it). Proven against a white frame underneath, the worst case. | rgb(12 14 19 / 0.85) | --sd-color-media-caption-bg |
| color.media.liveThe LIVE badge on a stream (color.text.on-media on it). Not a status colour: it marks a live broadcast. | #991528 | --sd-color-media-live |
Scrims
| Token | Value now | CSS variable |
|---|---|---|
| color.scrim.modalBehind dialogs, sheets and drawers: the same as color.bg.scrim. | rgb(12 14 19 / 0.6) | --sd-color-scrim-modal |
| color.scrim.dragLighter backdrop while a sheet is being dragged down, before it settles or dismisses. | rgb(12 14 19 / 0.4) | --sd-color-scrim-drag |
| color.scrim.busyVeil over content that is loading or saving (a card or panel under a spinner). Light in Light, dark in Dark. | rgb(255 255 255 / 0.7) | --sd-color-scrim-busy |
Code
| Token | Value now | CSS variable |
|---|---|---|
| color.code.bgCode block background. | #f5f6fb | --sd-color-code-bg |
| color.code.fgPlain code text. | #16161b | --sd-color-code-fg |
| color.code.keywordKeywords (const, return, if). | #730d35 | --sd-color-code-keyword |
| color.code.stringStrings. | #094141 | --sd-color-code-string |
| color.code.numberNumbers and constants. | #423a07 | --sd-color-code-number |
| color.code.commentComments (also set in italic, so colour is not the only cue). | #414447 | --sd-color-code-comment |
| color.code.functionFunction and method names. | #083972 | --sd-color-code-function |
| color.code.punctuationBrackets, operators and punctuation. | #373a3f | --sd-color-code-punctuation |
| color.code.addedAdded lines in a diff (with a + sign, never colour alone). | #094323 | --sd-color-code-added |
| color.code.removedRemoved lines in a diff (with a - sign, never colour alone). | #750e1d | --sd-color-code-removed |
Highlight
| Token | Value now | CSS variable |
|---|---|---|
| color.mark.bgSearch highlight behind matched text (the mark element). color.text.default on it is 7:1. | #fddc3c | --sd-color-mark-bg |
| color.mark.lineUnderline under matched text, so a match is not shown by colour alone. | #594d0e | --sd-color-mark-line |
System keyboard
| Token | Value now | CSS variable |
|---|---|---|
| color.system.keyboardThe software keyboard tray. Key labels and suggestions on it are proven 7:1 (keyboard.fg). | #dcdde2 | --sd-color-system-keyboard |
| color.system.key-functionFunction keys (shift, delete, 123): one step darker than the tray, as the OS draws them. | #cbced2 | --sd-color-system-key-function |
| color.system.key-pressedA key while pressed: a different step from the tray and from the key in every theme (Dark and Light HC use the function-key shade, as the OS does). | #eaeef4 | --sd-color-system-key-pressed |
Type
The type scale, shown in the Handle brand’s fonts (the ones this site uses). Each style is a group of tokens: family, size, weight, line height and letter spacing.
- display-lg Hero headlines.
- display-md
- heading-xl Page titles (h1).
- heading-lg
- heading-md Section titles. 24px+ counts as large text.
- heading-sm Card and dialog titles. Not large text: needs 7:1.
- body-lg
- body-md Default paragraph text.
- body-sm
- label-md Button and control labels.
- label-sm Smallest running-text label (14px). Label/xs and Label/2xs are for counts and tight labels only.
- label-xs 12px on a 16px line: count badges, tight labels and captions in dense chips. Not for running text.
- label-2xs 10px on a 14px line: tiny badge counts and X-small avatar initials only.
- caption Help text, metadata.
- code
Space and size
Switch the density to Compact and watch these change: Comfortable keeps 44px targets, Compact tightens to 24px for dense desktop tools.
| Token | Value now | CSS variable |
|---|---|---|
| spacing.inset.xs | 0.25rem | --sd-spacing-inset-xs |
| spacing.inset.sm | 0.5rem | --sd-spacing-inset-sm |
| spacing.inset.md | 0.75rem | --sd-spacing-inset-md |
| spacing.inset.lg | 1rem | --sd-spacing-inset-lg |
| spacing.inset.xl | 1.5rem | --sd-spacing-inset-xl |
| spacing.stack.xs | 0.25rem | --sd-spacing-stack-xs |
| spacing.stack.sm | 0.5rem | --sd-spacing-stack-sm |
| spacing.stack.md | 1rem | --sd-spacing-stack-md |
| spacing.stack.lg | 1.5rem | --sd-spacing-stack-lg |
| spacing.stack.xl | 2.5rem | --sd-spacing-stack-xl |
| spacing.stack.section | 6rem | --sd-spacing-stack-section |
| spacing.gap.xs | 0.25rem | --sd-spacing-gap-xs |
| spacing.gap.sm | 0.5rem | --sd-spacing-gap-sm |
| spacing.gap.md | 0.75rem | --sd-spacing-gap-md |
| spacing.gap.lg | 1rem | --sd-spacing-gap-lg |
| prose.paragraph-spacing1.4.8 (AAA): paragraph spacing at least 1.5 x line spacing. 1.5 x 1.5 x 16px = 36px = 2.25rem. | 2.25rem | --sd-prose-paragraph-spacing |
| focus.width2.4.13 Focus Appearance (AAA). 3px: the 2px ring measured 1.005 (under the 1.02 margin) on several controls and 0.95 on the pill switch in the slice pixel test on Chromium, Firefox and WebKit (24 Oct 2026), so per spec T5 the default moved to 3px. | 3px | --sd-focus-width |
| focus.offsetGap between component and ring, filled with color.focus.ring-inner so the ring is always measured against a known colour. | 2px | --sd-focus-offset |
| focus.spreadHow far a focus ring reaches outside its control: focus.width (3px) plus focus.offset (2px). Leave this much room (padding or no clipping) round a focusable control inside a clipping or scrolling parent, so the ring is never cut. | 5px | --sd-focus-spread |
| target.minMinimum hit area for any pointer target. 44px Comfortable (2.5.5 AAA), 24px Compact (2.5.8 AA). | 2.75rem | --sd-target-min |
| target.gapMinimum space between adjacent hit areas, so targets never overlap. | 0.5rem | --sd-target-gap |
| control.height.sm36px visual height. The hit area is still target.min (a pseudo-element in code, a transparent frame in Figma). | 2.25rem | --sd-control-height-sm |
| control.height.mdDefault control height: 44px, equal to target.min. | 2.75rem | --sd-control-height-md |
| control.height.lg52px, for primary calls to action. | 3.25rem | --sd-control-height-lg |
| control.indicatorCheckbox box and radio dot: 20px, drawn inside a target.min label row. | 1.25rem | --sd-control-indicator |
| motion.distance.sm | 4px | --sd-motion-distance-sm |
| motion.distance.md | 12px | --sd-motion-distance-md |
| motion.distance.lg | 24px | --sd-motion-distance-lg |
Shape, elevation and motion
Corner radius is a brand choice, so it changes with the brand. Motion durations fall to zero when reduced motion is on.
Corner radius
| Token | Value now | CSS variable |
|---|---|---|
| shape.radius-controlButtons, inputs, selects, chips. | 6px | --sd-shape-radius-control |
| shape.radius-surfaceCards, panels, table containers. | 8px | --sd-shape-radius-surface |
| shape.radius-overlayDialogs, popovers, sheets, toasts. | 12px | --sd-shape-radius-overlay |
Elevation
| Token | Value now | CSS variable |
|---|---|---|
| elevation.0 | … | --sd-elevation-0 |
| elevation.1Cards at rest. | … | --sd-elevation-1 |
| elevation.2Popovers, menus, raised cards. | … | --sd-elevation-2 |
| elevation.3Dialogs and sheets. | … | --sd-elevation-3 |
Motion
| Token | Value now | CSS variable |
|---|---|---|
| motion.duration.instant | 0ms | --sd-motion-duration-instant |
| motion.duration.fast | 120ms | --sd-motion-duration-fast |
| motion.duration.base | 200ms | --sd-motion-duration-base |
| motion.duration.slow | 320ms | --sd-motion-duration-slow |
| motion.duration.deliberate | 480ms | --sd-motion-duration-deliberate |
| motion.duration-seconds.instant | 0ms | --sd-motion-duration-seconds-instant |
| motion.duration-seconds.fast | 120ms | --sd-motion-duration-seconds-fast |
| motion.duration-seconds.base | 200ms | --sd-motion-duration-seconds-base |
| motion.duration-seconds.slow | 320ms | --sd-motion-duration-seconds-slow |
| motion.duration-seconds.deliberate | 480ms | --sd-motion-duration-seconds-deliberate |
| motion.easing.standard | cubic-bezier(0.2, 0, 0, 1) | --sd-motion-easing-standard |
| motion.easing.enter | cubic-bezier(0.16, 1, 0.3, 1) | --sd-motion-easing-enter |
| motion.easing.exit | cubic-bezier(0.3, 0, 1, 1) | --sd-motion-easing-exit |
| motion.transition.fade | … | --sd-motion-transition-fade |
| motion.transition.move | … | --sd-motion-transition-move |
Component tokens
The layer components read directly. Each one points at a semantic token, so you can restyle one component without touching the rest. The component pages list the tokens each one reads.
avatar15 tokens
| Token | Value now | CSS variable |
|---|---|---|
| avatar.tint.1.bg | #fdd5c4 | --sd-avatar-tint-1-bg |
| avatar.tint.1.fg | #421704 | --sd-avatar-tint-1-fg |
| avatar.tint.2.bg | #cbdffb | --sd-avatar-tint-2-bg |
| avatar.tint.2.fg | #02244b | --sd-avatar-tint-2-fg |
| avatar.tint.3.bg | #6af89b | --sd-avatar-tint-3-bg |
| avatar.tint.3.fg | #032b12 | --sd-avatar-tint-3-fg |
| avatar.tint.4.bg | #fddc3c | --sd-avatar-tint-4-bg |
| avatar.tint.4.fg | #2b2402 | --sd-avatar-tint-4-fg |
| avatar.tint.5.bg | #82eef2 | --sd-avatar-tint-5-bg |
| avatar.tint.5.fg | #03292b | --sd-avatar-tint-5-fg |
| avatar.tint.6.bg | #dcdde2 | --sd-avatar-tint-6-bg |
| avatar.tint.6.fg | #2d3032 | --sd-avatar-tint-6-fg |
| avatar.stack-overlapHow far each avatar in a Medium, Large or X-large AvatarGroup overlaps the one before it (negative). X-small and Small use stack-overlap-sm. | -0.5rem | --sd-avatar-stack-overlap |
| avatar.stack-overlap-smThe smaller overlap for X-small and Small groups (-4px), so stacked initials are not hidden behind the next avatar and its ring (backlog fix 18). | -0.25rem | --sd-avatar-stack-overlap-sm |
| avatar.stack-ringRing in the canvas colour that separates stacked avatars. | 2px | --sd-avatar-stack-ring |
badge16 tokens
| Token | Value now | CSS variable |
|---|---|---|
| badge.neutral.bg | #eaeef4 | --sd-badge-neutral-bg |
| badge.neutral.fg | #16161b | --sd-badge-neutral-fg |
| badge.brand.bg | #fff4f1 | --sd-badge-brand-bg |
| badge.brand.fg | #83360d | --sd-badge-brand-fg |
| badge.danger.bg | #fef4f4 | --sd-badge-danger-bg |
| badge.danger.fg | #991528 | --sd-badge-danger-fg |
| badge.success.bg | #dffee6 | --sd-badge-success-bg |
| badge.success.fg | #11592e | --sd-badge-success-fg |
| badge.warning.bg | #fef7d3 | --sd-badge-warning-bg |
| badge.warning.fg | #594d0e | --sd-badge-warning-fg |
| badge.info.bg | #f1f7fd | --sd-badge-info-bg |
| badge.info.fg | #0e4c96 | --sd-badge-info-fg |
| badge.strong.bg | #16161b | --sd-badge-strong-bg |
| badge.strong.fg | #ffffff | --sd-badge-strong-fg |
| badge.radius | 9999px | --sd-badge-radius |
| badge.label | … | --sd-badge-label-* |
button35 tokens
| Token | Value now | CSS variable |
|---|---|---|
| button.primary.bg | #16161b | --sd-button-primary-bg |
| button.primary.bg-hover | #000000 | --sd-button-primary-bg-hover |
| button.primary.bg-pressed | #232429 | --sd-button-primary-bg-pressed |
| button.primary.fg | #ffffff | --sd-button-primary-fg |
| button.secondary.bg | #fff4f1 | --sd-button-secondary-bg |
| button.secondary.bg-hover | #fdeae1 | --sd-button-secondary-bg-hover |
| button.secondary.bg-pressed | #fdeae1 | --sd-button-secondary-bg-pressed |
| button.secondary.fg | #83360d | --sd-button-secondary-fg |
| button.outline.bg | #ffffff | --sd-button-outline-bg |
| button.outline.bg-hover | #eaeef4 | --sd-button-outline-bg-hover |
| button.outline.bg-pressed | #f5f6fb | --sd-button-outline-bg-pressed |
| button.outline.border | #727679 | --sd-button-outline-border |
| button.outline.fg | #16161b | --sd-button-outline-fg |
| button.ghost.bg-hover | #eaeef4 | --sd-button-ghost-bg-hover |
| button.ghost.fg | #16161b | --sd-button-ghost-fg |
| button.ghost.bg-pressed | #f5f6fb | --sd-button-ghost-bg-pressed |
| button.link.fg | #0e4c96 | --sd-button-link-fg |
| button.link.fg-pressedLink variant label while pressed (with a 2px underline). | #02244b | --sd-button-link-fg-pressed |
| button.danger.bg | #991528 | --sd-button-danger-bg |
| button.danger.bg-hover | #750e1d | --sd-button-danger-bg-hover |
| button.danger.bg-pressedPressed fill: differs from hover. | #4e060f | --sd-button-danger-bg-pressed |
| button.danger.fg | #ffffff | --sd-button-danger-fg |
| button.disabled.bg | #eaeef4 | --sd-button-disabled-bg |
| button.disabled.border | #cbced2 | --sd-button-disabled-border |
| button.disabled.fg | #898c8f | --sd-button-disabled-fg |
| button.height.sm | 2.25rem | --sd-button-height-sm |
| button.height.md | 2.75rem | --sd-button-height-md |
| button.height.lg | 3.25rem | --sd-button-height-lg |
| button.hit-areaEvery size keeps a target.min hit area (44px Comfortable, 2.5.5 AAA; 24px Compact, AA). sm extends it with a pseudo-element. | 2.75rem | --sd-button-hit-area |
| button.padding-x.sm | 0.75rem | --sd-button-padding-x-sm |
| button.padding-x.md | 1rem | --sd-button-padding-x-md |
| button.padding-x.lg | 1.25rem | --sd-button-padding-x-lg |
| button.gap | 0.5rem | --sd-button-gap |
| button.radius | 6px | --sd-button-radius |
| button.label | … | --sd-button-label-* |
calendar1 tokens
| Token | Value now | CSS variable |
|---|---|---|
| calendar.day-sizeCalendar day cell: 44px Comfortable (2.5.5 AAA), 32px Compact (space.8). Day cells and weekday headers share it. | 2.75rem | --sd-calendar-day-size |
card7 tokens
| Token | Value now | CSS variable |
|---|---|---|
| card.bg | #ffffff | --sd-card-bg |
| card.border | #bdbfc5 | --sd-card-border |
| card.fg | #16161b | --sd-card-fg |
| card.fg-secondary | #373a3f | --sd-card-fg-secondary |
| card.radius | 8px | --sd-card-radius |
| card.padding | 1.5rem | --sd-card-padding |
| card.shadow | … | --sd-card-shadow |
checkbox12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| checkbox.bg | #ffffff | --sd-checkbox-bg |
| checkbox.bg-pressedUnchecked box while pressed. | #eaeef4 | --sd-checkbox-bg-pressed |
| checkbox.borderBox boundary, 3:1 or more (1.4.11). | #727679 | --sd-checkbox-border |
| checkbox.bg-checked | #16161b | --sd-checkbox-bg-checked |
| checkbox.bg-checked-hover | #000000 | --sd-checkbox-bg-checked-hover |
| checkbox.bg-checked-pressedChecked box while pressed. | #232429 | --sd-checkbox-bg-checked-pressed |
| checkbox.markTick and dash glyphs. | #ffffff | --sd-checkbox-mark |
| checkbox.label | #16161b | --sd-checkbox-label |
| checkbox.size20px box inside a target.min label row (the row is the target). | 1.25rem | --sd-checkbox-size |
| checkbox.radius | 4px | --sd-checkbox-radius |
| checkbox.border-width | 2px | --sd-checkbox-border-width |
| checkbox.gap | 0.75rem | --sd-checkbox-gap |
chips1 tokens
| Token | Value now | CSS variable |
|---|---|---|
| chips.targetThe hit area of a chip, a tag and a small tag's remove button: 44px Comfortable (2.5.5 AAA), 24px Compact (2.5.8 AA). An alias of target.min, so chip parts that are drawn smaller (24px) still reach it with a pseudo-element in code (pack 455). | 2.75rem | --sd-chips-target |
dialog7 tokens
| Token | Value now | CSS variable |
|---|---|---|
| dialog.bg | #ffffff | --sd-dialog-bg |
| dialog.scrim | rgb(12 14 19 / 0.6) | --sd-dialog-scrim |
| dialog.fg | #16161b | --sd-dialog-fg |
| dialog.radius | 12px | --sd-dialog-radius |
| dialog.padding | 1.5rem | --sd-dialog-padding |
| dialog.shadow | … | --sd-dialog-shadow |
| dialog.enter | … | --sd-dialog-enter |
field7 tokens
| Token | Value now | CSS variable |
|---|---|---|
| field.labelVisible label above every control (3.3.2). | #16161b | --sd-field-label |
| field.hintHelp text linked by aria-describedby (3.3.5). | #373a3f | --sd-field-hint |
| field.errorError text: always icon plus text plus a visually hidden 'Error:' (1.4.1). | #991528 | --sd-field-error |
| field.error-icon | #bd1c34 | --sd-field-error-icon |
| field.gapLabel to control, control to hint. | 0.25rem | --sd-field-gap |
| field.label-text | … | --sd-field-label-text-* |
| field.hint-text | … | --sd-field-hint-text-* |
focus-ring5 tokens
| Token | Value now | CSS variable |
|---|---|---|
| focus-ring.outer | #155fba | --sd-focus-ring-outer |
| focus-ring.inner | #ffffff | --sd-focus-ring-inner |
| focus-ring.width | 3px | --sd-focus-ring-width |
| focus-ring.offset | 2px | --sd-focus-ring-offset |
| focus-ring.spreadRoom a focus ring needs outside its control (width plus offset, 5px). Packs used a 5px literal for it. | 5px | --sd-focus-ring-spread |
icon-button3 tokens
| Token | Value now | CSS variable |
|---|---|---|
| icon-button.sizeSquare, 44 x 44 in Comfortable even with a 20px icon. | 2.75rem | --sd-icon-button-size |
| icon-button.icon | 1.25rem | --sd-icon-button-icon |
| icon-button.radius | 6px | --sd-icon-button-radius |
input12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| input.bg | #ffffff | --sd-input-bg |
| input.bg-disabled | #f5f6fb | --sd-input-bg-disabled |
| input.border | #727679 | --sd-input-border |
| input.border-hover | #4c4d52 | --sd-input-border-hover |
| input.border-invalid | #bd1c34 | --sd-input-border-invalid |
| input.fg | #16161b | --sd-input-fg |
| input.placeholder | #4c4d52 | --sd-input-placeholder |
| input.height | 2.75rem | --sd-input-height |
| input.padding-x | 0.75rem | --sd-input-padding-x |
| input.radius | 6px | --sd-input-radius |
| input.border-width | 1px | --sd-input-border-width |
| input.text | … | --sd-input-text-* |
keyboard5 tokens
| Token | Value now | CSS variable |
|---|---|---|
| keyboard.surfaceThe software keyboard tray (and the suggestion bar on it). | #dcdde2 | --sd-keyboard-surface |
| keyboard.keyLetter keys and the space bar. | #ffffff | --sd-keyboard-key |
| keyboard.key-functionFunction keys (shift, delete, 123, emoji). | #cbced2 | --sd-keyboard-key-function |
| keyboard.key-pressedA key while pressed. | #eaeef4 | --sd-keyboard-key-pressed |
| keyboard.fgKey labels, key glyphs and suggestion words. | #16161b | --sd-keyboard-fg |
list6 tokens
| Token | Value now | CSS variable |
|---|---|---|
| list.row-pressedA pressed ListRow. Hover is color.bg.subtle and pressed is one step stronger, the opposite order to a Ghost button, so rows and buttons each follow one rule. | #eaeef4 | --sd-list-row-pressed |
| list.fgListRow title. | #16161b | --sd-list-fg |
| list.fg-secondaryListRow description and trailing text. | #373a3f | --sd-list-fg-secondary |
| list.row-selectedThe selected row of a single-choice list (ListRow isSelected), under the tick or the desktop edge bar. Never the only cue. | #fff4f1 | --sd-list-row-selected |
| list.checkThe tick on a selected ListRow. | #83360d | --sd-list-check |
| list.selected-edgeThe 3px start edge bar on a selected desktop ListRow. | #c1551b | --sd-list-selected-edge |
listbox10 tokens
| Token | Value now | CSS variable |
|---|---|---|
| listbox.bg | #ffffff | --sd-listbox-bg |
| listbox.border | #bdbfc5 | --sd-listbox-border |
| listbox.option-hover | #eaeef4 | --sd-listbox-option-hover |
| listbox.option-selected | #fff4f1 | --sd-listbox-option-selected |
| listbox.option-fg | #16161b | --sd-listbox-option-fg |
| listbox.check | #83360d | --sd-listbox-check |
| listbox.option-height44px options (Compact 24px, AA). | 2.75rem | --sd-listbox-option-height |
| listbox.padding | 0.25rem | --sd-listbox-padding |
| listbox.radius | 6px | --sd-listbox-radius |
| listbox.shadow | … | --sd-listbox-shadow |
select1 tokens
| Token | Value now | CSS variable |
|---|---|---|
| select.chevron | #5f6164 | --sd-select-chevron |
status1 tokens
| Token | Value now | CSS variable |
|---|---|---|
| status.foregroundStatus bar time and glyphs (signal, wi-fi, battery) in the Dark foreground style, on the screen's own top surface. The Light style over media uses color.text.on-media. | #16161b | --sd-status-foreground |
switch14 tokens
| Token | Value now | CSS variable |
|---|---|---|
| switch.track-off | #eaeef4 | --sd-switch-track-off |
| switch.track-off-pressedTrack while pressed, off. Differs from the resting track. | #f5f6fb | --sd-switch-track-off-pressed |
| switch.track-on | #16161b | --sd-switch-track-on |
| switch.track-on-pressedTrack while pressed, on. | #232429 | --sd-switch-track-on-pressed |
| switch.borderTrack boundary when off, 3:1 or more (1.4.11). | #727679 | --sd-switch-border |
| switch.thumb-off | #4c4d52 | --sd-switch-thumb-off |
| switch.thumb-on | #ffffff | --sd-switch-thumb-on |
| switch.glyph-offThe off glyph in the thumb, so state never relies on colour or position alone. | #eaeef4 | --sd-switch-glyph-off |
| switch.glyph-on | #16161b | --sd-switch-glyph-on |
| switch.track-width44px track, 24px tall, inside a target.min row. | 2.75rem | --sd-switch-track-width |
| switch.track-height | 1.5rem | --sd-switch-track-height |
| switch.thumb-size | 1rem | --sd-switch-thumb-size |
| switch.radius | 9999px | --sd-switch-radius |
| switch.border-width | 2px | --sd-switch-border-width |
tabs12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| tabs.fg | #373a3f | --sd-tabs-fg |
| tabs.fg-selected | #16161b | --sd-tabs-fg-selected |
| tabs.bg-hover | #eaeef4 | --sd-tabs-bg-hover |
| tabs.bg-pressedPressed tab: a brand tint, so pressed differs from hover. | #fff4f1 | --sd-tabs-bg-pressed |
| tabs.fg-pressedTab label while pressed. | #16161b | --sd-tabs-fg-pressed |
| tabs.iconTab icon, unselected. | #5f6164 | --sd-tabs-icon |
| tabs.icon-selectedTab icon, selected. | #16161b | --sd-tabs-icon-selected |
| tabs.indicator2px bar under the selected tab. Selection is also a weight change, never colour alone. | #16161b | --sd-tabs-indicator |
| tabs.border | #bdbfc5 | --sd-tabs-border |
| tabs.height | 2.75rem | --sd-tabs-height |
| tabs.padding-x | 1rem | --sd-tabs-padding-x |
| tabs.indicator-width | 2px | --sd-tabs-indicator-width |
toast8 tokens
| Token | Value now | CSS variable |
|---|---|---|
| toast.bg | #ffffff | --sd-toast-bg |
| toast.borderVisible boundary in every theme, including high contrast. | #4c4d52 | --sd-toast-border |
| toast.fg | #16161b | --sd-toast-fg |
| toast.fg-secondary | #373a3f | --sd-toast-fg-secondary |
| toast.radius | 12px | --sd-toast-radius |
| toast.padding | 1rem | --sd-toast-padding |
| toast.gap | 0.75rem | --sd-toast-gap |
| toast.shadow | … | --sd-toast-shadow |
tooltip4 tokens
| Token | Value now | CSS variable |
|---|---|---|
| tooltip.bg | #16161b | --sd-tooltip-bg |
| tooltip.fg | #ffffff | --sd-tooltip-fg |
| tooltip.radius | 4px | --sd-tooltip-radius |
| tooltip.text | … | --sd-tooltip-text-* |
Primitives
The raw scales everything else points at: colour ramps, the 4px spacing scale, radii, type sizes and durations. Components never use them directly.
color.blue12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.blue.25 | #f1f7fd | --sd-color-blue-25 |
| color.blue.50 | #e3effd | --sd-color-blue-50 |
| color.blue.100 | #cbdffb | --sd-color-blue-100 |
| color.blue.200 | #98c2f9 | --sd-color-blue-200 |
| color.blue.300 | #69a6f9 | --sd-color-blue-300 |
| color.blue.400 | #3a8bf7 | --sd-color-blue-400 |
| color.blue.500 | #1974dd | --sd-color-blue-500 |
| color.blue.600 | #155fba | --sd-color-blue-600 |
| color.blue.700 | #0e4c96 | --sd-color-blue-700 |
| color.blue.800 | #083972 | --sd-color-blue-800 |
| color.blue.900 | #02244b | --sd-color-blue-900 |
| color.blue.950 | #031632 | --sd-color-blue-950 |
color.green12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.green.25 | #dffee6 | --sd-color-green-25 |
| color.green.50 | #b7fec9 | --sd-color-green-50 |
| color.green.100 | #6af89b | --sd-color-green-100 |
| color.green.200 | #48d880 | --sd-color-green-200 |
| color.green.300 | #2ebb68 | --sd-color-green-300 |
| color.green.400 | #269f59 | --sd-color-green-400 |
| color.green.500 | #1f864a | --sd-color-green-500 |
| color.green.600 | #186f3d | --sd-color-green-600 |
| color.green.700 | #11592e | --sd-color-green-700 |
| color.green.800 | #094323 | --sd-color-green-800 |
| color.green.900 | #032b12 | --sd-color-green-900 |
| color.green.950 | #031b09 | --sd-color-green-950 |
color.amber12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.amber.25 | #fef7d3 | --sd-color-amber-25 |
| color.amber.50 | #ffeea7 | --sd-color-amber-50 |
| color.amber.100 | #fddc3c | --sd-color-amber-100 |
| color.amber.200 | #dbbe32 | --sd-color-amber-200 |
| color.amber.300 | #bda327 | --sd-color-amber-300 |
| color.amber.400 | #a08b22 | --sd-color-amber-400 |
| color.amber.500 | #877519 | --sd-color-amber-500 |
| color.amber.600 | #6e6113 | --sd-color-amber-600 |
| color.amber.700 | #594d0e | --sd-color-amber-700 |
| color.amber.800 | #423a07 | --sd-color-amber-800 |
| color.amber.900 | #2b2402 | --sd-color-amber-900 |
| color.amber.950 | #1c1601 | --sd-color-amber-950 |
color.red12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.red.25 | #fef4f4 | --sd-color-red-25 |
| color.red.50 | #fee9e8 | --sd-color-red-50 |
| color.red.100 | #fcd4d2 | --sd-color-red-100 |
| color.red.200 | #fbaaa9 | --sd-color-red-200 |
| color.red.300 | #fa7f82 | --sd-color-red-300 |
| color.red.400 | #f6505a | --sd-color-red-400 |
| color.red.500 | #e32340 | --sd-color-red-500 |
| color.red.600 | #bd1c34 | --sd-color-red-600 |
| color.red.700 | #991528 | --sd-color-red-700 |
| color.red.800 | #750e1d | --sd-color-red-800 |
| color.red.900 | #4e060f | --sd-color-red-900 |
| color.red.950 | #350209 | --sd-color-red-950 |
color.purple12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.purple.25 | #f7f5ff | --sd-color-purple-25 |
| color.purple.50 | #edecfe | --sd-color-purple-50 |
| color.purple.100 | #dfd9fd | --sd-color-purple-100 |
| color.purple.200 | #c1b7fa | --sd-color-purple-200 |
| color.purple.300 | #aa96f8 | --sd-color-purple-300 |
| color.purple.400 | #9576f7 | --sd-color-purple-400 |
| color.purple.500 | #8355f5 | --sd-color-purple-500 |
| color.purple.600 | #7333e9 | --sd-color-purple-600 |
| color.purple.700 | #6119c9 | --sd-color-purple-700 |
| color.purple.800 | #4a109b | --sd-color-purple-800 |
| color.purple.900 | #300768 | --sd-color-purple-900 |
| color.purple.950 | #1e0349 | --sd-color-purple-950 |
color.teal12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.teal.25 | #d6fefe | --sd-color-teal-25 |
| color.teal.50 | #a8fcff | --sd-color-teal-50 |
| color.teal.100 | #82eef2 | --sd-color-teal-100 |
| color.teal.200 | #60d0d1 | --sd-color-teal-200 |
| color.teal.300 | #41b4b6 | --sd-color-teal-300 |
| color.teal.400 | #269a9e | --sd-color-teal-400 |
| color.teal.500 | #1e8284 | --sd-color-teal-500 |
| color.teal.600 | #186b6e | --sd-color-teal-600 |
| color.teal.700 | #115657 | --sd-color-teal-700 |
| color.teal.800 | #094141 | --sd-color-teal-800 |
| color.teal.900 | #03292b | --sd-color-teal-900 |
| color.teal.950 | #011a1b | --sd-color-teal-950 |
color.orange12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.orange.25 | #fff4f1 | --sd-color-orange-25 |
| color.orange.50 | #fdeae1 | --sd-color-orange-50 |
| color.orange.100 | #fdd5c4 | --sd-color-orange-100 |
| color.orange.200 | #faad8c | --sd-color-orange-200 |
| color.orange.300 | #f7854e | --sd-color-orange-300 |
| color.orange.400 | #e56520 | --sd-color-orange-400 |
| color.orange.500 | #c1551b | --sd-color-orange-500 |
| color.orange.600 | #a04613 | --sd-color-orange-600 |
| color.orange.700 | #83360d | --sd-color-orange-700 |
| color.orange.800 | #632809 | --sd-color-orange-800 |
| color.orange.900 | #421704 | --sd-color-orange-900 |
| color.orange.950 | #2c0d01 | --sd-color-orange-950 |
color.magenta12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.magenta.25 | #fef3fe | --sd-color-magenta-25 |
| color.magenta.50 | #fae8fe | --sd-color-magenta-50 |
| color.magenta.100 | #f7d1fd | --sd-color-magenta-100 |
| color.magenta.200 | #f1a4f9 | --sd-color-magenta-200 |
| color.magenta.300 | #e976f9 | --sd-color-magenta-300 |
| color.magenta.400 | #db49ef | --sd-color-magenta-400 |
| color.magenta.500 | #c229d6 | --sd-color-magenta-500 |
| color.magenta.600 | #a21eb4 | --sd-color-magenta-600 |
| color.magenta.700 | #841590 | --sd-color-magenta-700 |
| color.magenta.800 | #640e70 | --sd-color-magenta-800 |
| color.magenta.900 | #430549 | --sd-color-magenta-900 |
| color.magenta.950 | #2b0431 | --sd-color-magenta-950 |
color.olive12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.olive.25 | #eefeb2 | --sd-color-olive-25 |
| color.olive.50 | #e0f984 | --sd-color-olive-50 |
| color.olive.100 | #d0e875 | --sd-color-olive-100 |
| color.olive.200 | #b4c954 | --sd-color-olive-200 |
| color.olive.300 | #98ae35 | --sd-color-olive-300 |
| color.olive.400 | #829422 | --sd-color-olive-400 |
| color.olive.500 | #6c7d19 | --sd-color-olive-500 |
| color.olive.600 | #596715 | --sd-color-olive-600 |
| color.olive.700 | #48520f | --sd-color-olive-700 |
| color.olive.800 | #343e08 | --sd-color-olive-800 |
| color.olive.900 | #212702 | --sd-color-olive-900 |
| color.olive.950 | #151803 | --sd-color-olive-950 |
color.sky12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.sky.25 | #edf8fe | --sd-color-sky-25 |
| color.sky.50 | #dcf1fd | --sd-color-sky-50 |
| color.sky.100 | #bbe3fb | --sd-color-sky-100 |
| color.sky.200 | #76c8fb | --sd-color-sky-200 |
| color.sky.300 | #2daef0 | --sd-color-sky-300 |
| color.sky.400 | #2494cf | --sd-color-sky-400 |
| color.sky.500 | #1c7dad | --sd-color-sky-500 |
| color.sky.600 | #176790 | --sd-color-sky-600 |
| color.sky.700 | #115275 | --sd-color-sky-700 |
| color.sky.800 | #093e58 | --sd-color-sky-800 |
| color.sky.900 | #052739 | --sd-color-sky-900 |
| color.sky.950 | #031827 | --sd-color-sky-950 |
color.pink12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.pink.25 | #fdf4f7 | --sd-color-pink-25 |
| color.pink.50 | #fde9eb | --sd-color-pink-50 |
| color.pink.100 | #fcd3dc | --sd-color-pink-100 |
| color.pink.200 | #f9a9bb | --sd-color-pink-200 |
| color.pink.300 | #fa7c9c | --sd-color-pink-300 |
| color.pink.400 | #f15083 | --sd-color-pink-400 |
| color.pink.500 | #d7336d | --sd-color-pink-500 |
| color.pink.600 | #b91d58 | --sd-color-pink-600 |
| color.pink.700 | #961546 | --sd-color-pink-700 |
| color.pink.800 | #730d35 | --sd-color-pink-800 |
| color.pink.900 | #4c0621 | --sd-color-pink-900 |
| color.pink.950 | #330315 | --sd-color-pink-950 |
color.neutral19 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.neutral.0 | #ffffff | --sd-color-neutral-0 |
| color.neutral.25 | #f5f6fb | --sd-color-neutral-25 |
| color.neutral.50 | #eaeef4 | --sd-color-neutral-50 |
| color.neutral.100 | #dcdde2 | --sd-color-neutral-100 |
| color.neutral.150 | #cbced2 | --sd-color-neutral-150 |
| color.neutral.200 | #bdbfc5 | --sd-color-neutral-200 |
| color.neutral.250 | #b0b1b6 | --sd-color-neutral-250 |
| color.neutral.300 | #a2a4aa | --sd-color-neutral-300 |
| color.neutral.400 | #898c8f | --sd-color-neutral-400 |
| color.neutral.500 | #727679 | --sd-color-neutral-500 |
| color.neutral.600 | #5f6164 | --sd-color-neutral-600 |
| color.neutral.700 | #4c4d52 | --sd-color-neutral-700 |
| color.neutral.750 | #414447 | --sd-color-neutral-750 |
| color.neutral.800 | #373a3f | --sd-color-neutral-800 |
| color.neutral.850 | #2d3032 | --sd-color-neutral-850 |
| color.neutral.900 | #232429 | --sd-color-neutral-900 |
| color.neutral.950 | #16161b | --sd-color-neutral-950 |
| color.neutral.975 | #0b0d10 | --sd-color-neutral-975 |
| color.neutral.1000 | #000000 | --sd-color-neutral-1000 |
color.brand12 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.brand.25 | #fff4f1 | --sd-color-brand-25 |
| color.brand.50 | #fdeae1 | --sd-color-brand-50 |
| color.brand.100 | #fdd5c4 | --sd-color-brand-100 |
| color.brand.200 | #faad8c | --sd-color-brand-200 |
| color.brand.300 | #f78550 | --sd-color-brand-300 |
| color.brand.400 | #e56520 | --sd-color-brand-400 |
| color.brand.500 | #c1551b | --sd-color-brand-500 |
| color.brand.600 | #a04613 | --sd-color-brand-600 |
| color.brand.700 | #83360d | --sd-color-brand-700 |
| color.brand.800 | #632809 | --sd-color-brand-800 |
| color.brand.900 | #421704 | --sd-color-brand-900 |
| color.brand.950 | #2d0c01 | --sd-color-brand-950 |
space19 tokens
| Token | Value now | CSS variable |
|---|---|---|
| space.0 | 0rem | --sd-space-0 |
| space.1 | 0.25rem | --sd-space-1 |
| space.2 | 0.5rem | --sd-space-2 |
| space.3 | 0.75rem | --sd-space-3 |
| space.4 | 1rem | --sd-space-4 |
| space.5 | 1.25rem | --sd-space-5 |
| space.6 | 1.5rem | --sd-space-6 |
| space.8 | 2rem | --sd-space-8 |
| space.10 | 2.5rem | --sd-space-10 |
| space.12 | 3rem | --sd-space-12 |
| space.16 | 4rem | --sd-space-16 |
| space.20 | 5rem | --sd-space-20 |
| space.24 | 6rem | --sd-space-24 |
| space.32 | 8rem | --sd-space-32 |
| space.px | 1px | --sd-space-px |
| space.0-5 | 0.125rem | --sd-space-0-5 |
| space.1-5 | 0.375rem | --sd-space-1-5 |
| space.overlap.sm | -0.25rem | --sd-space-overlap-sm |
| space.overlap.md | -0.5rem | --sd-space-overlap-md |
radius9 tokens
| Token | Value now | CSS variable |
|---|---|---|
| radius.none | 0px | --sd-radius-none |
| radius.xs | 2px | --sd-radius-xs |
| radius.sm | 4px | --sd-radius-sm |
| radius.md | 6px | --sd-radius-md |
| radius.lg | 8px | --sd-radius-lg |
| radius.xl | 12px | --sd-radius-xl |
| radius.2xl | 16px | --sd-radius-2xl |
| radius.3xl | 24px | --sd-radius-3xl |
| radius.full | 9999px | --sd-radius-full |
border3 tokens
| Token | Value now | CSS variable |
|---|---|---|
| border.width.thin | 1px | --sd-border-width-thin |
| border.width.thick | 2px | --sd-border-width-thick |
| border.width.heavy | 3px | --sd-border-width-heavy |
size10 tokens
| Token | Value now | CSS variable |
|---|---|---|
| size.target.min | 2.75rem | --sd-size-target-min |
| size.target.min-dense | 1.5rem | --sd-size-target-min-dense |
| size.control.sm | 2.25rem | --sd-size-control-sm |
| size.control.md | 2.75rem | --sd-size-control-md |
| size.control.lg | 3.25rem | --sd-size-control-lg |
| size.icon.sm | 1rem | --sd-size-icon-sm |
| size.icon.md | 1.25rem | --sd-size-icon-md |
| size.icon.lg | 1.5rem | --sd-size-icon-lg |
| size.icon.xl | 2rem | --sd-size-icon-xl |
| size.icon.2xl | 2.25rem | --sd-size-icon-2xl |
font29 tokens
| Token | Value now | CSS variable |
|---|---|---|
| font.size.3xs | 0.625rem | --sd-font-size-3xs |
| font.size.2xs | 0.75rem | --sd-font-size-2xs |
| font.size.xs | 0.875rem | --sd-font-size-xs |
| font.size.sm | 0.9375rem | --sd-font-size-sm |
| font.size.md | 1rem | --sd-font-size-md |
| font.size.lg | 1.125rem | --sd-font-size-lg |
| font.size.xl | 1.25rem | --sd-font-size-xl |
| font.size.2xl | 1.5rem | --sd-font-size-2xl |
| font.size.3xl | 1.875rem | --sd-font-size-3xl |
| font.size.4xl | 2.25rem | --sd-font-size-4xl |
| font.size.5xl | 3rem | --sd-font-size-5xl |
| font.size.6xl | 3.75rem | --sd-font-size-6xl |
| font.size.7xl | 4.5rem | --sd-font-size-7xl |
| font.weight.regular | 400 | --sd-font-weight-regular |
| font.weight.medium | 500 | --sd-font-weight-medium |
| font.weight.semibold | 600 | --sd-font-weight-semibold |
| font.weight.bold | 700 | --sd-font-weight-bold |
| font.line-height.tight | 1.1 | --sd-font-line-height-tight |
| font.line-height.snug | 1.2 | --sd-font-line-height-snug |
| font.line-height.normal | 1.5 | --sd-font-line-height-normal |
| font.line-height.relaxed | 1.65 | --sd-font-line-height-relaxed |
| font.line-height.dense | 1.3333 | --sd-font-line-height-dense |
| font.line-height.dense-xs | 1.4 | --sd-font-line-height-dense-xs |
| font.tracking.tight | -0.02 | --sd-font-tracking-tight |
| font.tracking.normal | 0 | --sd-font-tracking-normal |
| font.tracking.wide | 0.01 | --sd-font-tracking-wide |
| font.family.sans | "Inter", ui-sans-serif, system-ui, sans-serif | --sd-font-family-sans |
| font.family.display | "Inter", ui-sans-serif, system-ui, sans-serif | --sd-font-family-display |
| font.family.mono | "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace | --sd-font-family-mono |
duration6 tokens
| Token | Value now | CSS variable |
|---|---|---|
| duration.0 | 0ms | --sd-duration-0 |
| duration.100 | 100ms | --sd-duration-100 |
| duration.120 | 120ms | --sd-duration-120 |
| duration.200 | 200ms | --sd-duration-200 |
| duration.320 | 320ms | --sd-duration-320 |
| duration.480 | 480ms | --sd-duration-480 |
easing4 tokens
| Token | Value now | CSS variable |
|---|---|---|
| easing.standard | cubic-bezier(0.2, 0, 0, 1) | --sd-easing-standard |
| easing.enter | cubic-bezier(0.16, 1, 0.3, 1) | --sd-easing-enter |
| easing.exit | cubic-bezier(0.3, 0, 1, 1) | --sd-easing-exit |
| easing.linear | cubic-bezier(0, 0, 1, 1) | --sd-easing-linear |
distance4 tokens
| Token | Value now | CSS variable |
|---|---|---|
| distance.0 | 0px | --sd-distance-0 |
| distance.4 | 4px | --sd-distance-4 |
| distance.12 | 12px | --sd-distance-12 |
| distance.24 | 24px | --sd-distance-24 |