Open DS

Theming

Five questions every design system answers about theming. These are Content first’s answers, and each one points back to the reasons that chose it.

View all 53 theming tokens ↓

The reasons this scheme answers from

  • R1Business and productInforms and publishes, one
  • R2Use scenariosAnywhere, on any device, one sitting

Question 1

What can a theme change?

  • Mode only (chosen)
  • Mode and brand
  • Mode and contrast

Why Content first picks it: One brand, so only the mode changes.

becauseR1

radius{radius.8} · {radius.999} · {radius.12}
type{font.family.source-serif-4} · {font.family.source-serif-4} · {font.family.source-serif-4} · {font.family.source-serif-4} · {font.family.inter} · {font.family.inter} · {font.family.source-serif-4}
color{color.stone.light.50} · {color.stone.light.0} · {color.stone.light.0} · {color.stone.light.100} · {color.navy.light.100} · {color.stone.light.900} · {color.black.light.scrim} · {color.stone.light.900} · {color.stone.light.700} · {color.stone.light.600} · {color.stone.light.0} · {color.stone.light.0} · {color.navy.light.700} · {color.stone.light.200} · {color.stone.light.500} · {color.navy.light.600} · {color.navy.light.600} · {color.navy.light.700} · {color.stone.light.0} · {color.stone.light.100} · {color.blue.light.700} · {color.blue.light.100} · {color.green.light.700} · {color.green.light.100} · {color.amber.light.700} · {color.amber.light.100} · {color.red.light.700} · {color.red.light.100} · {color.navy.light.600} · {color.navy.light.100} · {color.blue.light.600} · {color.blue.light.100} · {color.green.light.700} · {color.green.light.100} · {color.amber.light.700} · {color.amber.light.100} · {color.stone.light.500} · {color.stone.light.100} · {color.stone.light.500} · {color.stone.light.100} · {color.stone.light.200}
elevation{shadow.none} · {shadow.overlay}

Question 2

How many themes ship?

  • Two (chosen)
  • Several

Why Content first picks it: Light and dark.

becauseQ4

radius3
font family2
stone light8
navy light3
black light1
blue light3
green light2
amber light2
red light2
shadow2

Question 3

How are brands handled?

  • One brand (chosen)
  • Brands as modes

Why Content first picks it: One publication, one brand.

becauseR1

  • One brand
  • from radius
  • from font.family
  • from color.stone.light
  • from color.navy.light
  • from color.black.light
  • from color.blue.light
  • from color.green.light
  • from color.amber.light
  • from color.red.light
  • from shadow

Decisions point at primitives, so the rule lives in one place.

Question 4

Which modes ship?

  • Light and dark (chosen)
  • Light, dark and high contrast

Why Content first picks it: Light and dark ship as standard; dark helps night reading.

becauseR2

  • radius
    control
    → radius.8
    badge
    → radius.999
    container
    → radius.12
  • type
    display.font-family
    → font.family.source-serif-4
    title.font-family
    → font.family.source-serif-4
    heading.font-family
    → font.family.source-serif-4
    body.font-family
    → font.family.source-serif-4
    label.font-family
    → font.family.inter
    caption.font-family
    → font.family.inter
    data.font-family
    → font.family.source-serif-4
  • color
    surface.canvas
    → color.stone.light.50
    surface.default
    → color.stone.light.0
    surface.raised
    → color.stone.light.0
    surface.sunken
    → color.stone.light.100
    surface.selected
    → color.navy.light.100
    surface.inverse
    → color.stone.light.900
    surface.scrim
    → color.black.light.scrim
    text.primary
    → color.stone.light.900
    text.secondary
    → color.stone.light.700
    text.muted
    → color.stone.light.600
    text.inverse
    → color.stone.light.0
    text.on-action
    → color.stone.light.0
    text.link
    → color.navy.light.700
    border.default
    → color.stone.light.200
    border.strong
    → color.stone.light.500
    border.focus
    → color.navy.light.600
    action.primary.@
    → color.navy.light.600
    action.primary.hover
    → color.navy.light.700
    action.secondary.@
    → color.stone.light.0
    action.secondary.hover
    → color.stone.light.100
    status.info.@
    → color.blue.light.700
    status.info.subtle
    → color.blue.light.100
    status.success.@
    → color.green.light.700
    status.success.subtle
    → color.green.light.100
    status.warning.@
    → color.amber.light.700
    status.warning.subtle
    → color.amber.light.100
    status.danger.@
    → color.red.light.700
    status.danger.subtle
    → color.red.light.100
    category.1.@
    → color.navy.light.600
    category.1.subtle
    → color.navy.light.100
    category.2.@
    → color.blue.light.600
    category.2.subtle
    → color.blue.light.100
    category.3.@
    → color.green.light.700
    category.3.subtle
    → color.green.light.100
    category.4.@
    → color.amber.light.700
    category.4.subtle
    → color.amber.light.100
    category.5.@
    → color.stone.light.500
    category.5.subtle
    → color.stone.light.100
    disabled.text
    → color.stone.light.500
    disabled.surface
    → color.stone.light.100
    disabled.border
    → color.stone.light.200
  • elevation
    card
    → shadow.none
    overlay
    → shadow.overlay

Question 5

What changes when the theme changes?

  • Colors only (chosen)
  • Colors, type and shape

Why Content first picks it: Only colors change.

becauseQ1

  • button
  • card
  • overlay

When to use

  • Someone switches to darkUse: The dark semantic mode. Not: Inverting images. Only semantic colors change; the reading layout stays.

All theming tokens

53 tokens · each decision and the primitive it points to

  • radius · 3radius.80.5rem · 8pxradius.9999999pxradius.120.75rem · 12px
  • font.family · 2font.family.source-serif-4"Source Serif 4", Georgia, seriffont.family.interInter, system-ui, sans-serif
  • color.stone.light · 8color.stone.light.50#FFFDF8color.stone.light.0#FFFFFFcolor.stone.light.100#F6F2EAcolor.stone.light.900#1F1B16color.stone.light.700#4A4339color.stone.light.600#61594Dcolor.stone.light.200#E4DDD0color.stone.light.500#7A7062
  • color.navy.light · 3color.navy.light.100#E3EAF3color.navy.light.700#162C49color.navy.light.600#1E3A5F
  • color.black.light · 1color.black.light.scrim#0000008C
  • color.blue.light · 3color.blue.light.700#083C93color.blue.light.100#E1ECFFcolor.blue.light.600#0B4FC0
  • color.green.light · 2color.green.light.700#1F7A3Acolor.green.light.100#E3F4EA
  • color.amber.light · 2color.amber.light.700#8A5600color.amber.light.100#FFF3D6
  • color.red.light · 2color.red.light.700#C42B2Bcolor.red.light.100#FDE7E7
  • shadow · 2shadow.none0px 0px 0px 0px #00000000shadow.overlay0px 12px 32px 0px #1F1B1629
  • Decisions · 53theme.radius.control{radius.8}theme.radius.badge{radius.999}theme.radius.container{radius.12}theme.type.display.font-family{font.family.source-serif-4}theme.type.title.font-family{font.family.source-serif-4}theme.type.heading.font-family{font.family.source-serif-4}theme.type.body.font-family{font.family.source-serif-4}theme.type.label.font-family{font.family.inter}theme.type.caption.font-family{font.family.inter}theme.type.data.font-family{font.family.source-serif-4}theme.color.surface.canvas{color.stone.light.50}theme.color.surface.default{color.stone.light.0}theme.color.surface.raised{color.stone.light.0}theme.color.surface.sunken{color.stone.light.100}theme.color.surface.selected{color.navy.light.100}theme.color.surface.inverse{color.stone.light.900}theme.color.surface.scrim{color.black.light.scrim}theme.color.text.primary{color.stone.light.900}theme.color.text.secondary{color.stone.light.700}theme.color.text.muted{color.stone.light.600}theme.color.text.inverse{color.stone.light.0}theme.color.text.on-action{color.stone.light.0}theme.color.text.link{color.navy.light.700}theme.color.border.default{color.stone.light.200}theme.color.border.strong{color.stone.light.500}theme.color.border.focus{color.navy.light.600}theme.color.action.primary.@{color.navy.light.600}theme.color.action.primary.hover{color.navy.light.700}theme.color.action.secondary.@{color.stone.light.0}theme.color.action.secondary.hover{color.stone.light.100}theme.color.status.info.@{color.blue.light.700}theme.color.status.info.subtle{color.blue.light.100}theme.color.status.success.@{color.green.light.700}theme.color.status.success.subtle{color.green.light.100}theme.color.status.warning.@{color.amber.light.700}theme.color.status.warning.subtle{color.amber.light.100}theme.color.status.danger.@{color.red.light.700}theme.color.status.danger.subtle{color.red.light.100}theme.color.category.1.@{color.navy.light.600}theme.color.category.1.subtle{color.navy.light.100}theme.color.category.2.@{color.blue.light.600}theme.color.category.2.subtle{color.blue.light.100}theme.color.category.3.@{color.green.light.700}theme.color.category.3.subtle{color.green.light.100}theme.color.category.4.@{color.amber.light.700}theme.color.category.4.subtle{color.amber.light.100}theme.color.category.5.@{color.stone.light.500}theme.color.category.5.subtle{color.stone.light.100}theme.color.disabled.text{color.stone.light.500}theme.color.disabled.surface{color.stone.light.100}theme.color.disabled.border{color.stone.light.200}theme.elevation.card{shadow.none}theme.elevation.overlay{shadow.overlay}

Decisions reference primitives, so changing one primitive updates every decision and component that uses it.

Theming in Content first: light and dark. Light and dark ship as standard; dark helps night reading. Only colors change.