UI KIT

COLORS:

Primary

  • $color-primary
    $color-red-500
  • $color-secondary
    $color-grey-700

Dark

  • $color-accent-dark-1
    $color-teal-500
  • $color-accent-dark-2
    $color-teal-300
  • $color-accent-dark-3
    $color-red-700
  • $color-accent-dark-4
    $color-red-900
  • $color-accent-dark-5
    $color-brown-700
  • $color-accent-dark-6
    $color-yellow-700

Light

  • $color-accent-light-1
    $color-tan-500
  • $color-accent-light-2
    $color-tan-600
  • $color-accent-light-3
    $color-tan-400
  • $color-accent-light-4
    $color-grey-200
  • $color-accent-light-5
    $color-grey-300

TYPOGRAPHY:

Healines:

Display

Display Small

Headline 1 - H1

Headline 2 - H2

Headline 3 - H3

Headline 4 - H4

Body:

Body (Large)

Body (Base)

Body (Small)


Buttons

Button Primary

     

Button Secondary

     

Button Tertiary

            (Inherits text & border color from parent - currentColor)

Button Text