Styleguide

Colours permalink

Colour swatches with various values that you can copy.

• primary permalink

  Value

  #265c85

  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

• 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

  #444

  Sass function

  get-color('dark')

  Custom Property

  var(--color-dark)

  Text util class

  color-dark

  Background util class

  bg-dark

• dark-alt permalink

  Value

  #2c2a32

  Sass function

  get-color('dark-alt')

  Custom Property

  var(--color-dark-alt)

  Text util class

  color-dark-alt

  Background util class

  bg-dark-alt

• grey-light permalink

  Value

  #f6f3f2

  Sass function

  get-color('grey-light')

  Custom Property

  var(--color-grey-light)

  Text util class

  color-grey-light

  Background util class

  bg-grey-light

• grey-med permalink

  Value

  #e9e9e9

  Sass function

  get-color('grey-med')

  Custom Property

  var(--color-grey-med)

  Text util class

  color-grey-med

  Background util class

  bg-grey-med

• grey-alt permalink

  Value

  #f1f5f7

  Sass function

  get-color('grey-alt')

  Custom Property

  var(--color-grey-alt)

  Text util class

  color-grey-alt

  Background util class

  bg-grey-alt

• accent permalink

  Value

  rgb(106, 81, 147)

  Sass function

  get-color('accent')

  Custom Property

  var(--color-accent)

  Text util class

  color-accent

  Background util class

  bg-accent

• accent-alt permalink

  Value

  #ffd53d

  Sass function

  get-color('accent-alt')

  Custom Property

  var(--color-accent-alt)

  Text util class

  color-accent-alt

  Background util class

  bg-accent-alt

• black permalink

  Value

  #000

  Sass function

  get-color('black')

  Custom Property

  var(--color-black)

  Text util class

  color-black

  Background util class

  bg-black

• white permalink

  Value

  #fff

  Sass function

  get-color('white')

  Custom Property

  var(--color-white)

  Text util class

  color-white

  Background util class

  bg-white

• gradient permalink

  Value

  linear-gradient(90deg, #6a5193, #6d5399, #7154a0, #7456a6, #7857ad, #7b58b3, #7f5aba, #825bc1)

  Sass function

  get-color('gradient')

  Custom Property

  var(--color-gradient)

  Text util class

  color-gradient

  Background util class

  bg-gradient

Fonts permalink

Red Hat permalink

The quick brown fox jumps over the lazy fox

Text sizes permalink

Text sizes are available as standard classes or media query prefixed, such as lg:text-500.

0.8rem - text-300

1.1rem - text-400

1.25rem - text-500

1.56rem - text-600

1.95rem - text-700

2.44rem - text-800

3.05rem - text-900

1rem - text-base

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