Design tokens
Use these tokens for colors, typography, spacing, radii, shadows, and motion. Product interfaces use ds-product. Dark mode follows .dark or data-theme.
npx context-ds add themeColor
Color scales and semantic roles. Use the role token that matches the element.
blue-10
#E9EFFD
blue-20
#D3E0FB
blue-40
#A8C1F7
blue-60
#7CA1F3
blue-80
#5182EF
blue-90
#3B73ED
blue-30
#BED0F9
blue-50
#92B1F5
blue-70
#6692F1
navy-30
#0B1E46
navy-20
#07142F
navy-60
#163B8D
neutral-5
#F8F8F8
neutral-10
#E6E6E6
neutral-20
#CCCCCC
neutral-40
#999999
neutral-60
#666666
neutral-70
#4D4D4D
neutral-80
#333333
neutral-90
#191919
neutral-30
#B2B2B2
neutral-50
#808080
brand
#2563EB
black
#000000
white
#FFFFFF
bg-default
#FFFFFF
bg-subtle
#F8F8F8
bg-frame
#F2F2F2
bg-canvas
#FAFAFA
bg-tint
#E9EFFD
bg-brand
#2563EB
bg-inverse
#000000
bg-dark
#1A1A1A
bg-code
#0D1117
bg-scrim
rgb(0 0 0 / 0.1)
bg-announcement
#F7F8FA
text-default
#000000
text-secondary
#595959
text-muted
#666666
text-subtle
#737373
text-nav
#4D4D4D
text-faint
#999999
text-inverse
#FFFFFF
text-brand
#2563EB
text-on-brand
#FFFFFF
border-default
#E6E6E6
border-subtle
#F0F0F0
border-strong
#CCCCCC
border-hairline
rgb(0 0 0 / 0.08)
border-rule
#E5E7EB
border-node
#D1D5DC
border-brand
#2563EB
border-on-brand
#FFFFFF
ring-tint
rgb(37 99 235 / 0.1)
ring-on-brand
rgb(255 255 255 / 0.3)
wash-hover
rgb(0 0 0 / 0.04)
wash-control
rgb(0 0 0 / 0.05)
wash-pill
rgb(0 0 0 / 0.06)
wash-selected
rgb(0 0 0 / 0.07)
action-primary
#000000
action-primary-hover
#333333
action-primary-fg
#FFFFFF
status-success
#15803D
status-warning
#B45309
status-danger
#DC2626
focus-ring
#2563EB
chart-series-1
#3B82F6
chart-series-2
#14B8A6
chart-series-3
#F59E0B
chart-series-4
#8B5CF6
window-close
#FF5F56
window-minimize
#FFBD2E
window-zoom
#27C93F
alert-strong
#E5484D
alert
#F0868A
alert-soft
#F7C0C2
chart-ok
#22C55E
chart-client-error
#F59E0B
chart-server-error
#F97316
chart-200
#22C55E
chart-202
#10B981
chart-400
#F59E0B
chart-401
#EF4444
chart-402
#EC4899
chart-404
#F97316
chart-409
#EAB308
chart-rate-limited
#9A7FE0
skeleton-shine
#EDEDED
Typography
Rethink Sans for interface text, IBM Plex Mono for code, and Doto for display figures.
text-hero clamp(2.5rem, 1.75rem + 2.5vw, 3.875rem)
Context.dev design system
text-h1 3.5rem
Context.dev design system
text-h2 2.75rem
Context.dev design system
text-h3 2rem
Context.dev design system
text-h4 1.5rem
Context.dev design system
text-h5 1.25rem
Context.dev design system
text-body-lg 1.125rem
Context.dev design system
text-body 1rem
Context.dev design system
text-body-sm 0.875rem
Context.dev design system
text-caption 0.75rem
Context.dev design system
Radii
Site values apply at the root. Product values apply within ds-product.
rounded-sm 0.25rem
rounded-tag 0.375rem
rounded-icon 4px
rounded-logo 5px
rounded-snippet 7px
rounded-control 0.5rem
rounded-card 0.5rem
rounded-shell 0.75rem
rounded-panel 2.5rem
rounded-pill 9999px
Install the tokens
The theme item adds the token definitions and Tailwind utilities. Import both after Tailwind.