Colours permalink
Colour swatches with various values that you can copy.
primary permalink
- Value
#2E4FBA
- Sass function
get-color('primary')
- Custom Property
var(--color-primary)
- Text util class
color-primary
- Background util class
bg-primary
primary-shade permalink
- 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 permalink
- 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 permalink
- Value
#1f265b
- Sass function
get-color('highlight')
- Custom Property
var(--color-highlight)
- Text util class
color-highlight
- Background util class
bg-highlight
light permalink
- Value
#ffffff
- Sass function
get-color('light')
- Custom Property
var(--color-light)
- Text util class
color-light
- Background util class
bg-light
mid permalink
- Value
#cccccc
- Sass function
get-color('mid')
- Custom Property
var(--color-mid)
- Text util class
color-mid
- Background util class
bg-mid
dark permalink
- Value
#191A1B
- Sass function
get-color('dark')
- Custom Property
var(--color-dark)
- Text util class
color-dark
- Background util class
bg-dark
slate permalink
- Value
#404040
- Sass function
get-color('slate')
- Custom Property
var(--color-slate)
- Text util class
color-slate
- Background util class
bg-slate
hero-dark permalink
- Value
#1F265B
- Sass function
get-color('hero-dark')
- Custom Property
var(--color-hero-dark)
- Text util class
color-hero-dark
- Background util class
bg-hero-dark
dark-blue permalink
- Value
#1F265B
- Sass function
get-color('dark-blue')
- Custom Property
var(--color-dark-blue)
- Text util class
color-dark-blue
- Background util class
bg-dark-blue
default-blue permalink
- Value
#4F6CCA
- Sass function
get-color('default-blue')
- Custom Property
var(--color-default-blue)
- Text util class
color-default-blue
- Background util class
bg-default-blue
default-green permalink
- Value
#C8E0BE
- Sass function
get-color('default-green')
- Custom Property
var(--color-default-green)
- Text util class
color-default-green
- Background util class
bg-default-green
default-yellow permalink
- Value
#FFCB3D
- Sass function
get-color('default-yellow')
- Custom Property
var(--color-default-yellow)
- Text util class
color-default-yellow
- Background util class
bg-default-yellow
default-light-blue permalink
- Value
#F0F2FB
- Sass function
get-color('default-light-blue')
- Custom Property
var(--color-default-light-blue)
- Text util class
color-default-light-blue
- Background util class
bg-default-light-blue
Fonts permalink
Base — System permalink
.font-base
Serif — Merriweather permalink
.font-serif
Text sizes permalink
Text sizes are available as standard classes or media query prefixed, such as lg:text-500
.
0.125rem - text-100
0.25rem - text-200
0.5rem - text-300
0.75rem - text-350
1rem - text-400
1.125rem - text-450
1.25rem - text-500
1.5rem - text-600
2rem - text-700
2.5rem - text-800
3rem - text-900
1rem - text-base
4rem - text-max
Spacing permalink
There’s size ratio utilities that give you margin (mt, mb
) and padding (pt, pl, pb
).
Margin permalink
Margin token classes that you can copy
mt-100
mt-200
mt-300
mt-350
mt-400
mt-450
mt-500
mt-600
mt-700
mt-800
mt-900
mt-base
mt-max
Padding permalink
Padding token classes that you can copy
pt-100
pb-100
pl-100
pt-200
pb-200
pl-200
pt-300
pb-300
pl-300
pt-350
pb-350
pl-350
pt-400
pb-400
pl-400
pt-450
pb-450
pl-450
pt-500
pb-500
pl-500
pt-600
pb-600
pl-600
pt-700
pb-700
pl-700
pt-800
pb-800
pl-800
pt-900
pb-900
pl-900
pt-base
pb-base
pl-base
pt-max
pb-max
pl-max