⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

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

    #efeaf5
  • --fs-color-accent-1

    #d3c9de
  • --fs-color-accent-2

    #9d8abf
  • --fs-color-accent-3

    #74678c
  • --fs-color-accent-4

    #423759

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 TokenValue
--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 TokenValue
--fs-color-body-bkg
var(--fs-color-neutral-0)
--fs-body-bkg
--fs-color-body-bkg
--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 TokenValue
--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)