Foundations
Text Tokens
Text tokens within a design system represent values crucial for standardizing and controlling text styles across various elements.
Text
| Token | Value |
|---|---|
| text-primary | text-ironside-gray-800 |
| text-secondary | text-ironside-gray-700 |
| text-body | text-ironside-gray-600 |
| text-help | text-ironside-gray-500 |
| text-disabled | text-ironside-gray-950/40 |
| text-on-fill | text-white |
| text-brand | text-crusta-950 |
| text-brand-secondary | text-crusta-700 |
| text-brand-tertiary | text-crusta-600 |
| text-accent | text-keppel-950 |
| text-accent-secondary | text-keppel-800 |
| text-accent-tertiary | text-keppel-700 |
| text-success | text-emerald-950 |
| text-success-secondary | text-emerald-800 |
| text-success-tertiary | text-emerald-700 |
| text-inverse | text-white |
| text-inverse-secondary | text-ironside-gray-300 |
| text-inverse-tertiary | text-ironside-gray-400 |
| text-required | text-torch-red-600 |
Link
| Token | Value |
|---|---|
| link-primary | text-ironside-gray-700 |
| link-hover | text-ironside-gray-600 |
| link-brand | text-crusta-700 |
| link-brand-hover | text-crusta-600 |
| link-info | text-keppel-700 |
| link-info-hover | text-keppel-600 |
| link-success | text-emerald-700 |
| link-success-hover | text-emerald-600 |
| link-inverse | text-white |
| link-inverse-hover | text-white/70 |
Background Tokens
Icon Tokens