Proposal: refine status design tokens

Status design tokens:

See all of them

color.neutral.50	status.neutral.background.color.subtle.default
color.neutral.100	status.neutral.background.color.subtle.active
color.neutral.200	status.neutral.border.color.subtle.hover
color.neutral.600	status.neutral.text.color.subtle.default
color.neutral.700	status.neutral.text.color.subtle.hover
color.neutral.700	status.neutral.text.color.subtle.focus
color.neutral.800	status.neutral.text.color.subtle.active
color.neutral.500	status.neutral.icon.color.subtle.default
color.neutral.600	status.neutral.icon.color.subtle.hover
color.neutral.600	status.neutral.icon.color.subtle.focus
color.neutral.700	status.neutral.icon.color.subtle.active
color.neutral.100	status.neutral.background.color.default
color.neutral.200	status.neutral.background.color.active
color.neutral.200	status.neutral.border.color.hover
color.neutral.700	status.neutral.text.color.default
color.neutral.800	status.neutral.text.color.hover
color.neutral.800	status.neutral.text.color.focus
color.neutral.900	status.neutral.text.color.active
color.neutral.500	status.neutral.icon.color.default
color.neutral.600	status.neutral.icon.color.hover
color.neutral.600	status.neutral.icon.color.focus
color.neutral.700	status.neutral.icon.color.active
color.blue.100	status.info.background.color.default
color.blue.200	status.info.background.color.active
color.blue.200	status.info.border.color.hover
color.blue.700	status.info.text.color.default
color.blue.800	status.info.text.color.hover
color.blue.800	status.info.text.color.focus
color.blue.900	status.info.text.color.active
color.blue.500	status.info.icon.color.default
color.blue.600	status.info.icon.color.hover
color.blue.600	status.info.icon.color.focus
color.blue.700	status.info.icon.color.active
color.green.100	status.success.background.color.default
color.green.200	status.success.background.color.active
color.green.200	status.success.border.color.hover
color.green.700	status.success.text.color.default
color.green.800	status.success.text.color.hover
color.green.800	status.success.text.color.focus
color.green.900	status.success.text.color.active
color.green.500	status.success.icon.color.default
color.green.600	status.success.icon.color.hover
color.green.600	status.success.icon.color.focus
color.green.700	status.success.icon.color.active
color.orange.100	status.warning.background.color.default
color.orange.200	status.warning.background.color.active
color.orange.200	status.warning.border.color.hover
color.orange.700	status.warning.text.color.default
color.orange.800	status.warning.text.color.hover
color.orange.800	status.warning.text.color.focus
color.orange.900	status.warning.text.color.active
color.orange.500	status.warning.icon.color.default
color.orange.600	status.warning.icon.color.hover
color.orange.600	status.warning.icon.color.focus
color.orange.700	status.warning.icon.color.active
color.red.100	status.danger.background.color.default
color.red.200	status.danger.background.color.active
color.red.200	status.danger.border.color.hover
color.red.700	status.danger.text.color.default
color.red.800	status.danger.text.color.hover
color.red.800	status.danger.text.color.focus
color.red.900	status.danger.text.color.active
color.red.500	status.danger.icon.color.default
color.red.600	status.danger.icon.color.hover
color.red.600	status.danger.icon.color.focus
color.red.700	status.danger.icon.color.active
color.purple.100	status.brand.background.color.default
color.purple.200	status.brand.background.color.active
color.purple.200	status.brand.border.color.hover
color.purple.700	status.brand.text.color.default
color.purple.800	status.brand.text.color.hover
color.purple.800	status.brand.text.color.focus
color.purple.900	status.brand.text.color.active
color.purple.500	status.brand.icon.color.default
color.purple.600	status.brand.icon.color.hover
color.purple.600	status.brand.icon.color.focus
color.purple.700	status.brand.icon.color.active

Problems

• There are a lot (76)
  Many of these only exist to build badges

Proposal

• Reduce to a smaller set of design tokens (18)
• Focus on generic meaning, rather than to create badges
• Create rules for how to use ‘status’ design tokens together
• Construct special stuff for badges using contextual design tokens

🎨 Figjam →

Smaller set

Application examples

Future questions