Styleguide

Colours permalink

Colour swatches with various values that you can copy.

  • primary permalink

    Value
    #173854
    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
    #fedb8b
    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
    #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 — System stack permalink

.font-base

Serif permalink

.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

gap-top-300
gap-top-500
gap-top-600
gap-top-700
gap-top-800
gap-top-900
gap-top-base
gap-top-max

Padding permalink

Padding token classes that you can copy

pad-top-300
pad-bottom-300
pad-left-300
pad-top-500
pad-bottom-500
pad-left-500
pad-top-600
pad-bottom-600
pad-left-600
pad-top-700
pad-bottom-700
pad-left-700
pad-top-800
pad-bottom-800
pad-left-800
pad-top-900
pad-bottom-900
pad-left-900
pad-top-base
pad-bottom-base
pad-left-base
pad-top-max
pad-bottom-max
pad-left-max

Forms permalink



  1. Optional description. Note: This field type can take any valid input type.




  2. Optional description.
  3. Radio Legend

    • Note about choice.
    Optional description.
  4. Checkbox Legend

    • Note about choice.
    Optional description.
  5. There is a hidden field here…