Go Back

Background Tokens

Background tokens in a design system encapsulate values essential for maintaining consistent and visually cohesive background styles.

BG

Token	Value
bg	ironside-gray-100
bg-inverse	ironside-gray-950

Surface

Token	Value
surface	white
surface-hover	ironside-gray-50
surface-active	ironside-gray-100
surface-secondary	ironside-gray-50
surface-secondary-hover	ironside-gray-100
surface-secondary-active	ironside-gray-200
surface-brand	crusta-50
surface-brand-hover	crusta-100
surface-brand-active	crusta-200
surface-accent	keppel-50
surface-accent-hover	keppel-100
surface-accent-active	keppel-200
surface-success	emerald-50
surface-success-hover	emerald-100
surface-success-active	emerald-200
surface-disabled	ironside-gray-950/[0.05]
surface-inverse	ironside-gray-900

Fill

Token	Value
fill	white
fill-hover	ironside-gray-100
fill-active	ironside-gray-200
fill-secondary	ironside-gray-50
fill-secondary-hover	ironside-gray-100
fill-secondary-active	ironside-gray-200
fill-tertiary	ironside-gray-100
fill-tertiary-hover	ironside-gray-200
fill-tertiary-active	ironside-gray-300
fill-disabled	black/[0.05]
fill-brand	crusta-400
fill-brand-hover	crusta-500
fill-brand-active	crusta-600
fill-brand-secondary	crusta-100
fill-brand-secondary-hover	crusta-200
fill-brand-secondary-active	crusta-300
fill-accent	keppel-500
fill-accent-hover	keppel-600
fill-accent-active	keppel-700
fill-accent-secondary	keppel-100
fill-accent-secondary-hover	keppel-200
fill-accent-secondary-active	keppel-300
fill-success	white
fill-success-hover	white
fill-success-active	white
fill-success-secondary	white
fill-success-secondary-hover	white
fill-success-secondary-active	white
fill-inverse	ironside-gray-800
fill-inverse-hover	ironside-gray-700
fill-inverse-active	ironside-gray-900
fill-ghost	white/[0.01]
fill-black-a-10	black/[0.10]
fill-white-a-10	white/[0.10]