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

The quick brown fox jumps over the lazy fox .font-base

Serif — Merriweather permalink

The quick brown fox jumps over the lazy fox .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

Padding permalink

Padding token classes that you can copy