Source-backed reference
Design tokens.
Semantic values for color, type, space and behavior. These rows come from the generated baseline, not a hand-maintained list.
Kit version 0.16.1 · baseline token version 0.11.0. A kit release and a token-schema revision are separate versions.
157 tokens
Use semantic roles in interfaces; primitives document the palette and are not component roles. Color values below are reference swatches, not accessibility results for arbitrary combinations. Glass roles are translucent; with each tone's backdrop filter they are checked over any backdrop. Read the color contract.
| Token / group | Dark or shared value | Light value |
|---|---|---|
--c-bgColor | #000000 | #F6F5F0 |
--c-surfaceColor | #121212 | #FFFFFF |
--c-raisedColor | #1F1F1F | #E8E7E3 |
--c-textColor | #F6F5F0 | #000000 |
--c-mutedColor | #A3A3A3 | #666666 |
--c-borderColor | #767676 | #767676 |
--c-dividerColor | #303030 | #E8E7E3 |
--c-focusColor | #F6F5F0 | #000000 |
--c-linkColor | #F6F5F0 | #000000 |
--c-link-hoverColor | #FFFFFF | #121212 |
--c-link-activeColor | #F6F5F0 | #1F1F1F |
--c-on-selectedColor | #000000 | #FFFFFF |
--c-selectedColor | #F6F5F0 | #000000 |
--c-action-primaryColor | #F6F5F0 | #000000 |
--c-action-primary-hoverColor | #E8E7E3 | #121212 |
--c-action-primary-activeColor | #D6D5D0 | #1F1F1F |
--c-action-primary-fgColor | #000000 | #FFFFFF |
--c-action-secondaryColor | #121212 | #FFFFFF |
--c-action-secondary-hoverColor | #1F1F1F | #E8E7E3 |
--c-action-secondary-activeColor | #2C2C2C | #D6D5D0 |
--c-action-secondary-fgColor | #F6F5F0 | #000000 |
--c-input-bgColor | #000000 | #FFFFFF |
--c-input-fgColor | #F6F5F0 | #000000 |
--c-input-placeholderColor | #A3A3A3 | #666666 |
--c-disabled-bgColor | #1F1F1F | #E8E7E3 |
--c-disabled-fgColor | #A3A3A3 | #666666 |
--c-disabled-borderColor | #767676 | #767676 |
--c-status-fgColor | #F6F5F0 | #000000 |
--c-status-bgColor | #1F1F1F | #E8E7E3 |
--c-status-borderColor | #767676 | #767676 |
--c-divider-strongColor | #414141 | #C6C5C0 |
--c-ornamentColor | #252525 | #E8E7E3 |
--c-ornament-faintColor | #181818 | #EFEEE9 |
--c-ornament-textColor | #414141 | #C6C5C0 |
--c-media-placeholderColor | #111111 | #E8E7E3 |
--c-scrimColor | #000000B8 | #0000007A |
--c-glassColor | #12121250 | #FFFFFF8F |
--c-glass-borderColor | #414141 | #C6C5C0 |
--c-glass-mutedColor | #C8C8C8 | #454545 |
--c-glass-sheenColor | #FFFFFFA6 | #FFFFFFF2 |
--c-glass-sheen-lowColor | #FFFFFF33 | #00000040 |
--c-glass-hoverColor | #FFFFFF14 | #0000000F |
--c-glass-activeColor | #FFFFFF29 | #0000001F |
--c-space-2Space | 0.5rem | |
--c-space-4Space | 1rem | |
--c-space-6Space | 1.5rem | |
--c-space-8Space | 2rem | |
--c-space-12Space | 3rem | |
--c-space-16Space | 4rem | |
--c-space-24Space | 6rem | |
--c-space-baseSpace | 0.25rem | |
--c-layout-radiusLayout | 0.25rem | |
--c-layout-gutterLayout | 1.5rem | |
--c-layout-max-contentLayout | 70rem | |
--c-layout-lineLayout | 65ch | |
--c-layout-control-minLayout | 2.75rem | |
--c-layout-control-denseLayout | 2rem | |
--c-layout-focus-widthLayout | 2px | |
--c-layout-focus-offsetLayout | 2px | |
--c-type-body-font-familyTypography | Inter | |
--c-type-body-font-weightTypography | 400 | |
--c-type-body-font-sizeTypography | 1.0625rem | |
--c-type-body-line-heightTypography | 1.55 | |
--c-type-body-letter-spacingTypography | 0 | |
--c-type-display-font-familyTypography | Inter | |
--c-type-display-font-weightTypography | 600 | |
--c-type-display-font-sizeTypography | 3rem | |
--c-type-display-line-heightTypography | 1.1 | |
--c-type-display-letter-spacingTypography | 0 | |
--c-type-display-small-font-familyTypography | Inter | |
--c-type-display-small-font-weightTypography | 600 | |
--c-type-display-small-font-sizeTypography | 2.125rem | |
--c-type-display-small-line-heightTypography | 1.15 | |
--c-type-display-small-letter-spacingTypography | 0 | |
--c-type-section-font-familyTypography | Inter | |
--c-type-section-font-weightTypography | 600 | |
--c-type-section-font-sizeTypography | 1.875rem | |
--c-type-section-line-heightTypography | 1.2 | |
--c-type-section-letter-spacingTypography | 0 | |
--c-type-card-font-familyTypography | Inter | |
--c-type-card-font-weightTypography | 600 | |
--c-type-card-font-sizeTypography | 1.375rem | |
--c-type-card-line-heightTypography | 1.3 | |
--c-type-card-letter-spacingTypography | 0 | |
--c-type-control-font-familyTypography | Inter | |
--c-type-control-font-weightTypography | 500 | |
--c-type-control-font-sizeTypography | 0.9375rem | |
--c-type-control-line-heightTypography | 1.4 | |
--c-type-control-letter-spacingTypography | 0 | |
--c-type-ui-font-familyTypography | Inter | |
--c-type-ui-font-weightTypography | 500 | |
--c-type-ui-font-sizeTypography | 0.875rem | |
--c-type-ui-line-heightTypography | 1.43 | |
--c-type-ui-letter-spacingTypography | 0 | |
--c-type-ui-small-font-familyTypography | Inter | |
--c-type-ui-small-font-weightTypography | 500 | |
--c-type-ui-small-font-sizeTypography | 0.75rem | |
--c-type-ui-small-line-heightTypography | 1.33 | |
--c-type-ui-small-letter-spacingTypography | 0 | |
--c-type-label-font-familyTypography | IBM Plex Mono | |
--c-type-label-font-weightTypography | 400 | |
--c-type-label-font-sizeTypography | 0.875rem | |
--c-type-label-line-heightTypography | 1.5 | |
--c-type-label-letter-spacingTypography | 0.06em | |
--c-type-label-text-transformTypography | uppercase | |
--c-type-identity-label-font-familyTypography | Inter | |
--c-type-identity-label-font-weightTypography | 500 | |
--c-type-identity-label-font-sizeTypography | 1.25rem | |
--c-type-identity-label-line-heightTypography | 1.3 | |
--c-type-identity-label-letter-spacingTypography | 0 | |
--c-motion-normal-durationMotion | 140ms | |
--c-motion-easingMotion | ease-out | |
--c-motion-reduced-durationMotion | 0ms | |
--c-radius-smRadius | 0.125rem | |
--c-radius-mdRadius | 0.25rem | |
--c-radius-fullRadius | 9999px | |
--c-breakpoint-compactBreakpoint | 720px | |
--c-breakpoint-narrowBreakpoint | 380px | |
--c-glass-contrastGlass | 0.75 | 0.5 |
--c-glass-brightnessGlass | 0.5 | 1.35 |
--c-glass-blurGlass | 24px | |
--c-glass-saturationGlass | 1.4 | |
--c-glass-sheen-angleGlass | 160 | |
--c-motion-durationMotion | var(--c-motion-system-duration); scoped by data-motion | |
--c-motion-system-durationMotion | Normal or reduced duration, selected by the operating system | |
--c-primitive-blackPrimitives | #000000 | |
--c-primitive-paperPrimitives | #F6F5F0 | |
--c-primitive-whitePrimitives | #FFFFFF | |
--c-primitive-surface-darkPrimitives | #121212 | |
--c-primitive-raised-darkPrimitives | #1F1F1F | |
--c-primitive-light-softPrimitives | #E8E7E3 | |
--c-primitive-muted-darkPrimitives | #A3A3A3 | |
--c-primitive-muted-lightPrimitives | #666666 | |
--c-primitive-border-functionalPrimitives | #767676 | |
--c-primitive-decorative-darkPrimitives | #303030 | |
--c-primitive-graphitePrimitives | #414141 | |
--c-primitive-ornament-darkPrimitives | #252525 | |
--c-primitive-ornament-dark-faintPrimitives | #181818 | |
--c-primitive-media-darkPrimitives | #111111 | |
--c-primitive-rule-lightPrimitives | #C6C5C0 | |
--c-primitive-paper-shadePrimitives | #EFEEE9 | |
--c-primitive-scrim-darkPrimitives | #000000B8 | |
--c-primitive-scrim-lightPrimitives | #0000007A | |
--c-primitive-glass-darkPrimitives | #12121250 | |
--c-primitive-glass-lightPrimitives | #FFFFFF8F | |
--c-primitive-muted-glass-darkPrimitives | #C8C8C8 | |
--c-primitive-muted-glass-lightPrimitives | #454545 | |
--c-primitive-sheen-whitePrimitives | #FFFFFFA6 | |
--c-primitive-sheen-white-faintPrimitives | #FFFFFF33 | |
--c-primitive-sheen-white-strongPrimitives | #FFFFFFF2 | |
--c-primitive-sheen-shadePrimitives | #00000040 | |
--c-primitive-pressed-darkPrimitives | #2C2C2C | |
--c-primitive-pressed-lightPrimitives | #D6D5D0 | |
--c-primitive-tint-light-hoverPrimitives | #FFFFFF14 | |
--c-primitive-tint-light-activePrimitives | #FFFFFF29 | |
--c-primitive-tint-dark-hoverPrimitives | #0000000F | |
--c-primitive-tint-dark-activePrimitives | #0000001F |
No tokens match. Clear the search or choose another group.
CSS · Resolved JSON · DTCG JSON · Rust