Visual Identity
Guidelines
October 17, 2016
Colors
NEUTRAL PALETTE
Usage Notes: Our neutral palette comprises a White Grey Gray Light Grey Dark
#FFFFFF #96908C #F2F1EF #2F3237
family of greys. The greys are not based on the Audience: all Audience: all Audience: all Audience: all
same root hue (i.e. they are not shades and tints of Role: Text Only
a “middle” grey).
Please use the specific hex code when using these colors.
GENDER NEUTRAL PALETTE
Usage Notes: The gender neutral palette contains Watermelon Mint Dark
#F05D61 #00A19A
CTA and accent colors that are ostensibly gender Audience: Audience:
agnostic. They should be used on any project Gender Neutral Gender Neutral
designaged as “Gender Neutral”. Role: CTA Role: Accent
UI PALETTE
Usage Notes: This color palette is used exclusively Blue Turquoise Dark Turquoise
for UX and Product Design. It is not to be used in #0085C4 #1695A3 #0C828F
Audience: All Audience: All Audience: Al
“brand” related creative projects. Role: Link Text Role: Role: Selected UI Text
Selected UI
Control
October 17, 2016 Visual Identity Guidelines 2
Colors
WOMEN’S “OVERRIDE” PALETTE
Usage Notes: The women’s color palette makes one Mint
#00BDB4
simple modification to the Gender Neutral color Audience:
palette. We use the traditional Stitch Fix Mint for all Womens
Women’s specific projects. Role: Accent
Women’s uses Watermelon from the Gender Neutral palette as a CTA
color.
MEN’S PALETTE
Usage Notes: The Men’s color palette stands Butternut Hunter Green Copper Charcoal
#D77F59 #1C453B #97694B #25282D
alone as a sub-brand. The Men’s palette can be Audience: Mens Audience: Mens Audience: Mens Audience: Mens
complemented with the Neutral Palette. Role: CTA Role: Accent Role: Accent 2 Role: Accent 3
October 17, 2016 Visual Identity Guidelines 3
Logotype
The Stitch Fix logo is refined, with an elevated, CLEARSPACE
fashion-forward feel. The all-caps serif typeface of
the logotype creates a sophisticated
and credible impression. X X
2X
X X
COLOR TREATMENTS
The logotype should always be
set in: Gray Dark
MINIMUM SIZE REQUIREMENTS
screen, 12 pixels
print, .075 inches
October 17, 2016 Visual Identity Guidelines 4
Logo Lockup: Tagline
The following logo lock-ups show the CLEARSPACE
proportional relationship between the
logotype and tagline.
X X
2X
Tagline should NOT be used if the logotype is less than 13 pixels high.
TAGLINE ALIGNMENT
MINIMUM SIZE REQUIREMENTS
screen, 13 pixels or higher
October 17, 2016 Visual Identity Guidelines 5
Primary Logomark
The mark is a simple, stylized unique icon that ties CLEARSPACE COLOR TREATMENTS
to the modern stitch pattern. It loosely references
the “F” and “X” in “Fix” and offers a modern Y Y
interpretation of a stitch.
The primary logomark is filled in, thereby granting
it much more visual weight in a layout. Therefore, Hi-Contrast:
this mark is used primarily as a stand-alone hero Gray Dark
element. Y
Typical uses of this mark include packaging,
social media avatars and profile pics and
advertisements.
Y Y Gender Neutral:
Dark Mint
MINIMUM SIZE REQUIREMENTS
screen, 33 pixels
print, 0.4583 in
Womens: Mint
Mens: Mint
October 17, 2016 Visual Identity Guidelines 6
Secondary Logomark
The secondary version of our mark is open and airy, CLEARSPACE COLOR TREATMENTS
allowing it to brand a layout without becoming a
distracting center of focus. Y Y
Further, this mark serves as a template for various
badges and icons used throughout our digital
collateral. Hi-Contrast:
Gray Dark
Y
Y Y Gender Neutral:
Dark Mint
MINIMUM SIZE REQUIREMENTS
screen, 33 pixels
print, 0.4583 in
Womens: Mint
Mens: Mint
October 17, 2016 Visual Identity Guidelines 7
Logo Misuse
Examples of what not to do.
Do not use unsanctioned colors. Do not stretch, warp, or distort the Do not rotate the logotype.
logotype.
STITCH FIX
Do not recreate the logotype by
Do not stack the logotype. Do not use unsanctioned lockups.
typing it.
Do not stretch, warp, or distort the Cropping is ok, but do not crop logo Do not remove ™ symbol.
logomark. more than 1/4 of our logomark.
Do not rotate the logomark. Do not use unsanctioned Do not resize the logomark
colors. pattern.
October 17, 2016 Visual Identity Guidelines 8
Typeface: Headlines
Grad should be used for: GRAD—REGUL AR
• all non-body copy larger than 12pt / 12px
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
FOUNDRY
Marc Simonson Studios
http://www.marksimonson.com/fonts/view/grad
GRAD—ITALIC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
GRAD—BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
October 17, 2016 Visual Identity Guidelines 9
Typeface: Body Copy
Brandon Text should be used for: BRANDON TEXT—LIGHT
• all body copy
• any copy smaller than 12 pt / 12 px ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
FOUNDRY
HVD Fonts
http://www.hvdfonts.com/#189-brandon text
BRANDON TEXT—REGUL AR
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
BRANDON TEXT—REGUL AR ITALIC
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
BRANDON TEXT—MEDIUM
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
October 17, 2016 Visual Identity Guidelines 10
Webfont Fallbacks
Stitch Fix’s primary typeface is Brandon. For BRANDON TEXT
digital assets, Brandon is deployed as a webfont.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
This webfont fallback stack ensures Stitch Fix
typography remains as branded and consistent abcdefghijklmnopqrstuvwxyz
as possible given the capacity for various email
clients to successfully render webfonts. MOLENGO
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
GILL SANS
ABCDEFGHIJKLMNOPQRSTUVWVXYZ
abcdefghijklmnopqrstuvwxyz
CALIBRI
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
TREBUCHET MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
October 17, 2016 Visual Identity Guidelines 11
