Colors
The store palette with all the tones needed.
Main
--fs-color-main-0
#f1f2f3--fs-color-main-1
#dbdbdb--fs-color-main-2
#00419e--fs-color-main-3
#002c71--fs-color-main-4
#002155
Accent
--fs-color-accent-0
#e3e6e8--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
Hierarchy
| Global Token | Value |
|---|---|
--fs-color-primary-text | var(--fs-color-text-inverse) |
--fs-color-primary-bkg | var(--fs-color-main-2) |
--fs-color-primary-bkg-hover | var(--fs-color-main-3) |
--fs-color-primary-bkg-active | var(--fs-color-main-4) |
--fs-color-primary-bkg-light | var(--fs-color-main-0) |
--fs-color-primary-bkg-light-active | var(--fs-color-main-1) |
--fs-color-secondary-text | var(--fs-color-primary-bkg) |
--fs-color-secondary-bkg | transparent |
--fs-color-secondary-bkg-hover | var(--fs-color-primary-bkg) |
--fs-color-secondary-bkg-active | var(--fs-color-main-3) |
--fs-color-secondary-bkg-light | var(--fs-color-main-0) |
--fs-color-secondary-bkg-light-active | var(--fs-color-secondary-bkg-light) |
--fs-color-tertiary-text | var(--fs-color-link) |
--fs-color-tertiary-bkg | transparent |
--fs-color-tertiary-bkg-hover | var(--fs-color-main-0) |
--fs-color-tertiary-bkg-active | var(--fs-color-main-1) |
--fs-color-tertiary-bkg-light | var(--fs-color-neutral-0) |
--fs-color-tertiary-bkg-light-active | var(--fs-color-tertiary-bkg-light) |
Components & States
| Global Token | Value |
|---|---|
--fs-color-body-bkg | var(--fs-color-neutral-0) |
--fs-color-action-text | var(--fs-color-text-inverse) |
--fs-color-action-bkg | var(--fs-color-accent-4) |
--fs-color-action-bkg-hover | var(--fs-color-accent-3) |
--fs-color-action-bkg-active | var(--fs-color-accent-2) |
--fs-color-action-bkg-light | var(--fs-color-neutral-0) |
--fs-color-action-bkg-light-active | var(--fs-color-tertiary-bkg-light) |
--fs-color-link | var(--fs-color-main-2) |
--fs-color-link-hover | var(--fs-color-main-2) |
--fs-color-link-active | var(--fs-color-main-4) |
--fs-color-link-visited | #6058ba |
--fs-color-link-inverse | var(--fs-color-neutral-0) |
--fs-color-text | var(--fs-color-neutral-7) |
--fs-color-text-light | var(--fs-color-neutral-6) |
--fs-color-text-inverse | var(--fs-color-neutral-0) |
--fs-color-text-display | var(--fs-color-neutral-7) |
--fs-color-focus-ring | #8db6fa |
--fs-color-focus-ring-outline | #8db6fa80 |
--fs-color-focus-ring-danger | #e1adad |
Situations
| Global Token | Value |
|---|---|
--fs-color-success-text | #1e493b |
--fs-color-success-bkg | #b3ebd5 |
--fs-color-success-border | var(--fs-color-success-text) |
--fs-color-warning-text | var(--fs-color-text) |
--fs-color-warning-bkg | #fdec8d |
--fs-color-warning-border | var(--fs-color-warning-text) |
--fs-color-danger-text | #cb4242 |
--fs-color-danger-bkg | var(--fs-color-focus-ring-danger) |
--fs-color-danger-border | var(--fs-color-danger-text) |
--fs-color-info-text | var(--fs-color-text) |
--fs-color-info-bkg | var(--fs-color-main-1) |
--fs-color-highlighted-text | var(--fs-color-text-display) |
--fs-color-highlighted-bkg | var(--fs-color-accent-0) |
--fs-color-neutral-text | var(--fs-color-text) |
--fs-color-neutral-bkg | var(--fs-color-neutral-1) |
--fs-color-disabled-text | var(--fs-color-neutral-6) |
--fs-color-disabled-bkg | var(--fs-color-neutral-2) |