Colors

Please use the variable names instead of the hardcoded value in Sass files.

Brand colors

Primary color

  • $color-brand-primary-0 #F3F5F7
  • $color-brand-primary-100 #E8ECF3
  • $color-brand-primary-200 #C6D0E1
  • $color-brand-primary-300 #97ABCE
  • $color-brand-primary-400 #708EB2
  • $color-brand-primary-500 #396193
  • $color-brand-primary-600 #284971
  • $color-brand-primary-700 #133663
  • $color-brand-primary-800 #052A57
  • $color-brand-primary-900 #002047

Secondary color

  • $color-brand-secondary-0 #F6FCFE
  • $color-brand-secondary-100 #D1EEFA
  • $color-brand-secondary-200 #A3DCF5
  • $color-brand-secondary-300 #75CBF0
  • $color-brand-secondary-400 #47BAEB
  • $color-brand-secondary-500 #19A7E4
  • $color-brand-secondary-600 #0095E6
  • $color-brand-secondary-700 #0074B3
  • $color-brand-secondary-800 #005380
  • $color-brand-secondary-900 #00334E
  • $color-brand-secondary-1000 #00283d

Tertiary color

  • $color-brand-tertiary-100 #FDEFEC
  • $color-brand-tertiary-200 #F8C6BF
  • $color-brand-tertiary-300 #F39E91
  • $color-brand-tertiary-400 #F17360
  • $color-brand-tertiary-500 #ED4C33
  • $color-brand-tertiary-600 #DD2A0E
  • $color-brand-tertiary-700 #B01E07
  • $color-brand-tertiary-800 #851200
  • $color-brand-tertiary-900 #520E00

Helper colors

Grey shades

  • $color-grey-0 #FCFCFC
  • $color-grey-100 #F8F8F8
  • $color-grey-200 #F2F2F2
  • $color-grey-300 #E3E3E3
  • $color-grey-400 #B2B2B2
  • $color-grey-500 #808080
  • $color-grey-600 #63686E
  • $color-grey-700 #51535C
  • $color-grey-800 #393E46
  • $color-grey-900 #222831


Contextual colors

Success color

  • $color-success-100 #F2FBCC
  • $color-success-200 #E3F899
  • $color-success-300 #C9EB63
  • $color-success-400 #ACD73D
  • $color-success-500 #86BF07
  • $color-success-600 #6CA406
  • $color-success-700 #558A03
  • $color-success-800 #406E01
  • $color-success-900 #335B02

Warning color

  • $color-warning-100 #FFF3CD
  • $color-warning-200 #FEE49A
  • $color-warning-300 #FDD069
  • $color-warning-400 #FDBD44
  • $color-warning-500 #FC9E0A
  • $color-warning-600 #D88006
  • $color-warning-700 #B66304
  • $color-warning-800 #924A02
  • $color-warning-900 #773802

Danger color

  • $color-danger-0 #FFF9F5
  • $color-danger-100 #FFE4D3
  • $color-danger-200 #FEC1A5
  • $color-danger-300 #FF987B
  • $color-danger-400 #FE7058
  • $color-danger-500 #FE2E22
  • $color-danger-600 #DA1922
  • $color-danger-700 #B61325
  • $color-danger-800 #930B27
  • $color-danger-900 #790527