Hulu Brand Guidelines 2024
Brand guidelines for Hulu covering 99 slides across the complete visual identity system.
Show all
Sections document Hulu green as the signature primary color with Pantone, CMYK, RGB, and hex values, dark mode palette adaptations, WCAG accessibility contrast standards, logo variants with clearspace and misuse examples, a type system with scale hierarchy and web font optimization, an iconography system with filled and outline variants, photography and illustration style, a modular grid with responsive breakpoints, motion and animation easing specifications, a component pattern library including hero, card grid, side-by-side, testimonial, and full-width layouts, tone and voice guidelines, and a version changelog.
- Slide 1: Hulu Brand Guidelines 2024
- Slide 2: Design system and core principles
- Slide 3: Guidelines contents and section overview
- Slide 4: Brand imagery selection standards
- Slide 5: Brand application mockup example
- Slide 6: Logo primary lockup and configurations
- Slide 7: Logo and visual identity system
- Slide 8: Logo construction and anatomy
- Slide 9: Color palette and system overview
- Slide 10: Brand color application and usage
- Slide 11: Logo variations and alternative marks
- Slide 12: Logo monochrome and reversed versions
- Slide 13: Logo minimum size and clear space
- Slide 14: Logo dos and donts guidelines
- Slide 15: Logo application on varied backgrounds
- Slide 16: Hulu green as primary brand color
- Slide 17: Secondary colors and extended palette
- Slide 18: Neutral colors and gray scale
- Slide 19: Type system and design section
- Slide 20: Type family specifications and weights
- Slide 21: Type scale and sizing system
- Slide 22: Color hex codes and digital values
- Slide 23: Accent colors and highlight palette
- Slide 24: Color application and contrast standards
- Slide 25: Approved color combinations and pairings
- Slide 26: CMYK values for print applications
- Slide 27: Pantone matching system specifications
- Slide 28: Color gradients and special effects
- Slide 29: Dark interface color palette adaptation
- Slide 30: Color accessibility and WCAG compliance
- Slide 31: Color semantics and meaning guidelines
- Slide 32: Type system and design overview
- Slide 33: Font pairing and hierarchical system
- Slide 34: Headline style and sizing guidelines
- Slide 35: Body text and readability standards
- Slide 36: Type weight and emphasis guidelines
- Slide 37: Letter spacing and tracking standards
- Slide 38: Line height and leading standards
- Slide 39: Text alignment and spacing settings
- Slide 40: Caption and label styling rules
- Slide 41: Type color and contrast combinations
- Slide 42: Special characters and symbols
- Slide 43: Web font loading and optimization
- Slide 44: Type animation and motion effects
- Slide 45: Iconography system and guidelines
- Slide 46: Icon design principles and rules
- Slide 47: Icon sizes and scaling specifications
- Slide 48: Icon styles and style variations
- Slide 49: Icon usage and application contexts
- Slide 50: Imagery and visual content section
- Slide 51: Photography style and aesthetic
- Slide 52: Illustration style and character system
- Slide 53: Image treatment and visual effects
- Slide 54: Image sizing and aspect ratios
- Slide 55: Grid system and spacing standards
- Slide 56: Grid structure and specification
- Slide 57: Logo grid placement and alignment
- Slide 58: Spacing and rhythm system
- Slide 59: Visual balance and design principles
- Slide 60: Multi-column structure and variants
- Slide 61: Card and tile component patterns
- Slide 62: Hero section and featured layouts
- Slide 63: Footer and navigation area layouts
- Slide 64: Sidebar and rail component layouts
- Slide 65: Responsive breakpoints and rules
- Slide 66: Mobile design and optimization
- Slide 67: Interactive element spacing rules
- Slide 68: Images and visual element styling
- Slide 69: Modal and overlay pattern specs
- Slide 70: Application pattern library intro
- Slide 71: Hero and featured area pattern
- Slide 72: Card grid pattern and example
- Slide 73: Side-by-side image and text pattern
- Slide 74: Full-width section pattern design
- Slide 75: Testimonial and quote pattern
- Slide 76: Tone, voice, and messaging guidelines
- Slide 77: Voice personality traits and tone
- Slide 78: Digital application mockup example
- Slide 79: Marketing material mockup example
- Slide 80: Print application mockup example
- Slide 81: Brand mark for social media
- Slide 82: Motion and animation guidelines
- Slide 83: Animation principles and easing
- Slide 84: Transition and effect patterns
- Slide 85: Micro-interaction and feedback animation
- Slide 86: Video and motion design templates
- Slide 87: Accessibility and inclusive design
- Slide 88: Contrast and readability standards
- Slide 89: Inclusive design principles guide
- Slide 90: Common misuses and violations
- Slide 91: Logo misuse and distortion examples
- Slide 92: Logo on incorrect backgrounds
- Slide 93: Color misuse and violations
- Slide 94: Type misuse and improper usage
- Slide 95: Spacing and alignment violations
- Slide 96: Overall brand application violations
- Slide 97: Resources and support information
- Slide 98: Version history and changelog
- Slide 99: Thank you and closing
Related decks
Fresh decks, weekly
A roundup of what's new in the gallery