classpass-v2-1
classpass-v2-1
classpass-v2-1
Circuit and
Typography Guidelines
Guidelines Color
Illustration and
How We Express
Iconography
Ourselves
Brand Voice
Language and
Communications
Logo + Logotype
custom typeface.
Usage
Use where ClassPass
needs to be explicitly
stated or identified
due to lack of context
ClassPass Logotype 5
Spacing
Space around the
logotype should be
equal to the height
of the character “c”
ClassPass Logotype 6
The Idea:
Steps
The longest journey.
Not hitting snooze
again. Your first 6am
workout, your third,
your hundredth.
A new experience,
a weird one, a
challenge. It all starts
when you decide to
take that step, even
if you don’t know
exactly where it will
lead you.
Logo Usage
Use the logo when
applications are
heavily ClassPass
branded or implied.
ClassPass Logo 8
Spacing
Space around the logo should be equal to
.25 of the height.
ClassPass Logo 9
Usage
In cases when the
logotype and logo
both need to be
present
ClassPass Lockup 11
2.5 h
Spacing
Space around the The space between The size of the logo
logo should be equal the logo type and the mark is 2.5x the height
the height of the logo mark is the height of the character “c”.
character “c” of the character “c”
ClassPass Lockup 12
Part 2: Guidelines 13
Guidelines
ness, and then be on its way.
Typography &
layout grids, plus increments of 4pt on
type sizing and leading to streamline
information and further inform hierar-
chy. These exact rules can flex, but,
Layout
if they do, there should always be a
clear reason why.
Circuit
A circuit is the path whose start
and end points connect to create
a continuous loop — and Class-
We connect to ourselves to find
what we need, whether that’s an
intense class or a well-deserved
And we connect to others in
class, finding motivation from
instructors and friends. It’s a
Pass is all about connection. recovery. continuous process that reminds
us that we aren’t on this journey
alone.
BCDEFGHJKLM 15
PQRSTUVWXY
bcdefghijklmno
rstuvwxyz0123
Use Circuit Outline
to show potential,
quiet down, convey
empathy, add texture
to imagery, add
a bit of interest to
comms.
BCDEFGHJKLM 16
PQRSTUVWXY
Use Circuit Fill to
show fulfilled potential,
bcdefghijklmno
cut through noise,
motivate someone to
try something new, add
some oomph, shout
the ClassPass brand.
rstuvwxyz0123
Display Typeface: Circuit Display Typeface: Circuit Outline 17
ABCDEFGHIJKLMNOP ABCDEFGHIJKLMNOP
QRSTUVWXYZ QRSTUVWXYZ
abcdefghijklmnopqrs abcdefghijklmnopqrs
tuvwxyz tuvwxyz
0123456789 0123456789
!@#$%^&*(){}”-–— !@#$%^&*(){}”-–—
Use Circuit Bold to motivate someone to to shout out loud the Use Circuit Outline to add texture to imagery, of interest to comms
show fulfilled potential, try something new, ClassPass brand. show potential, quiet as a graphic pattern, pieces.
cut through noise, add some oomph, and down, convey empathy, or to simply add a bit
Circuit Guidelines on a page Circuit Outline sizing 18
Circuit is a display
typeface designed Circuit S 72pt 36pt
for 36pt and above Circuit Outline Small Minimum point size for Minimum point size for
for 72pt–160pt Circuit Outline Circuit Bold
Circuit M
Outline is for
supplemental
points Circuit Outline Medium
for 160pt–320pt
Circuit L
USE ALL CAPS
SPARINGLY
1 5
Here’s a teeny Spans of time are “That’s it.”
2
collection — to marked as such
3
be clear, these are 2010–2014. From feet' to in"
details — of the
4
small type and Check-in shows
layout principles a hyphen :)
we should always
adhere to. 6
Grids Baseline Grids Paragraph Rags
We love grids. Throughout this document, we’re All this leading (vertical spacing shares the same Good “rags” are hard to achieve, but generally
using a 6-column grid. Our digital product uses math — in multiples of 4 — and sits on a baseline follow the simple pattern of in-out, which can
an 8-column grid. grid. This way, type aligns across multiple columns. generate a nice rhythm.
1. 2. 3. 4. 5. 6.
Make sure to use m dash (shift+op- n (option+dash) dash A hyphen These are quotation Keep a nice tight
apostrophes, not foot tion+dash) signifies signifies passage of marks. And then column. Try to avoid
marks a supplemental time foot marks and inch going over 11-13
thought that’s not a marks. We respect words per line. It
complete sentence. the difference :) exhausts the eyes!
We use spaces, per
AP Style.
Part 2: Guidelines 22
Color Palette
Aside from that, we use colors in UI,
in graphs and charts and throughout
illustration.
Black
#000000
ClassPass Blue
#0055ff
White
#ffffff
Core Palette: #251b9e #33333 24
Extended
—
For graphs,
charts, and simple #ff3d3d
illustrations, we
use this family
of blues #104aff #555555 Core Palette:
Accents
—
For bold pops of
color — a line of growth
across a bar chart,
in illustrations — we
#008aff #7f7f7f use these
#44d9cb
#97ccfe #bdbdbd
Iconography &
Illustration
Fuller Illustrations
29
And Patterns
Pattern allows
us to bring to
life apparel,
packaging,
backgrounds and
in the digital
product or
branded pages.
Part 2: Guidelines 30
Imagery Overview
When we want
to show an
experience, we
shoot real people
in real places
doing real things.
It’s about
showcasing the
story, from the
beginning, mid-
dle, and end.
When we want
to clearly explain
something, we
shoot in photo
studios.
Casting showcases
ting should be aof all levels,
fit people
shapes, sizes and color.
mbination of relatable
y-types Usually they look like
your favorite trainer, or
ethnicities.
a person who stands
out in class, or a be-
ginner who’s just try-
ing something for the
group setting,
first time,the
but has the
support of the class
mber of women should
behind her.
greater than the
We aim to show you
mber of men
whattoyoubest
can do on
ClassPass and who
ect our customer.
to learn from, not
who you should be.
Women compromise
80% of our audience
and that split usually
dictates the gender
composition of our
photoshoots.
be
Styling 35
he
Wardrobe and styling
uses contemporary,
seasonal athleisure
and fitness apparel.
ed
Hair & Make-up
Video Overview
39
40
41
Part 2: Guidelines 42
Guidelines
have fun while they’re at it — and we
reflect that through our brand voice.
Focal Our voice isn’t just what we say — it’s how we say
points it. It’s the words, the sentences, the punctuation,
plus the tone, the flow and the feel. Every time we
talk, we should ask ourselves: Who are we talking
to? What do we want them to know? How do we
want them to feel? Depending on those answers,
our tone might change, but our voice? That’s al-
ways the same.
Brand Voice: Focal Points 45
1. Motivate 2. Connect
We give people a reason to act – and we should On ClassPass, you connect with instructors,
always give them a clear way to take an action. with teachers, with classes, communities,
We want to build their confidence and empow- friends and experts. We bond over our shared
er them by staying genuine, clear and true. experiences that take us beyond an app. Talk
like you’d be connecting with a real human
• Offer sincere encouragement. despite the screen that stands between you.
• Be genuine. Skip the saccharine statements
in favor of a deeper connection. • Connecting means we’re relatable. Use first
• Stay positive. Positivity doesn’t mean excla- and second person along with accepted col-
mation points — it means leading with, and loquialisms.
finding, the good in every conversation. • Keep it conversational. Avoid complex
words, flowery sentences or anything that
feels inherently unnatural.
• ...but, don’t be so conversational you’re only
speaking to a chosen few.
• We believe in action – which means we like
to use an active voice.
Brand Voice: Focal Points 46
3. Inform 4. Empathize
We’re experts. And even though we have a Fitness is a journey – and we understand that
wealth of knowledge, we don’t want to talk at it has peaks and valleys. Remember that we’re
you – we want to talk with you, share with you people connecting with other people, support-
and guide you to what you need to know. ing and celebrating the ups (and the downs,
too) without being pushy or preachy.
• Be clear. Give details, and clear and action-
able next steps. • Avoid being prescriptive. We won’t tell
• Tell people what they need to know, not what people how they should work out, what
you think you should say. they should be doing or how they should
• Be relevant! Trim out unnecessary details on be doing it.
focus on what matters. • Connect on a deeper level. Find ways to
• Be honest. That doesn’t mean share ev- personally relate, inserting details or other
erything, all the time. Tell people what they information that resonates.
need to know, aiming to shed light or give • This isn’t about you — it’s about them.
reason to why things are the way they are.
48
Brand Voice: Copy Styleguide 49
• We don’t use the Oxford • In general, we use sentence • We love ‘em! Use
comma case to feel relatable contractions as you see
• Avoid more formal punctu- and title case to indicate fit — it helps communicate
ation like semicolons authority the friendly and informal
• Headlines don’t need punc- • Sentence case: email tone we’re after.
tuation (like a period), even subject lines, landing
if it’s a complete sentence page headlines, social
• Bulleted lists don’t need an headlines
ending period, unless they • Title case: CTAs,
are more than one sentence presentation titles,
long downloadable assets
Brand Voice: Copy Styleguide 51
• Price per month • When numbers are • Use lowercase letters with-
• When talking about our important and should be out punctuation or spacing
membership rates, use “/ communicated quickly, we to denote the time of day
mo.” instead of “/month” don’t write them out and only include minutes
• Slang • When numbers are less if the time is not exactly on
• Use accepted colloquial- important, and are less than the hour. When indicating a
isms, but stay away from ten, write it out time range, use an en dash
hyper-trendy phrases. • Large numbers should (–) without spaces on either
As a rule of thumb, use include a comma, and if side. If both times are in the
phrases and abbrevia- we’re rounding up or same part of the day (am/
tions your parents would generalizing, we can pm), only denote this on the
easily understand. use a + sign last time in the range.
Brand Voice: Copy Styleguide 52
• Use an em dash (—) with • There’s no secret we’re • Character counts can be
spaces on either side enthusiastic, especially of the essence, especial-
when it comes to our ly in product. Use amper-
members or partners sands sparingly and reserve
achieving their goals. But them for in-product modals,
we don’t want to be over- homecards or email subject
ly enthusiastic. Use excla- lines.
mation points for emphasis,
never more than two in the
same paragraph.
Brand Voice: Copy Styleguide 53
• A little can go a long way. • Overall, we keep our lan- • Italics are a great way to
Use emoji sparingly at guage clean. But, we’ve all emphasize a word while
the beginning or end of found ourselves motivat- still maintaining a conversa-
a phrase, and never in ed by language that’s a little tional feel.
place of an actual word. more, well, aggressive. Use
Appropriate channels are cursing in a positive context
key, too. A membership for emphasis.
update will be emoji-
free, but a social caption
or email subject line?
Go for it.
Brand Voice: Copy Styleguide 54
• Let’s look on the bright • We use “they” or “them” • Instead of saying sale or
side of things, and write when referring to other deal, we prefer “offer” or
that way. Keep an eye on people, even if we’re talking “promo.”
words like can’t, don’t, about just one person.
won’t, shouldn’t, and try
to spin things positive.
Questions? 56
ghathaway@classpass.com