FTSE Russell Styleguide

Design tokens

Design tokens are named entities that store visual design information. These are used in place of hard-coded values (such as hex values for color or pixels for spacing) in order to maintain a scalable, consistent system for UI development.

Colour Palettes

Primary palette values. Accessed via map(colors, primary, <key>)

#531732 default
#c9808c light
#e0b6bd lighter
#7c3440 dark
#461e24 darker

Secondary palette values. Accessed via map(colors, secondary, <key>)

#b24b5c default
#c9808c light
#e0b6bd lighter
#7c3440 dark
#461e24 darker

Accent palette values. Accessed via map(colors, accent, <key>)

#3cd8c3 light
#7ce5d7 lighter
#21A795 default
#14675c dark
#082723 darker

Neutral palette values. Accessed via map(colors, neutral, <key>)

#ffffff white
#696d6f gray
#8f9395 gray-light
#F5F5F5 gray-lighter
#444648 gray-dark
#1f2020 gray-darker
#000000 black

Messaging palette values. Accessed via map(colors, messaging, <key>)

#7F1340 negative
#21A795 positive
#1F9EC4 info
#F8B15B warning

Green palette values. Accessed via map(colors, green, <key>)

#22A795 default
#61d9c5 light
#007767 dark

Spotlight-overlay palette values. Accessed via map(colors, spotlight-overlay, <key>)

#3a7088 cadet-blue
#21A795 green
#b24b5c pink
#531732 purple
#7F1340 red
#1F9EC4 sky-blue
#00515c teal
#F8B15B yellow

Borders

Width and radii tokens are used to style element borders. Accessed via map(borders, <key>).

Key Value
width-thin 1px
width-thick 2px
width-thicker 4px
width-thickest 8px
radius-small 0.125rem
radius-default 0.25rem
radius-circle 50%

Breakpoints

Breakpoint tokens are used within @media queries. Accessed via map(breakpoints, <key>).

Key Value
min 280px
xsmall 360px
small 480px
medium 504px
large 800px
xlarge 960px
xxlarge 1280px
max 1800px

Font families

Font family tokens are used for typographic styling. Accessed via map(fonts, <key>).

Key Value
family-sans ‘effra’, sans-serif
family-open-sans ‘Open Sans’, sans-serif
family-monospace ‘Source Code Pro’, monospace
family-system -apple-system, BlinkMacSystemFont, ‘Segoe UI’, Roboto, Oxygen, Ubuntu, Cantarell, ‘Open Sans’, ‘Helvetica Neue’, sans-serif

Layers

Layering tokens set the z-index layer value for elements. Accessed via map(layers, <key>).

Key Value
dropdown 1000
sticky 1020
fixed 1030
modal-backdrop 1040
modal 1050
popover 1060
tooltip 1070

Sizes

Sizing tokens describe the dimensions of elements. Accessed via map(sizes, <key>).

Key Value
xsmall 0.5rem
small 0.83rem
medium 1.5rem
large 3rem
xlarge 4.5rem

Spacing

Spacing tokens describe the distance between elements. Accessed via map(spaces, <key>).

Key Value
xsmall 0.25rem
small 0.5rem
medium 1rem
large 1.5rem
xlarge 3rem
xxlarge 4.5rem