Open DS

Theming

Five questions every design system answers about theming. These are Brand expressive’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 productSells and converts, one
  • R2People and work contextCustomers who choose us, AA

Question 1

What can a theme change?

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

Why Brand expressive picks it: One brand, so only the mode changes.

becauseR1

radius{radius.999} · {radius.999} · {radius.24}
type{font.family.bricolage-grotesque} · {font.family.bricolage-grotesque} · {font.family.bricolage-grotesque} · {font.family.dm-sans} · {font.family.dm-sans} · {font.family.dm-sans} · {font.family.dm-sans}
color{color.taupe.light.50} · {color.taupe.light.0} · {color.taupe.light.0} · {color.taupe.light.100} · {color.pink.light.100} · {color.taupe.light.900} · {color.black.light.scrim} · {color.taupe.light.900} · {color.taupe.light.700} · {color.taupe.light.600} · {color.taupe.light.0} · {color.taupe.light.0} · {color.pink.light.700} · {color.taupe.light.200} · {color.taupe.light.500} · {color.pink.light.600} · {color.pink.light.600} · {color.pink.light.700} · {color.taupe.light.0} · {color.taupe.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.pink.light.600} · {color.pink.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.taupe.light.500} · {color.taupe.light.100} · {color.taupe.light.500} · {color.taupe.light.100} · {color.taupe.light.200}
elevation{shadow.card} · {shadow.overlay}

Question 2

How many themes ship?

  • Two (chosen)
  • Several

Why Brand expressive picks it: Light and dark.

becauseQ4

radius2
font family2
taupe light8
pink 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 Brand expressive picks it: One brand per campaign.

becauseR1

  • One brand
  • from radius
  • from font.family
  • from color.taupe.light
  • from color.pink.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 Brand expressive picks it: Light and dark ship as standard.

becauseR2

  • radius
    control
    → radius.999
    badge
    → radius.999
    container
    → radius.24
  • type
    display.font-family
    → font.family.bricolage-grotesque
    title.font-family
    → font.family.bricolage-grotesque
    heading.font-family
    → font.family.bricolage-grotesque
    body.font-family
    → font.family.dm-sans
    label.font-family
    → font.family.dm-sans
    caption.font-family
    → font.family.dm-sans
    data.font-family
    → font.family.dm-sans
  • color
    surface.canvas
    → color.taupe.light.50
    surface.default
    → color.taupe.light.0
    surface.raised
    → color.taupe.light.0
    surface.sunken
    → color.taupe.light.100
    surface.selected
    → color.pink.light.100
    surface.inverse
    → color.taupe.light.900
    surface.scrim
    → color.black.light.scrim
    text.primary
    → color.taupe.light.900
    text.secondary
    → color.taupe.light.700
    text.muted
    → color.taupe.light.600
    text.inverse
    → color.taupe.light.0
    text.on-action
    → color.taupe.light.0
    text.link
    → color.pink.light.700
    border.default
    → color.taupe.light.200
    border.strong
    → color.taupe.light.500
    border.focus
    → color.pink.light.600
    action.primary.@
    → color.pink.light.600
    action.primary.hover
    → color.pink.light.700
    action.secondary.@
    → color.taupe.light.0
    action.secondary.hover
    → color.taupe.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.pink.light.600
    category.1.subtle
    → color.pink.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.taupe.light.500
    category.5.subtle
    → color.taupe.light.100
    disabled.text
    → color.taupe.light.500
    disabled.surface
    → color.taupe.light.100
    disabled.border
    → color.taupe.light.200
  • elevation
    card
    → shadow.card
    overlay
    → shadow.overlay

Question 5

What changes when the theme changes?

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

Why Brand expressive picks it: Only colors change.

becauseQ1

  • button
  • card
  • overlay

When to use

  • Someone switches to darkUse: The dark semantic mode. Not: A separate campaign palette. Dark ships as standard; campaigns change values, not structure.

All theming tokens

53 tokens · each decision and the primitive it points to

  • radius · 2radius.9999999pxradius.241.5rem · 24px
  • font.family · 2font.family.bricolage-grotesque"Bricolage Grotesque", system-ui, sans-seriffont.family.dm-sans"DM Sans", system-ui, sans-serif
  • color.taupe.light · 8color.taupe.light.50#FFF8F3color.taupe.light.0#FFFFFFcolor.taupe.light.100#FCEFE6color.taupe.light.900#1F1411color.taupe.light.700#4D3A33color.taupe.light.600#6B544Acolor.taupe.light.200#F2DCCFcolor.taupe.light.500#8A6F63
  • color.pink.light · 3color.pink.light.100#FDE4F0color.pink.light.700#A8165Fcolor.pink.light.600#D61F7A
  • 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.card0px 12px 32px 0px #1F141124shadow.overlay0px 24px 48px 0px #1F141133
  • Decisions · 53theme.radius.control{radius.999}theme.radius.badge{radius.999}theme.radius.container{radius.24}theme.type.display.font-family{font.family.bricolage-grotesque}theme.type.title.font-family{font.family.bricolage-grotesque}theme.type.heading.font-family{font.family.bricolage-grotesque}theme.type.body.font-family{font.family.dm-sans}theme.type.label.font-family{font.family.dm-sans}theme.type.caption.font-family{font.family.dm-sans}theme.type.data.font-family{font.family.dm-sans}theme.color.surface.canvas{color.taupe.light.50}theme.color.surface.default{color.taupe.light.0}theme.color.surface.raised{color.taupe.light.0}theme.color.surface.sunken{color.taupe.light.100}theme.color.surface.selected{color.pink.light.100}theme.color.surface.inverse{color.taupe.light.900}theme.color.surface.scrim{color.black.light.scrim}theme.color.text.primary{color.taupe.light.900}theme.color.text.secondary{color.taupe.light.700}theme.color.text.muted{color.taupe.light.600}theme.color.text.inverse{color.taupe.light.0}theme.color.text.on-action{color.taupe.light.0}theme.color.text.link{color.pink.light.700}theme.color.border.default{color.taupe.light.200}theme.color.border.strong{color.taupe.light.500}theme.color.border.focus{color.pink.light.600}theme.color.action.primary.@{color.pink.light.600}theme.color.action.primary.hover{color.pink.light.700}theme.color.action.secondary.@{color.taupe.light.0}theme.color.action.secondary.hover{color.taupe.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.pink.light.600}theme.color.category.1.subtle{color.pink.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.taupe.light.500}theme.color.category.5.subtle{color.taupe.light.100}theme.color.disabled.text{color.taupe.light.500}theme.color.disabled.surface{color.taupe.light.100}theme.color.disabled.border{color.taupe.light.200}theme.elevation.card{shadow.card}theme.elevation.overlay{shadow.overlay}

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

Theming in Brand expressive: light and dark. Light and dark ship as standard. Only colors change.