Tokens

Feo.css offers a limited set of design tokens, implemented in CSS Custom Properties (--*). These design tokens are used throughout all the different layers of Feo.css. For example, several layout patterns allow you to set the gap between columns and rows, through class ulilities. These classes directly use the defined tokens.

Naming convention

Tokens like sizing and breakpoints are considered to have a "baseline". The most common value for the design token. Those tokens always have a -0 as the post-fix in their naming (e.g. --token-size-0). For each step higher, the number is increased (e.g. --token-size-2). In case of lowering steps, we add a 0 to the token name (e.g. --token-size-000). This convention is chosen as it is seen to be more readable compared to --token-size--1 (note the double dash).

Sizing

Feo.css offers design tokens on sizing that can be used for spacing (e.g. margin and padding), font-sizes, or anything you can think of. The values are based on a combination of a few key principles:

Note on fluid scaling

If you do not want to use a fluid scaling of the --size-{z} tokens, you can overwrite the --feo-scale Custom Property in your own code, and set it to 0.

Token name Value at 320px Value at 1240px
--token-size-000 0.65rem 0.65rem + 3.25px
--token-size-00 0.8125rem 0.8125rem + 4px
--token-size-0 1rem 1rem + 5px
--token-size-1 1.33rem 1.33rem + 6.65px
--token-size-2 1.78rem 1.78rem + 8.9px
--token-size-3 2.37rem 2.37rem + 11.85px
--token-size-4 3.16rem 3.16rem + 15.7px
--token-size-5 4.21rem 4.21rem + 21.05px

Breakpoints

Tokens used as points that can be used, whenever your UI is breaking. Scaling between the values is based on 1.33.

Token name Value
--token-bp-000 11.31rem
--token-bp-00 15.04rem
--token-bp-0 20rem
--token-bp-1 20rem
--token-bp-2 26.6rem
--token-bp-3 35.38rem
--token-bp-4 47.05rem
--token-bp-5 62.58rem

Colors

A set of dark and light colors are present in Feo.css, that can be used as a base for your application in greyscale.

Token name RGB value HSL value
--token-neutral-0 #0E131B hsl(215, 30%, 8%)
--token-neutral-1 #2B3A50 hsl(215, 30%, 24%)
--token-neutral-2 #476185 hsl(215, 30%, 40%)
--token-neutral-3 #C8D4E5 hsl(215, 36%, 78%)
--token-neutral-4 #E3E9F2 hsl(215, 36%, 92%)
--token-neutral-5 #F7F9FB hsl(215, 36%, 98%)

Themes

Feo.css does not offer multiple themes out of the box, but offers a basic light, as shown below. The tokens defined in the light theme are used throughout Feo.css (e.g. forms-component). Feo.css does not offer auto-themes out of the box, as these should be opt-in for developers. By offering one theme, consistent application of theme related tokens (through custom properties) can be achieved.

Color Design token Description
--surface-0 --token-neutral-0 Main background color
--surface-1 --token-neutral-1 Background color for surfaces that need to stand out a little on the main background (e.g. cards, code-blocks)
--surface-2 --token-neutral-2 Surface color for specific elements or properties that need a little more emphasize (e.g. border colors)
--text-0 --token-neutral-5 Main text color
--text-1 --token-neutral-4 Text color for elements that need a little less high-light
--text-2 --token-neutral-3 Text color for elements with less emphasize
About contrasts

The selected theme colors, if combined with --surface-{z} and --text-{z} have a contrast score of AAA (> 7) and can be used freely. Except when you combine --surface-2 and --text-2. That combination has a AA+ (4.25) score. So it should only be used with larger text.