Website Style Guide

Logo

Company Logo

Colors

Our colors are fresh and cheerful, connecting to our roots in dairy and setting a tone of delight, charm and simplicity.

 

 

STEADY RED

HEX: EF4141
CMYK: 0, 90, 77, 0

Our logo is in this color. It’s steady and reliable, a consistent thread in the Smith Brothers identity, bringing a fresh modern vibrancy. It’s not meant to overwhelm.

  • Use in type (headers, or accents).
  • Use for grounding elements such as footers.
  • Be mindful not to overwhelm people with this color.
 
#BFE6F9
#DAF1FC
#EDF8FD

100% | 70% | 40% | 20%

EASY BLUE

HEX: A3DBF7
CMYK: 33, 1, 0, 0

This adds a calm, happiness to our brand. Think blue skies!

  • Use for background colors, shapes and lines.
  • Balance with Fresh Cream and Steady Red to avoid overly total blue floods.
  • Avoid use for type as it may be hard to read, unless at large scales.
 

 

FRESH CREAM

HEX: F9F4E7
CMYK: 0, 1, 7, 2

Think dairy and soft landings for visuals and type. This color creates a nice balance to our vibrant Steady Red.

  • Use for background colors and other large areas.
 
#667992
#A7B3C1
#D3D9E0

100% | 70% | 40% | 20%

DEPENDABLE NAVY

HEX: 244063
CMYK: 93, 76, 37, 26

This is our grounding neutral. Dependable because it is easy to read and straight-forward.

  • Use for typography, icons, smaller graphic elements.
On Sale

HEX: EF4141

Seasonal

HEX: A3DBF7

Limited

HEX: FFC759

New

HEX: 244063

Pre-Order

HEX: 244063

Type

Our fonts strike the perfect balance between simplicity, ease and friendliness. Lexand is our workhorse and Skew adds just the right amount of our spirit and nostalgic hint.

Main font, headers, body: Lexend Deca

Accent font: Skew

Web

H1 Lexend Deca / Black / 2.369rem / 37.9px

H2 Lexend Deca / Bold / 1.777rem / 28.43px

H2 SKEW / Bold / 1.777rem / 28.43px

H3 Lexend Deca / Bold / 1.333rem / 21.33px

H3 Lexend Deca / Bold / 1rem / 16px

p Paragraph/Body text example using Lexend Deca Regular / 16px

App

H1 Lexend Deca / Black / 28px

H2 Lexend Deca / Bold / 25px

H2 SKEW / Bold /25px

H3 Lexend Deca / Bold / 20px

H3 Lexend Deca / Bold / 16px

Navigation

navigation styles

Footer

footer styles