Colors
The store palette with all the tones needed.
Main​
--fs-color-main-0
#f1f2f3
--fs-color-main-1
#e3e6e8
--fs-color-main-2
#00419e
--fs-color-main-3
#002c71
--fs-color-main-4
#002155
Accent​
--fs-color-accent-0
#f1f2f3
--fs-color-accent-1
#e3e6e8
--fs-color-accent-2
#74808b
--fs-color-accent-3
#5d666f
--fs-color-accent-4
#171a1c
Neutral​
--fs-color-neutral-0
#ffffff
--fs-color-neutral-1
#f1f2f3
--fs-color-neutral-2
#e3e6e8
--fs-color-neutral-3
#c7ccd1
--fs-color-neutral-4
#9099a2
--fs-color-neutral-5
#74808b
--fs-color-neutral-6
#5d666f
--fs-color-neutral-7
#171a1c
Semantical tokens​
| Token | Type | Default Value | Example |
|---|---|---|---|
--fs-color-primary-text | Primary | var(--fs-color-text-inverse) | |
--fs-color-primary-bkg | Primary | var(--fs-color-main-2) | |
--fs-color-primary-bkg-hover | Primary | var(--fs-color-main-3) | |
--fs-color-primary-bkg-active | Primary | var(--fs-color-main-4) | |
--fs-color-primary-bkg-light | Primary | var(--fs-color-main-0) | |
--fs-color-primary-bkg-light-active | Primary | var(--fs-color-main-1) | |
--fs-color-secondary-text | Secondary | var(--fs-color-primary-bkg) | |
--fs-color-secondary-bkg | Secondary | transparent | |
--fs-color-secondary-bkg-hover | Secondary | var(--fs-color-primary-bkg) | |
--fs-color-secondary-bkg-active | Secondary | var(--fs-color-main-3) | |
--fs-color-secondary-bkg-light | Secondary | var(--fs-color-main-0) | |
--fs-color-secondary-bkg-light-active | Secondary | var(--fs-color-secondary-bkg-light) | |
--fs-color-tertiary-text | Tertiary | var(--fs-color-link) | |
--fs-color-tertiary-bkg | Tertiary | transparent | |
--fs-color-tertiary-bkg-hover | Tertiary | var(--fs-color-main-0) | |
--fs-color-tertiary-bkg-active | Tertiary | var(--fs-color-main-1) | |
--fs-color-tertiary-bkg-light | Tertiary | var(--fs-color-neutral-0) | |
--fs-color-tertiary-bkg-light-active | Tertiary | var(--fs-color-tertiary-bkg-light) |
Components & States​
| Token | Type | Default Value | Example |
|---|---|---|---|
--fs-color-body-bkg | Body | var(--fs-color-neutral-0) | |
--fs-color-action-text | Action | var(--fs-color-text-inverse) | |
--fs-color-action-bkg | Action | var(--fs-color-accent-4) | |
--fs-color-action-bkg-hover | Action | var(--fs-color-accent-3) | |
--fs-color-action-bkg-active | Action | var(--fs-color-accent-2) | |
--fs-color-action-bkg-light | Action | var(--fs-color-neutral-0) | |
--fs-color-action-bkg-light-active | Action | var(--fs-color-tertiary-bkg-light) | |
--fs-color-link | Link | var(--fs-color-main-2) | |
--fs-color-link-hover | Link | var(--fs-color-main-2) | |
--fs-color-link-active | Link | var(--fs-color-main-4) | |
--fs-color-link-visited | Link | #6058ba | |
--fs-color-link-inverse | Link | var(--fs-color-neutral-0) | |
--fs-color-text | Text | var(--fs-color-neutral-7) | |
--fs-color-text-light | Text | var(--fs-color-neutral-6) | |
--fs-color-text-inverse | Text | var(--fs-color-neutral-0) | |
--fs-color-text-display | Text | var(--fs-color-neutral-7) | |
--fs-color-focus-ring | Focus | #8db6fa | |
--fs-color-focus-ring-outline | Focus | #8db6fa80 | |
--fs-color-focus-ring-danger | Focus | #e1adad |
Situations​
| Token | Type | Default Value | Example |
|---|---|---|---|
--fs-color-success-text | Success | #1e493b | |
--fs-color-success-bkg | Success | #b3ebd5 | |
--fs-color-success-border | Success | #1e493b | |
--fs-color-warning-text | Warning | var(--fs-color-text) | |
--fs-color-warning-bkg | Warning | #fdec8d | |
--fs-color-warning-border | Warning | var(--fs-color-warning-text) | |
--fs-color-danger-text | Danger | var(--fs-color-text) | |
--fs-color-danger-bkg | Danger | var(--fs-color-focus-ring-danger) | |
--fs-color-danger-border | Danger | var(--fs-color-danger-text) | |
--fs-color-info-text | Information | var(--fs-color-text) | |
--fs-color-info-bkg | Information | var(--fs-color-main-1) | |
--fs-color-highlight-text | Highlight | var(--fs-color-text-display) | |
--fs-color-highlight-bkg | Highlight | var(--fs-color-accent-0) | |
--fs-color-neutral-text | Neutral | var(--fs-color-text) | |
--fs-color-neutral-bkg | Neutral | var(--fs-color-neutral-1) | |
--fs-color-disabled-text | Disabled | #368369 | |
--fs-color-disabled-text | Disabled | var(--fs-color-neutral-6) | |
--fs-color-disabled-bkg | Disabled | var(--fs-color-neutral-2) |