Go Brand Design System Deep Dive
1. Brand Overview
Go.com isn’t just a portal — it’s Disney’s digital front door (though the “Go” name obscures that until you notice the logo). The design system here is a blend of corporate polish and entertainment warmth, but it leans heavily toward functional clarity over whimsical Disney theming. The actual logo is the black Disney logotype — no gradients, no castle — which sets the tone: restrained, confident, relying on brand equity rather than visual noise.
The vibe: corporate precision meets accessible web usability. This isn’t a character-driven UI; it’s a content hub with a broad audience. The design language is built for scale — it has to work for news, entertainment, booking, and streaming — so the system is modular, tokenized, and adaptable.
Colors are mostly blues, blacks, and grays with semantic accents for error/success/warning. Typography is custom — “InspireTWDC” and “Inspire” show Disney’s insistence on brand-owned type, paired with DINNext for large headings. This combination is interesting: DINNext is utilitarian and modern; InspireTWDC carries subtle personality.
Spacing is anchored on an 8px grid, with some oddball values (1px, 3px, 5px) where micro-adjustments were needed. Border radii range from sharp corners to large pills (50px for inputs), suggesting the system accommodates both formal elements and friendly, tactile controls.
If you’re building within this system, you have to respect its dual nature: functional, no-nonsense core with occasional playful curves or color pops. It’s not a “flat minimal” system — depth exists in shadows, but sparingly. They use outlines for focus, maintaining accessibility without relying solely on color changes.
I’d call this “corporate-friendly, entertainment-capable” — it’s designed to be skinned for different Disney properties but to keep the underlying UX consistent. If you strip out the branding, the bones could support a news site, a booking platform, or a streaming app. And that’s exactly the point.
2. Color System
2.1 Primary Colors
The main brand color here is #0077da — a strong, medium-saturated blue. It’s not Disney’s “classic royal blue” from merchandising, but a web-optimized hue that reads clearly on screens. Blue is trust, competence, stability — all safe territory for a corporate brand.
Compared to competitors: Netflix’s red is aggressive and attention-grabbing; Hulu’s green is fresh and playful. Go’s blue is conservative, more in line with news portals or enterprise dashboards. It works because it’s versatile — it can be paired with white for crispness, black for authority, or gray for neutrality.
2.2 Complete Palette
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| Primary Blue | #0077da | Brand primary | CTAs, interactive states |
| Black | #000000 | Core text, logo | Body text, outlines, borders |
| White | #ffffff | Background, text on dark | Page backgrounds, reverse text |
| Dark Gray | #252526 | Neutral background | Headers, panels |
| Mid Gray | #555555 | Secondary text | Icons, disabled states |
| Default Link Blue | #0000ee | Link color | Inline links, legacy styling |
| Deep Link Blue | #0040e5 | Link hover/focus | Interactive hover states |
| Focus Blue | #005fae | Focus outline | Keyboard focus indicators |
| Success Green | #0D830F | Semantic success | Success messages, validation |
| Primary Blue 40 | #55A4E6 | Light brand blue | Hover backgrounds, accents |
| Button Alt Pressed | #004783 | Pressed state | Primary alt button press |
| Primary Blue 100 | #000419 | Darkest brand blue | Deep backgrounds |
| Warning Dark | #FFB759 | Semantic warning | Alerts, caution states |
| Primary Blue 50 | #2B8EE0 | Mid-light brand blue | Buttons, highlights |
| Pagination Dot | rgba(191, 226, 255, 0.5) | UI element | Carousel dots |
| Focus Alt | #005FAE | Alt focus | Button focus |
| Gray 10 | #F4F4F4 | Light neutral | Surfaces, backgrounds |
| Gray 50 | #848687 | Mid neutral | Text, icons |
| Gray 100 | #121213 | Dark neutral | Backgrounds, text |
| Gray 40 | #9D9E9F | Neutral | UI copy |
| Warning Light | #E58810 | Semantic warning light | Alerts |
| Day font color | #523214 | Specialized | Calendar day text |
| Divider | #EBEBF7 | Divider lines | Separators |
| Day container bg | #F8E9DA | Specialized | Calendar day background |
| Error Red | #D40909 | Semantic error | Validation errors |
| Error Dark | #FF7F7F | Semantic error alt | Alerts |
| Accordion separator | #CECFCF | UI element | Dividers |
| Retailer modal text | #48494A | Secondary text | Modals |
| Booking bar bg | #18191B | Dark background | Booking UI |
2.3 Color Relationships
The palette is heavy on blues and grays, with semantic greens, oranges, and reds for feedback. Contrast is generally solid — white on #0077da passes WCAG AA for normal text; black on #F4F4F4 is comfortably high contrast.
Dark mode usage is implicit: dark grays (#121213, #252526) appear in backgrounds and headers, white or light gray text on them maintains readability. The system avoids low-contrast combinations — you won’t see gray text on a slightly darker gray background without purpose.
2.4 Usage Guide
- Good combos: #0077da + #ffffff (clear, brand), #000000 + #F4F4F4 (high contrast neutral)
- Avoid: #555555 text on #252526 background — too low contrast.
- Semantic colors should only appear for their intended states; don’t use #D40909 as a decorative red.
- Use rgba(191, 226, 255, 0.5) for subtle indicators, not text — it’s too light.
3. Typography
3.1 Font Families
- DINNext — Used for large headings. No fallbacks listed, likely custom-loaded.
- Inspire — Disney’s proprietary type family. Used across headings, buttons, captions.
- InspireTWDC — Disney corporate variant. Used for headings, buttons, links, captions.
No Google or Adobe font sources; these are custom assets. This gives them full control over licensing and rendering.
3.2 Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| heading-1 | DINNext | 44px (2.75rem) | 800 | 1.23 |
| heading-1 | DINNext | 32px (2.00rem) | 800 | 1.19 |
| heading-1 | Inspire | 26px (1.63rem) | 600 | 1.23 |
| heading-1 | InspireTWDC | 24px (1.50rem) | 800 | 1.33 |
| button | InspireTWDC | 16px (1.00rem) | 400 | 1.00 |
| link | InspireTWDC | 16px (1.00rem) | 400 | 1.00 |
| heading-1 | InspireTWDC | 16px (1.00rem) | 500 | 1.38 |
| link | InspireTWDC | 16px (1.00rem) | 500 | 1.38 |
| link | Inspire | 16px (1.00rem) | 400 | 1.38 |
| heading-1 | Inspire | 16px (1.00rem) | 700 | 1.38 |
| heading-1 | InspireTWDC | 16px (1.00rem) | 400 | — |
| heading-1 | Inspire | 16px (1.00rem) | 400 | 1.38 |
| button | Inspire | 16px (1.00rem) | 400 | — |
| button | Inspire | 16px (1.00rem) | 700 | 1.00 |
| button | InspireTWDC | 15px (0.94rem) | 700 | 1.53 |
| button | Inspire | 14.4px (0.90rem) | 700 | 1.00 |
| caption | InspireTWDC | 13.6px (0.85rem) | 400 | — |
| caption | Inspire | 13.6px (0.85rem) | 400 | — |
| caption | Inspire | 12.992px (0.81rem) | 400 | — |
| link | InspireTWDC | 12px (0.75rem) | 500 | 1.50 |
| link | InspireTWDC | 12px (0.75rem) | 700 | 1.50 |
| caption | InspireTWDC | 12px (0.75rem) | 400 | 1.50 |
| link | InspireTWDC | 12px (0.75rem) | 400 | — |
3.3 Hierarchy
The large DINNext sizes (44px, 32px) establish clear page hierarchy. InspireTWDC and Inspire handle smaller headings and UI text. There’s a strong weight contrast — 800 for major headings, 400 for body, 700 for buttons — which keeps text scannable. Line heights tighten for headings (around 1.2–1.33) and loosen for small captions (1.5), balancing density with readability.
4. Spacing & Layout
4.1 Spacing Scale
Base grid: 8px. They break it occasionally for micro adjustments.
| px | rem | Count |
|---|---|---|
| 1px | 0.06rem | 3 |
| 3px | 0.19rem | 1 |
| 4px | 0.25rem | 1 |
| 5px | 0.31rem | 4 |
| 6px | 0.38rem | 2 |
| 8px | 0.50rem | 13 |
| 10px | 0.63rem | 10 |
| 11px | 0.69rem | 5 |
| 12px | 0.75rem | 37 |
| 16px | 1.00rem | 41 |
| 18px | 1.13rem | 1 |
| 19px | 1.19rem | 1 |
| 20px | 1.25rem | 3 |
| 24px | 1.50rem | 1 |
| 25px | 1.56rem | 1 |
| 32px | 2.00rem | 2 |
| 36px | 2.25rem | 1 |
| 40px | 2.50rem | 5 |
| 70px | 4.38rem | 1 |
4.2 Layout
Breakpoints:
400px, 414px, 425px, 426px, 476px, 530px, 550px, 600px, 767px, 769px, 890px, 896px, 897px, 1023px, 1024px, 1280px.
This is a granular set — likely for precise device targeting (iPhone widths, tablets, etc.). Container widths adjust at each, maintaining the 8px spacing internally.
5. Visual Elements
Border Radius
| Value | Count | Elements |
|---|---|---|
| 0px 0px 8px 8px | 5 | menu |
| 0px 0px 6px 6px | 5 | menuitem |
| 2px | 5 | buttons, preference center |
| 3px | 2 | div |
| 10px | 1 | alertdialog |
| 16px | 4 | switch |
| 17px | 1 | Filter |
| 39px | 2 | div, searchbox |
| 40px | 1 | button |
| 50px | 1 | input |
They mix sharp and rounded corners depending on component type. Pills (39px, 50px) for inputs/switches; small radii (2px, 3px) for buttons.
Shadows
- rgba(0, 0, 0, 0.16) 0px 1px 3px 0px — subtle elevation
- rgb(153, 153, 153) 0px 2px 10px -3px — drop shadow
- rgb(199, 197, 199) -3px -3px 5px -2px — inner shadow
- rgb(199, 197, 199) 0px 0px 12px 2px — glow
Mostly subtle; no heavy material shadows.
Borders
Common: 1px solid in grays or black. Used for switches, inputs, buttons. Dividers use #EBEBF7.
6. Components
6.1 Buttons
No explicit button style data beyond border radius and typography. Based on tokens:
- Primary alt hover: #AAD2F3 background
- Pressed: #004783 color, #80BBED background
- Focus: #005FAE color
Small radius (2px) for standard buttons, large (40px) for special pill buttons.
6.2 Links
Four variants:
- Blue (#0000ee) underline; hover: #3860be, no underline.
- Dark gray (#48494A) bold; hover: #3860be.
- Brand blue (#0077da) medium weight; hover: #3860be.
- White text; hover: #3860be.
Underline behavior changes — legacy links keep it, modern links drop it on hover.
6.3 Forms
Text inputs:
- Default: white bg, #6C6E6F text, border-radius 39px, padding 12px 34px 12px 0px.
- Focus: 1px solid black outline, bg #1EAEDB, white text.
Checkboxes:
- Default: transparent bg, black text, no border.
- Focus: same as input focus — bg #1EAEDB, white text, black border.
6.4 Cards
Not explicitly extracted, but likely use light gray (#F4F4F4) backgrounds, subtle shadows, 8–16px padding.
7. Design Tokens (CSS)
:root {
/* Colors */
--brand-primary-blue: #0077da;
--brand-black: #000000;
--brand-white: #ffffff;
--brand-dark-gray: #252526;
--brand-mid-gray: #555555;
--brand-link-blue: #0000ee;
--brand-deep-link-blue: #0040e5;
--brand-focus-blue: #005fae;
--brand-success-green: #0D830F;
--brand-blue-40: #55A4E6;
--brand-button-alt-pressed-color: #004783;
--brand-blue-100: #000419;
--brand-warning-dark: #FFB759;
--brand-blue-50: #2B8EE0;
--brand-pagination-dot: rgba(191, 226, 255, 0.5);
--brand-gray-10: #F4F4F4;
--brand-gray-50: #848687;
--brand-gray-100: #121213;
--brand-gray-40: #9D9E9F;
--brand-warning-light: #E58810;
--brand-day-font-color: #523214;
--brand-divider: #EBEBF7;
--brand-day-container-bg: #F8E9DA;
--brand-error-red: #D40909;
--brand-error-dark: #FF7F7F;
--brand-accordion-separator: #CECFCF;
--brand-retailer-modal-text: #48494A;
--brand-booking-bar-bg: #18191B;
/* Typography */
--font-dinnext: 'DINNext';
--font-inspire: 'Inspire';
--font-inspire-twdc: 'InspireTWDC';
/* Spacing */
--space-1: 1px;
--space-3: 3px;
--space-4: 4px;
--space-5: 5px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-11: 11px;
--space-12: 12px;
--space-16: 16px;
--space-18: 18px;
--space-19: 19px;
--space-20: 20px;
--space-24: 24px;
--space-25: 25px;
--space-32: 32px;
--space-36: 36px;
--space-40: 40px;
--space-70: 70px;
/* Border Radius */
--radius-menu: 0px 0px 8px 8px;
--radius-menuitem: 0px 0px 6px 6px;
--radius-sm: 2px;
--radius-3: 3px;
--radius-10: 10px;
--radius-switch: 16px;
--radius-filter: 17px;
--radius-pill-search: 39px;
--radius-pill-button: 40px;
--radius-pill-input: 50px;
/* Shadows */
--shadow-sm: rgba(0, 0, 0, 0.16) 0px 1px 3px 0px;
--shadow-md: rgb(153, 153, 153) 0px 2px 10px -3px;
--shadow-inner: rgb(199, 197, 199) -3px -3px 5px -2px;
--shadow-glow: rgb(199, 197, 199) 0px 0px 12px 2px;
}8. AI Coding Assistant Prompt
# Go.com Design System Specification
You are a Go.com design expert. Build UIs matching their visual language exactly.
## Brand Context
Go.com is Disney’s corporate portal, blending functional clarity with brand-owned typography and a blue-heavy palette. The system is modular, scalable, and designed for content-heavy experiences. Accessibility and precise spacing are critical.
## Color Palette
- Primary Blue: #0077da — CTAs, interactive elements
- Black: #000000 — Core text, outlines, logo
- White: #ffffff — Backgrounds, reverse text
- Dark Gray: #252526 — Headers, panels
- Mid Gray: #555555 — Secondary text, icons
- Link Blue: #0000ee — Inline links
- Deep Link Blue: #0040e5 — Hover/focus link state
- Focus Blue: #005fae — Focus outlines
- Success Green: #0D830F — Success states
- Blue 40: #55A4E6 — Hover backgrounds
- Button Alt Pressed Color: #004783 — Pressed state text
- Blue 100: #000419 — Dark backgrounds
- Warning Dark: #FFB759 — Warning states
- Blue 50: #2B8EE0 — Buttons
- Pagination Dot: rgba(191, 226, 255, 0.5) — Carousel indicators
- Gray 10: #F4F4F4 — Surfaces
- Gray 50: #848687 — Mid neutrals
- Gray 100: #121213 — Dark neutrals
- Gray 40: #9D9E9F — UI copy
- Warning Light: #E58810 — Light warning
- Day Font Color: #523214 — Calendar text
- Divider: #EBEBF7 — Separators
- Day Container BG: #F8E9DA — Calendar background
- Error Red: #D40909 — Errors
- Error Dark: #FF7F7F — Alerts
- Accordion Separator: #CECFCF — UI dividers
- Retailer Modal Text: #48494A — Modal text
- Booking Bar BG: #18191B — Booking components
## Typography
Fonts:
- Headings: 'DINNext'
- Body/UI: 'Inspire', 'InspireTWDC'
| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 44px | 800 | 1.23 | Main page titles |
| H1 alt | 32px | 800 | 1.19 | Secondary titles |
| H1 Inspire | 26px | 600 | 1.23 | Section headings |
| H1 InspireTWDC | 24px | 800 | 1.33 | Smaller headings |
| Button | 16px | 400/700 | 1.00 | Button labels |
| Link | 16px | 400/500 | 1.00–1.38 | Inline links |
| Caption | 12–13.6px | 400 | 1.50 | Meta info |
## Spacing & Grid
Base: 8px
Scale: 1, 3, 4, 5, 6, 8, 10, 11, 12, 16, 18, 19, 20, 24, 25, 32, 36, 40, 70px
Use multiples of 8px for layout; odd values for fine-tuning components.
## Border Radius
- Menu: 0 0 8px 8px
- Menuitem: 0 0 6px 6px
- sm: 2px — Buttons
- md: 3px — Small containers
- alert: 10px — Modals
- switch: 16px
- filter: 17px
- pill-search: 39px
- pill-button: 40px
- pill-input: 50px
## Shadows
- sm: rgba(0,0,0,0.16) 0px 1px 3px 0px
- md: rgb(153,153,153) 0px 2px 10px -3px
- inner: rgb(199,197,199) -3px -3px 5px -2px
- glow: rgb(199,197,199) 0px 0px 12px 2px
## Components
### Primary Button
```css
.btn-primary {
background: var(--brand-primary-blue);
color: var(--brand-white);
padding: var(--space-12) var(--space-16);
border-radius: var(--radius-sm);
font-family: var(--font-inspire-twdc);
font-weight: 700;
font-size: 16px;
border: none;
transition: background 150ms ease;
}
.btn-primary:hover { background: var(--brand-blue-50); }
.btn-primary:focus { outline: 1px solid var(--brand-focus-blue); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```
### Secondary Button
```css
.btn-secondary {
background: transparent;
color: var(--brand-primary-blue);
border: 1px solid var(--brand-primary-blue);
border-radius: var(--radius-sm);
padding: var(--space-12) var(--space-16);
}
.btn-secondary:hover { background: var(--brand-blue-40); }
```
### Input Field
```css
.input {
background: var(--brand-white);
color: #6C6E6F;
border: none;
border-radius: var(--radius-pill-search);
padding: var(--space-12) 34px var(--space-12) 0px;
}
.input:focus {
outline: 1px solid var(--brand-black);
background: #1EAEDB;
color: var(--brand-white);
}
```
### Card
```css
.card {
background: var(--brand-gray-10);
border-radius: var(--radius-md);
padding: var(--space-16);
box-shadow: var(--shadow-sm);
}
```
## Layout & Responsive Rules
- Max width: 1280px
- Mobile padding: 16px
- Desktop padding: 24px
- Breakpoints: 400, 414, 425, 426, 476, 530, 550, 600, 767, 769, 890, 896, 897, 1023, 1024, 1280px
## Interaction Rules
- Transition: 150ms ease on hover/focus
- Focus indicators: 1px solid focus color
- Use semantic colors for validation
## DO
- Use only palette colors
- Maintain 8px grid
- Use InspireTWDC for buttons/links
- Respect border radius mappings
- Keep shadows subtle
## DON'T
- Invent new colors
- Mix sharp and pill corners without reason
- Remove focus outlines
- Use low contrast combos
- Overuse shadows
## Code Examples
### Primary Button
```css
<button class="btn-primary">Go</button>
```
### Card
```css
<div class="card">Content</div>
```
### Input
```css
<input class="input" placeholder="Search">
```9. Summary
TL;DR — Go.com’s system is Disney’s corporate UI: blue-heavy, brand-owned type, 8px grid, clear hierarchy. It’s functional first with subtle personality in type and rounded elements.
Brand Keywords — corporate-functional, blue-forward, disney-owned-type, modular-accessible