Guidelines for working with us.

Our Brand

We're not big on rules, but we've created a set of guidelines to help you bring our brand to life.

This site is a high-level overview. Check out our Big Green Guide if you'd like to take a deeper dive into our brand.


View Big Green Guide

Our Personality

Our brand is defined by these traits that we put into action across all our campaigns and channels. It's flexible enough to work across the entire Hulu ecosystem, while keeping our place as a pioneer who breaks the rules for all the right reasons.

Logo

Whenever possible, the Hulu logo should be green.
In cases where we want to make an impact by using a green background, the logo can be black.

Color combinations are shown in order of priority.

Download Logo

Safe Zone

The logo's safe zone is equivalent to the height of the "u" on all sides.

Avoid

The logo should not be misrepresented, modified, or added to. No attempt should be made to alter the logo in any way. Its orientation, colors, and composition should remain as indicated.

Color

Hulu green is our primary brand color. It represents the fresh distinctiveness of our brand and stands out from more traditional entertainment palettes.

Black is our secondary color and is used over green.

Dynamic Gradient is used to create depth and bring a cinematic quality to designs.

Printing Hulu Green

Our green is important to us. If you ask people "What comes to mind when you think of Hulu?", the word "green" is one of the most common responses. So, understandably, we’re quite particular about it.

Download Print Guidlines

Typography

Typography is our visual voice. Bringing range, nuance and attitude to what we have to say.
Hulu uses the Graphik type family in all applications.

PURCHASE GRAPHIK Vendors should coordinate with Commercial Type on purchase of the appropriate license for their project (e.g. Web, App, Desktop, etc.)

Iconography

Icons are part our emotive and navigational language. Each icon has a purpose as outlined below.

They also bring attitude and texture to our stories. The icon and the rounded Vessel should always have a contrasting color.

DOWNLOAD ICONS
Iconography image 1
Arrow

Guiding element

Iconography image 2
Bolt

Live Content

Iconography image 3
Check

Completion, Confirmation

Iconography image 4
Exclamation

Emphasis, Attention

Grid

Don’t underestimate the power of the grid.
A simple, flexible system that brings Hulu together on every platform.

Using the following approach, we can create a consistent 1:1 grid system that works across all formats.

hulu_grid-01

Define the aspect ratio of the format.

hulu_grid-02

Use the aspect ratio to create a 1:1 grid.
16 units across by 9 down.

hulu_grid-03

Then multiply the grid units equally to ensure the grid is dense enough

The Vessel

The Vessel is a visual metaphor for TV, redefining what TV is. A system born from our logo, it is more than just a frame. As we fill it with meaning, it becomes the connective tissue across all brand touchpoints

The Vessel

Use the following formulas to make your Vessel perfect.

Corner Radius

Divide shortest edge of the Vessel by 6.

vessel-01

Vessel height: 231px
Corner radius: 38px

Stroke Weight

Divide longest edge of the Vessel by 100.

vessel-02

Vessel width: 904px
Stroke weight: 9px

If using multiple Vessels in a single piece of creative, all corner radii and stroke weights should align to the average (not smallest, not largest).

Illustration

Our illustration style builds off the shape of the Vessel.
Adding a little spice (and cute characters) to our communications.

Illustration

Illustration Types

illustration_character-spots

Character Spots

illustration_hero-illustrations

Hero Illustrations

Sonic Identity

Our sonic identity is another component that helps viewers enter the world of Hulu, a world of entertainment. With a subtle combination of anticipation and release, the sonic dynamics transition the viewer out of a Hulu branded space and into content.

CTA Buttons

A system of Hulu brand Call to Action buttons has been developed to create a consistent interactive experience from Marketing to Product.

Download CTA Button Guide

Button Styles

There are two brand button styles: primary filled and secondary outlined. Brand CTA buttons utilize Graphik font set in all caps and tracked to +80.

Primary Filled

Secondary Outlined

Button Padding

The left and right button padding should be equivalent to the width of 2 "H"s on either side, while the top and right padding should be equivalent to the width of 1 "H" on either side.

Filled Buttons

This button styling is our primary styling used for actions requiring more emphasis. It can be used in a full or fixed width.

Light Mode

Dark Mode

Filled Button States

There are three states for filled buttons: active, hover, and disabled.

Active

Hover

Disabled

Outlined Button

This button styling is our secondary styling used for actions that don’t require additional emphasis. It can be used in a full or fixed width.

Light Mode

Dark Mode

Outlined Button States

There are three states for outlined buttons: active, hover, and disabled.

Active

Hover

Disabled

Writing Style

Our voice embodies the Hulu brand across a variety of touchpoints.
We talk to our viewers like real people, like we’re having a conversation with them.
Because we are.

We don’t use a lot of jargon.
Our viewers don’t watch “content."
They watch TV.
Like humans do, right?

We also don’t judge.
Everybody loves what they love.
So we’re not snarky about TV.
We like a little wordplay, but not too much.
We’re not trying to keep up with every meme out there, either.
We don’t try too hard.

We're talking to TV people, and we know how to do it because we're TV people too.