Hulu Brand Guidelines
Hulu Brand Guidelines
Hulu Brand Guidelines
GREEN
GUIDE
2
CREATIVE
GUIDELINES
Global Design Principles Tone of Voice
Design Toolkit
Trademarks Campaigns
Color Time to Have Hulu
Hulu Green Culture Campaigns
Typography
Iconography
Grids Evergreen Brand
Vessel Social
Illustration Email
Marketing Web
Swag
Product Design
Motion Toolkit
Motion Theory
Network Ident System
Promo Structure
4
Orwell fan?
Dystopian futures?
GLOBAL
DESIGN
PRINCIPLES
X.X
1.0 Global Design Principles 8
Stories connect us. With each 1 2 We are all about the true TV Lover.
other and with the world. We truly We get them, like a good friend. We
understand the power of a great Always Delightfully know how passionate they are for TV,
story, and always put it first. a story. human. so everything we do is approachable,
warm and delightful.
TV for
TV people.
Empowering everyone to
discover, share and celebrate
the stories that connect us.
3 4
There’s always been a little
rebelliousness in our DNA, and we
Do it Simply We are the ‘skinny jeans’ of TV.
can’t help but let it out. We entice, different. essential. Your great value staple that makes your
life easier. Utterly essential – stylish,
provoke and instigate people with
comfortable and infinitely adaptive.
bold ideas and behaviors – but all
with good fun.
2.0 9
DESIGN
TOOLKIT
2.0
X.X Design Toolkit 10
Overview
ABC
Logo Lockups Color Typography Iconography
Trademarks
2.1
X.X Trademarks 12
Hulu Product
A/V Open
2.1
X.X Trademarks 18
X
2.1 Trademarks 19
Color
X.X
2.2 Color 22
Hulu Green
2.2 Color 24
Secondary Green
Secondary Green is used sparingly #29A869
in digital creative. It is to be used in
combination with white or very light R 41
colors. Unlike our hero green, this G 168
meets color contrast accessibility B 105
standards.
X.X
2.2 Color 25
Color Worlds
Overview
Background
ATMOSPHERIC BLACK
SHOW COLOR
Where to use
• Product experience
• Brand campaigns
• Webpages
• Performance marketing banners
• Social
2.2 Color 28
Show Time Content color adds depth and personality to our creative.
Content Color This is present in both Product and Marketing design.
Show Time Vessels and gradient glows in Marketing should match the color that is
Content Color assigned by Hulu UI.
You can determine the correct color by using a browser extension such
as Colorzilla that allows you to eyedrop the color in our ui. Pick from the
horizontal bar below the key art on web to get the correct value.
2.2 Color 30
Show Time If you are featuring photos that are not used in Hulu UI, such
Content Color as episodic stills, please pick the most dominant color from
within the photo to use for The Vessel and gradient glow.
Examples below.
2.2 Color 31
Background
HULU GREEN
Where to use
• Hulu + Live TV
2.2 Color 32
Background
WHITE
SECONDARY GREEN
Usage
• Internal and B2B presentations
• Recruitment webpages
• Product design
2.2 Color 33
Typography
X.X
2.3 Typography 35
Graphik Re
36
Graphik Reg
Typeface Hulu uses the Graphik type
family in all applications.
Graphik Bo
Google Slides
When using Google Slides, use Proxima Nova.
Vendors
GRAPHIK B
Coordinate with Commercial Type on
purchase of the appropriate license for their
project (e.g. Web, App, Desktop, etc.)
X.X
2.3 Typography 37
Where to use
• Brand campaigns Weight Leading Tracking
HEADLINE
• Evergreen brand creative
• Performance marketing Ems Percent
Conversational
Headline
Bold 115% -18 -2%
Core
Examples
Where to use
• Hulu + Live TV Weight Leading Tracking
SPORTS HEADLINE
Ems Percent
ENTERTAINMENT
HEADLINE
Bold 85% -20 -3%
Active
Examples
Headline Emphasis
Graphik Bold Graphik Bold Italic
Inside Vessel Inside Vessel
HEADLINE EMPHASIS
Graphik Bold Graphik Bold Italic
All Caps All Caps
Inside Vessel Inside Vessel
2.3 Typography 43
Narrative
Examples
HEADER
Always center align typography Contain text and images within Vessels. Type interacts with Combine typography that sits both inside
to The Vessel. iconography to create direction. and outside The Vessel to add interest.
2.3 Typography 44
HEADLINE
Graphik Light
All Caps
H E A D L I N E
Graphik Light
All Caps
Inside Vessel
Cinematic
Examples
T H I S I S T H E E N D
2.3 Typography 46
Typography
DON’TS
RITE THE
W
FEEL THE HEAT KEEPING SECRETS
FUTURE
Don’t rotate typography. Don’t use multiple content colors Don’t use the dimensional glow
on typography. on typography.
EVIL TAKES MANY FORMS DOCTOR SLEEP SAME KING, DIFFERENT THRONE
Don’t use outlined text over imagery. Avoid blocking key features and Don’t match typography
faces with typography. color to Vessel.
2.4 Design Toolkit 47
Iconography
2.4
X.X Iconography 48
TIME TO
CATCH UP
Grids
X.X
2.5 Grids 53
Don’t underestimate
the power of the grid.
A simple, flexible system
that aligns Hulu on
all platforms.
2.5
X.X Grids 54
16
Define the aspect ratio of the format. Use the aspect ratio to create a 1:1 grid. 16 units across by 9 down. Then multiply the grid units equally to ensure the grid is dense enough
and creates a flexible design canvas.
Digital Landscape
Aspect Ratio: 16:9
Social 1080x1080 Grid: 48 x 27
Aspect Ratio: 1:1
Grid: 30 x 30
Vessel
2.6
X.X Vessel 59
The Vessel.
Bringing our key motif to
life and using it to celebrate
everything Hulu.
2.6
X.X Vessel 60
The CIA?
85,000 shows THE SAGA
1980s Los Angeles? and movies.
It’s kind of a big deal.
CONTINUES
2.6
X.X Vessel 62
Ready to watch?
LET’S GO
X.X
2.6 Vessel 63
196px
231px
3840X2160
Min corner radius: 26px
Max corner radius: 120px
1920X1080
Min corner radius: 13px
Max corner radius: 60px
1080X1080
Min corner radius: 13px
Max corner radius: 30px
Billboard 40x12 ft
Min corner radius: 1.5”
Max corner radius: 11”
904px 904px
Regular Heavy
Use primarily for evergreen brand, Use primarily for promoting sports
Hulu Originals, and general on Hulu + Live TV.
entertainment properties.
The stroke width of The Vessel is
The stroke width of The Vessel is longest side divided by 50.
longest side divided by 100.
Vessel width: 904px
Vessel width: 904px Stroke weight: 18pt
Stroke weight: 9pt
X.X
2.6 Vessel 68
Stroke Weight
Examples
Regular Heavy
Clean and concise. Attitude and impact.
2.6 Vessel 69
X
X
HEADER HEADER
90% X
70% X
Vessel
DON’TS
Don’t overlap Vessels. Avoid picking a color that doesn’t Avoid using heavy glows that
relate optically to the artwork. compromise the artwork.
JUSTICE
Sore throat?
Seeing double?
Don’t match typography and icons Avoid blocking key features and Don’t use multiple colors
to Vessel color. faces with The Vessel or glow. in same execution.
2.7 Design Toolkit 74
Illustration
75
2.7
X.X Illustration 76
PRODUCT DESIGN
80
X.X
3.0 Product Design 81
Create confident hierarchy. Let the copy sing. Elevate Originals. Use color purposefully.
Keep layouts Simply Essential and focus Our copy is Hulu’s voice. Convey our Originals are part of our secret sauce. Use Help immerse users in our content and
on conveying one message at a time. approachable personality by making room Hulu Green and The Vessel to help them stand communicate the depth of the Huluverse.
This helps the Hulu experience feel clear, for powerful headlines and playful statements. out from our catalogue of content. Use color purposefully to highlight elements,
intuitive and easy to navigate. guide the user, and create atmosphere.
4.0 83
MOTION
TOOLKIT
4.1 Motion Toolkit 84
Motion Theory
4.1
X.X Motion Theory 85
Network
Ident System
X.X
4.2 Network Ident System 88
Available Ratios:
16x9 (1920x1080)
4K (3840x2160)
1x1 (1080x1080)
4x5 (1080x1350)
9x16 (1080x1920)
Network ID:
Hulu Landscape
4.2 Network Ident System 91
Network ID:
Hulu Originals
Landscape
4.2 Network Ident System 92
Promo
Structure
4.3 Promo Structure 94
Promo:
Licensed Single Show
Social - Sub Acq
4.3 Promo Structure 95
Promo:
Licensed Multi Show
Social - Sub Acq
4.3 Promo Structure 96
Promo:
Premium Add-On
Multi-Show / Retention
4.3 Promo Structure 97
Promo:
New this Month
Sizzle
5.0 98
TONE OF VOICE
X.X
5.0 Tone of Voice 99
Always a Story
Principle 1
What it
means
Use your writing to tell a story –
or start one the reader can finish.
Example
OOH Hold your breath.
Be unexpected, conversational.
Thrillers on Hulu
Write something that moves people.
Delightfully Human
Principle 2
What it
means
We’re nice people. So we keep
things personal and inclusive.
Example
Sign Up Welcome to the family.
Our aim with our TV, and our copy,
Completed
Now sit back and get ready
is to find connections through to be seriously entertained.
culture, intelligence and emotion.
And we love all TV fans equally –
so no judgements.
Do it Different
Principle 3
What it
means
Be unashamedly Hulu.
We follow our own path. It’s an
Example
New Series This is not a drill.
optimistic, charming and witty one.
Teaser
All-new Hulu originals have landed.
That loves to be just a little bit cheeky.
Simply Essential
Principle 4
What it
means
Make every word count.
Punchy statements. Clear CTAs. Bold lines.
Example
Renewal Notice It’s renewal time.
Got all the Hulu you need? Or thinking
This is a waffle-free zone. about treating yourself to ad-free?
Our team will be happy to help you
What it That we sacrifice clarity or personality in find your perfect Hulu.
doesn’t order to reduce word counts. Replacing
necessary explanations with jargon that
can confuse people.
5.0
X.X Tone of Voice 105
Totally
Volume 1 Example You just leveled-up in
OOH
the entertainment game.
Hulu Cancelled
Subscription
Hey, Brad there’s no
hard feelings here.
But if you ever want to come back,
Who we are most of the time. we’ll welcome you with open arms.
Think our punchiest headlines,
witty storytelling and statements
that make people think twice.
Tweet Looking for spies?
Great outfits? A killer
cast? All new #KillingEve
Friday 9pm.
5.0 Tone of Voice 107
Getting Down
Volume 2 Example So, what are you into?
Customer
Gore-fests? Sass? All the drama? We won’t
Email
judge. Sharing what you love helps us to
to Business
keep your account safe, and means we can
recommend more shows and movies you’ll
really love.
CAMPAIGNS
6.1 Campaigns 110
Time to
Have Hulu
111
8.1 112
6.1 Time to Have Hulu 113
WEB BANNERS
6.1 Time to Have Hulu 114
LANDING
PAGE
6.2 Campaigns 115
Culture
Campaigns
6.2
X.X Culture Campaigns 116
X
X.X
6.2 Culture Campaigns 118
EVERGREEN
BRAND
7.1 Evergreen Brand 120
Social
7.1
X.X Organic Social 121
Text Only Single Show - Full Bleed Single Show - Non Full Bleed Multi Show
Used when partners ask that messaging not be
overlaid onto their key art.
7.2 Evergreen Brand 125
Email
X.X
7.2 Email 126
Hulu Originals Launch Multi Show - Disney Bundle Multi Sports + Schedule Multi Show - Gif
7.3 Evergreen Brand 128
Marketing Web
7.3 Marketing Web 129
Swag
7.4 Swag 132
7.4 Swag 133
7.4 Swag 134
7.4 Swag 135
7.4 Swag 136
7.4 Swag 137
Stickers
X.X