Naming

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

View all 71 naming tokens ↓

The reasons this scheme answers from

R1Team and deliveryAn agency, every campaign

Question 1

What gets a name?

Tokens
Tokens and component keys (chosen)

Why Brand expressive picks it: Components get their own keys.

becauseR1

button{color.action.primary.@} · {color.action.primary.hover} · {color.text.on-action} · {color.action.secondary.@} · {color.action.secondary.hover} · {color.text.primary} · {color.border.strong} · {color.surface.sunken} · {color.text.link} · {size.control.default} · {space.inset.control-x} · {radius.control} · {type.label.font-size} · {type.label.font-weight} · {color.border.focus} · {size.icon} · {color.disabled.surface} · {color.disabled.text} · {color.disabled.border}

input{color.surface.default} · {color.border.strong} · {color.border.focus} · {color.text.primary} · {color.text.muted} · {size.control.default} · {space.inset.control-x} · {radius.control} · {type.body.font-size} · {color.disabled.surface} · {color.disabled.border} · {color.disabled.text}

control{color.action.primary.@} · {color.border.strong} · {color.surface.default} · {radius.badge}

badge{radius.badge} · {space.gap.tight} · {type.caption.font-size} · {color.surface.sunken} · {color.text.secondary} · {color.status.success.subtle} · {color.status.success.@} · {color.status.warning.subtle} · {color.status.warning.@} · {color.status.danger.subtle} · {color.status.danger.@} · {color.status.info.subtle} · {color.status.info.@}

card{color.surface.default} · {color.border.default} · {radius.container} · {space.inset.container} · {elevation.card}

table{color.surface.sunken} · {size.row} · {space.inset.cell-x} · {color.border.default} · {color.surface.selected} · {type.data.font-size}

tabs{color.action.primary.@} · {color.text.secondary} · {color.text.primary}

overlay{color.surface.raised} · {radius.container} · {elevation.overlay} · {color.surface.scrim} · {size.control.default}

tooltip{color.surface.inverse} · {color.text.inverse}

transition{motion.duration.feedback} · {motion.easing.standard}

Question 2

How many token tiers?

Two
Three (chosen)

Why Brand expressive picks it: Primitives, semantics and component keys.

becauseR1

action primary2

color text6

action secondary2

color border3

color surface6

size control1

space inset3

radius3

type label2

size2

color disabled3

type body1

space gap1

type caption1

status success2

status warning2

status danger2

status info2

elevation2

type data1

motion duration1

motion easing1

Question 3

How are decisions named?

By role (chosen)
By component

Why Brand expressive picks it: Role names survive each campaign.

becauseR1

By role
from color.action.primary
from color.text
from color.action.secondary
from color.border
from color.surface
from size.control
from space.inset
from radius
from type.label
from size
from color.disabled
from type.body
from space.gap
from type.caption
from color.status.success
from color.status.warning
from color.status.danger
from color.status.info
from elevation
from type.data
from motion.duration
from motion.easing

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

Question 4

How are names written?

Lowercase words in paths (chosen)
camelCase

Why Brand expressive picks it: Lowercase paths read the same everywhere.

becauseR1

button
primary.background.@
→ color.action.primary.@
primary.background.hover
→ color.action.primary.hover
primary.label
→ color.text.on-action
secondary.background.@
→ color.action.secondary.@
secondary.background.hover
→ color.action.secondary.hover
secondary.label
→ color.text.primary
secondary.border
→ color.border.strong
ghost.background-hover
→ color.surface.sunken
ghost.label
→ color.text.link
height
→ size.control.default
padding-x
→ space.inset.control-x
radius
→ radius.control
font-size
→ type.label.font-size
font-weight
→ type.label.font-weight
focus-ring
→ color.border.focus
icon-size
→ size.icon
disabled.background
→ color.disabled.surface
disabled.label
→ color.disabled.text
disabled.border
→ color.disabled.border
input
background
→ color.surface.default
border.@
→ color.border.strong
border.focus
→ color.border.focus
text
→ color.text.primary
placeholder
→ color.text.muted
height
→ size.control.default
padding-x
→ space.inset.control-x
radius
→ radius.control
font-size
→ type.body.font-size
disabled.background
→ color.disabled.surface
disabled.border
→ color.disabled.border
disabled.text
→ color.disabled.text
control
checked
→ color.action.primary.@
track
→ color.border.strong
thumb
→ color.surface.default
radius
→ radius.badge
badge
radius
→ radius.badge
padding-x
→ space.gap.tight
font-size
→ type.caption.font-size
neutral.background
→ color.surface.sunken
neutral.label
→ color.text.secondary
success.background
→ color.status.success.subtle
success.label
→ color.status.success.@
warning.background
→ color.status.warning.subtle
warning.label
→ color.status.warning.@
danger.background
→ color.status.danger.subtle
danger.label
→ color.status.danger.@
info.background
→ color.status.info.subtle
info.label
→ color.status.info.@
card
background
→ color.surface.default
border
→ color.border.default
radius
→ radius.container
padding
→ space.inset.container
shadow
→ elevation.card
table
header-background
→ color.surface.sunken
row-height
→ size.row
cell-padding-x
→ space.inset.cell-x
row-border
→ color.border.default
row-selected
→ color.surface.selected
font-size
→ type.data.font-size
tabs
indicator
→ color.action.primary.@
label.@
→ color.text.secondary
label.active
→ color.text.primary
overlay
background
→ color.surface.raised
radius
→ radius.container
shadow
→ elevation.overlay
scrim
→ color.surface.scrim
item-height
→ size.control.default
tooltip
background
→ color.surface.inverse
label
→ color.text.inverse
transition
duration
→ motion.duration.feedback
easing
→ motion.easing.standard

Question 5

What do components read?

Component keys (chosen)
Semantic tokens

Why Brand expressive picks it: Campaigns change primitives, never components.

becauseR1

button
input
control
badge
card
table
tabs
overlay
transition

When to use

A value with no tokenUse: The closest semantic token, then ask for a new one. Not: A raw value in the component. The next campaign changes primitives; raw values would stay behind.

All naming tokens

71 tokens · each decision and the primitive it points to

color.action.primary · 2color.action.primary.@#D61F7Acolor.action.primary.hover#A8165F
color.text · 6color.text.on-action#FFFFFFcolor.text.primary#1F1411color.text.link#A8165Fcolor.text.muted#6B544Acolor.text.secondary#4D3A33color.text.inverse#FFFFFF
color.action.secondary · 2color.action.secondary.@#FFFFFFcolor.action.secondary.hover#FCEFE6
color.border · 3color.border.strong#8A6F63color.border.focus#D61F7Acolor.border.default#F2DCCF
color.surface · 6color.surface.sunken#FCEFE6color.surface.default#FFFFFFcolor.surface.selected#FDE4F0color.surface.raised#FFFFFFcolor.surface.scrim#0000008Ccolor.surface.inverse#1F1411
size.control · 1size.control.default3.25rem · 52px
space.inset · 3space.inset.control-x1.75rem · 28pxspace.inset.container2rem · 32pxspace.inset.cell-x1rem · 16px
radius · 3radius.control9999pxradius.badge9999pxradius.container1.5rem · 24px
type.label · 2type.label.font-size0.9375rem · 15pxtype.label.font-weight700
size · 3size.control.default3.25rem · 52pxsize.icon1.25rem · 20pxsize.row3.25rem · 52px
color.disabled · 3color.disabled.surface#FCEFE6color.disabled.text#8A6F63color.disabled.border#F2DCCF
type.body · 1type.body.font-size1.0625rem · 17px
space.gap · 1space.gap.tight0.5rem · 8px
type.caption · 1type.caption.font-size0.875rem · 14px
color.status.success · 2color.status.success.subtle#E3F4EAcolor.status.success.@#1F7A3A
color.status.warning · 2color.status.warning.subtle#FFF3D6color.status.warning.@#8A5600
color.status.danger · 2color.status.danger.subtle#FDE7E7color.status.danger.@#C42B2B
color.status.info · 2color.status.info.subtle#E1ECFFcolor.status.info.@#083C93
elevation · 2elevation.card0px 12px 32px 0px #1F141124elevation.overlay0px 24px 48px 0px #1F141133
type.data · 1type.data.font-size1.0625rem · 17px
motion.duration · 1motion.duration.feedback320ms
motion.easing · 1motion.easing.standardcubic-bezier(0.34, 1.56, 0.64, 1)
Decisions · 71component.button.primary.background.@{color.action.primary.@}component.button.primary.background.hover{color.action.primary.hover}component.button.primary.label{color.text.on-action}component.button.secondary.background.@{color.action.secondary.@}component.button.secondary.background.hover{color.action.secondary.hover}component.button.secondary.label{color.text.primary}component.button.secondary.border{color.border.strong}component.button.ghost.background-hover{color.surface.sunken}component.button.ghost.label{color.text.link}component.button.height{size.control.default}component.button.padding-x{space.inset.control-x}component.button.radius{radius.control}component.button.font-size{type.label.font-size}component.button.font-weight{type.label.font-weight}component.button.focus-ring{color.border.focus}component.button.icon-size{size.icon}component.button.disabled.background{color.disabled.surface}component.button.disabled.label{color.disabled.text}component.button.disabled.border{color.disabled.border}component.input.background{color.surface.default}component.input.border.@{color.border.strong}component.input.border.focus{color.border.focus}component.input.text{color.text.primary}component.input.placeholder{color.text.muted}component.input.height{size.control.default}component.input.padding-x{space.inset.control-x}component.input.radius{radius.control}component.input.font-size{type.body.font-size}component.input.disabled.background{color.disabled.surface}component.input.disabled.border{color.disabled.border}component.input.disabled.text{color.disabled.text}component.control.checked{color.action.primary.@}component.control.track{color.border.strong}component.control.thumb{color.surface.default}component.control.radius{radius.badge}component.badge.radius{radius.badge}component.badge.padding-x{space.gap.tight}component.badge.font-size{type.caption.font-size}component.badge.neutral.background{color.surface.sunken}component.badge.neutral.label{color.text.secondary}component.badge.success.background{color.status.success.subtle}component.badge.success.label{color.status.success.@}component.badge.warning.background{color.status.warning.subtle}component.badge.warning.label{color.status.warning.@}component.badge.danger.background{color.status.danger.subtle}component.badge.danger.label{color.status.danger.@}component.badge.info.background{color.status.info.subtle}component.badge.info.label{color.status.info.@}component.card.background{color.surface.default}component.card.border{color.border.default}component.card.radius{radius.container}component.card.padding{space.inset.container}component.card.shadow{elevation.card}component.table.header-background{color.surface.sunken}component.table.row-height{size.row}component.table.cell-padding-x{space.inset.cell-x}component.table.row-border{color.border.default}component.table.row-selected{color.surface.selected}component.table.font-size{type.data.font-size}component.tabs.indicator{color.action.primary.@}component.tabs.label.@{color.text.secondary}component.tabs.label.active{color.text.primary}component.overlay.background{color.surface.raised}component.overlay.radius{radius.container}component.overlay.shadow{elevation.overlay}component.overlay.scrim{color.surface.scrim}component.overlay.item-height{size.control.default}component.tooltip.background{color.surface.inverse}component.tooltip.label{color.text.inverse}component.transition.duration{motion.duration.feedback}component.transition.easing{motion.easing.standard}

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

Naming in Brand expressive: lowercase words in paths. Lowercase paths read the same everywhere. Campaigns change primitives, never components.