Color
Five questions every design system answers about color. These are Multi-brand’s answers, and each one points back to the reasons that chose it.
View all 41 color tokens ↓The reasons this scheme answers from
- R1Business and productSells and converts, many
- R2Tasks and flowsComplete a form, sometimes
- R3BrandNeutral and adaptable, present
Question 1
Which color roles does it need?
- Surface, text, action and status
- Those and brand accents (chosen)
Why Multi-brand picks it: Each brand brings its own accent ramp.
becauseR1
surface
text
border
action
status
category
disabled
Question 2
How many emphasis levels do actions need?
- Two
- Three (chosen)
- Four
Why Multi-brand picks it: Primary, secondary and ghost in every brand.
becauseR2
slate light8
teal light3
black light1
blue light3
green light2
amber light2
red light2
purple light2
orange light2
Multi-brand’s answerMore that other schemes use
Question 3
How is the palette defined?
- Neutrals and one brand ramp
- Shared neutrals, a ramp per brand (chosen)
Why Multi-brand picks it: Shared neutrals; each brand sets its own ramp.
becauseR1
- Shared neutrals, a ramp per brand
- 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
Decisions point at primitives, so the rule lives in one place.
Question 4
How saturated is the palette?
- Muted
- Balanced (chosen)
- Vivid
Why Multi-brand picks it: Balanced, so any brand hue works.
becauseR3
- surface
- canvas
- → color.slate.light.50· dark → color.slate.dark.0
- default
- → color.slate.light.0· dark → color.slate.dark.50
- raised
- → color.slate.light.0· dark → color.slate.dark.100
- sunken
- → color.slate.light.100· dark → color.slate.dark.100
- selected
- → color.teal.light.100· dark → color.teal.dark.100
- inverse
- → color.slate.light.900· dark → color.slate.dark.900
- scrim
- → color.black.light.scrim· dark → color.black.dark.scrim
- text
- primary
- → color.slate.light.900· dark → color.slate.dark.900
- secondary
- → color.slate.light.700· dark → color.slate.dark.500
- muted
- → color.slate.light.600· dark → color.slate.dark.400
- inverse
- → color.slate.light.0· dark → color.slate.dark.50
- on-action
- → color.slate.light.0· dark → color.slate.dark.0
- link
- → color.teal.light.700· dark → color.teal.dark.700
- border
- default
- → color.slate.light.200· dark → color.slate.dark.100
- strong
- → color.slate.light.500· dark → color.slate.dark.300
- focus
- → color.teal.light.600· dark → color.teal.dark.700
- action
- primary.@
- → color.teal.light.600· dark → color.teal.dark.700
- primary.hover
- → color.teal.light.700· dark → color.teal.dark.800
- secondary.@
- → color.slate.light.0· dark → color.slate.dark.50
- secondary.hover
- → color.slate.light.100· dark → color.slate.dark.100
- status
- info.@
- → color.blue.light.700· dark → color.blue.dark.700
- info.subtle
- → color.blue.light.100· dark → color.blue.dark.100
- success.@
- → color.green.light.700· dark → color.green.dark.700
- success.subtle
- → color.green.light.100· dark → color.green.dark.100
- warning.@
- → color.amber.light.700· dark → color.amber.dark.700
- warning.subtle
- → color.amber.light.100· dark → color.amber.dark.100
- danger.@
- → color.red.light.700· dark → color.red.dark.700
- danger.subtle
- → color.red.light.100· dark → color.red.dark.100
- category
- 1.@
- → color.teal.light.600· dark → color.teal.dark.700
- 1.subtle
- → color.teal.light.100· dark → color.teal.dark.100
- 2.@
- → color.purple.light.600· dark → color.purple.dark.700
- 2.subtle
- → color.purple.light.100· dark → color.purple.dark.100
- 3.@
- → color.orange.light.600· dark → color.orange.dark.700
- 3.subtle
- → color.orange.light.100· dark → color.orange.dark.100
- 4.@
- → color.blue.light.600· dark → color.blue.dark.700
- 4.subtle
- → color.blue.light.100· dark → color.blue.dark.100
- 5.@
- → color.green.light.700· dark → color.green.dark.700
- 5.subtle
- → color.green.light.100· dark → color.green.dark.100
- disabled
- text
- → color.slate.light.500· dark → color.slate.dark.500
- surface
- → color.slate.light.100· dark → color.slate.dark.100
- border
- → color.slate.light.200· dark → color.slate.dark.200
Question 5
Where does color carry meaning first?
- Status in tables
- Links and actions
- Brand moments (chosen)
Why Multi-brand picks it: Brand color shows on actions and headlines.
becauseR3
- button · 13 keys
- input · 8 keys
- control · 3 keys
- badge · 10 keys
- card · 2 keys
- table · 3 keys
- tabs · 3 keys
- overlay · 4 keys
When to use
- A selected row or itemUse: color.surface.selected (from the brand). Not: A fixed blue. Selection follows the brand color.
- An error messageUse: color.status.danger and a sentence. Not: The brand color. Status colors are shared, never branded.
- A linkUse: color.text.link (from the brand). Not: A fixed blue. Links follow the brand.
- A statusUse: Badge with a word. Not: A brand color as status. Brand hues vary, so meaning needs a word.
- The action that completes the taskUse: Button primary, one per view. Not: Two primaries. One clear action per view.
- An alternative or cancelUse: Button secondary. Not: A second primary. The alternative steps back.
- Delete or removeUse: Button secondary, then confirm. Not: Button primary. Confirm before destroying data.
All color tokens
41 tokens · each decision and the primitive it points to
- 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 - Decisions · 41
color.surface.canvas{color.slate.light.50}color.surface.default{color.slate.light.0}color.surface.raised{color.slate.light.0}color.surface.sunken{color.slate.light.100}color.surface.selected{color.teal.light.100}color.surface.inverse{color.slate.light.900}color.surface.scrim{color.black.light.scrim}color.text.primary{color.slate.light.900}color.text.secondary{color.slate.light.700}color.text.muted{color.slate.light.600}color.text.inverse{color.slate.light.0}color.text.on-action{color.slate.light.0}color.text.link{color.teal.light.700}color.border.default{color.slate.light.200}color.border.strong{color.slate.light.500}color.border.focus{color.teal.light.600}color.action.primary.@{color.teal.light.600}color.action.primary.hover{color.teal.light.700}color.action.secondary.@{color.slate.light.0}color.action.secondary.hover{color.slate.light.100}color.status.info.@{color.blue.light.700}color.status.info.subtle{color.blue.light.100}color.status.success.@{color.green.light.700}color.status.success.subtle{color.green.light.100}color.status.warning.@{color.amber.light.700}color.status.warning.subtle{color.amber.light.100}color.status.danger.@{color.red.light.700}color.status.danger.subtle{color.red.light.100}color.category.1.@{color.teal.light.600}color.category.1.subtle{color.teal.light.100}color.category.2.@{color.purple.light.600}color.category.2.subtle{color.purple.light.100}color.category.3.@{color.orange.light.600}color.category.3.subtle{color.orange.light.100}color.category.4.@{color.blue.light.600}color.category.4.subtle{color.blue.light.100}color.category.5.@{color.green.light.700}color.category.5.subtle{color.green.light.100}color.disabled.text{color.slate.light.500}color.disabled.surface{color.slate.light.100}color.disabled.border{color.slate.light.200}
Decisions reference primitives, so changing one primitive updates every decision and component that uses it.
Color in Multi-brand: balanced. Balanced, so any brand hue works. Brand color shows on actions and headlines.