logo-type

web style guide


Color

  • #3b3b3b
  • #525252
  • #6e6e6e
  • #ebebeb
  • #f9f5f3
  • #ffffff
  • #eb5630
  • #fabf99
  • #1c76b5
  • #d7edf6
  • #9abd47

Typography

tag sample use cases
h1 Headline 1 Brandon Grotesquie Bold 64pt Large, Initial Caps (one per page)
h2 Headline 2 Brandon Grotesquie Bold 48pt Large, ALL CAPS (used sparingly, major header)
h3 Headline 3 Brandon Grotesquie Bold 36pt Medium, ALL CAPS (frequently used sub headers)
h4 Headline 4 Brandon Grotesquie Bold 28pt Small, ALL CAPS (cards titles, sidebar filer menu titles)
h5 Headline 5 Brandon Grotesquie Bold 28pt Small, Initial Caps (Bottom of page copy heading)
h6 Headline 6 Brandon Grotesquie Bold 32pt ALL CAPS (account page subheads, sidebar callouts)
body Food truck tumeric palo santo, gochujang brooklyn chartreuse wolf PT Sans Regular 24pt All Body Copy

Iconography

Buttons

  • CTA Button

    Blue outline, blue text
    Hover State: fill blue, reverse text to white
    Usage Ex: Homepage hero, form submissions (reverse for footer)

  • Transaction Button

    Blue fill, white text
    Hover State: fill white, blue text
    Usage Ex: Product page “add to cart buttons”, checkout

  • Minor Button

    Gray outline, Gray text
    Hover State: Fill grey, white text
    Usage Ex: Addresses Page

  • QTY Button

Links