Style Guide

Colors

The barre3 brand uses shades of gray and lots of white space, complemented by pops of orange for emphasis. When more color is needed, shades of blue are brought in to contrast with the orange.

Primary Colors

#EF4824

Pantone 172C
C0 M86 Y97 K0
R240 G76 B38

dark gray

#404041

Pantone Cool Gray 11C
C48 M36 Y24 K66
R77 G79 B83

medium gray

#808284

Pantone Cool Gray 7C
C0 M0 Y0 K37
R173 G175 B178

light gray

#D1D2D4

white gray

#F1F1F2

white

#FFFFFF

Secondary Colors

dark blue

#194A68

bright blue

#56A9AF

Things to Avoid

Black

Always use dark gray instead of black

Never place orange on top of dark gray

Typography

Barre3’s typography is characterized by plenty of uppercase letterspaced Futura, along with a mix of Futura’s other weights, sizes, and styles. Handwritten and script accents are used for notes and special labels.

Titles

Regular

Futura Light

size: 45px | spacing: 5px

Large

Futura Light

size: 55px | spacing: 7px

Small

Futura Light

size: 38px | spacing: 5px

Regular Alt

Futura Book

size: 22px | spacing: 3px

Large Alt

Futura Light

size: 30px | spacing: 3px

Small Alt

Futura Book

size: 19px | spacing: 3px

Regular

Futura Condensed Medium

any size above 18px

Light

Futura Condensed Light

any size above 18px

Bold

Futura Condensed Bold

any size above 18px

Subtitles

Regular

Futura Book

size: 17px | spacing: 1px

Large

Futura Book

size: 20px | spacing: 1px

Headers

Regular

Futura Book

size: 15px | spacing: 2px

Large

Futura Book

size: 17px | spacing: 2px

Small

Futura Book

size: 14px | spacing: 1.5px

Subheaders

Regular

Futura Book

size: 15px | spacing: 1px

Large

Futura Book

size: 16px | spacing: 1px

Links

Futura Condensed Medium

size: 18px | spacing: 1.5px

Futura Condensed Medium

size: 22px | spacing: 1.5px

Futura Condensed Medium

size: 16px | spacing: 1.5px

Any Futura

most links

Any Futura

subtle links

Any Futura

header links

Any Futura

footer links

Accents

3

Futura Light

for numbers

Bold

Futura Heavy

labels/accents

Script

Felt That

labels/accents

Crossthrough

Futura Condensed Medium

section divisions

Body & Notes

Regular

Futura Book

size: 13px | spacing: 1px

Small

Futura Book

size: 10px | spacing: 1px

This is a sentence.

Futura Book

size: 15px | spacing: 1px

Things to Avoid

lowercase

lowercase titles

This is a sentence.

Futura Condensed in sentences

Italic

Futura Condensed Italic

orange body copy

Accent

script size over 32px

This is a sentence.

no letterspacing

Buttons

Barre3’s buttons have squared-off edges and plenty of padding. Button text is always uppercase with exaggerated letterspacing. All rollovers have a soft gradient animation.

Primary Buttons

padding: 17px 18px

padding: 17px 18px

Secondary Buttons

border: 1px

border: 1px

Forms

Barre3’s forms are visually light and modern. They are customized to blend in with the rest of barre’s style by using thin lines, flat color fields, and interaction-triggered gradients.

Primary Forms

Secondary Forms

Photography

Barre3’s photographic style can be summed up in the attributes listed below. All photographs should hit on at least two of the attributes within a category.

Exercise

Photography 5

captured moment

Photography 8

movement

Photography 10

strength

Nourish

Photography 6

simplicity

Photography 4

balance

Photography 7

humanity

Connect

Photography 9

relatability

Photography 3

composition

Photography 11

sincerity

Elements

The barre3 brand has several signature elements, such as flat and tonal gradient backgrounds, typographic combinations, and triangles as a decorative elments. Here you’ll see some examples of typical uses of these elements.

Backgrounds

Flat color

flat color fields

uppercase letterspaced Futura

Text over image

text floating on images

uppercase letterspaced Futura

Gradient

tonal gradients

orange as a significant element

Typographic Combinations

Barre3 gave me the strength to dig deep and find my health again.

Beth Porter

Frisco, TX

simple icons

mix of Futura and accents

7 day logo

triangles

orange as a significant element

Circles

thin lines

circles as a highlight