Design tokens
Tokens
112 tokens in the W3C design tokens format compile to CSS variables and a typed TypeScript module. Brand layers from the packs and the profile override semantic roles, and every text and background pair is checked for WCAG AA contrast at build time and here, live.
Pipeline
1. Source
core,semantic.lightandsemantic.darktoken files, plus one brand file per pack.2. Resolve
Aliases like
{color.blue.700}are followed, typed and checked for cycles.3. Emit
CSS variables per mode and brand, and
token('color.accent')types for TypeScript.4. Check
27 contrast pairs per theme.
profile:checkfails the build below AA.
.bk-button--primary {
background: var(--bk-color-accent);
color: var(--bk-color-on-accent);
}
import { token } from '@brandkit/tokens';
const style = { borderColor: token('color.border-strong') };Contrast on the active theme
Switch the brand or mode in the top bar. The values below are read from the page, so they show exactly what you see.
27 of 27 pass WCAG 2.2 AA on the active theme: brand profile, mode light.
Body text on pagetext on bg | 16.47:1 | 4.5:1 | Pass |
|---|---|---|---|
Body text on cards and inputstext on surface | 17.73:1 | 4.5:1 | Pass |
Text in dialogs and toaststext on surface-raised | 17.73:1 | 4.5:1 | Pass |
Table header texttext on surface-sunken | 15.41:1 | 4.5:1 | Pass |
Hovered table body text (55% sunken over surface)text on surface-sunken | 16.44:1 | 4.5:1 | Pass |
Hovered table metadata (55% sunken over surface)text-muted on surface-sunken | 7.00:1 | 4.5:1 | Pass |
Secondary text on pagetext-muted on bg | 7.01:1 | 4.5:1 | Pass |
Hints and descriptionstext-muted on surface | 7.55:1 | 4.5:1 | Pass |
Hints in dialogstext-muted on surface-raised | 7.55:1 | 4.5:1 | Pass |
Links on pageaccent-text on bg | 7.02:1 | 4.5:1 | Pass |
Links and active tabs on cardsaccent-text on surface | 7.56:1 | 4.5:1 | Pass |
Accent badgeaccent-text on accent-subtle | 6.53:1 | 4.5:1 | Pass |
Primary button labelon-accent on accent | 7.56:1 | 4.5:1 | Pass |
Primary button label on hoveron-accent on accent-hover | 10.53:1 | 4.5:1 | Pass |
Danger button labelon-danger on danger | 6.47:1 | 4.5:1 | Pass |
Danger button label on hover (92% brightness)on-danger on danger | 6.13:1 | 4.5:1 | Pass |
Field errors inherited from page backgrounddanger-text on bg | 6.00:1 | 4.5:1 | Pass |
Field error messagedanger-text on surface | 6.47:1 | 4.5:1 | Pass |
Field errors in dialogs and popoversdanger-text on surface-raised | 6.47:1 | 4.5:1 | Pass |
Danger badgedanger-text on danger-subtle | 5.91:1 | 4.5:1 | Pass |
Success badgesuccess-text on success-subtle | 5.20:1 | 4.5:1 | Pass |
Warning badgewarning-text on warning-subtle | 6.83:1 | 4.5:1 | Pass |
Input and checkbox outlineborder-strong on surface | 4.62:1 | 3:1 | Pass |
Checked control fill, switch trackaccent on surface | 7.56:1 | 3:1 | Pass |
Focus ring on pagefocus on bg | 4.62:1 | 3:1 | Pass |
Focus ring on cardsfocus on surface | 4.97:1 | 3:1 | Pass |
Inverted tooltip textbg on text | 16.47:1 | 4.5:1 | Pass |
Color roles
color.bg#f4f7f8color.surface#ffffffcolor.surface-raised#ffffffcolor.surface-sunken#eaf0f2color.text#111827color.text-muted#4b5563color.border#d8e1e4color.border-strong#647880color.accent#0f5c6ecolor.accent-hover#0b4554color.on-accent#ffffffcolor.accent-text#0f5c6ecolor.accent-subtle#e3f1f4color.focus#137a91color.danger#b91c1ccolor.on-danger#ffffffcolor.danger-text#b91c1ccolor.danger-subtle#fef2f2color.success-text#047857color.success-subtle#ecfdf5color.warning-text#92400ecolor.warning-subtle#fffbeb
Scales
Spacing
--bk-space-00px--bk-space-10.25rem--bk-space-20.5rem--bk-space-30.75rem--bk-space-41rem--bk-space-51.25rem--bk-space-61.5rem--bk-space-82rem--bk-space-102.5rem--bk-space-123rem--bk-space-164rem--bk-space-246rem
Radius
Radius comes from the brand layer, so these change when you switch brands.
--bk-radius-sm3px--bk-radius-md6px--bk-radius-lg8px--bk-radius-pill999px
Type
- Aa
--bk-font-size-5xl3rem - Aa
--bk-font-size-4xl2.25rem - Aa
--bk-font-size-3xl1.875rem - Aa
--bk-font-size-2xl1.5rem - Aa
--bk-font-size-xl1.25rem - Aa
--bk-font-size-lg1.125rem - Aa
--bk-font-size-md1rem - Aa
--bk-font-size-sm0.875rem - Aa
--bk-font-size-xs0.75rem
Motion and density
--bk-duration-fast120ms--bk-duration-normal200ms--bk-duration-slow320ms--bk-easing-standardcubic-bezier(0.2, 0, 0, 1)--bk-easing-emphasizedcubic-bezier(0.3, 0, 0, 1)--bk-density-scale0.875 profile