Styleguide

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