Colours
Colour swatches with various values that you can copy.
-
primary
- Value
#cacbf7- Sass function
get-color('primary')- Custom Property
var(--color-primary)- Text util class
color-primary- Background util class
bg-primary
-
primary-2021
- Value
#CDE1A8- Sass function
get-color('primary-2021')- Custom Property
var(--color-primary-2021)- Text util class
color-primary-2021- Background util class
bg-primary-2021
-
primary-shade
- Value
#102538- Sass function
get-color('primary-shade')- Custom Property
var(--color-primary-shade)- Text util class
color-primary-shade- Background util class
bg-primary-shade
-
primary-glare
- Value
#22547c- Sass function
get-color('primary-glare')- Custom Property
var(--color-primary-glare)- Text util class
color-primary-glare- Background util class
bg-primary-glare
-
highlight
- Value
#fedb8b- Sass function
get-color('highlight')- Custom Property
var(--color-highlight)- Text util class
color-highlight- Background util class
bg-highlight
-
light
- Value
#ffffff- Sass function
get-color('light')- Custom Property
var(--color-light)- Text util class
color-light- Background util class
bg-light
-
mid
- Value
#cccccc- Sass function
get-color('mid')- Custom Property
var(--color-mid)- Text util class
color-mid- Background util class
bg-mid
-
dark
- Value
#333333- Sass function
get-color('dark')- Custom Property
var(--color-dark)- Text util class
color-dark- Background util class
bg-dark
-
slate
- Value
#404040- Sass function
get-color('slate')- Custom Property
var(--color-slate)- Text util class
color-slate- Background util class
bg-slate
-
error
- Value
#ff0000- Sass function
get-color('error')- Custom Property
var(--color-error)- Text util class
color-error- Background util class
bg-error
-
success
- Value
#4caf50- Sass function
get-color('success')- Custom Property
var(--color-success)- Text util class
color-success- Background util class
bg-success
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.
clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem) - text-300
clamp(0.88rem, 0.83rem + 0.24vw, 1rem) - text-400
clamp(1.09rem, 1rem + 0.47vw, 1.33rem) - text-500
clamp(1.37rem, 1.21rem + 0.8vw, 1.78rem) - text-600
clamp(1.71rem, 1.45rem + 1.29vw, 2.37rem) - text-700
clamp(2.14rem, 1.74rem + 1.99vw, 3.16rem) - text-800
clamp(2.67rem, 2.07rem + 3vw, 4.21rem) - text-900
clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem) - text-1000
clamp(1.09rem, 1rem + 0.47vw, 1.33rem) - text-base
clamp(3.34rem, 2.45rem + 4.43vw, 5.61rem) - text-max
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-300
gap-top-400
gap-top-500
gap-top-600
gap-top-700
gap-top-800
gap-top-900
gap-top-1000
gap-top-base
gap-top-max
Padding
Padding token classes that you can copy
pad-top-300
pad-bottom-300
pad-left-300
pad-top-400
pad-bottom-400
pad-left-400
pad-top-500
pad-bottom-500
pad-left-500
pad-top-600
pad-bottom-600
pad-left-600
pad-top-700
pad-bottom-700
pad-left-700
pad-top-800
pad-bottom-800
pad-left-800
pad-top-900
pad-bottom-900
pad-left-900
pad-top-1000
pad-bottom-1000
pad-left-1000
pad-top-base
pad-bottom-base
pad-left-base
pad-top-max
pad-bottom-max
pad-left-max