Foundations
Background Tokens
Background tokens in a design system encapsulate values essential for maintaining consistent and visually cohesive background styles.
BG
| Token | Value |
|---|---|
| bg-primary | bg-ironside-gray-100 |
| bg-inverse | bg-ironside-gray-800 |
| bg-inverse-secondary | bg-ironside-gray-900 |
| bg-glass | bg-glass |
Surface
| Token | Value |
|---|---|
| surface-primary | bg-white |
| surface-hover | bg-ironside-gray-50 |
| surface-active | bg-ironside-gray-100 |
| surface-secondary | bg-ironside-gray-50 |
| surface-secondary-hover | bg-ironside-gray-100 |
| surface-secondary-active | bg-ironside-gray-200 |
| surface-brand | bg-crusta-50 |
| surface-brand-hover | bg-crusta-100 |
| surface-brand-active | bg-crusta-200 |
| surface-accent | bg-keppel-50 |
| surface-accent-hover | bg-keppel-100 |
| surface-accent-active | bg-keppel-200 |
| surface-success | bg-emerald-50 |
| surface-success-hover | bg-emerald-100 |
| surface-success-active | bg-emerald-200 |
| surface-disabled | bg-ironside-gray-950/5 |
| surface-inverse | bg-fuscous-gray-900 |
Fill
| Token | Value |
|---|---|
| fill-primary | bg-white |
| fill-hover | bg-ironside-gray-100 |
| fill-active | bg-ironside-gray-200 |
| fill-secondary | bg-ironside-gray-50 |
| fill-secondary-hover | bg-ironside-gray-100 |
| fill-secondary-active | bg-ironside-gray-200 |
| fill-tertiary | bg-ironside-gray-100 |
| fill-tertiary-hover | bg-ironside-gray-200 |
| fill-tertiary-active | bg-ironside-gray-300 |
| fill-quaternary | bg-ironside-gray-200 |
| fill-quaternary-hover | bg-ironside-gray-300 |
| fill-quaternary-active | bg-ironside-gray-400 |
| fill-disabled | bg-black/5 |
| fill-brand | bg-crusta-300 |
| fill-brand-hover | bg-crusta-200 |
| fill-brand-active | bg-crusta-400 |
| fill-brand-secondary | bg-crusta-100 |
| fill-brand-secondary-hover | bg-crusta-200 |
| fill-brand-secondary-active | bg-crusta-300 |
| fill-brand-tertiary | bg-crusta-600 |
| fill-accent | bg-keppel-300 |
| fill-accent-hover | bg-keppel-200 |
| fill-accent-active | bg-keppel-400 |
| fill-accent-secondary | bg-keppel-100 |
| fill-accent-secondary-hover | bg-keppel-200 |
| fill-accent-secondary-active | bg-keppel-300 |
| fill-accent-tertiary | bg-keppel-600 |
| fill-success | bg-emerald-500 |
| fill-success-hover | bg-emerald-600 |
| fill-success-active | bg-emerald-700 |
| fill-success-secondary | bg-emerald-100 |
| fill-success-secondary-hover | bg-emerald-200 |
| fill-success-secondary-active | bg-emerald-300 |
| fill-inverse | bg-ironside-gray-800 |
| fill-inverse-hover | bg-ironside-gray-700 |
| fill-inverse-active | bg-ironside-gray-900 |
| fill-ghost | bg-white/1 |
| fill-black-a-10 | bg-ironside-gray-950/10 |
| fill-white-a-10 | bg-white/10 |
Alpha
Text Tokens