• hsl(352, 92%, 38%)
    $c-red
  • hsl(195, 83%, 84%)
    $c-blue
  • hsl(33, 93%, 54%)
    $c-orange
  • hsla(33, 93%, 54%, .85)
    $c-orange-transparent
  • white
    $c-white
  • hsl(0, 0%, 95%)
    $c-gray--lightest
  • hsla(0, 0%, 95%, .1)
    $c-gray--lightest--transparent
  • hsl(0, 0%, 80%)
    $c-gray--lighter
  • hsla(0, 0%, 80%, .2)
    $c-gray--lighter--transparent
  • hsl(0, 0%, 60%)
    $c-gray--light
  • hsl(0, 0%, 48%)
    $c-gray
  • hsl(0, 0%, 40%)
    $c-gray--dark
  • hsl(0, 0%, 25%)
    $c-gray--darker
  • hsla(0, 0%, 20%, .75)
    $c-gray--darker--transparent
  • hsl(0, 0%, 16.1%)
    $c-gray--darkest
  • hsla(0, 0%, 16.1%, .85)
    $c-gray--darkest--transparent
  • black
    $c-black

To add to these items, use Sass variables that start with $c- in source/_patterns/00-base/01-colors/_color-vars.scss

Opacity (Hover to see effect)
Move (Hover to see effect)
Values:
  • $trans-opacity__time: 0.3s;
  • $trans-opacity__function: ease-in;
  • $trans-opacity: $trans-opacity__time $trans-opacity__function; convenience variable for using both
  • $trans-move__time: 0.3s;
  • $trans-move__function: ease-in;
  • $trans-move: $trans-opacity__time $trans-move__function; convenience variable for using both
  • $bp--xsmall:
    380px
  • $bp--small:
    500px
  • $bp--medium:
    640px
  • $bp--large:
    768px
  • $bp--xlarge:
    1024px
  • $bp--xxlarge:
    1250px
  • $bp--xxxlarge:
    1600px
  • iPhone Portrait: 320px
  • Galaxy Nexus Portrait: 360px
  • iPhone 6 Portrait: 375px
  • iPhone 6 Plus Portrait: 414px
  • Galaxy Note 3 Portrait: 540px
  • iPhone Landscape: 568px
  • Google Nexus 7 Portrait: 604px
  • Galaxy Nexus Landscape: 640px
  • iPhone 6 Landscape: 667px
  • iPhone 6 Plus Landscape: 738px
  • iPad Portrait: 768px
  • Galaxy Note 3 Landscape: 960px
  • Google Nexus 7 Landscape: 966px
  • iPad Landscape: 1024px
  • 11" MacBook Air: 1366px
  • 13" MacBook Air: 1440px
  • 21.5" iMac: 1980px

To add to these items, use Sass variables that start with $bp-- in source/_patterns/00-base/breakpoints/_breakpoints.scss

5px : $spacing--sm
20px : $spacing--l

To add to these items, use Sass variables that start with $spacing-- in source/_patterns/00-base/spacing/_spacing.scss