#B3Anywhere

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 e8d63cf898c82ad0f5925b344674e0fcfc7f793ce35e5f78783736e54f651ffb

captured moment

Photography 8 d2680a27e3050171f66784b3264c7a41f8fe3c4c390ab72ca5484cb004ed35fb

movement

Photography 10 7dfe9b51b48bb31eb2fb5ff1a8d43ee6ecc2a895e8ff9e20fa6e933933c215e9

strength

Nourish

Photography 6 e14a4f4f9d6ee06e0a7d20417c01e6f149c9fa0a17dd9b6a3adfe30705ce118d

simplicity

Photography 4 84d20560ad045e16971d7f58f98749e4579cbb51cd2b3462f74f39b164ce166f

balance

Photography 7 a52d47ad264b6e5ee04183cc8aaa156c83ddf2a6720890675df8f5d4f1b9a54e

humanity

Connect

Photography 9 3c23658aed1f0a6343b63b1a1b4baae2b1c9b4bfcf6c03a15dff6e3d791d67b8

relatability

Photography 3 cda671c5da3ef10c925f2ab811ad11914389f7b7cabef95c0aafc94047bdac6b

composition

Photography 11 12dc0d2271d7a85025f79dc3268f2138b330451d3e142b6ed711863f0b33daab

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 b87a9af9ab3359857977b446ffb57e9952f2923e9889784984ea22f0dec96f9c

flat color fields

uppercase letterspaced Futura

Text over image 5c264fc9127af4f90da20763afd20480e0102d98200e2c1068cb8003f2467748

text floating on images

uppercase letterspaced Futura

Gradient 107b091dbf2b805eae67457e625f03564454735fe032e2fae3970ecc3e26ae56

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 7a97842754e759f84803c0a88bf3ce13fe20e61990658adbee697fd68626bbf6

triangles

orange as a significant element

Circles 1d8a37333b7789e76c2fe51c2adf39fbcd6ea03ff9173bd6fe96190b61c91cfa

thin lines

circles as a highlight