Roku Brand Design System Deep Dive

1. Brand Overview

Roku’s brand vibe is unapologetically consumer tech — approachable, straightforward, and built for broad audiences. Their design philosophy leans on clarity over flourish. This is a streaming platform, not a luxury goods site. The goal is: get you into content fast, make sure you know what’s clickable, and keep the brand presence consistent without overwhelming the interface.

The purple is the heart of the identity (#662d91). It’s distinctive — you won’t confuse it with Netflix’s red or Disney’s blue. Roku’s purple signals brand without screaming for attention. It’s paired with a practical grayscale for UI elements and a functional blue for web links — a nod to default browser styles rather than custom link treatments. This says: “We’re not reinventing web conventions; we’re making them ours.”

Typography is Gotham-heavy. GothamBook and GothamBold dominate, with GothamMedium sprinkled in. This choice keeps the brand contemporary yet readable. Gotham’s geometric shapes are tech-friendly without feeling cold. They’re not using trendy variable fonts or Google Fonts; it’s a custom font stack with Helvetica/Arial fallbacks for safety.

Spacing is pragmatic — an 8px base scale. No weird fractional spacers except a 3px micro-gap for tight UI situations. Breakpoints hit all the common responsive ranges: 320px mobile, 768px tablet, 1024px desktop, with finer increments up to 1200px for large screens. This is a system built for reality — think TV UI on web, mobile, desktop — not just one viewport.

The component design is utilitarian. Buttons get clear borders and consistent 6px rounding. Links have minimal styling variations — functional colors, no hover animations. Shadows are rare; depth is mostly handled with borders. Roku uses Vuetify under the hood — you can see it in the v- components — so structure and responsiveness are anchored in a proven framework.

Overall: Roku’s design system is about clarity, speed, and brand recall. It’s not pushing avant-garde layouts. It’s pushing consistency across devices, simple interactions, and keeping purple as the hero.

2. Color System

2.1 Primary Colors

The main brand color: #662d91 (rgb(102,45,145)). This is Roku’s purple. It’s saturated, medium-dark, and confident. Psychologically, purple can signal creativity, premium entertainment, and sophistication. Competitors skew red (Netflix), blue (Disney+, Prime Video), or green (Hulu). Roku’s purple is a differentiator.

It’s used in navigation links, consent buttons, and as borders for emphasis. In UI terms, it’s a “brand action” color — not every button is purple, but when it is, it’s intentional.

2.2 Complete Palette

2.3 Color Relationships

Contrast: White text on purple (#ffffff on #662d91) has a contrast ratio > 7:1 — excellent for WCAG AA/AAA. Black text on white is obviously fine. The web link blue (#0000ee) is straight from default browser styles — high contrast against white backgrounds.

Dark mode: Roku’s palette isn’t optimized for dark themes; it’s built for light backgrounds. Purple could work in dark mode if paired with lighter neutrals, but current usage suggests they’re sticking to light UI.

2.4 Usage Guide

• Pair Brand Purple (#662d91) with white for buttons and headers.
• Use Dark Gray (#333333) for body text — not pure black, softer on eyes.
• Keep Web Link Blue (#0000ee) for inline links — don’t recolor unless necessary.
• Hover states: transition from purple to Hover Blue (#005fcc) sparingly; current use is minimal.
• Avoid pairing purple with mid-gray (#aaaaaa) — low contrast.
• Borders should stick to mid gray (#aaaaaa) for subtlety, or purple for emphasis.

3. Typography

3.1 Font Families

• Primary: GothamBook
• Secondary: GothamBold, GothamMedium
• Fallback stack: Helvetica, Arial
• Source: Custom (no Google/Adobe fonts detected)

3.2 Type Scale

3.3 Hierarchy

The hierarchy is subtle. Headings range from 25px down to 16px — no massive jumps. This keeps layouts tight and uniform. GothamBook’s lighter weights (300) give headings an airy feel, while GothamBold tightens emphasis without changing size drastically. Button text is almost always 16px — big enough for TV readability, small enough for web.

Line heights vary: 1.42 for most text, 1.50 for buttons, 1.57 for captions. That extra breathing room in captions helps with small text legibility.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Common values:

3px is unusual — probably for pixel-perfect alignment in tiny UI components.

4.2 Layout

Breakpoints:

• 320px — mobile min
• 767/768px — tablet
• 1023/1024px — desktop start
• 1079/1080px — large desktop
• 1199/1200px — extra large

Responsive approach: standard Vuetify grid with these breakpoints controlling column layout. Expect 20px gutters at most breakpoints.

5. Visual Elements

Border Radius

Values:

• 6px — Buttons (Agree, Disagree)
• 8px 8px 0px 0px — Top-rounded, bottom-square containers

Consistent, small radii. No giant pills here.

Shadows

Two shadows:

• rgba(0,0,0,0.25) 0px 5px 6px 0px — medium depth
• rgba(0,0,0,0.15) 0px 2px 10px 0px — light depth

Rare usage. Mostly flat design.

Borders

• 1px solid #aaaaaa — image borders (neutral)
• 1px inset #808080 — HR lines
• 3px solid #662d91 top border — dialog headers
• 2px solid #662d91 — button borders
• 2px outset #000000 — button borders (secondary)

6. Components

6.1 Buttons

Primary (Consent Allow):

• Default: bg white (#ffffff), text purple (#662d91), padding 8px 20px, radius 6px, border 2px solid purple.
• Hover: bg white (#ffffff), text gray-ish (#767574), no border.
• Active: bg green (#008a1d), text white, no shadow.

Secondary (Consent Disagree):

• Default: bg light gray (#efefef), text dark gray (#333333), padding 8px 20px, radius 6px, border 2px outset black.
• Hover: bg white (#ffffff), text gray (#767574), no border.
• Active: bg green (#008a1d), text white.

No focus state defined. No disabled state in data.

6.2 Links

Variants:

1. Blue (#0000ee), underline default.
2. Purple (#662d91), no underline.
3. Action Blue (#0042cc), no underline.
4. Dark Gray (#333333), no underline.

Minimal hover styling — likely relies on browser defaults.

6.3 Forms

No text inputs/checkboxes/radios/selects in extracted data — possibly handled by Vuetify defaults.

6.4 Cards

No explicit card component extracted. Based on shadows and borders, likely flat with 1px border or subtle shadow.

7. Design Tokens — CSS Custom Properties

:root {
  /* Colors */
  --color-purple: #662d91;
  --color-dark-gray: #333333;
  --color-web-link-blue: #0000ee;
  --color-action-blue: #0042cc;
  --color-mid-gray: #aaaaaa;
  --color-gray: #808080;
  --color-black: #000000;
  --color-hover-blue: #005fcc;
  --color-light-gray: #f0f0f0;
  --color-white: #ffffff;

  /* Typography */
  --font-gotham-book: "GothamBook", Helvetica, Arial;
  --font-gotham-bold: "GothamBold", Helvetica, Arial;
  --font-gotham-medium: "GothamMedium", Helvetica, Arial;

  /* Font Sizes */
  --font-size-25: 25px;
  --font-size-20: 20px;
  --font-size-18: 18px;
  --font-size-16: 16px;
  --font-size-14: 14px;
  --font-size-12: 12px;

  /* Line Heights */
  --line-height-142: 1.42;
  --line-height-150: 1.50;
  --line-height-157: 1.57;
  --line-height-400: 4.00;

  /* Spacing */
  --space-3: 3px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-20: 20px;
  --space-30: 30px;
  --space-40: 40px;
  --space-50: 50px;
  --space-134-5: 134.5px;

  /* Border Radius */
  --radius-6: 6px;
  --radius-top-8: 8px 8px 0px 0px;

  /* Shadows */
  --shadow-md: rgba(0,0,0,0.25) 0px 5px 6px 0px;
  --shadow-sm: rgba(0,0,0,0.15) 0px 2px 10px 0px;
}

8. AI Coding Assistant Prompt

# Roku Design System Specification

You are a Roku design expert. Build UIs matching their visual language exactly.

## Brand Context
Roku values clarity, brand recall, and functional usability. The design system is built on a strong purple identity, consistent small-radius corners, and minimal shadows. Typography is Gotham-based for a modern, approachable feel.

## Color Palette
- Brand Purple: #662d91 — Primary brand actions, borders
- Dark Gray: #333333 — Body text, dark UI elements
- Web Link Blue: #0000ee — Inline links, default link styling
- Action Blue: #0042cc — Secondary actions, navigation
- Mid Gray: #aaaaaa — Borders, dividers
- Gray: #808080 — HR lines, subtle dividers
- Black: #000000 — High contrast text
- Hover Blue: #005fcc — Hover/focus interactive states
- Light Gray: #f0f0f0 — Hover/focus backgrounds
- White: #ffffff — Backgrounds, button fill

## Typography
Fonts:
- GothamBook, Helvetica, Arial — Body, links
- GothamBold — Headings, emphasis
- GothamMedium — Buttons, captions

Sizes:
| Element   | Size | Weight | Line Height |
|-----------|------|--------|-------------|
| heading-1 | 25px | 300    | 1.42        |
| heading-1 | 20px | 400    | 1.42        |
| heading-1 | 18px | 400    | 1.42        |
| button    | 16px | 400    | 1.50        |
| caption   | 14px | 400    | 1.57        |
| caption   | 12px | 400    | 1.50        |

## Spacing & Grid
Base: 8px grid
Scale: 3px, 6px, 8px, 10px, 20px, 30px, 40px, 50px, 134.5px
Component mapping:
- Button padding: 8px 20px
- Section gaps: 20px / 30px
- Hero padding: 50px

## Border Radius
- sm: 6px — Buttons
- top-md: 8px 8px 0px 0px — Dialogs

## Shadows & Depth
- md: rgba(0,0,0,0.25) 0px 5px 6px 0px
- sm: rgba(0,0,0,0.15) 0px 2px 10px 0px

## Component Specifications

### Primary Button
Default:
- bg: #ffffff
- text: #662d91
- padding: 8px 20px
- radius: 6px
- border: 2px solid #662d91

Hover:
- bg: #ffffff
- text: #767574
- border: none

Active:
- bg: #008a1d
- text: #ffffff

### Secondary Button
Default:
- bg: #efefef
- text: #333333
- padding: 8px 20px
- radius: 6px
- border: 2px outset #000000

Hover:
- bg: #ffffff
- text: #767574
- border: none

Active:
- bg: #008a1d
- text: #ffffff

### Navigation Links
- Blue link: #0000ee, underline
- Purple link: #662d91, no underline
- Action Blue link: #0042cc, no underline
- Dark Gray link: #333333, no underline

### Input Fields
Not specified — use Vuetify defaults

## Layout & Responsive Rules
Breakpoints:
- 320px mobile
- 768px tablet
- 1024px desktop
- 1080px large desktop
- 1200px XL

## Interaction Rules
- Transition: 150ms ease for hover/active
- Focus: outline with brand purple or hover blue
- No disabled styling in data — adopt 50% opacity pattern

## DO List
- Use only palette colors
- Maintain 8px grid, allow 3px micro-spacing where specified
- Keep button radius at 6px
- Use Gotham fonts with fallbacks
- Respect breakpoints for responsive design

## DON'T List
- Don’t invent new colors
- Don’t apply large-radius corners
- Don’t use heavy shadows — keep depth subtle
- Don’t remove borders from default states unless specified

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ffffff;
  color: #662d91;
  padding: 8px 20px;
  border-radius: 6px;
  border: 2px solid #662d91;
  font-family: "GothamMedium", Helvetica, Arial;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.50;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #767574;
  border: none;
}
.btn-primary:active {
  background: #008a1d;
  color: #ffffff;
}
```

### Secondary Button
```css
.btn-secondary {
  background: #efefef;
  color: #333333;
  padding: 8px 20px;
  border-radius: 6px;
  border: 2px outset #000000;
  font-family: "GothamMedium", Helvetica, Arial;
  font-size: 16px;
  font-weight: 400;
}
.btn-secondary:hover {
  background: #ffffff;
  color: #767574;
  border: none;
}
```

### Card
```css
.card {
  background: #ffffff;
  border: 1px solid #aaaaaa;
  border-radius: 6px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.15) 0px 2px 10px 0px;
}
```

9. Summary

TL;DR — Roku’s design system is purple-forward, Gotham-based, and built on an 8px grid. It’s functional, consistent, and uses minimal shadows. Buttons are clean, links follow web conventions, and breakpoints cover all devices.

Brand Keywords:

• purple-centric
• utilitarian-tech
• consistent-grid
• readable-modern
• minimal-depth