Styleguide

Colours permalink

Colour swatches with various values that you can copy.

• primary permalink

  Value

  hsl(208, 57%, 21%)

  Sass function

  get-color('primary')

  Custom Property

  var(--color-primary)

  Text util class

  color-primary

  Background util class

  bg-primary

• primary-shade permalink

  Value

  hsl(208, 56%, 14%)

  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

  hsl(207, 57%, 31%)

  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

  hsl(42, 98%, 77%)

  Sass function

  get-color('highlight')

  Custom Property

  var(--color-highlight)

  Text util class

  color-highlight

  Background util class

  bg-highlight

• light permalink

  Value

  hsl(0, 0%, 100%)

  Sass function

  get-color('light')

  Custom Property

  var(--color-light)

  Text util class

  color-light

  Background util class

  bg-light

• mid permalink

  Value

  hsl(0, 0%, 80%)

  Sass function

  get-color('mid')

  Custom Property

  var(--color-mid)

  Text util class

  color-mid

  Background util class

  bg-mid

• dark permalink

  Value

  hsl(0, 0%, 20%)

  Sass function

  get-color('dark')

  Custom Property

  var(--color-dark)

  Text util class

  color-dark

  Background util class

  bg-dark

Fonts permalink

Base — System stack permalink

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

Serif — Lora 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.8rem - text-300

1.25rem - text-500

1.56rem - text-600

1.95rem - text-700

2.44rem - text-800

3.05rem - text-900

1rem - text-base

4rem - 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