Styleguide

Colours

  • primary

    Value
    #265c85
    Sass function
    get-color('primary')
    Custom Property
    var(--color-primary)
    Text util class
    color-primary
    Background util class
    bg-primary

  • primary-shade

    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

    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

    Value
    blanchedalmond
    Sass function
    get-color('light')
    Custom Property
    var(--color-light)
    Text util class
    color-light
    Background util class
    bg-light

  • mid

    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

    Value
    #444
    Sass function
    get-color('dark')
    Custom Property
    var(--color-dark)
    Text util class
    color-dark
    Background util class
    bg-dark

  • dark-alt

    Value
    #112123
    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

    Value
    #E9EBEE
    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

    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

    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

    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

    Value
    #D0F206
    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

    Value
    #000
    Sass function
    get-color('black')
    Custom Property
    var(--color-black)
    Text util class
    color-black
    Background util class
    bg-black

  • white

    Value
    #fff
    Sass function
    get-color('white')
    Custom Property
    var(--color-white)
    Text util class
    color-white
    Background util class
    bg-white

  • gradient

    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

System-UI, Helvetica, sans-serif

Text sizes

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

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

Margin

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

Padding

pad-top-300
pad-bottom-300
pad-left-300
pad-top-400
pad-bottom-400
pad-left-400
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