What is the primary brand color?

The brand voltage on the onboarding surface is a saturated electric blue #095ae6 — the bright stop of a three-color gradient that darkens through #062794 mid-stop into a deepest #021843 navy. The blue carries the Sign Up CTA fill at the bright end and the press / depth state at the dark end. Across the captured page the brand blue appears 5 times total, all inside gradient stops on the CTA pill and its companion banners. Every other color the eye sees on the page belongs to show artwork from the Disney-owned catalog, not to brand chrome. The system holds the voltage in reserve for the single direct ask.

What typeface does the page use, and what should I use as a substitute?

Every visible string runs Inter, wired in CSS as --FONT-FAMILY: 'Inter',sans-serif. The hero h2 'Watch the way you want' sits at 42px / weight 600 / 54px line-height with -0.4px letter-spacing. Section h2 'Endless entertainment' steps down to 32px / weight 600 / 42px line-height. The h3 sub-heading is 28px / weight 600 / 36px. Body and section copy run 14-18px / weight 400-500. There is no second family, no serif tier, no monospace voice. Inter being open-source means the substitution question is trivial — you can use Inter directly; the closest higher-tier alternative would be General Sans for the display tier.

Why does the surface use near-black #0f1014 instead of pure black?

The page floor is #0f1014 — a slightly-cool charcoal, not pure #000000. The 17 percent lightness gap from true black is intentional: tile-grid card edges soften against the warmer floor, and the electric-blue Sign Up voltage reads as warmer against the cool gray than it would against pure black. Where HBO Max and Netflix commit to true black for maximum poster-art contrast, this Disney-owned surface accepts slightly-reduced contrast in exchange for chromatic warmth on the brand voltage. The result is a quieter floor that lets the catalog tiles do the chromatic work without screaming.

What is the corner-radius philosophy?

The radius scale is binary: 8px on 3 of 5 captured surfaces (cards, the Sign Up CTA, FAQ rows), and 6px on the remaining 2 (form controls, inputs). There is no 12px / 16px / 20px ladder, no pill variant, no fully-circular treatment in the captured marketing chrome. The 2px difference between 8px cards and 6px inputs reads as a deliberate elevation step between content tiles and the controls the user types into. The system runs the same single-step rounding discipline that Stripe and Linear use for dashboard surfaces — small-step, consistent, with no decorative pill moments.

Can I use this DESIGN.md to build my own React streaming-marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce the surface's specific moves: tile-grid hero instead of typographic hero, single electric-blue Sign Up voltage as a gradient stop, Inter across every tier, near-black-not-pure-black floor, and the three-tier graded text ramp from off-white through gray-blue to muted gray. You can also reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the tile-grid-as-hero only reads as confident when you have a catalog of visually-rich content; without it, the same layout feels empty.

Hulu (Disney+ surface) Design System

The Disney-owned streaming onboarding surface as a DESIGN.md file.

About Hulu (Disney+ surface) DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source hulu.com

Music, Video & Streaming

The page opens with a tile-grid wall of show artwork — Disney, Marvel, Star Wars, Pixar, and Hulu-style original-series posters arranged in a single horizontal band across the top, with the centered wordmark and the "New Originals, blockbusters and series" lead sitting beneath. There is no typographic hero shouting over a blank canvas; the catalog is the hero. Below the fold the page becomes a vertical stack of more tile grids — "Watch the way you want," "Exclusive originals" with a 3x3 artwork wall, "Compatible devices" with platform glyphs, "Frequently Asked Questions" with a quiet accordion. Where Netflix splits its hero into a single weight-900 typographic shout over a charcoal floor, this surface trusts the content density end-to-end and lets the typography sit at 42px / weight 600 with -0.4px tracking — the editorial-magazine treatment, not the streaming-shout treatment.

The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 13 captured color tokens grouped into a saturated electric blue voltage (with two darker navy gradient stops), a near-black canvas, a three-tier graded text ramp (#e5e7eb / #8f98b2 / #707a94), a hairline tone, and the Toastify toast-color set (orange / green / red / blue / purple) wired into CSS for status messaging; 10 Inter typography tokens spanning a 14px / weight 500 caption tier through a 42px / weight 600 display step; 2 corner radii anchored on 8px with a 6px input variant; and 16 component recipes covering the Sign Up CTA, the tile-grid card, the FAQ accordion, the compatible-devices glyph strip, the section-heading scaffold, and the muted-gray copyright footer.

Feed this file to Claude or Cursor and it reproduces the surface's specific moves: tile-grid hero instead of typographic hero, single electric-blue Sign Up voltage held in reserve, Inter across every tier, near-black-not-pure-black floor, and the three-tier graded text ramp. The one move worth borrowing only if your product is itself visually rich: the willingness to put NO brand chrome above the content grid. The page gets away with it because the Disney-owned catalog is the brand. A typical SaaS landing without that catalog would need an interstitial typographic layer to fill the same vertical space.

What makes it distinct

Tile-grid as marketing canvasthe Exclusive Originals section is a 3x3 wall of show artwork, not a typographic argument
Single electric-blue voltage#095ae6 carries the Sign Up CTA fill as the bright stop of a gradient that runs into #062794 and the deepest #021843 navy
Inter across every tierdisplay, heading, body, button, and the muted-gray legal strip all share one variable sans
Near-black floor #0f1014not pure black; the slightly-cool charcoal softens the tile-grid edges and lets the blue voltage read as warmer
Three-tier text ramppure white never appears as the dominant ink; #e5e7eb carries running copy, #8f98b2 secondary, #707a94 legal

Live at hulu.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

hulu.com

Explore Hulu (Disney+ surface)

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Hulu (Disney+ surface) design system FAQ

Common questions about Hulu (Disney+ surface)'s tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Hulu — official site

The Disney-owned streaming surface this DESIGN.md was extracted from.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.