Documentation / foundations
Foundations
The values that every DS by Berit component is built from. Each page lists the tokens, explains in plain words what they are used for, and shows examples where a value can be seen.
Colors
The raw colours, the named roles that components use, and the gradients, with a note on what each colour is for.
02Spacing
The eight spacing values used for gaps and padding, shown as examples so you can see how large each one is.
03Layout & grid
The screen sizes where the layout changes, the 4, 8 and 12 column grids, and the maximum widths that keep text and pages readable.
04Typography
The two typefaces and every text style, each with a plain explanation of its size, line height and weight.
05Shape & elevation
Corner radii and shadows, shown as examples, so you can see how round and how raised each one is.