Foundation
Colour
Colour tokens and swatches from your token file.
Colour Primitives
| Token | Reference | |
|---|---|---|
| Blue-0075C9 | #0075c9 | |
| Blue-00A3E0 | #00a3e0 | |
| Blue-89C9C8 | #89c9c8 | |
| Blue-99D6EA | #99d6ea | |
| Blue-CDDDEA | #cdddea | |
| Green-00422C | #00422c | |
| Green-005338 | #005338 | |
| Green-006443 | #006443 | |
| Green-07272C | #07272c | |
| Green-07272C-10 | #07272c1a | |
| Green-183434 | #183434 | |
| Green-183434-5 | #1834340d | |
| Green-80B1A1 | #80b1a1 | |
| Green-81B13E | #81b13e | |
| Green-CDE0B2 | #cde0b2 | |
| Green-D5DDDB | #d5dddb | |
| Green-DBE5E2 | #dbe5e2 | |
| Green-EAF0EE | #eaf0ee | |
| Neutral-333333 | #333333 | |
| Neutral-606060 | #606060 | |
| Neutral-8D8479 | #8d8479 | |
| Neutral-B6ADA5 | #b6ada5 | |
| Neutral-Black-50 | #00000080 | |
| Neutral-E0DCD2 | #e0dcd2 | |
| Neutral-Transparent | #ffffff00 | |
| Neutral-White | #ffffff | |
| Neutral-White-20 | #ffffff33 | |
| Neutral-White-40 | #ffffff66 | |
| Neutral-White-5 | #ffffff0d | |
| Neutral-White-70 | #ffffffb2 | |
| Purple-8A38F5 | #8a38f5 | |
| Purple-9B26B6 | #9b26b6 | |
| Purple-AC4FC6 | #ac4fc6 | |
| Purple-D7A9E3 | #d7a9e3 | |
| Purple-DCC6EA | #dcc6ea | |
| Red-FA4A5F | #fa4a5f | |
| Red-FECDD3 | #fecdd3 | |
| Yellow-F5AA24 | #f5aa24 | |
| Yellow-F6B540 | #f6b540 | |
| Yellow-F8E08E | #f8e08e | |
| Yellow-FDD156 | #fdd156 |
Action colors
| Token | Reference | |
|---|---|---|
| fi-action-primary-fill-default | Yellow-F6B540#f6b540 | |
| fi-action-primary-fill-hover | Yellow-FDD156#fdd156 | |
| fi-action-primary-fill-pressed | Yellow-F5AA24#f5aa24 | |
| fi-action-primary-label-default | Green-183434#183434 | |
| fi-action-primary-label-hover | Green-183434#183434 | |
| fi-action-primary-label-pressed | Green-183434#183434 | |
| fi-action-secondary-fill-default | Neutral-Transparent#ffffff00 | |
| fi-action-secondary-fill-hover | Neutral-White#ffffff | |
| fi-action-secondary-fill-pressed | Green-D5DDDB#d5dddb | |
| fi-action-secondary-label-default | Green-183434#183434 | |
| fi-action-secondary-label-hover | Green-183434#183434 | |
| fi-action-secondary-label-pressed | Green-183434#183434 | |
| fi-action-secondary-stroke-default | Green-183434#183434 | |
| fi-action-secondary-stroke-hover | Green-07272C-10#07272c1a | |
| fi-action-secondary-stroke-pressed | Green-07272C#07272c | |
| fi-action-tertiary-fill-default | Green-DBE5E2#dbe5e2 | |
| fi-action-tertiary-fill-hover | Neutral-White#ffffff | |
| fi-action-tertiary-fill-pressed | Green-D5DDDB#d5dddb | |
| fi-action-tertiary-label-default | Green-00422C#00422c | |
| fi-action-tertiary-label-hover | Green-183434#183434 | |
| fi-action-tertiary-label-pressed | Green-07272C#07272c | |
| fi-action-text-link-icon-fill-default | Green-00422C#00422c | |
| fi-action-text-link-icon-fill-focus | Green-00422C#00422c | |
| fi-action-text-link-icon-fill-hover | Green-183434#183434 | |
| fi-action-text-link-icon-fill-pressed | Green-07272C#07272c | |
| fi-action-text-link-label-default | Green-00422C#00422c | |
| fi-action-text-link-label-focus | Green-00422C#00422c | |
| fi-action-text-link-label-hover | Green-183434#183434 | |
| fi-action-text-link-label-pressed | Green-07272C#07272c | |
| fi-action-text-link-stroke-default | Green-00422C#00422c | |
| fi-action-text-link-stroke-focus | Neutral-Transparent#ffffff00 | |
| fi-action-text-link-stroke-hover | Green-183434#183434 | |
| fi-action-text-link-stroke-pressed | Green-07272C#07272c | |
| fi-action-utility-fill-default | Green-80B1A1#80b1a1 | |
| fi-action-utility-fill-focus | Green-00422C#00422c | |
| fi-action-utility-fill-hover | Green-00422C#00422c | |
| fi-action-utility-fill-pressed | Green-183434#183434 | |
| fi-action-utility-label-default | Green-07272C#07272c | |
| fi-action-utility-label-focus | Green-00422C#00422c | |
| fi-action-utility-label-hover | Green-00422C#00422c | |
| fi-action-utility-label-pressed | Green-00422C#00422c | |
| fi-action-utility-stroke-default | Green-00422C#00422c | |
| fi-action-utility-stroke-focus | Neutral-Transparent#ffffff00 | |
| fi-action-utility-stroke-hover | Green-00422C#00422c | |
| fi-action-utility-stroke-inner-focus | Green-183434#183434 | |
| fi-action-utility-stroke-outer-focus | Green-D5DDDB#d5dddb | |
| fi-action-utility-stroke-pressed | Green-183434#183434 |
Accent colors
| Token | Reference | |
|---|---|---|
| fi-accent-color-Accent-five | Green-81B13E#81b13e | |
| fi-accent-color-Accent-four | Yellow-F5AA24#f5aa24 | |
| fi-accent-color-Accent-one | Red-FA4A5F#fa4a5f | |
| fi-accent-color-Accent-three | Purple-9B26B6#9b26b6 | |
| fi-accent-color-Accent-two | Blue-0075C9#0075c9 |
Text Colors
| Token | Reference | |
|---|---|---|
| fi-heading-color-accent | Green-005338#005338 | |
| fi-heading-color-default | Green-07272C#07272c | |
| fi-heading-color-inverse | Neutral-White#ffffff | |
| fi-heading-color-secondary | Neutral-333333#333333 | |
| fi-text-color-inverse | Neutral-White#ffffff | |
| fi-text-color-muted | Neutral-E0DCD2#e0dcd2 | |
| fi-text-color-regular | Neutral-606060#606060 | |
| fi-text-color-strong | Green-07272C#07272c |
Border
| Token | Reference | |
|---|---|---|
| fi-border-color-dark | Neutral-606060#606060 | |
| fi-border-color-light | Green-07272C-10#07272c1a | |
| fi-border-color-lightest | Green-183434-5#1834340d | |
| fi-border-color-white | Neutral-White-5#ffffff0d | |
| fi-border-color-white-strong | Neutral-White-40#ffffff66 |
Surface
| Token | Reference | |
|---|---|---|
| fi-surface-color-default | Green-EAF0EE#eaf0ee | |
| fi-surface-color-default-dark | Green-DBE5E2#dbe5e2 | |
| fi-surface-color-highlight-cold | Blue-89C9C8#89c9c8 | |
| fi-surface-color-highlight-neutral | Green-81B13E#81b13e | |
| fi-surface-color-highlight-strong | Green-006443#006443 | |
| fi-surface-color-highlight-warm | Yellow-F6B540#f6b540 | |
| fi-surface-color-neutral | Neutral-White#ffffff | |
| fi-surface-color-neutral-70 | Neutral-White-70#ffffffb2 | |
| fi-surface-color-neutral-dark | Neutral-Black-50#00000080 |
Alert
| Token | Reference | |
|---|---|---|
| fi-bg-alert-dark | Green-81B13E#81b13e | |
| fi-bg-alert-light | Green-CDE0B2#cde0b2 |
Focus ring
| Token | Reference | |
|---|---|---|
| fi-focus-ring-color-inner | Green-183434#183434 | |
| fi-focus-ring-color-outer | Green-D5DDDB#d5dddb |
Input Form Color
| Token | Reference | |
|---|---|---|
| fi-input-form-color-fill-active | Neutral-White#ffffff | |
| fi-input-form-color-fill-default | Neutral-White#ffffff | |
| fi-input-form-color-fill-disabled | Neutral-E0DCD2#e0dcd2 | |
| fi-input-form-color-fill-hover | Green-EAF0EE#eaf0ee | |
| fi-input-form-color-fill-inactive | Neutral-E0DCD2#e0dcd2 | |
| fi-input-form-color-icon-active | Green-07272C#07272c | |
| fi-input-form-color-icon-default | Green-07272C#07272c | |
| fi-input-form-color-icon-disabled | Neutral-B6ADA5#b6ada5 | |
| fi-input-form-color-icon-hover | Green-07272C#07272c | |
| fi-input-form-color-icon-inactive | Neutral-8D8479#8d8479 | |
| fi-input-form-color-label-active | Green-07272C#07272c | |
| fi-input-form-color-label-default | Neutral-606060#606060 | |
| fi-input-form-color-label-disabled | Neutral-B6ADA5#b6ada5 | |
| fi-input-form-color-label-hover | Green-07272C#07272c | |
| fi-input-form-color-label-inactive | Neutral-606060#606060 | |
| fi-input-form-color-stroke-active | Green-07272C#07272c | |
| fi-input-form-color-stroke-default | Neutral-Black-50#00000080 | |
| fi-input-form-color-stroke-disabled | Neutral-E0DCD2#e0dcd2 | |
| fi-input-form-color-stroke-hover | Green-07272C#07272c | |
| fi-input-form-color-stroke-inactive | Neutral-B6ADA5#b6ada5 |
Category tag Colors
| Token | Reference | |
|---|---|---|
| fi-category-tag-color-eight | Blue-89C9C8#89c9c8 | |
| fi-category-tag-color-five | Yellow-F5AA24#f5aa24 | |
| fi-category-tag-color-four | Purple-9B26B6#9b26b6 | |
| fi-category-tag-color-one | Green-81B13E#81b13e | |
| fi-category-tag-color-seven | Neutral-B6ADA5#b6ada5 | |
| fi-category-tag-color-six | Green-00422C#00422c | |
| fi-category-tag-color-three | Blue-0075C9#0075c9 | |
| fi-category-tag-color-two | Red-FA4A5F#fa4a5f |
Tabs Colors
| Token | Reference | |
|---|---|---|
| fi-tab-color-fill-active | Green-81B13E#81b13e | |
| fi-tab-color-fill-default | Neutral-White#ffffff | |
| fi-tab-color-fill-disabled | Neutral-E0DCD2#e0dcd2 | |
| fi-tab-color-fill-hover | Green-EAF0EE#eaf0ee |