Fonts

• Neue Haas Grotesk Display Pro Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .NeueHaasGrotesk-regular
• Neue Haas Grotesk Display Pro Medium
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .NeueHaasGrotesk-medium
• Neue Haas Grotesk Display Pro Bold
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .NeueHaasGrotesk-bold
• Neue Haas Grotesk Display Pro Black
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .NeueHaasGrotesk-black
• Monospaced Body Text

  Note - these are common system fonts, not atached webfonts. The following is set for the font family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace.
  

  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--mono
• Knockout 29 Web
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--knockout29
• Knockout 47 Web
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--knockout47
• Knockout 49 Web
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--knockout49
• AkkuratPro Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--akkurat-regular
• AkkuratPro Bold
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--akkurat-bold
• AkkuratPro BoldItalic
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--akkurat-bold-italic
• AkkuratPro Italic
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--akkurat-italic
• AkkuratPro Light
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--akkurat-light
• AkkuratPro LightItalic
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--akkurat-light-italic
• Freight Book Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--freight-book-Regular
• Freight DispPro Black Regular
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--Freight-Disp-Pro-Black-Regular
• Neue Haas Grotesk Display Black
  AaBb

  A​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--Neue-Haas-Grotesk-Display-Black
• VCR OSD MONO
  AaBb

  ​B​C​D​E​F​G​H​I​J​K​L​M​N​O​P​Q​R​S​T​U​V​W​X​Y​Z​
  a​b​c​d​e​f​g​h​i​j​k​l​m​n​o​p​q​r​s​t​u​v​w​x​y​z​
  1​2​3​4​5​6​7​8​9​0​
  &​.​,​?​!​@​(​)​#​$​%​*​+​-​=​:​;
  
  .font--vcr-osd-mono

Typography

• Headline 1
  I am headline 1 style.
  .headline-1
• Headline 2
  I am headline 2 style.
  .headline-2
• Headline 3
  I am headline 3 style.
  .headline-3
• Headline 4
  I am headline 4 style.
  .headline-4
• Headline 5
  I am headline 5 style.
  .headline-5
• Headline 6
  I am headline 6 style.
  .headline-6
• Headline 7
  I am headline 7 style.
  .headline-7
• Headline 8
  I am headline 8 style.
  .headline-8
• Subtitle 1
  I am subtitle 1 style.
  .subtitle-1
• Subtitle 2
  I am subtitle 2 style.
  .subtitle-2
• Body 1
  I am body 1 style.
  .body-1
• Body 2
  I am body 2 style.
  .body-2
• Label 1
  I am Label 1 style.
  .label-1
• Label 2
  I am Label 2 style.
  .label-2
• Label 3
  I am Label 3 style.
  .label-3
• Button Text
  I am button text style.
  .button-text
• Overline Text
  I am overline text style.
  .overline-text
• Heading - h1
  I am heading - H1 style.
  .h1
• Heading - h2
  I am heading - H2 style.
  .h2
• Heading - h1
  I am heading - H3 style.
  .h3
• Heading - h4
  I am heading - H4 style.
  .h4

Colors

• Primary Colors
  #000000

  $color-black

  #D50032

  $color-sbx-red

  #6a6a6a

  $color-sbx-dgrey

  #f1f1f1

  $color-sbx-lgrey
• Brand Colors
  #960e48

  $color-sbx-fearless

  #ba071a

  $color-sbx-fierce

  #dd4a92

  $color-sbx-fab

Buttons

• Button
  Button
  .button
• Button - Primary
  Button
  .button .button--primary
• Button - Primary Light
  Button
  .button .button--primary-light
• Button - Secondary
  Button
  .button .button--secondary
• Button - Secondary Light
  Button
  .button .button--secondary-light
• Button - Rounded Light
  Shop Now
  .button .button--rounded-light
• Button - Rounded Dark
  Shop Now
  .button .button--rounded-dark
• Button - Large Rounded Light
  See Inside Studio 5
  .button .button--large-rounded-light
• Button - Large Rounded Dark
  Shop Pro Looks
  .button .button--large-rounded-dark

LINKS

• Link - Small with underline
  I am link
  .text-link--small
• Link - Medium with underline
  I am link
  .text-link--medium
• Link - Large with underline
  I am link
  .text-link--large

Icons

• <svg role="img" aria-labelledby="my-unique-id" class="svgicon svgicon--twitter">
    <title id="my-unique-id">ADA title goes here</title>
    <use xlink:href="#twitter"></use>
  </svg>