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