Custom Totes

Breakpoints

$break-smallest-phone 374px
$break-smaller-phone 413px
$break-phone 480px
$break-tablet 767px
$break-tablet-portrait 979px
$break-desktop 1024px
$break-large 1280px
$break-huge 1400px

Colors

$black
#000000
$blue-1
#86a9e3
$blue-2
#677284
$gray-1
#464545
$gray-2
#5e5c5c
$green-1
#b8dd7f
$green-2
#b1d689
$green-3
#eaffee
$orange-1
#f19e6b
$pink-1
#f1bfd2
$purple-1
#400099
$purple-2
#cac8de
$purple-3
#ecebf4
$purple-4
#ebf0fa
$red-1
#db1e34
$red-2
#ea2750
$red-3
#ffebeb
$turquoise-1
#a4e6da
$white
#ffffff
$yellow-1
#f7dc73
$yellow-2
#f8dd73
$yellow-3
#fce794
$yellow-4
#fff3c6

Easing

$ease-1 ease-in-out
$ease-2 cubic-bezier(.75,.02,.5,.99)

Font Weight

Classes fw-light, fw-normal, and fw-bold available.

$normal 400
$medium 500
$bold 700

Paths

$svg-sprite-dir "assets/"

Text

$primary-font 'Sanchez'
$secondary-font 'futura-pt-condensed'
$tertiary-font 'Open Sans'
$quaternary-font 'Hello Beautiful'

Timers

$fastest-timer 100ms
$fast-timer 200ms
$normal-timer 400ms
$slow-timer 600ms
$slowest-timer 800ms