Tokens
Color
123 semantic tokens, 6 kit-driven scales and 1656 primitives across 34 hues. Values below resolve for the kit chosen in the header; switch it and every value, alias chain and contrast badge follows.
Rule of thumb: reach for a semantic token first (--beam-text-*, --beam-background-*, --beam-border-*, --beam-surface-*).
Drop to a scale step only when no semantic token describes the job. Never use a primitive (--beam-blue-9, --beam-abl-9) in product code —
primitives don’t follow the kit or the theme.
Semantic
Use these in product code. Each resolves through the active kit and theme: semantic → scale (accent / neutral / status) → primitive. Light and Dark are shown side by side; contrast is WCAG 2.x, measured against the pairing named in the badge tooltip.
Text 16
neutral-primary is body copy and headings; neutral-secondary is supporting copy; neutral-tertiary is metadata and captions.
brand is for links and brand-coloured emphasis. Status text (error, warning, success, info) is for messages that sit on a status *-primary background.
on-accent and on-neutral-solid are only for text on the matching *-solid background. Placeholder and disabled colours are exempt from contrast rules and are shown for reference only.
| Token | Light | Dark |
|---|---|---|
text.white | #ffffff6.1 AA #ffffff3.3 AA Large | #ffffff6.1 AA #ffffff5.1 AA |
text.brand-primary | #0050269.4 AAA text.brand → accent-text → abl.11 #6464645.8 AA text.brand → accent-text → base.11 | #47a0675.8 AA text.brand → accent-dark.11 → abl-dark.11 #b4b4b49.1 AAA text.brand → accent-dark.11 → base-dark.11 |
text.brand-secondary | #0072395.9 AA accent.9 → abl.9 #8d8d8d3.2 AA Large accent.9 → base.9 | #0072393.1 AA Large accent-dark.9 → abl-dark.9 #6e6e6e3.7 AA Large accent-dark.9 → base-dark.9 |
text.on-accent | #ffffff6.1 AA accent-contrast #ffffff3.3 AA Large accent-contrast | #ffffff6.1 AA accent-contrast #ffffff5.1 AA accent-contrast |
text.error | #64172312.1 AAA status-error.12 → red.12 #64172312.1 AAA status-error.12 → red.12 | #ff95929.0 AAA status-error-dark.11 → red-dark.11 #ff95929.0 AAA status-error-dark.11 → red-dark.11 |
text.warning | #4f342211.1 AAA status-warning.12 → amber.12 #4f342211.1 AAA status-warning.12 → amber.12 | #ffca1612.3 AAA status-warning-dark.11 → amber-dark.11 #ffca1612.3 AAA status-warning-dark.11 → amber-dark.11 |
text.success | #193b2d12.0 AAA status-success.12 → green.12 #193b2d12.0 AAA status-success.12 → green.12 | #3dd68c10.1 AAA status-success-dark.11 → green-dark.11 #3dd68c10.1 AAA status-success-dark.11 → green-dark.11 |
text.info | #11326412.3 AAA status-info.12 → blue.12 #11326412.3 AAA status-info.12 → blue.12 | #70b8ff9.0 AAA status-info-dark.11 → blue-dark.11 #70b8ff9.0 AAA status-info-dark.11 → blue-dark.11 |
text.neutral-primary | #1c202416.0 AAA neutral.12 → slate.12 #20202015.9 AAA neutral.12 → gray.12 | #edeef016.2 AAA neutral-dark.12 → slate-dark.12 #eeeeee16.3 AAA neutral-dark.12 → gray-dark.12 |
text.neutral-secondary | #60646c5.8 AA neutral.11 → slate.11 #6464645.8 AA neutral.11 → gray.11 | #b0b4ba9.1 AAA neutral-dark.11 → slate-dark.11 #b4b4b49.1 AAA neutral-dark.11 → gray-dark.11 |
text.neutral-tertiary | #8b8d983.2 AA Large neutral.9 → slate.9 #8d8d8d3.2 AA Large neutral.9 → gray.9 | #696e773.7 AA Large neutral-dark.9 → slate-dark.9 #6e6e6e3.7 AA Large neutral-dark.9 → gray-dark.9 |
text.neutral-placeholder | #8b8d983.2 neutral.9 → slate.9 #8d8d8d3.2 neutral.9 → gray.9 | #696e773.7 neutral-dark.9 → slate-dark.9 #6e6e6e3.7 neutral-dark.9 → gray-dark.9 |
text.neutral-placeholder_subtle | #b9bbc61.9 neutral.8 → slate.8 #bbbbbb1.9 neutral.8 → gray.8 | #5a61693.0 neutral-dark.8 → slate-dark.8 #6060603.0 neutral-dark.8 → gray-dark.8 |
text.neutral-disabled | #b9bbc61.9 neutral.8 → slate.8 #bbbbbb1.9 neutral.8 → gray.8 | #5a61693.0 neutral-dark.8 → slate-dark.8 #6060603.0 neutral-dark.8 → gray-dark.8 |
text.on-neutral-solid | #fcfcfd16.0 AAA neutral.1 → slate.1 #fcfcfc15.9 AAA neutral.1 → gray.1 | #11111316.2 AAA neutral-dark.1 → slate-dark.1 #11111116.3 AAA neutral-dark.1 → gray-dark.1 |
text.brand | #0050269.4 AAA accent-text → abl.11 #6464645.8 AA accent-text → base.11 | #47a0675.8 AA accent-dark.11 → abl-dark.11 #b4b4b49.1 AAA accent-dark.11 → base-dark.11 |
Foreground (icons & graphics) 20
Icons and non-text graphics. These need 3:1 against their background (WCAG 1.4.11) rather than the 4.5:1 text minimum. Pair fg-*-primary with the matching text-* colour when an icon sits next to a label.
| Token | Light | Dark |
|---|---|---|
fg.white | #ffffff6.1 AA #ffffff3.3 3:1 UI | #ffffff6.1 AA #ffffff5.1 AA |
fg.brand-primary | #0050269.4 AAA fg.brand → accent.11 → abl.11 #6464645.8 AA fg.brand → accent.11 → base.11 | #47a0675.8 AA fg.brand → accent-dark.11 → abl-dark.11 #b4b4b49.1 AAA fg.brand → accent-dark.11 → base-dark.11 |
fg.brand-secondary | #0072395.9 AA accent.9 → abl.9 #8d8d8d3.2 3:1 UI accent.9 → base.9 | #0072393.1 3:1 UI accent-dark.9 → abl-dark.9 #6e6e6e3.7 3:1 UI accent-dark.9 → base-dark.9 |
fg.on-accent | #ffffff6.1 AA accent-contrast #ffffff3.3 3:1 UI accent-contrast | #ffffff6.1 AA accent-contrast #ffffff5.1 AA accent-contrast |
fg.error-primary | #ce2c315.1 AA status-error.11 → red.11 #ce2c315.1 AA status-error.11 → red.11 | #ff95929.0 AAA status-error-dark.11 → red-dark.11 #ff95929.0 AAA status-error-dark.11 → red-dark.11 |
fg.error-secondary | #e5484d3.8 3:1 UI status-error.9 → red.9 #e5484d3.8 3:1 UI status-error.9 → red.9 | #e5484d4.8 AA status-error-dark.9 → red-dark.9 #e5484d4.8 AA status-error-dark.9 → red-dark.9 |
fg.warning-primary | #ab64004.5 3:1 UI status-warning.11 → amber.11 #ab64004.5 3:1 UI status-warning.11 → amber.11 | #ffca1612.3 AAA status-warning-dark.11 → amber-dark.11 #ffca1612.3 AAA status-warning-dark.11 → amber-dark.11 |
fg.warning-secondary | #ffc53d1.5 Fail status-warning.9 → amber.9 #ffc53d1.5 Fail status-warning.9 → amber.9 | #ffc53d12.0 AAA status-warning-dark.9 → amber-dark.9 #ffc53d12.0 AAA status-warning-dark.9 → amber-dark.9 |
fg.success-primary | #2183584.6 AA status-success.11 → green.11 #2183584.6 AA status-success.11 → green.11 | #3dd68c10.1 AAA status-success-dark.11 → green-dark.11 #3dd68c10.1 AAA status-success-dark.11 → green-dark.11 |
fg.success-secondary | #30a46c3.1 3:1 UI status-success.9 → green.9 #30a46c3.1 3:1 UI status-success.9 → green.9 | #30a46c6.0 AA status-success-dark.9 → green-dark.9 #30a46c6.0 AA status-success-dark.9 → green-dark.9 |
fg.info-primary | #0d74ce4.6 AA status-info.11 → blue.11 #0d74ce4.6 AA status-info.11 → blue.11 | #70b8ff9.0 AAA status-info-dark.11 → blue-dark.11 #70b8ff9.0 AAA status-info-dark.11 → blue-dark.11 |
fg.info-secondary | #0090ff3.2 3:1 UI status-info.9 → blue.9 #0090ff3.2 3:1 UI status-info.9 → blue.9 | #0090ff5.8 AA status-info-dark.9 → blue-dark.9 #0090ff5.8 AA status-info-dark.9 → blue-dark.9 |
fg.neutral-primary | #1c202416.0 AAA neutral.12 → slate.12 #20202015.9 AAA neutral.12 → gray.12 | #edeef016.2 AAA neutral-dark.12 → slate-dark.12 #eeeeee16.3 AAA neutral-dark.12 → gray-dark.12 |
fg.neutral-secondary | #60646c5.8 AA neutral.11 → slate.11 #6464645.8 AA neutral.11 → gray.11 | #b0b4ba9.1 AAA neutral-dark.11 → slate-dark.11 #b4b4b49.1 AAA neutral-dark.11 → gray-dark.11 |
fg.neutral-tertiary | #8b8d983.2 3:1 UI neutral.9 → slate.9 #8d8d8d3.2 3:1 UI neutral.9 → gray.9 | #696e773.7 3:1 UI neutral-dark.9 → slate-dark.9 #6e6e6e3.7 3:1 UI neutral-dark.9 → gray-dark.9 |
fg.neutral-quaternary | #b9bbc61.9 Fail neutral.8 → slate.8 #bbbbbb1.9 Fail neutral.8 → gray.8 | #5a61693.0 3:1 UI neutral-dark.8 → slate-dark.8 #6060603.0 3:1 UI neutral-dark.8 → gray-dark.8 |
fg.neutral-disabled | #b9bbc61.9 neutral.8 → slate.8 #bbbbbb1.9 neutral.8 → gray.8 | #5a61693.0 neutral-dark.8 → slate-dark.8 #6060603.0 neutral-dark.8 → gray-dark.8 |
fg.neutral-disabled_subtle | #cdced61.5 neutral.7 → slate.7 #cecece1.5 neutral.7 → gray.7 | #43484e2.0 neutral-dark.7 → slate-dark.7 #4848482.1 neutral-dark.7 → gray-dark.7 |
fg.on-neutral-solid | #fcfcfd16.0 AAA neutral.1 → slate.1 #fcfcfc15.9 AAA neutral.1 → gray.1 | #11111316.2 AAA neutral-dark.1 → slate-dark.1 #11111116.3 AAA neutral-dark.1 → gray-dark.1 |
fg.brand | #0050269.4 AAA accent.11 → abl.11 #6464645.8 AA accent.11 → base.11 | #47a0675.8 AA accent-dark.11 → abl-dark.11 #b4b4b49.1 AAA accent-dark.11 → base-dark.11 |
Background 46
*-primary / *-secondary are tinted fills (alerts, selected rows, badges). *-solid is the strongest fill — buttons and solid badges — and always takes text-on-accent (or text-on-neutral-solid for neutral solids).
_hover and _active variants are the interaction states of the token they follow; don’t use them as resting colours. The badge shows the contrast of the paired text colour on that fill.
| Token | Light | Dark |
|---|---|---|
background.overlay | rgba(0, 0, 0, 0.702) overlay.scrim → black-alpha.a9 rgba(0, 0, 0, 0.702) overlay.scrim → black-alpha.a9 | rgba(0, 0, 0, 0.702) overlay.scrim → black-alpha.a9 rgba(0, 0, 0, 0.702) overlay.scrim → black-alpha.a9 |
background.surface | #fcfcfd16.0 AAA overlay.primary → neutral.1 → slate.1 #fcfcfc15.9 AAA overlay.primary → neutral.1 → gray.1 | #18191b15.2 AAA overlay.primary → neutral-dark.2 → slate-dark.2 #19191915.2 AAA overlay.primary → neutral-dark.2 → gray-dark.2 |
background.panel | rgba(255, 255, 255, 0.651)16.2 AAA rgba(255, 255, 255, 0.651)16.1 AAA | #11111316.2 AAA neutral-dark.1 → slate-dark.1 #11111116.3 AAA neutral-dark.1 → gray-dark.1 |
background.brand-primary | #ebf9ee15.1 AAA background.brand-subtle → accent.3 → abl.3 #f0f0f014.3 AAA background.brand-subtle → accent.3 → base.3 | #19271e13.4 AAA background.brand-subtle → accent-dark.3 → abl-dark.3 #22222213.7 AAA background.brand-subtle → accent-dark.3 → base-dark.3 |
background.brand-secondary | #dff2e314.0 AAA background.brand-soft → accent.4 → abl.4 #e8e8e813.3 AAA background.brand-soft → accent.4 → base.4 | #1d2f2312.2 AAA background.brand-soft → accent-dark.4 → abl-dark.4 #2a2a2a12.4 AAA background.brand-soft → accent-dark.4 → base-dark.4 |
background.brand-solid | #0072396.1 AA accent.9 → abl.9 #8d8d8d3.3 AA Large accent.9 → base.9 | #0072396.1 AA accent-dark.9 → abl-dark.9 #6e6e6e5.1 AA accent-dark.9 → base-dark.9 |
background.brand-solid_hover | #0065327.2 AAA accent.10 → abl.10 #8383833.8 AA Large accent.10 → base.10 | #27864d4.6 AA accent-dark.10 → abl-dark.10 #7b7b7b4.2 AA Large accent-dark.10 → base-dark.10 |
background.error-primary | #feebec14.3 AAA status-error.3 → red.3 #feebec14.2 AAA status-error.3 → red.3 | #3b121914.1 AAA status-error-dark.3 → red-dark.3 #3b121914.1 AAA status-error-dark.3 → red-dark.3 |
background.error-secondary | #ffdbdc12.8 AAA status-error.4 → red.4 #ffdbdc12.7 AAA status-error.4 → red.4 | #500f1c12.7 AAA status-error-dark.4 → red-dark.4 #500f1c12.7 AAA status-error-dark.4 → red-dark.4 |
background.error-solid | #e5484d3.9 AA Large status-error.9 → red.9 #e5484d3.9 AA Large status-error.9 → red.9 | #e5484d3.9 AA Large status-error-dark.9 → red-dark.9 #e5484d3.9 AA Large status-error-dark.9 → red-dark.9 |
background.error-solid_hover | #dc3e424.4 AA Large status-error.10 → red.10 #dc3e424.4 AA Large status-error.10 → red.10 | #ec5d5e3.3 AA Large status-error-dark.10 → red-dark.10 #ec5d5e3.3 AA Large status-error-dark.10 → red-dark.10 |
background.warning-primary | #fff7c215.1 AAA status-warning.3 → amber.3 #fff7c215.0 AAA status-warning.3 → amber.3 | #30200813.5 AAA status-warning-dark.3 → amber-dark.3 #30200813.5 AAA status-warning-dark.3 → amber-dark.3 |
background.warning-secondary | #ffee9c14.0 AAA status-warning.4 → amber.4 #ffee9c13.9 AAA status-warning.4 → amber.4 | #3f270012.0 AAA status-warning-dark.4 → amber-dark.4 #3f270012.1 AAA status-warning-dark.4 → amber-dark.4 |
background.warning-solid | #ffc53d1.6 Fail status-warning.9 → amber.9 #ffc53d1.6 Fail status-warning.9 → amber.9 | #ffc53d1.6 Fail status-warning-dark.9 → amber-dark.9 #ffc53d1.6 Fail status-warning-dark.9 → amber-dark.9 |
background.success-primary | #e6f6eb14.6 AAA status-success.3 → green.3 #e6f6eb14.5 AAA status-success.3 → green.3 | #132d2112.7 AAA status-success-dark.3 → green-dark.3 #132d2112.7 AAA status-success-dark.3 → green-dark.3 |
background.success-secondary | #d6f1df13.7 AAA status-success.4 → green.4 #d6f1df13.6 AAA status-success.4 → green.4 | #113b2910.8 AAA status-success-dark.4 → green-dark.4 #113b2910.8 AAA status-success-dark.4 → green-dark.4 |
background.success-solid | #30a46c3.2 AA Large status-success.9 → green.9 #30a46c3.2 AA Large status-success.9 → green.9 | #30a46c3.2 AA Large status-success-dark.9 → green-dark.9 #30a46c3.2 AA Large status-success-dark.9 → green-dark.9 |
background.info-primary | #e6f4fe14.6 AAA status-info.3 → blue.3 #e6f4fe14.5 AAA status-info.3 → blue.3 | #0d284712.8 AAA status-info-dark.3 → blue-dark.3 #0d284712.8 AAA status-info-dark.3 → blue-dark.3 |
background.info-secondary | #d5efff13.7 AAA status-info.4 → blue.4 #d5efff13.7 AAA status-info.4 → blue.4 | #00336211.0 AAA status-info-dark.4 → blue-dark.4 #00336211.0 AAA status-info-dark.4 → blue-dark.4 |
background.info-solid | #0090ff3.3 AA Large status-info.9 → blue.9 #0090ff3.3 AA Large status-info.9 → blue.9 | #0090ff3.3 AA Large status-info-dark.9 → blue-dark.9 #0090ff3.3 AA Large status-info-dark.9 → blue-dark.9 |
background.neutral-primary | #fcfcfd16.0 AAA neutral.1 → slate.1 #fcfcfc15.9 AAA neutral.1 → gray.1 | #11111316.2 AAA neutral-dark.1 → slate-dark.1 #11111116.3 AAA neutral-dark.1 → gray-dark.1 |
background.neutral-primary_hover | #f9f9fb15.6 AAA neutral.2 → slate.2 #f9f9f915.5 AAA neutral.2 → gray.2 | #18191b15.2 AAA neutral-dark.2 → slate-dark.2 #19191915.2 AAA neutral-dark.2 → gray-dark.2 |
background.neutral-primary-solid | #1c202416.0 AAA neutral.12 → slate.12 #20202015.9 AAA neutral.12 → gray.12 | #edeef016.2 AAA neutral-dark.12 → slate-dark.12 #eeeeee16.3 AAA neutral-dark.12 → gray-dark.12 |
background.neutral-secondary | #f9f9fb15.6 AAA neutral.2 → slate.2 #f9f9f915.5 AAA neutral.2 → gray.2 | #18191b15.2 AAA neutral-dark.2 → slate-dark.2 #19191915.2 AAA neutral-dark.2 → gray-dark.2 |
background.neutral-secondary_hover | #f0f0f314.4 AAA neutral.3 → slate.3 #f0f0f014.3 AAA neutral.3 → gray.3 | #21222513.7 AAA neutral-dark.3 → slate-dark.3 #22222213.7 AAA neutral-dark.3 → gray-dark.3 |
background.neutral-secondary-solid | #60646c5.8 AA neutral.11 → slate.11 #6464645.8 AA neutral.11 → gray.11 | #b0b4ba9.1 AAA neutral-dark.11 → slate-dark.11 #b4b4b49.1 AAA neutral-dark.11 → gray-dark.11 |
background.neutral-tertiary | #f0f0f314.4 AAA neutral.3 → slate.3 #f0f0f014.3 AAA neutral.3 → gray.3 | #21222513.7 AAA neutral-dark.3 → slate-dark.3 #22222213.7 AAA neutral-dark.3 → gray-dark.3 |
background.neutral-quaternary | #e8e8ec13.4 AAA neutral.4 → slate.4 #e8e8e813.3 AAA neutral.4 → gray.4 | #272a2d12.4 AAA neutral-dark.4 → slate-dark.4 #2a2a2a12.4 AAA neutral-dark.4 → gray-dark.4 |
background.neutral-active | #f0f0f314.4 AAA neutral.3 → slate.3 #f0f0f014.3 AAA neutral.3 → gray.3 | #21222513.7 AAA neutral-dark.3 → slate-dark.3 #22222213.7 AAA neutral-dark.3 → gray-dark.3 |
background.neutral-disabled | #f0f0f314.4 neutral.3 → slate.3 #f0f0f014.3 neutral.3 → gray.3 | #21222513.7 neutral-dark.3 → slate-dark.3 #22222213.7 neutral-dark.3 → gray-dark.3 |
background.neutral-disabled_subtle | #f9f9fb15.6 neutral.2 → slate.2 #f9f9f915.5 neutral.2 → gray.2 | #18191b15.2 neutral-dark.2 → slate-dark.2 #19191915.2 neutral-dark.2 → gray-dark.2 |
background.brand-solid_active | #08221116.8 AAA accent.12 → abl.12 #20202016.3 AAA accent.12 → base.12 | #1a61367.5 AAA accent-dark.8 → abl-dark.8 #6060606.3 AA accent-dark.8 → base-dark.8 |
background.error-solid_active | #ce2c315.2 AA status-error.11 → red.11 #ce2c315.2 AA status-error.11 → red.11 | #ff95922.1 Fail status-error-dark.11 → red-dark.11 #ff95922.1 Fail status-error-dark.11 → red-dark.11 |
background.info-solid_active | #0d74ce4.8 AA status-info.11 → blue.11 #0d74ce4.8 AA status-info.11 → blue.11 | #70b8ff2.1 Fail status-info-dark.11 → blue-dark.11 #70b8ff2.1 Fail status-info-dark.11 → blue-dark.11 |
background.info-solid_hover | #0588f03.6 AA Large status-info.10 → blue.10 #0588f03.6 AA Large status-info.10 → blue.10 | #3b9eff2.8 Fail status-info-dark.10 → blue-dark.10 #3b9eff2.8 Fail status-info-dark.10 → blue-dark.10 |
background.neutral-quaternary_hover | #e0e1e612.5 AAA neutral.5 → slate.5 #e0e0e012.3 AAA neutral.5 → gray.5 | #2e313511.3 AAA neutral-dark.5 → slate-dark.5 #31313111.2 AAA neutral-dark.5 → gray-dark.5 |
background.neutral-tertiary_hover | #e8e8ec13.4 AAA neutral.4 → slate.4 #e8e8e813.3 AAA neutral.4 → gray.4 | #272a2d12.4 AAA neutral-dark.4 → slate-dark.4 #2a2a2a12.4 AAA neutral-dark.4 → gray-dark.4 |
background.success-solid_active | #2183584.7 AA status-success.11 → green.11 #2183584.7 AA status-success.11 → green.11 | #3dd68c1.9 Fail status-success-dark.11 → green-dark.11 #3dd68c1.9 Fail status-success-dark.11 → green-dark.11 |
background.success-solid_hover | #2b9a663.5 AA Large status-success.10 → green.10 #2b9a663.5 AA Large status-success.10 → green.10 | #33b0742.8 Fail status-success-dark.10 → green-dark.10 #33b0742.8 Fail status-success-dark.10 → green-dark.10 |
background.warning-solid_active | #ab64004.6 AA status-warning.11 → amber.11 #ab64004.6 AA status-warning.11 → amber.11 | #ffca161.5 Fail status-warning-dark.11 → amber-dark.11 #ffca161.5 Fail status-warning-dark.11 → amber-dark.11 |
background.warning-solid_hover | #ffba181.7 Fail status-warning.10 → amber.10 #ffba181.7 Fail status-warning.10 → amber.10 | #ffd60a1.4 Fail status-warning-dark.10 → amber-dark.10 #ffd60a1.4 Fail status-warning-dark.10 → amber-dark.10 |
background.neutral-primary-solid_hover | #60646c5.8 AA neutral.11 → slate.11 #6464645.8 AA neutral.11 → gray.11 | #b0b4ba9.1 AAA neutral-dark.11 → slate-dark.11 #b4b4b49.1 AAA neutral-dark.11 → gray-dark.11 |
background.neutral-primary-solid_active | #80838d3.7 AA Large neutral.10 → slate.10 #8383833.7 AA Large neutral.10 → gray.10 | #777b844.4 AA Large neutral-dark.10 → slate-dark.10 #7b7b7b4.5 AA Large neutral-dark.10 → gray-dark.10 |
background.brand-faint | #f3fcf515.6 AAA accent.2 → abl.2 #f9f9f915.5 AAA accent.2 → base.2 | #141d1714.9 AAA accent-dark.2 → abl-dark.2 #19191915.2 AAA accent-dark.2 → base-dark.2 |
background.brand-subtle | #ebf9ee15.1 AAA accent.3 → abl.3 #f0f0f014.3 AAA accent.3 → base.3 | #19271e13.4 AAA accent-dark.3 → abl-dark.3 #22222213.7 AAA accent-dark.3 → base-dark.3 |
background.brand-soft | #dff2e314.0 AAA accent.4 → abl.4 #e8e8e813.3 AAA accent.4 → base.4 | #1d2f2312.2 AAA accent-dark.4 → abl-dark.4 #2a2a2a12.4 AAA accent-dark.4 → base-dark.4 |
Border 14
neutral-secondary is the default component border; neutral-primary is for inputs and anything that needs to read as a control boundary; neutral-separator is for dividers.
Contrast for borders is informative: WCAG 1.4.11 asks for 3:1 only when the border is the thing that identifies a control.
| Token | Light | Dark |
|---|---|---|
border.brand | #69b8822.3 accent.8 → abl.8 #bbbbbb1.9 accent.8 → base.8 | #1a61362.5 accent-dark.8 → abl-dark.8 #6060603.0 accent-dark.8 → base-dark.8 |
border.brand_subtle | #b8dec11.4 accent.6 → abl.6 #d9d9d91.4 accent.6 → base.6 | #2744311.8 accent-dark.6 → abl-dark.6 #3a3a3a1.7 accent-dark.6 → base-dark.6 |
border.focus-ring | rgba(0, 146, 31, 0.1922)1.3 accent-alpha.a5 → abl-alpha.a5 rgba(0, 0, 0, 0.1216)1.3 accent-alpha.a5 → base-alpha.a5 | rgba(146, 255, 187, 0.2196)1.8 accent-dark-alpha.a5 → abl-dark-alpha.a5 rgba(255, 255, 255, 0.1333)1.4 accent-dark-alpha.a5 → base-dark-alpha.a5 |
border.error | #eb8e902.3 status-error.8 → red.8 #eb8e902.3 status-error.8 → red.8 | #b545483.5 status-error-dark.8 → red-dark.8 #b545483.5 status-error-dark.8 → red-dark.8 |
border.error_subtle | #fdbdbe1.6 status-error.6 → red.6 #fdbdbe1.6 status-error.6 → red.6 | #72232d1.8 status-error-dark.6 → red-dark.6 #72232d1.8 status-error-dark.6 → red-dark.6 |
border.warning | #e2a3362.2 status-warning.8 → amber.8 #e2a3362.1 status-warning.8 → amber.8 | #8f64243.6 status-warning-dark.8 → amber-dark.8 #8f64243.6 status-warning-dark.8 → amber-dark.8 |
border.success | #5bb98b2.3 status-success.8 → green.8 #5bb98b2.3 status-success.8 → green.8 | #2f7c573.7 status-success-dark.8 → green-dark.8 #2f7c573.7 status-success-dark.8 → green-dark.8 |
border.info | #5eb1ef2.3 status-info.8 → blue.8 #5eb1ef2.3 status-info.8 → blue.8 | #2870bd3.7 status-info-dark.8 → blue-dark.8 #2870bd3.7 status-info-dark.8 → blue-dark.8 |
border.neutral-primary | #d9d9e01.4 neutral.6 → slate.6 #d9d9d91.4 neutral.6 → gray.6 | #363a3f1.6 neutral-dark.6 → slate-dark.6 #3a3a3a1.7 neutral-dark.6 → gray-dark.6 |
border.neutral-secondary | #e0e1e61.3 neutral.5 → slate.5 #e0e0e01.3 neutral.5 → gray.5 | #2e31351.4 neutral-dark.5 → slate-dark.5 #3131311.5 neutral-dark.5 → gray-dark.5 |
border.neutral-tertiary | #e8e8ec1.2 neutral.4 → slate.4 #e8e8e81.2 neutral.4 → gray.4 | #272a2d1.3 neutral-dark.4 → slate-dark.4 #2a2a2a1.3 neutral-dark.4 → gray-dark.4 |
border.neutral-disabled | #e0e1e61.3 neutral.5 → slate.5 #e0e0e01.3 neutral.5 → gray.5 | #2e31351.4 neutral-dark.5 → slate-dark.5 #3131311.5 neutral-dark.5 → gray-dark.5 |
border.neutral-disabled_subtle | #e8e8ec1.2 neutral.4 → slate.4 #e8e8e81.2 neutral.4 → gray.4 | #272a2d1.3 neutral-dark.4 → slate-dark.4 #2a2a2a1.3 neutral-dark.4 → gray-dark.4 |
border.neutral-separator | #d9d9e01.4 neutral.6 → slate.6 #d9d9d91.4 neutral.6 → gray.6 | #363a3f1.6 neutral-dark.6 → slate-dark.6 #3a3a3a1.7 neutral-dark.6 → gray-dark.6 |
Surface 7
Surfaces are the page and the layers on it: default is the page, raised is cards and panels, sunken is wells and inset areas, overlay is menus, popovers and dialogs. Prefer these over background-* for large areas.
| Token | Light | Dark |
|---|---|---|
surface.default | #fcfcfd surface.primary → neutral.1 → slate.1 #fcfcfc surface.primary → neutral.1 → gray.1 | #111113 surface.primary → neutral-dark.1 → slate-dark.1 #111111 surface.primary → neutral-dark.1 → gray-dark.1 |
surface.raised | #f9f9fb surface.secondary → neutral.2 → slate.2 #f9f9f9 surface.secondary → neutral.2 → gray.2 | #18191b surface.secondary → neutral-dark.2 → slate-dark.2 #191919 surface.secondary → neutral-dark.2 → gray-dark.2 |
surface.overlay | #fcfcfd overlay.primary → neutral.1 → slate.1 #fcfcfc overlay.primary → neutral.1 → gray.1 | #18191b overlay.primary → neutral-dark.2 → slate-dark.2 #191919 overlay.primary → neutral-dark.2 → gray-dark.2 |
surface.sunken | rgba(0, 0, 51, 0.0588) neutral-alpha.a3 → slate-alpha.a3 rgba(0, 0, 0, 0.0588) neutral-alpha.a3 → gray-alpha.a3 | rgba(0, 0, 0, 0.4) black-alpha.a6 rgba(0, 0, 0, 0.4) black-alpha.a6 |
surface.primary | #fcfcfd neutral.1 → slate.1 #fcfcfc neutral.1 → gray.1 | #111113 neutral-dark.1 → slate-dark.1 #111111 neutral-dark.1 → gray-dark.1 |
surface.secondary | #f9f9fb neutral.2 → slate.2 #f9f9f9 neutral.2 → gray.2 | #18191b neutral-dark.2 → slate-dark.2 #191919 neutral-dark.2 → gray-dark.2 |
surface.tertiary | #f0f0f3 neutral.3 → slate.3 #f0f0f0 neutral.3 → gray.3 | #212225 neutral-dark.3 → slate-dark.3 #222222 neutral-dark.3 → gray-dark.3 |
Overlay 4
| Token | Light | Dark |
|---|---|---|
overlay.primary | #fcfcfd neutral.1 → slate.1 #fcfcfc neutral.1 → gray.1 | #18191b neutral-dark.2 → slate-dark.2 #191919 neutral-dark.2 → gray-dark.2 |
overlay.scrim | rgba(0, 0, 0, 0.702) black-alpha.a9 rgba(0, 0, 0, 0.702) black-alpha.a9 | rgba(0, 0, 0, 0.702) black-alpha.a9 rgba(0, 0, 0, 0.702) black-alpha.a9 |
overlay.secondary | #f9f9fb neutral.2 → slate.2 #f9f9f9 neutral.2 → gray.2 | #212225 neutral-dark.3 → slate-dark.3 #222222 neutral-dark.3 → gray-dark.3 |
overlay.tertiary | #f0f0f3 neutral.3 → slate.3 #f0f0f0 neutral.3 → gray.3 | #272a2d neutral-dark.4 → slate-dark.4 #2a2a2a neutral-dark.4 → gray-dark.4 |
Effect colours 16
| Token | Light | Dark |
|---|---|---|
effect.shadow-color | rgba(24, 24, 26, 0.051) rgba(24, 24, 26, 0.051) | rgba(0, 0, 0, 0.251) rgba(0, 0, 0, 0.251) |
effect.inner-shadow-color | rgba(252, 252, 253, 0.0314) rgba(252, 252, 253, 0.0314) | rgba(252, 252, 253, 0.0196) rgba(252, 252, 253, 0.0196) |
effect.depth.dramatic | rgba(0, 0, 51, 0.0588) neutral-alpha.a3 → slate-alpha.a3 rgba(0, 0, 0, 0.0588) neutral-alpha.a3 → gray-alpha.a3 | rgba(0, 6, 46, 0.1961) neutral-alpha.a7 → slate-alpha.a7 rgba(0, 0, 0, 0.1922) neutral-alpha.a7 → gray-alpha.a7 |
effect.depth.none | rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) | rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) |
effect.depth.ring | rgba(0, 0, 51, 0.0588) neutral-alpha.a3 → slate-alpha.a3 rgba(0, 0, 0, 0.0588) neutral-alpha.a3 → gray-alpha.a3 | rgba(221, 234, 248, 0.0784) neutral-dark-alpha.a3 → slate-dark-alpha.a3 rgba(255, 255, 255, 0.0706) neutral-dark-alpha.a3 → gray-dark-alpha.a3 |
effect.depth.soft | rgba(0, 0, 85, 0.0235) neutral-alpha.a2 → slate-alpha.a2 rgba(0, 0, 0, 0.0235) neutral-alpha.a2 → gray-alpha.a2 | rgba(0, 9, 50, 0.1216) neutral-alpha.a5 → slate-alpha.a5 rgba(0, 0, 0, 0.1216) neutral-alpha.a5 → gray-alpha.a5 |
effect.ring-brand | rgba(0, 146, 31, 0.1922) accent-alpha.a5 → abl-alpha.a5 rgba(0, 0, 0, 0.1216) accent-alpha.a5 → base-alpha.a5 | rgba(146, 255, 187, 0.2196) accent-dark-alpha.a5 → abl-dark-alpha.a5 rgba(255, 255, 255, 0.1333) accent-dark-alpha.a5 → base-dark-alpha.a5 |
effect.ring-error | rgba(255, 0, 6, 0.1961) status-error-alpha.a5 → red-alpha.a5 rgba(255, 0, 6, 0.1961) status-error-alpha.a5 → red-alpha.a5 | rgba(255, 32, 71, 0.3373) status-error-dark-alpha.a5 → red-dark-alpha.a5 rgba(255, 32, 71, 0.3373) status-error-dark-alpha.a5 → red-dark-alpha.a5 |
effect.ring-info | rgba(0, 147, 255, 0.2392) status-info-alpha.a5 → blue-alpha.a5 rgba(0, 147, 255, 0.2392) status-info-alpha.a5 → blue-alpha.a5 | rgba(0, 129, 253, 0.4196) status-info-dark-alpha.a5 → blue-dark-alpha.a5 rgba(0, 129, 253, 0.4196) status-info-dark-alpha.a5 → blue-dark-alpha.a5 |
effect.ring-success | rgba(1, 156, 57, 0.2314) status-success-alpha.a5 → green-alpha.a5 rgba(1, 156, 57, 0.2314) status-success-alpha.a5 → green-alpha.a5 | rgba(43, 255, 162, 0.2353) status-success-dark-alpha.a5 → green-dark-alpha.a5 rgba(43, 255, 162, 0.2353) status-success-dark-alpha.a5 → green-dark-alpha.a5 |
effect.ring-warning | rgba(248, 207, 0, 0.5333) status-warning-alpha.a5 → amber-alpha.a5 rgba(248, 207, 0, 0.5333) status-warning-alpha.a5 → amber-alpha.a5 | rgba(253, 139, 0, 0.2549) status-warning-dark-alpha.a5 → amber-dark-alpha.a5 rgba(253, 139, 0, 0.2549) status-warning-dark-alpha.a5 → amber-dark-alpha.a5 |
effect.shadow-brand | rgba(0, 151, 32, 0.1255) accent-alpha.a4 → abl-alpha.a4 rgba(0, 0, 0, 0.0902) accent-alpha.a4 → base-alpha.a4 | rgba(157, 255, 190, 0.1843) accent-dark-alpha.a4 → abl-dark-alpha.a4 rgba(255, 255, 255, 0.1059) accent-dark-alpha.a4 → base-dark-alpha.a4 |
effect.shadow-error | rgba(255, 0, 8, 0.1412) status-error-alpha.a4 → red-alpha.a4 rgba(255, 0, 8, 0.1412) status-error-alpha.a4 → red-alpha.a4 | rgba(254, 10, 59, 0.2667) status-error-dark-alpha.a4 → red-dark-alpha.a4 rgba(254, 10, 59, 0.2667) status-error-dark-alpha.a4 → red-dark-alpha.a4 |
effect.shadow-info | rgba(0, 158, 255, 0.1647) status-info-alpha.a4 → blue-alpha.a4 rgba(0, 158, 255, 0.1647) status-info-alpha.a4 → blue-alpha.a4 | rgba(0, 117, 255, 0.3412) status-info-dark-alpha.a4 → blue-dark-alpha.a4 rgba(0, 117, 255, 0.3412) status-info-dark-alpha.a4 → blue-dark-alpha.a4 |
effect.shadow-success | rgba(0, 168, 56, 0.1608) status-success-alpha.a4 → green-alpha.a4 rgba(0, 168, 56, 0.1608) status-success-alpha.a4 → green-alpha.a4 | rgba(17, 255, 153, 0.1765) status-success-dark-alpha.a4 → green-dark-alpha.a4 rgba(17, 255, 153, 0.1765) status-success-dark-alpha.a4 → green-dark-alpha.a4 |
effect.shadow-warning | rgba(255, 212, 0, 0.3882) status-warning-alpha.a4 → amber-alpha.a4 rgba(255, 212, 0, 0.3882) status-warning-alpha.a4 → amber-alpha.a4 | rgba(252, 130, 0, 0.1961) status-warning-dark-alpha.a4 → amber-dark-alpha.a4 rgba(252, 130, 0, 0.1961) status-warning-dark-alpha.a4 → amber-dark-alpha.a4 |
Scales
The 12-step ramps semantic tokens point at. accent and neutral are chosen by the kit; status ramps are fixed. Click a step to copy its variable.
Beam’s ramps follow the Radix 12-step convention:
1 · app bg2 · subtle bg3 · element bg4 · hover bg5 · active bg6 · subtle border7 · border8 · hover border9 · solid10 · solid hover11 · low-contrast text12 · high-contrast text
123456789101112accent
03. Accent → ABL (abl)
03. Accent → Base (base)neutral
02. Gray → Slate (slate)
02. Gray → Gray (gray)status-error
04. Status (red)
04. Status (red)status-warning
04. Status (amber)
04. Status (amber)status-success
04. Status (green)
04. Status (green)status-info
04. Status (blue)
04. Status (blue)
03. Accent → ABL (abl)
03. Accent → Base (base)neutral
02. Gray → Slate (slate)
02. Gray → Gray (gray)status-error
04. Status (red)
04. Status (red)status-warning
04. Status (amber)
04. Status (amber)status-success
04. Status (green)
04. Status (green)status-info
04. Status (blue)
04. Status (blue)
dark123456789101112accent-darkneutral-darkstatus-error-darkstatus-warning-darkstatus-success-darkstatus-info-dark
Primitives
Raw ramps from 01. Color Primitives. Kits and scales point at these; product code should not. Hover a step for its value, click to copy.
Each hue ships as four ramps: light, light alpha, dark and dark alpha. The abl ramp carries ABL green, with #007239 pinned at step 9 in light and dark.
Light scales 34 hues
123456789101112amberbasebluebronzebrowncrimsoncyangoldgrassgraygreenindigoirisjadelimemauvemintoliveorangepinkplumpurplerebeccaredrubysagesandskyslatetealtomatovioletyellowabl
Light alpha scales (36 hues)
a1a2a3a4a5a6a7a8a9a10a11a12amber-alphabase-alphablue-alphabronze-alphabrown-alphacrimson-alphacyan-alphagold-alphagrass-alphagray-alphagreen-alphaindigo-alphairis-alphajade-alphalime-alphamauve-alphamint-alphaolive-alphaorange-alphapink-alphaplum-alphapurple-alpharebecca-alphared-alpharuby-alphasage-alphasand-alphasky-alphaslate-alphateal-alphatomato-alphaviolet-alphayellow-alphaabl-alphablack-alphawhite-alpha
Dark scales 34 hues
123456789101112amber-darkbase-darkblue-darkbronze-darkbrown-darkcrimson-darkcyan-darkgold-darkgrass-darkgray-darkgreen-darkindigo-darkiris-darkjade-darklime-darkmauve-darkmint-darkolive-darkorange-darkpink-darkplum-darkpurple-darkrebecca-darkred-darkruby-darksage-darksand-darksky-darkslate-darkteal-darktomato-darkviolet-darkyellow-darkabl-dark
Dark alpha scales (34 hues)
a1a2a3a4a5a6a7a8a9a10a11a12amber-dark-alphabase-dark-alphablue-dark-alphabronze-dark-alphabrown-dark-alphacrimson-dark-alphacyan-dark-alphagold-dark-alphagrass-dark-alphagray-dark-alphagreen-dark-alphaindigo-dark-alphairis-dark-alphajade-dark-alphalime-dark-alphamauve-dark-alphamint-dark-alphaolive-dark-alphaorange-dark-alphapink-dark-alphaplum-dark-alphapurple-dark-alpharebecca-dark-alphared-dark-alpharuby-dark-alphasage-dark-alphasand-dark-alphasky-dark-alphaslate-dark-alphateal-dark-alphatomato-dark-alphaviolet-dark-alphayellow-dark-alphaabl-dark-alpha
Generated from beam.manifest.json v0.1.0 · 2026-11-06T09:38:51.936Z · source 8dcb01076f81