Skip to main content

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

TokenTypeDefault ValueExample
--fs-color-primary-textPrimaryvar(--fs-color-text-inverse)
--fs-color-primary-bkgPrimaryvar(--fs-color-main-2)
--fs-color-primary-bkg-hoverPrimaryvar(--fs-color-main-3)
--fs-color-primary-bkg-activePrimaryvar(--fs-color-main-4)
--fs-color-primary-bkg-lightPrimaryvar(--fs-color-main-0)
--fs-color-primary-bkg-light-activePrimaryvar(--fs-color-main-1)
--fs-color-secondary-textSecondaryvar(--fs-color-primary-bkg)
--fs-color-secondary-bkgSecondarytransparent
--fs-color-secondary-bkg-hoverSecondaryvar(--fs-color-primary-bkg)
--fs-color-secondary-bkg-activeSecondaryvar(--fs-color-main-3)
--fs-color-secondary-bkg-lightSecondaryvar(--fs-color-main-0)
--fs-color-secondary-bkg-light-activeSecondaryvar(--fs-color-secondary-bkg-light)
--fs-color-tertiary-textTertiaryvar(--fs-color-link)
--fs-color-tertiary-bkgTertiarytransparent
--fs-color-tertiary-bkg-hoverTertiaryvar(--fs-color-main-0)
--fs-color-tertiary-bkg-activeTertiaryvar(--fs-color-main-1)
--fs-color-tertiary-bkg-lightTertiaryvar(--fs-color-neutral-0)
--fs-color-tertiary-bkg-light-activeTertiaryvar(--fs-color-tertiary-bkg-light)

Components & States

TokenTypeDefault ValueExample
--fs-color-body-bkgBodyvar(--fs-color-neutral-0)
--fs-color-action-textActionvar(--fs-color-text-inverse)
--fs-color-action-bkgActionvar(--fs-color-accent-4)
--fs-color-action-bkg-hoverActionvar(--fs-color-accent-3)
--fs-color-action-bkg-activeActionvar(--fs-color-accent-2)
--fs-color-action-bkg-lightActionvar(--fs-color-neutral-0)
--fs-color-action-bkg-light-activeActionvar(--fs-color-tertiary-bkg-light)
--fs-color-linkLinkvar(--fs-color-main-2)
--fs-color-link-hoverLinkvar(--fs-color-main-2)
--fs-color-link-activeLinkvar(--fs-color-main-4)
--fs-color-link-visitedLink#6058ba
--fs-color-link-inverseLinkvar(--fs-color-neutral-0)
--fs-color-textTextvar(--fs-color-neutral-7)
--fs-color-text-lightTextvar(--fs-color-neutral-6)
--fs-color-text-inverseTextvar(--fs-color-neutral-0)
--fs-color-text-displayTextvar(--fs-color-neutral-7)
--fs-color-focus-ringFocus#8db6fa
--fs-color-focus-ring-outlineFocus#8db6fa80
--fs-color-focus-ring-dangerFocus#e1adad

Situations

TokenTypeDefault ValueExample
--fs-color-success-textSuccess#1e493b
--fs-color-success-bkgSuccess#b3ebd5
--fs-color-success-borderSuccess#1e493b
--fs-color-warning-textWarningvar(--fs-color-text)
--fs-color-warning-bkgWarning#fdec8d
--fs-color-warning-borderWarningvar(--fs-color-warning-text)
--fs-color-danger-textDangervar(--fs-color-text)
--fs-color-danger-bkgDangervar(--fs-color-focus-ring-danger)
--fs-color-danger-borderDangervar(--fs-color-danger-text)
--fs-color-info-textInformationvar(--fs-color-text)
--fs-color-info-bkgInformationvar(--fs-color-main-1)
--fs-color-highlight-textHighlightvar(--fs-color-text-display)
--fs-color-highlight-bkgHighlightvar(--fs-color-accent-0)
--fs-color-neutral-textNeutralvar(--fs-color-text)
--fs-color-neutral-bkgNeutralvar(--fs-color-neutral-1)
--fs-color-disabled-textDisabled#368369
--fs-color-disabled-textDisabledvar(--fs-color-neutral-6)
--fs-color-disabled-bkgDisabledvar(--fs-color-neutral-2)

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY