Typefaces

There is one typeface used: Akkurat. It is currently included with three different weights; however, the light is not used in any of the type classes.

Akkurat

  • .akkurat
    Akkurat
  • .akkurat-bold
    Akkurat Bold
  • .akkurat-light
    Akkurat Light

Type Scale

The typography scales according to the chart below. The baseline is set at 4px. Note: for screen widths < 840px , an alternative size is used.

Headers

  • Meta Section Header
    .t-meta-section-hdr
    14px / 20px
    18px / 24px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Small Section Header
    .t-small-section-hdr
    18px / 24px
    24px / 28px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Small Section Header Caps
    .t-small-section-hdr-caps
    All Caps / 2.4px Letter Spacing
    24px / 24px
    Provision
  • Section Header
    .t-section-hdr
    24px / 32px
    36px / 40px
    Lighting Essentials
  • Large Section Header
    .t-large-section-hdr
    36px / 40px
    48px / 52px
    Lighting Essentials
  • Mega Section Header
    .t-mega-section-hdr
    36px / 40px
    60px / 60px
    Lighting Essentials

Paragraphs

  • Meta Caps
    .t-meta-caps
    All Caps / 1px Letter Spacing
    11px / 12px
    Lighting Essentials
  • Tiny Body Sans
    .t-tiny-body-sans
    11px / 12px
    12px / 16px
    Lighting Essentials
  • Small Body Sans
    .t-small-body-sans
    12px / 16px
    14px / 20px
    Lighting Essentials
  • Body Sans
    .t-body-sans
    14px / 20px
    18px / 28px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Large Body Sans
    .t-large-body-sans
    18px / 24px
    24px / 28px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Mega Body Sans
    .t-mega-body-sans
    18px / 28px
    32px / 48px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Huge Body Sans
    .t-huge-body-sans
    24px / 32px
    36px / 48px
    Lighting Essentials

Buttons

  • Button Small
    .t-button-small
    10px / 12px
    Lighting Essentials
  • Button
    .t-button
    14px / 20px
    14px / 20px
    Read More
  • Button Large
    .t-button-large
    12px / 20px
    14px / 20px
    Get My Black Box

Static Type Scale

An alternative set of typography scale that do no have responsive sizing changes. This is largely a subset of the "main" typescale (i.e. not all type classes have a static variation).

Headers

  • Meta Section Header
    .t-meta-section-hdr-static
    14px / 20px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Small Section Header
    .t-small-section-hdr-static
    18px / 24px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Section Header
    .t-section-hdr-static
    24px / 32px
    Lighting Essentials
  • Large Section Header
    .t-large-section-hdr-static
    36px / 40px
    Lighting Essentials
  • Mega Section Header
    .t-mega-section-hdr-static
    36px / 40px
    Lighting Essentials

Paragraphs

  • Tiny Body Sans
    .t-tiny-body-sans-static
    11px / 12px
    Lighting Essentials
  • Small Body Sans
    .t-small-body-sans-static
    12px / 16px
    Lighting Essentials
  • Body Sans
    .t-body-sans-static
    14px / 20px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Large Body Sans
    .t-large-body-sans-static
    18px / 24px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Mega Body Sans
    .t-mega-body-sans-static
    18px / 28px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Huge Body Sans
    .t-huge-body-sans-static
    24px / 32px
    Lighting Essentials

Buttons

  • Button
    .t-button-static
    14px / 20px
    You know the cozy towel you always reach for after your shower? It officially has some competition.
  • Button Large
    .t-button-large-static
    12px / 20px
    Lighting Essentials