Styleguide

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
    .text-link--small
  • Link - Medium with underline
    .text-link--medium
  • Link - Large with underline
    .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>
      
    Toggle
    Code