Styleguide

Colours permalink

Colour swatches with various values that you can copy.

• primary permalink

  Value

  #3F5277

  Sass function

  get-color('primary')

  Custom Property

  var(--color-primary)

  Text util class

  color-primary

  Background util class

  bg-primary

• primary-shade permalink

  Value

  #363D69

  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

  #58728A

  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

  #C6973F

  Sass function

  get-color('highlight')

  Custom Property

  var(--color-highlight)

  Text util class

  color-highlight

  Background util class

  bg-highlight

• light permalink

  Value

  #f8f8ff

  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

  #333333

  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

Fonts permalink

Base — Proxima Nova permalink

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

Serif — Freight Big Pro 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.75rem - text-300

1rem - text-400

1.33rem - text-500

1.77rem - text-600

2.36rem - text-700

3.15rem - text-800

4.2rem - text-900

1rem - text-base

5.6rem - text-max

Spacing permalink

There’s size ratio utilities that give you margin (gap-top, gap-bottom) and padding (pad-top, pad-left, pad-bottom).

Margin permalink

Margin token classes that you can copy

Padding permalink

Padding token classes that you can copy

Forms permalink