BIG

GREEN
GUIDE
 2

Welcome to the Big Green Guide.

This is your roadmap (and tour guide) to
everything you need to know about the
Hulu brand.
You’ll find plenty of info in here to help
you bring our brand to life. To access
downloadable assets, you can go to to
our toolkit site, This Is Hulu.
Stream on!
BRAND
3

CREATIVE
GUIDELINES
7 Global Design Principles 32 Typography 55 The Vessel 76 CTAs
34 Typeface 57 Concept 77 Hulu Originals Static CTAs
35 Type Expressions 58 Behaviors 79 Hulu Originals AV CTAs
9 Logo
44 Don’ts 60 Creating The Vessel 80 Secondary Streaming CTAs
11 Attributes
61 Corner Radius
12 Safe Zone
64 Stroke Weight
13 Colorway Matrix 45 Iconography 82 Static Toolkit
66 Type Padding
14 Logo & Lockups 47 Icon Types 84 Layout Styles
67 Vessel Glow
18 App Icons 48 Marketing Icons 85 Multi Show Layouts
68 Vessel and Image
86 Library Layouts
69 Don’ts
19 Color 50 Illustration
21 Hulu Green 51 Overview 87 AV Toolkit
70 Grids
22 Primary Colors 53 Style 89 Motion Theory Principles
72 Grid Principles
24 Color Worlds 91 Network ID
73 Grid Construction
92 Network IDs
94 App Open
95 Promo Structures
 4

Orwell fan?
Dystopian futures?

Night Off? SEASON 3

We’ve created a fully adaptive 5

unifying system that unites Marketing

and Product Design.
At the heart of the design system is The Vessel. 6

Born from our name and logo.

1.0 7

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

LOGO
2.0
X.X Logo 10

We use our logo with pride

and fill it with meaning.
2.0
X.X Logo 11

Attributes The Hulu logo is the primary visual

icon of our identity. The stylized,
mono-weight lower-case letter
forms should never be altered or
compromised.
This and other toolkit assets can
be downloaded here.
2.0 Logo 12

Logo Safe Zone The logo’s safe zone is equivalent to the

height of the ‘u’ on all sides.
2.0 Logo 13

Logo
Colorway Over Imagery Over Gradient Over Green Over Black
Matrix

Green Logo
This is the preferred colorway. X
Use this colorway wherever
possible, unless the logo
conflicts with the background.

Badge Logo
For use on backgrounds where X X
the green logo would not be
legible without the black vessel.

White Logo
For use as a bug in AV.
X X X
Typically set at 70% opacity.
2.0 Logo 14

Primary Logo The Hulu logo is the primary visual

and Logo icon of our identity, but it is also paired
Lockups with other elements depending on the
placement. Below are the most common
ways in which our logo shows up.

Hulu Logo Hulu Badge Hulu Originals Hulu + Live TV

X.X
2.0 Logo 15

Hulu Originals Examples

Logo Lockups

The Lockups The Badge

The Hulu Originals logo lockups are Used in Product to denote exclusive
comprised of the Hulu logo and the Hulu Originals, this badge ensures
word “Originals” set in Graphik. legibility regardless of the background.

Hulu Product

A/V Open
2.0 Logo 16

Hulu + Live TV For these lockups, the green outer frame Examples
Logo Lockups is Hulu green with the brightness reduced
to 70%. Similarly, “+ LIVE TV” is not pure
white, but a light grey. Both were done to
ensure the Hulu logo is the most prominent
visual element of the lockup.

Primary Lockup Secondary Lockup

The primary logo lockup is Use the secondary logo lockup only
preferred in most situations. when horizontal space is limited and
the primary lockup would not fit.

Primary

Secondary
X.X
2.0 Logo 17

Logo Lockups There are different lockup formats depending

on the type of partnership. The Hulu and partner
logos should always have equal visual weight.

Content Add-on Partnerships One-off Partnerships

X
2.0 Logo 18

App Icons App icons are individually designed,

based on specifications, but the light
source in the gradient should always
come from the top right to align with
gradients in our UI.

The following schematic provides

guidance on the logo sizing.
3.0 19

COLOR
3.0
X.X Color 20

Color is how we tell stories and

turn heads. We’re no wallflower.
Our green is strong enough to
melt through your screen.
3.0 Color 21

Hulu Green Green is good. It sets us apart,

and it’s the first thing you think
of when you think Hulu.

Hulu Green
3.0 Color 22

Primary Our primary colors form the base

Colors of our design system.

Hulu Green Hulu Black Dynamic Gradient

Our primary brand color #1CE783 Our secondary color is #040405 Used as a background #040405 to #183949
represents the fresh used only in combination to create depth and bring
distinctiveness of our R 28 with green. R 4 a cinematic quality. Light source generally
brand and stands out G 231 G 4 comes from the bottom
from more traditional B 131 B 5 right for Marketing.
entertainment palettes. For Product Design, it
C 76 C 60 generally comes from
M 0 M 40 the top right.
Y 70 Y 40
K 0 K 100 Print-specific files
available here
PMS 7479 C PMS Black C

Secondary Green
Secondary Green is used sparingly. #29A869
It is to be used in combination with
white or mid-tone colors. Unlike our R 41
hero green, this meets color contrast G 168
accessibility standards when combined B 105
with lighter colors.
PMS 7480 C
3.0
X.X Color 23

But there’s more than green.

Three unique color worlds
let us tell a variety of stories
as only Hulu can.
X.X
3.0 Color 24

Color Worlds
Overview

Show Time Clean Green Business Time

Show Time is bold, atmospheric and Green is good. It sets us apart, When we want to be clear and
immersive. The color world we use most and it’s the first thing you think inviting. Use it when we talk about our
of the time as we show off our content. of when you think Hulu. business, our culture and our teams.
3.0 Color 25

Show Time Use this color world for showing off

Overview our wide range of content.

Background
ATMOSPHERIC BLACK

Text and graphics

HULU GREEN WHITE

SHOW COLOR

Where to use
• Product experience
• Brand campaigns
• Webpages
• Performance marketing banners
• Social
3.0 Color 26

Show Time Content color adds depth and personality to our creative.
Content Color This is present in both Product and Marketing design.

User Interface Marketing

The Vessel is used as a selection state and uses an algorithm to match the color to the key art. Similar to what we see in Hulu UI, color can be integrated into Marketing content through The Vessel
The gradient glow overlay increases the legibility of the information presented over the art. and a gradient glow overlay. The glow overlay is used to increase legibility of text or title treatments.
3.0 Color 27

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.

In this example, we chose to override the color for Creed because it had a
brown that was similar to Gretel & Hansel. This can be done in order to not have
2 similar colors side-by-side.
3.0 Color 28

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.
3.0 Color 29

Clean Green The use of green creates

Overview ownership and punctuates our stories.

Background
HULU GREEN

Text and graphics

BLACK WHITE

Where to use
• Hulu + Live TV
3.0 Color 30

Business Time Business Time is used across

Overview more formal touch-points. Our
secondary green can be used on a
white background to meet contrast
accessibility standards.

Background
WHITE

Text and graphics

BLACK

SECONDARY GREEN

Usage
• Internal and B2B presentations
• Recruitment webpages
• Product design
3.0 Color 31

Usage The main color world is Show Time,

Proportions used around 60% of the time. Clean
Green allows us to deliver a striking
brand presence when needed. The
Business Time color world should
be used more sparingly, making up
a very small part of the identity.

Show time: 60% Clean Green: 30% Business time: 10%

4.0 32

TYPOGRAPHY
4.0
X.X Typography 33

Typography is our visual voice.

Bringing range, nuance and
attitude to what we have to say.
X.X
4.0 Typography

Graphik Re
34

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
4.0 Typography 35

Type Expression Our typographic system is bold and

Overview flexible. Four distinct typographic
expressions allow for range in tone.

Core Active Narrative Cinematic

Our everyday expression. Dynamic and filled with energy. Combines words, images and Elegant and singular. Use it to
It’s simple, accessible Use it to represent Hulu + Live TV. The Vessel to tell engaging visual embellish dramatic imagery
and contemporary. stories about our content. with messaging.
4.0 Typography 36

Core This is our everyday expression.

Overview Clear hierarchy of information
ensures ease of use for more
functional moments in our brand.

Where to use
• Brand campaigns Weight Leading Tracking

HEADLINE
• Evergreen brand creative
• Performance marketing Ems Percent

Bold 90% -25 -3%

Conversational
Headline
Bold 115% -18 -2%

Section Header Regular 115% -18 -2%

Subhead Regular 125% 0 0

Body Regular Auto 10 +1%

+/- based +/- based
on size & on size &
legibility legibility
4.0 Typography 37

Core
Examples

HEADLINE Conversational Headline Section Header

Use for shorter headlines which aren’t a full sentence, Use to convey Hulu’s voice in longer headlines which Use in instances where there are multiple
declarative statements, or tune-in messaging. are full sentences. Sentence case should be used here. headers (i.e on a landing page). These usually
come after / below a bold headline.
4.0 Typography 38

Active A mix of Super Italic, Bold, and

Overview Medium font weights is used
to create dynamic and active
expressions across different types
of Live TV messages.

Where to use
• Hulu + Live TV Weight Leading Tracking

SPORTS HEADLINE
Ems Percent

Super Italic 85% -20 -3%

ENTERTAINMENT
HEADLINE
Bold 85% -20 -3%

News headline Medium 115% -10 -1%

4.0 Typography 39

Active
Examples

SPORTS HEADLINE ENTERTAINMENT HEADLINE News headline.

Impactful and energetic typography with its negative space The right energy and the versatility for a wide range of live A gentle voice with a strong attitude that allows us to
set to a minimum. Use when talking about live sports. shows, delivered through clean and striking typesetting. deliver a straightforward message in a trustworthy tone.
4.0 Typography 40

Narrative By combining words and imagery through

Overview The Vessel, we create a narrative around the
content to guide the viewer.

Where to use Type styles

• Brand campaigns
• Evergreen brand creative
• Performance marketing

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
4.0 Typography 41

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.
4.0 Typography 42

Cinematic Cinematic expressions are used to dial

Overview up our premium content. This is the only
expression where we use Graphik light.

Where to use Type styles

• Promotion of premium content

HEADLINE
Graphik Light
All Caps

H E A D L I N E

Graphik Light
All Caps
Inside Vessel

We have flexible tracking from

+150 to +2000 depending on
amount of text and content.
4.0 Typography 43

Cinematic
Examples

T H I S I S T H E E N D
4.0 Typography 44

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.
5.0 45

ICONOGRAPHY
X.X
5.0 Iconography 46

Our icons help tell

a story while adding
some fun.
X.X
5.0 Iconography 47

Icon Hulu iconography is organized

Types into two categories, each with
its own use cases.

Utililty Icons Pictographs

Use for navigation, notifications, and to Use when a Utility icon doesn’t
represent actions. tell enough of a story.
5.0
X.X Iconography 48

Marketing A selected set of our product

Icons utility icons become a part
our emotive and navigational
language in marketing.
X.X
5.0 Iconography 49

Icon An icon’s meaning can shift

Journey depending on context.

TIME TO
CATCH UP

Product Evergreen Brand Brand Culture Campaign

This icon is used to represent In this example, the icon’s meaning Here, the same icon is used as part of the
ADD TO MY STUFF. changes slightly and is used to illustrate larger set to represent inclusion.
the story of catch-up messaging.
6.0 50

ILLUSTRATION
51
6.0
X.X Illustration 52

Our illustration style builds off the

shapes in our logo. Adding a little
spice (and cute characters) to our
communications.
6.0 Illustration 53

Overview The rounded corners of The Vessel are

aligned with characters’ bodily features.
6.0 Illustration 54

Style Illustration allows us to add our distinct

Hulu attitude, from simple character spot
illustrations to expressive hero renders.

Character Spots Hero Renders

7.0 55

THE VESSEL
X.X
7.0 Vessel 56

The Vessel.
Bringing our key motif to
life and using it to celebrate
everything Hulu.
X.X
7.0 Vessel 57

Concept Hulu loosely translates to “the holder of

precious things.” Born from our logo,
The Vessel becomes the holder of what
is most essential.
7.0
X.X Vessel 58

Behaviors The Vessel has a range of

behaviors and expressions.

Tell stories Emphasize what’s important Be a window into content

The CIA?
85,000 shows THE SAGA
1980s Los Angeles? and movies.
It’s kind of a big deal.
CONTINUES
7.0
X.X Vessel 59

Behaviors The Vessel has a range of

behaviors and expressions.

Highlight the best part Spotlight characters Guide the viewer

Ready to watch?
LET’S GO
7.0
X.X Vessel 60

Creating Pay special attention to the Min/Max

The Vessel corner radius dimensions for larger units.

Corner radius Stroke width Type padding

Divide shortest edge Regular stroke: Compact padding:
of The Vessel by 6. Divide longest edge Typography is scaled
of The Vessel by 100. at 90% of the width of
If using multiple Vessels all corner radii The Vessel.
align to the average pixel radius (not
smallest, not largest). Heavy stroke:
Each format has a pre-defined Min and Divide longest edge Wide padding:
Max corner radius to create a cohesive
aesthetic across all formats.
of The Vessel by 50. Typography is scaled
at 70% of the width of
2160X 3840
If using multiple stroke weights, The Vessel.
Min corner radius: 26px including icons, in one piece of
Max corner radius: 120px creative, align them all to the average
weight (not smallest, not largest). The Vessel always aligns to the grid,
1920X1080
Min corner radius: 13px
but the type can freely sit within The
Max corner radius: 60px Vessel. Just make sure it is horizontally
and vertically aligned within The Vessel.
1080X1080
Min corner radius: 13px
The height of The Vessel is optically
Max corner radius: 30px aligned to the grid.
Performance Marketing Banners
Min corner radius: 4px
Max corner radius: 16px
7.0 Vessel 61

Corner Radius To calculate the corner radius of The

Vessel we use the ratio of 6:1. If using
multiple Vessels in one piece of
creative, all corner radii align to the
average px radius.

196px

231px

Horizontal Example: Portrait Example:

Divide the shortest side of The Vessel by 6 Divide the shortest side of The Vessel by 6
to calculate the corner radius value. to calculate the corner radius value.

Vessel height: 154px Vessel width: 196px

Corner radius: 38px Corner radius: 32px
7.0 Vessel 62

Radius We have defined a minimum and

Minimum maximum corner radius for common
& Maximum formats to avoid The Vessel becoming
too square or rounded.
A general rule of thumb is that the
corner radius should relate to the curves
of the Hulu logo in that piece of creative.

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”

1920X1080 Minimum: 1080x1920 Maximum:

Corner radius: 16px Corner radius: 60px Performance Marketing Banners
Min corner radius: 4px
Max corner radius: 16px
X.X
7.0 Vessel 63

Web/Mobile For more consistency between radii in a web Note

Corner Radius design experience, we can assign one of three Refer to the Product chapter
radius values based on the scale of the container. for example components.

Small Medium Large

4px 16px 24px

START YOUR FREE TRIAL

START YOUR FREE TRIAL

7.0 Vessel 64

Stroke Weight To calculate the stroke weight of The

Variations Vessel, divide the longest side by 100.
If using multiple Vessels all stroke
weights align to the average weight.

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
7.0 Vessel 65

Stroke Weight
Examples

Regular Heavy
Clean and concise. Attitude and impact.
7.0 Vessel 66

Type There are two padding styles

Padding for type inside The Vessel.

X
X

HEADER HEADER
90% X
70% X

Wide Padding Compact Padding

Use primarily for evergreen brand, Use primarily for promoting sports
Hulu Originals, and general on Hulu + Live TV.
entertainment properties.
To create compact padding, typography is at
To create wide padding we use typography at 90% of the width of The Vessel. The Vessel always
70% of the width of The Vessel. The Vessel always aligns to the grid, but the type can freely sit within
aligns to the grid, but the type can freely sit within The Vessel. Just make sure it is horizontally and
The Vessel. Just make sure it is horizontally and vertically aligned to The Vessel. The height of The
vertically aligned to the Vessel. The height of The Vessel is optically aligned to the grid.
Vessel is optically aligned to the grid.
7.0
X.X Vessel 67

Vessel Glow The glow is used to bring depth and

as a way of revealing information.
There are four styles of glow.

Dimensional reveal Left to right reveal

Top-down reveal Bottom-up reveal

7.0
X.X Vessel 68

Vessel and The Vessel is able to interact in a range of

Image expression follwing three main principles.

Cut The Noise Hero Our Talent Enter The Huluverse

Use a defocused image layer in the The Vessel interacts with imagery Using The Vessel as a lens into the
background, with The Vessel bringing through layering to create ownership. Huluverse, we draw the viewer in
the image into focus. through vignettes of content.
7.0 Vessel 69

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.
8.0 70

GRIDS
X.X
8.0 Grids 71

Don’t underestimate
the power of the grid.
A simple, flexible system
that aligns Hulu on
all platforms.
X.X
8.0 Grids 72

Grid We have three principles for

Principles creating our grid system.

Even Spacing Even Margins Flexibility

A 1:1 grid ensures even spacing Margins must be equally balanced 1:1 grid density adapts to
between elements. and consist of two grid units. accommodate different formats.
8.0 Grids 73

Grid Using the following approach, we can

Construction create a consistent 1:1 grid system that
works across all formats.

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 Digital Landscape Digital Landscape

Aspect Ratio: 16:9 Units: 16 x 9 Grid: 48 x 27
8.0 Grids 74

Digital formats Please note that each format requires a

different multiplication of its aspect ratio
to create the desired density of the grid.
This should be considered optically.

Digital Landscape
Aspect Ratio: 16:9
Social 1080x1080 Grid: 48 x 27
Aspect Ratio: 1:1
Grid: 30 x 30

Performance Marketing Ad 300x600

Aspect Ratio: 3:6
Grid: 30 x 60
8.0 Grids 75

Print Formats Please note that each format requires a

different multiplication of its aspect ratio
to create the desired density of the grid.
This should be considered optically.

Billboard 40x 12ft

Aspect Ratio: 40:12
Grid: 80 x 24

A- Size Poster US Letter

Aspect Ratio: 6:8 | In instances of decimal Aspect Ratio: 5:7 | In instances of decimal
places in aspect ratios, round to whole places in aspect ratios, round to whole
numbers. numbers.
Grid: 24 x 32 Grid: 25 x 35
9.0 76

CTAs
9.0 CTAs 77

Hulu An availability system is applied to all single-

Originals title Hulu Original creative.
Static CTAs
The availability logo lockup should always
be formatted as shown to the right.

Content Descriptor
Original Series
Original Docuseries
Original Documentary Fixed Element Descriptor
Original Film
Original Series Special
etc... ORIGINAL SERIES
PREMIERES NOV 19
Month Abbreviations Qualifier Availability Fixed Element
ALWAYS GREEN
JAN APR JULY OCT
FEB MAY AUG NOV
MAR JUNE SEPT DEC

Fixed Element Descriptor

Date Formatting
For the day date - single digit numbers
ORIGINAL SERIES
should NOT start with 0. NOW STREAMING
Also note that it should be
written APR 2 NOT APR 2nd. Availability Fixed Element
ALWAYS GREEN
Ex: April 2nd should be written as APR 2
NOT APR 02 OR APR 2nd.
9.0 CTAs 78

Hulu The single-title CTA should always

Originals appear in the lower portion of the
Static CTAs creative as shown to the right.

Always ensure that the green Hulu

logo is legible over the key art.

Content Descriptor

ORIGINAL SERIES
40% y
y
NEW SEASON NOV 19
x

80% x
Tune in date:
GRAPHIK BOLD
9.0 CTAs 79

Hulu There are 2 options for single-title AV

Originals CTAs. For longer promos, use the 2-card
AV CTAs system with the availability date on its
own card.

For shorter promos, use the combined Longer Promos

single card system.

Shorter Promos
9.0 CTAs 80

Secondary These examples show what to do when our

Streaming partners want to promote content first airing
CTAs on broadcast, followed by a streaming release
on Hulu. “Stream on Hulu” is the preferred
messaging. Pre-approved logo lockups are
available for use.

Static
The “Stream on Hulu” lockup should be placed
next to the studio partner logo, and connected
by a vertical pipe.

A/V
There are 2 options.

A standalone “Stream on Hulu” card is added to

the promo.

A key-able “Stream on Hulu” lockup is placed

over a background plate.
Please make sure to choose background footage
that allows the green logo to be legible.
9.0 CTAs 81

Secondary An alternate option for adding “Stream on Hulu”

Streaming to existing creative is this keyable badge that
CTAs ensures the legibility of our green logo over any
background.

A pre-approved logo lockup is available for use.

10.0 82

STATIC TOOLKIT
X.X
10.0 Static Tookit 83

The static toolkit exists to

ensure visual consistency
and ensure brand linkage.
10.0 Static Tookit 84

Layout Below are the main layout formats used

Styles for acquisition-based static creative.

Text Only Single Show - Full Bleed Single Show - Non Full Bleed Multi Show Library
10.0 Static Tookit 85

Multi-Show
Layouts Imagery
Scale the artwork to a similar size within each Vessel to
help create a balanced composition.
Try to align each character’s eyeline and avoid flipping
the direction each hero is looking in.
In the smallest layouts, the imagery is omitted and only
the highest priority title treatments and logos remain.

Studio/Network Logos
Always appear as the one-color white version at 100%
opacity and are placed above the title treatment.

Title Treatments
Always appear as the one color white version at 100%
opacity and are placed to the left or the bottom of each
Vessel depending on the orientation of the layout.

The Vessels
Stroke and gradient overlay colors match the colors
assigned to each show/movie in the Hulu UI.
See Showtime Content Color in the Color chapter for
more details.
10.0 Static Tookit 86

Library
Layouts Imagery
Scale the artwork to a similar size within each Vessel to
help create a balanced composition.
As layout size decreases, so does the amount of
content being featured.
In the smallest layouts, the imagery is omitted and only
the highest priority title treatments and logos remain.

Studio/Network logos
Always appear as the one-color white version at 100%
opacity and are placed above the title treatment.

Title Treatments
Always appear as the one color white version at 100%
opacity and are placed to the left or the bottom of each
Vessel depending on the orientation of the layout.

The Vessels
Stroke and gradient overlay colors match the colors
assigned to each show/movie in the Hulu UI.
See Showtime Content Color in the Color chapter for
more details.
11.0 87

AV TOOLKIT
X.X
11.0 AV Toolkit 88

Using key visual elements of the design

toolkit, the motion system has been
designed to elevate content and flex
across multiple genres and campaigns,
on any device, at any time.
X.X
11.0 AV Toolkit 89

Motion Theory The global design principles are used to make

Principles sure everything we move moves like Hulu.

Always a Story. Delightfully Human.

The Vessel immerses us in the breadth and The Vessel is the narrator of diverse stories
depth of endless entertainment by pulling and adapts to fit the content it holds through
us in and out of content using z-space. This contracting and expanding as it transitions.
creates a sense of discovery and takes us on a The stoke subtly stretches as we move to
journey as it seamlessly connects stories. capture the energy of movement and gives a
subtle tactile feeling.

Simply Essential. Do it Different.

Delivering content effortlessly and clearly, We transition between content using bold
The Vessel highlights and emphasizes what is punches of green and hard cuts to instigate
important with simple but energetic snappy change and create unexpected moments
movements and a warm glow that illuminates of delight.
the vessel as it gleams.
X.X
11.0 AV Toolkit 90

The ident system transports

you into the Huluverse.
Through The Vessel and our
rich sonic identity we enter the
world of entertainment.
11.0 AV Toolkit 91

Network ID Our ID system consists of two versions that

have been created for the complete range of
formats. Each version has a defined use as
seen below.
More details can be found here.

Available Ratios:
16x9 (1920x1080)
4K (3840x2160)
1x1 (1080x1080)
4x5 (1080x1350)
9x16 (1080x1920)

Network ID: Hulu Network ID: Hulu Originals

Plays before all Hulu content Plays before all Hulu Originals
11.0 AV Toolkit 92

Network ID:
Hulu Landscape
11.0 AV Toolkit 93

Network ID:
Hulu Originals
Landscape
11.0 AV Toolkit 94

App Open The App Open uses a condensed

version of hero Hulu ID and is used as
the opening of Hulu digital experiences.
Only in landscape formats.
11.0 AV Toolkit 95

Promo Structure:
Licensed Single Show
Social - Sub Acq
11.0 AV Toolkit 96

Promo Structure:
Licensed Multi Show
Social - Sub Acq
11.0 AV Toolkit 97

Promo Structure:
Premium Add-On
Multi-Show / Retention
11.0 AV Toolkit 98

Promo Structure:
New this Month
Sizzle