Colors

Similar to spacing and typography, the same is done with the way we create variations of our brand colors. Here however a system of tinting and shading is applied on a 10% scale to insure our brand colors remain the same temperature and tone as various levels of lightness and darkness are needed for specific designs.

Web App Color Scheme

TS Blue

    • scaleColor($ts-blue, -3)
    • #124A7A
    • scaleColor($ts-blue, -1)
    • #17609D
    • $ts-blue
    • #1A6BAF
    • scaleColor($ts-blue, 1)
    • #317AB7
    • scaleColor($ts-blue, 10)
    • #F3F7FA

TS Dark Blue

    • scaleColor($ts-darkblue, -3)
    • #0F3458
    • $ts-darkblue
    • #13426E
    • scaleColor($ts-darkblue, 10)
    • #F2F5F7

TS Green

    • scaleColor($ts-green, -3)
    • #659B35
    • scaleColor($ts-green, -1)
    • #72AE3C
    • $ts-green
    • #7FC243
    • scaleColor($ts-green, 10)
    • #F8FBF5

TS Orange

    • $ts-orange
    • #FF8F00
    • scaleColor($ts-orange, 10)
    • #FFF9F2

TS Black

    • $ts-black
    • #222222
    • scaleColor($ts-black, 1)
    • #383838
    • scaleColor($ts-black, 4)
    • #7A7A7A

TS Grey

    • $ts-grey
    • #d6d6d6
    • scaleColor($ts-grey, 4)
    • #E6E6E6
    • scaleColor($ts-grey, 8)
    • #F6F6F6
    • scaleColor($ts-grey, 10)
    • #FCFCFC
    • $ts-white
    • #ffffff