Colours
Colour swatches with various values that you can copy.
-
{% for color in styleguide.colors() %}
-
{{ color.key }}
- Value
{{ color.value }}
- Sass function
get-color('{{ color.key }}')
- Custom Property
var(--color-{{ color.key }})
- Text util class
color-{{ color.key }}
- Background util class
bg-{{ color.key }}
{% endfor %}
Fonts
Base — System stack
.font-base
Serif — Lora
.font-serif
Text sizes
Text sizes are available as standard classes or media query prefixed, such as lg:text-500
.
{{ size.value }} - text-{{ size.key }}
Spacing
There’s size ratio utilities that give you margin (gap-top, gap-bottom
) and padding (pad-top, pad-left, pad-bottom
).
Margin
Margin token classes that you can copy
gap-top-{{ size.key }}
Padding
Padding token classes that you can copy
{% for size in styleguide.sizes() %}pad-top-{{ size.key }}
pad-bottom-{{ size.key }}
pad-left-{{ size.key }}