Theming
Five questions every design system answers about theming. These are Multi-brand’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, many
Question 1
What can a theme change?
- Mode only
- Mode and brand (chosen)
- Mode and contrast
Why Multi-brand picks it: Brand and mode both change.
becauseR1
radius{radius.4} · {radius.4} · {radius.8}
type{font.family.inter} · {font.family.inter} · {font.family.inter} · {font.family.inter} · {font.family.inter} · {font.family.inter} · {font.family.inter}
color{color.slate.light.50} · {color.slate.light.0} · {color.slate.light.0} · {color.slate.light.100} · {color.teal.light.100} · {color.slate.light.900} · {color.black.light.scrim} · {color.slate.light.900} · {color.slate.light.700} · {color.slate.light.600} · {color.slate.light.0} · {color.slate.light.0} · {color.teal.light.700} · {color.slate.light.200} · {color.slate.light.500} · {color.teal.light.600} · {color.teal.light.600} · {color.teal.light.700} · {color.slate.light.0} · {color.slate.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.teal.light.600} · {color.teal.light.100} · {color.purple.light.600} · {color.purple.light.100} · {color.orange.light.600} · {color.orange.light.100} · {color.blue.light.600} · {color.blue.light.100} · {color.green.light.700} · {color.green.light.100} · {color.slate.light.500} · {color.slate.light.100} · {color.slate.light.200}
elevation{shadow.card} · {shadow.overlay}
Question 2
How many themes ship?
- Two
- Several (chosen)
Why Multi-brand picks it: Three brands in light and dark: six themes.
becauseR1Q4
radius2
font family1
slate light8
teal light3
black light1
blue light3
green light2
amber light2
red light2
purple light2
orange light2
shadow2
Multi-brand’s answerMore that other schemes use
Question 3
How are brands handled?
- One brand
- Brands as modes (chosen)
Why Multi-brand picks it: Brands are theme modes over shared semantics.
becauseR1
- Brands as modes
- from radius
- from font.family
- from color.slate.light
- from color.teal.light
- from color.black.light
- from color.blue.light
- from color.green.light
- from color.amber.light
- from color.red.light
- from color.purple.light
- from color.orange.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 Multi-brand picks it: Light and dark ship for every brand.
becauseR1
- radius
- control
- → radius.4
- badge
- → radius.4
- container
- → radius.8
- type
- display.font-family
- → font.family.inter
- title.font-family
- → font.family.inter
- heading.font-family
- → font.family.inter
- body.font-family
- → font.family.inter
- label.font-family
- → font.family.inter
- caption.font-family
- → font.family.inter
- data.font-family
- → font.family.inter
- color
- surface.canvas
- → color.slate.light.50
- surface.default
- → color.slate.light.0
- surface.raised
- → color.slate.light.0
- surface.sunken
- → color.slate.light.100
- surface.selected
- → color.teal.light.100
- surface.inverse
- → color.slate.light.900
- surface.scrim
- → color.black.light.scrim
- text.primary
- → color.slate.light.900
- text.secondary
- → color.slate.light.700
- text.muted
- → color.slate.light.600
- text.inverse
- → color.slate.light.0
- text.on-action
- → color.slate.light.0
- text.link
- → color.teal.light.700
- border.default
- → color.slate.light.200
- border.strong
- → color.slate.light.500
- border.focus
- → color.teal.light.600
- action.primary.@
- → color.teal.light.600
- action.primary.hover
- → color.teal.light.700
- action.secondary.@
- → color.slate.light.0
- action.secondary.hover
- → color.slate.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.teal.light.600
- category.1.subtle
- → color.teal.light.100
- category.2.@
- → color.purple.light.600
- category.2.subtle
- → color.purple.light.100
- category.3.@
- → color.orange.light.600
- category.3.subtle
- → color.orange.light.100
- category.4.@
- → color.blue.light.600
- category.4.subtle
- → color.blue.light.100
- category.5.@
- → color.green.light.700
- category.5.subtle
- → color.green.light.100
- disabled.text
- → color.slate.light.500
- disabled.surface
- → color.slate.light.100
- disabled.border
- → color.slate.light.200
- elevation
- card
- → shadow.card
- overlay
- → shadow.overlay
Question 5
What changes when the theme changes?
- Colors only
- Colors, type and shape (chosen)
Why Multi-brand picks it: A brand switch changes colors, fonts and corners.
becauseQ1
- button
- card
- overlay
When to use
- Someone switches to darkUse: The dark mode of the active brand. Not: One dark theme for all brands. Every brand ships light and dark.
All theming tokens
53 tokens · each decision and the primitive it points to
- radius · 2
radius.40.25rem · 4pxradius.80.5rem · 8px - font.family · 1
font.family.interInter, system-ui, sans-serif - color.slate.light · 8
color.slate.light.50#F8FAFCcolor.slate.light.0#FFFFFFcolor.slate.light.100#F1F5F9color.slate.light.900#0F172Acolor.slate.light.700#334155color.slate.light.600#4B5A6Fcolor.slate.light.200#E2E8F0color.slate.light.500#64748B - color.teal.light · 3
color.teal.light.100#E0F2F1color.teal.light.700#0B5B55color.teal.light.600#0F766E - color.black.light · 1
color.black.light.scrim#0000008C - color.blue.light · 3
color.blue.light.700#083C93color.blue.light.100#E1ECFFcolor.blue.light.600#0B4FC0 - color.green.light · 2
color.green.light.700#1F7A3Acolor.green.light.100#E3F4EA - color.amber.light · 2
color.amber.light.700#8A5600color.amber.light.100#FFF3D6 - color.red.light · 2
color.red.light.700#C42B2Bcolor.red.light.100#FDE7E7 - color.purple.light · 2
color.purple.light.600#6D28D9color.purple.light.100#EDE7FE - color.orange.light · 2
color.orange.light.600#C2410Ccolor.orange.light.100#FFEDE5 - shadow · 2
shadow.card0px 2px 8px 0px #0F172A14shadow.overlay0px 12px 32px 0px #0F172A29 - Decisions · 53
theme.radius.control{radius.4}theme.radius.badge{radius.4}theme.radius.container{radius.8}theme.type.display.font-family{font.family.inter}theme.type.title.font-family{font.family.inter}theme.type.heading.font-family{font.family.inter}theme.type.body.font-family{font.family.inter}theme.type.label.font-family{font.family.inter}theme.type.caption.font-family{font.family.inter}theme.type.data.font-family{font.family.inter}theme.color.surface.canvas{color.slate.light.50}theme.color.surface.default{color.slate.light.0}theme.color.surface.raised{color.slate.light.0}theme.color.surface.sunken{color.slate.light.100}theme.color.surface.selected{color.teal.light.100}theme.color.surface.inverse{color.slate.light.900}theme.color.surface.scrim{color.black.light.scrim}theme.color.text.primary{color.slate.light.900}theme.color.text.secondary{color.slate.light.700}theme.color.text.muted{color.slate.light.600}theme.color.text.inverse{color.slate.light.0}theme.color.text.on-action{color.slate.light.0}theme.color.text.link{color.teal.light.700}theme.color.border.default{color.slate.light.200}theme.color.border.strong{color.slate.light.500}theme.color.border.focus{color.teal.light.600}theme.color.action.primary.@{color.teal.light.600}theme.color.action.primary.hover{color.teal.light.700}theme.color.action.secondary.@{color.slate.light.0}theme.color.action.secondary.hover{color.slate.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.teal.light.600}theme.color.category.1.subtle{color.teal.light.100}theme.color.category.2.@{color.purple.light.600}theme.color.category.2.subtle{color.purple.light.100}theme.color.category.3.@{color.orange.light.600}theme.color.category.3.subtle{color.orange.light.100}theme.color.category.4.@{color.blue.light.600}theme.color.category.4.subtle{color.blue.light.100}theme.color.category.5.@{color.green.light.700}theme.color.category.5.subtle{color.green.light.100}theme.color.disabled.text{color.slate.light.500}theme.color.disabled.surface{color.slate.light.100}theme.color.disabled.border{color.slate.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 Multi-brand: light and dark. Light and dark ship for every brand. A brand switch changes colors, fonts and corners.