CSS variables

Configuration is kept simple, you don't need to build anything.

We just use CSS variable that you can overwrite.

See the variables file on Github

What you might want to overwrite

Regarding fonts:

• You should start by setting --font-body and --font-headings to your visual identity. You can also keep the font system stack on body to guarantee readability and spare some sweet loading time!
• You might want to overwrite the --font-ratio variable to something between 1.1 and 1.6. The font ratio is the number per which we multiply the text size to obtain the heading sizes. You can try different ratio on https://type-scale.com/, or changing it directly on your app with your developer tool to fine-tune it.
• You might want to overwrite --font-line-height to something else than 1.5. But don't go too crazy there! You should keep it between 1.3 and 1.65 for body text.
• You should probably not change any of the --size-300 to --size-900 values as these are calculated based on --font ratio.
• You should probably not change the --measure value. It sets the maximum paragraph length, and is a nice default, more info on the measure value on the Typography documentation page.

Regarding theming:

TBA

Full list of variables

Variable name	Default value
--border-thin	0.2rem
--form-field-height	2rem
--font-headings	-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif
--font-body	-apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif
--font-ratio	1.33
--font-line-height	1.5
--size-300	calc(var(--size-400) / var(--font-ratio))
--size-400	1.4rem
--size-500	calc(var(--size-400) * var(--font-ratio))
--size-600	calc(var(--size-500) * var(--font-ratio))
--size-700	calc(var(--size-600) * var(--font-ratio))
--size-800	calc(var(--size-700) * var(--font-ratio))
--size-900	calc(var(--size-800) * var(--font-ratio))