Foundations
Icon Tokens
Icon tokens in a design system encapsulate values essential for standardizing and controlling the appearance of icons.
Icon
| Token | Value |
|---|---|
| icon-primary | text-ironside-gray-700 |
| icon-hover | text-ironside-gray-500 |
| icon-secondary | text-ironside-gray-500 |
| icon-secondary-hover | text-ironside-gray-600 |
| icon-tertiary | text-ironside-gray-900 |
| icon-tertiary-hover | text-ironside-gray-700 |
| icon-quaternary | text-ironside-gray-400 |
| icon-quaternary-hover | text-ironside-gray-600 |
| icon-helper | text-ironside-gray-300 |
| icon-helper-hover | text-crusta-600 |
| icon-on-fill | text-white |
| icon-brand | text-crusta-900 |
| icon-brand-secondary | text-crusta-700 |
| icon-brand-secondary-hover | text-crusta-800 |
| icon-brand-tertiary | text-crusta-600 |
| icon-brand-tertiary-hover | text-crusta-800 |
| icon-accent | text-keppel-900 |
| icon-accent-secondary | text-keppel-700 |
| icon-accent-secondary-hover | text-keppel-800 |
| icon-accent-tertiary | text-keppel-600 |
| icon-accent-tertiary-hover | text-keppel-800 |
| icon-success | text-emerald-900 |
| icon-success-secondary | text-emerald-700 |
| icon-success-secondary-hover | text-emerald-800 |
| icon-success-tertiary | text-emerald-600 |
| icon-success-tertiary-hover | text-emerald-800 |
| icon-verified | text-pelorous-500 |
| icon-disabled | text-ironside-gray-950/30 |
| icon-inverse | text-white |
| icon-inverse-hover | text-white/70 |
| icon-on-all-element | text-white/50 |
| icon-on-all-element-hover | text-white/90 |
| icon-rating | text-orange-peel-500 |
Text Tokens
Border Tokens