Styleguide

Colours perma­link

Colour swatches with var­i­ous val­ues that you can copy.

• pri­mary perma­link

  Value

  #388e3c

  Sass func­tion

  get-color('primary')

  Custom Property

  var(--color-primary)

  Text util class

  color-primary

  Background util class

  bg-primary

• pri­mary-shade perma­link

  Value

  #00600f

  Sass func­tion

  get-color('primary-shade')

  Custom Property

  var(--color-primary-shade)

  Text util class

  color-primary-shade

  Background util class

  bg-primary-shade

• pri­mary-glare perma­link

  Value

  #6abf69

  Sass func­tion

  get-color('primary-glare')

  Custom Property

  var(--color-primary-glare)

  Text util class

  color-primary-glare

  Background util class

  bg-primary-glare

• high­light perma­link

  Value

  #7be67a

  Sass func­tion

  get-color('highlight')

  Custom Property

  var(--color-highlight)

  Text util class

  color-highlight

  Background util class

  bg-highlight

• light perma­link

  Value

  #ffffff

  Sass func­tion

  get-color('light')

  Custom Property

  var(--color-light)

  Text util class

  color-light

  Background util class

  bg-light

• mid perma­link

  Value

  #cccccc

  Sass func­tion

  get-color('mid')

  Custom Property

  var(--color-mid)

  Text util class

  color-mid

  Background util class

  bg-mid

• dark perma­link

  Value

  #333333

  Sass func­tion

  get-color('dark')

  Custom Property

  var(--color-dark)

  Text util class

  color-dark

  Background util class

  bg-dark

• slate perma­link

  Value

  #404040

  Sass func­tion

  get-color('slate')

  Custom Property

  var(--color-slate)

  Text util class

  color-slate

  Background util class

  bg-slate

Fonts perma­link

Base — System stack perma­link

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

Serif — Lora perma­link

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

Text sizes perma­link

Text sizes are avail­able as stan­dard classes or me­dia query pre­fixed, such as lg:text-500.

0.125rem - text-100

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 perma­link

There’s size ra­tio util­i­ties that give you mar­gin (gap-top, gap-bottom) and padding (pad-top, pad-left, pad-bottom).

Margin perma­link

Margin to­ken classes that you can copy

Padding perma­link

Padding to­ken classes that you can copy

Forms perma­link