Ted Design System Deep Dive

1. Brand Overview

TED isn’t just a platform for talks — it’s a brand that projects authority, clarity, and intellectual energy. The design language reflects that: stripped-down, functional, but with bold injections of its signature red to punctuate the seriousness with urgency. This is content-first design. You’re not here to marvel at the UI; you’re here to consume ideas. The interface gets out of the way, but it’s not invisible — it’s opinionated in its restraint.

The vibe is “editorial meets tech.” There’s a modern sans-serif (Inter) doing most of the heavy lifting, paired with Helvetica in utilitarian contexts. They keep a tight grid, clear typographic hierarchy, and avoid decorative flourishes. The red (#eb0028) is the loudest color in the system, and it’s used sparingly — mostly for calls to action and brand marks.

This is a system clearly built to scale across devices. Breakpoints cover everything from tiny 320px screens to massive 2200px widths. The Tailwind CSS framework is in play, so utility classes and responsive modifiers dominate. That means consistency is baked into the build process — spacing, typography, and colors are locked down.

If you’re designing for TED, you’re designing for legibility at all sizes, quick scanning, and high contrast. The audience is global and diverse, so accessibility is non-negotiable. This is why you see a lot of black (#121212) and white (#ffffff) text/background combos — maximum contrast. The occasional grayscale tone (#767676, #b5b5b5) is used to soften secondary information.

Overall philosophy: Content first, brand second, UI invisible but precise.

2. Color System

2.1 Primary Colors

The primary brand color is rgb(235, 0, 40), normalized to #eb0028. This is TED’s red — high-energy, high-contrast, and psychologically urgent. It’s the color of deadlines, importance, and attention. Compared to other knowledge platforms (think Medium’s black/white, YouTube’s softer red), TED’s red is sharper and less muted. This works because TED’s content is about ideas worth spreading — urgency matters.

The supporting colors are mostly grayscale neutrals: black (#000000), off-black (#121212), various grays (#767676, #555555, #262626, #b5b5b5, #696969), and white (#ffffff). A few accent colors appear: a blue (#005fcc) for certain focus states, and green (#37cd8f) for consent widget elements. These are functional, not decorative.

2.2 Complete Palette

2.3 Color Relationships

Contrast is king here. #eb0028 on #ffffff is a strong combo (ratio ~4.5:1), enough for WCAG AA for large text. Black (#121212) on white is well above AA. Secondary grays like #767676 on white are borderline for small text — but they’re used for secondary info, so it’s acceptable.

Dark mode is not fully implemented on the site, but there are “ondark” variants (e.g., #b5b5b5 for tertiary text on dark). The palette supports inversion easily — swap white backgrounds for #121212, invert text colors, keep red as-is.

2.4 Usage Guide

• Primary actions: #eb0028 on white or black backgrounds. Don’t use red for non-interactive elements — keeps urgency intact.
• Body text: #121212 on light, #ffffff on dark.
• Secondary text: #767676 or #b5b5b5 depending on background.
• Focus states: Use #005fcc or rgba(39,99,255,.5) rings — avoid mixing with red to keep focus distinct from action.
• Avoid: Using multiple accent colors together. Red is strong — pairing it with blue or green will look chaotic. Keep accents isolated.

3. Typography

3.1 Font Families

Two main families:

• Inter — Modern sans, used for headings, body, captions, links. No fallbacks listed in most contexts. This is the primary brand font.
• Helvetica — With a massive fallback stack: Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei, Hind, MS Gothic, Apple SD Gothic Neo, NanumBarunGothic. This shows global support — TED cares about multilingual compatibility.

No Google Fonts or Adobe Fonts are loaded — likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

The jump from 84px H1 to 40px is dramatic — TED wants the hero text to dominate. Smaller headings (32px, 24px, 20px) keep a tight scale for section titles. Captions at 14px and 12px are well-spaced and often uppercase — emphasizing metadata and category labels.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid, but with some 4px increments. Common values:

4.2 Layout

Breakpoints from 320px to 2200px — extremely wide coverage. Tailwind classes suggest a mobile-first build, scaling up with min-width queries.

5. Visual Elements

Border Radius

Values range from sharp to extreme:

• 0px 4px 4px 0px — specific UI elements (probably pill edges)
• 2px — subtle rounding for small elements
• 4px — default for buttons, inputs
• 6px — rare, maybe modals
• 8px — menus, cards
• 14px — rare, maybe avatars
• 1e+07px and 3.35544e+07px — effectively full pill/round buttons
• 50% — perfect circles (modals, avatars)

Shadows

Mostly flat. Occasional depth:

• rgba(0,0,0,0.15) 0px 12px 32px — large drop shadow, rare
• rgb(204,204,204) 0px 0px 2px 2px — soft border-like shadow
• rgba(0,0,0,0.1) 0px 2px 1px — subtle lift

6. Components

6.1 Buttons

Several variants:

Close Button (circle)

• Default: bg #696969, color #696969, padding 0, radius 50%, border 2px solid #696969
• Hover: color #ffffff
• Focus: bg var(--osano-dialog-foreground-color), rotate 90deg, shadow added

Primary Red

• Default: bg #eb0028, color #ffffff, padding 8px 12px, radius 4px, border 1px solid #ffffff, font-weight 700
• Hover: transparent bg, color #ffffff
• Focus: bg var(--osano-button-deny-background-hover), shadow 4px 12px

Dark Gray

• Default: bg #121212, color #ffffff, padding 12px 20px, radius 4px

White

• Default: bg #ffffff, color #121212, padding 12px 20px, radius 4px

Disabled/Muted

• Default: bg #aaaaab, color #3b3a3e, padding 24px 16px, radius 4px

6.2 Links

Four styles:

• Black (#121212), underline
• Black (#000000), no underline
• White (#ffffff), underline
• Gray (#b5b5b5), underline

Hover: color currentcolor.

6.3 Forms

Inputs:

• Search: transparent bg, no border, padding-left 24px
• Email: white bg, radius 4px, padding 16px
• Checkboxes: transparent bg, no border

Focus states often use var(--osano-toggle-button-on-disabled), color changes to #767676.

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-gray-light: #e5e7eb;
  --color-black-off: #121212;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-medium: #767676;
  --color-red-primary: #eb0028;
  --color-gray-dark: #555555;
  --color-charcoal: #262626;
  --color-gray-tertiary-dark: #b5b5b5;
  --color-gray-dim: #696969;
  --color-red-bright: #fa0f37;
  --color-red-bright-alt: #f80d35;
  --color-gray-very-light: #f6f6f6;
  --color-blue-bright: #005fcc;
  --color-ring-offset: #ffffff;
  --color-ring-blue: rgba(39,99,255,.5);
  --color-widget-outline: #29246a;
  --color-swiper-blue: #007aff;
  --color-widget-green: #37cd8f;
  --color-toggle-red: #cd3739;

  /* Typography */
  --font-primary: 'Inter', sans-serif;
  --font-secondary: 'Helvetica', Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei, Hind, MS Gothic, Apple SD Gothic Neo, NanumBarunGothic;

  /* Spacing */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-80: 80px;

  /* Border Radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-lg: rgba(0,0,0,0.15) 0px 12px 32px;
  --shadow-sm: rgba(0,0,0,0.1) 0px 2px 1px;
}

8. AI Coding Assistant Prompt

# TED Design System Specification

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

## Brand Context
TED values clarity, urgency, and content-first presentation. The design is minimal but precise, with bold red accents for primary actions and a neutral grayscale base for everything else.

## Color Palette
- Light Gray: #e5e7eb — backgrounds, borders
- Off-Black: #121212 — primary text
- Black: #000000 — icons, text
- White: #ffffff — backgrounds, inverse text
- Medium Gray: #767676 — secondary text
- TED Red: #eb0028 — CTAs, brand accents
- Dark Gray: #555555 — dividers, borders
- Charcoal: #262626 — tertiary text
- Light Warm Gray: #b5b5b5 — tertiary text on dark
- Dim Gray: #696969 — icons, secondary buttons
- Bright Red: #fa0f37 — hover/focus variation
- Bright Red Alt: #f80d35 — hover/focus variation
- Very Light Gray: #f6f6f6 — hover backgrounds
- Bright Blue: #005fcc — focus indicators
- Ring Offset White: #ffffff — focus ring offset
- Ring Blue: rgba(39,99,255,.5) — focus ring
- Widget Outline Purple: #29246a — consent widget outline
- Swiper Blue: #007aff — carousel controls
- Widget Green: #37cd8f — consent widget
- Toggle Red: #cd3739 — toggle backgrounds

## Typography
Font families:
- Primary: "Inter", sans-serif
- Secondary: "Helvetica", Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei, Hind, MS Gothic, Apple SD Gothic Neo, NanumBarunGothic

Type sizes:
| Level | Font | Size | Weight | Line Height | Use For |
| H1    | Inter | 84px | 600 | 1.00 | Hero titles |
| H2    | Inter | 40px | 400 | 1.05 | Section headers |
| H3    | Inter | 32px | 600 | 1.10 | Subsections |
| Body  | Inter | 16px | 400/600/700 | 1.30–1.50 | Body text |
| Caption | Inter | 14px | 400–700 | 1.30–1.40 | Metadata |
| Small | Inter | 12px | 400–700 | 1.25–1.72 | Labels |

## Spacing & Grid
Base: 8px
Scale: 4px, 6px, 8px, 9px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 80px
Use for padding, margins, section gaps. Maintain multiples of 4px.

## Border Radius
- sm: 2px — small inputs
- md: 4px — buttons, cards
- lg: 8px — menus
- xl: 14px — avatars
- full: 50% — circular buttons, icons

## Shadows & Depth
Mostly flat. Rare shadows:
- Large: rgba(0,0,0,0.15) 0px 12px 32px
- Small: rgba(0,0,0,0.1) 0px 2px 1px

## Component Specifications

### Primary Button
Default:
```css
background-color: #eb0028;
color: #ffffff;
padding: 8px 12px;
border-radius: 4px;
border: 1px solid #ffffff;
font-weight: 700;
font-size: 16px;
```
Hover: transparent bg, color #ffffff
Focus: bg var(--osano-button-deny-background-hover), shadow rgba(0,0,0,0.1) 0px 4px 12px

### Secondary Button (Dark)
Default: bg #121212, color #ffffff, padding 12px 20px, radius 4px

### Link
Black text, underline; hover: color currentcolor

### Input (Email)
Default: bg #ffffff, color #000000, radius 4px, padding 16px
Focus: bg var(--osano-toggle-button-on-disabled), color #767676

### Card
White bg, radius 8px, padding 32px, border 1px solid #e5e7eb

## Layout & Responsive Rules
Breakpoints: 320px, 376px, 480px, 576px, 640px, 768px, 1024px, 1280px, 1400px, 1800px, 1920px, 2200px
Mobile-first, scale up content containers.

## Interaction Rules
- Transitions: 150ms ease
- Focus: visible ring with --color-ring-blue
- Hover: subtle color shifts

## DO
- Use exact palette colors
- Maintain 8px grid
- Reserve red for CTAs
- Keep text sizes to defined scale
- Use Inter for headings, Helvetica for UI

## DON'T
- Invent new colors
- Mix sharp and rounded corners inconsistently
- Apply heavy shadows
- Use red for non-interactive elements

## Code Examples

Primary Button (Tailwind):
```html
<button class="bg-[#eb0028] text-white px-3 py-2 rounded border border-white font-bold text-base hover:bg-transparent hover:text-white focus:shadow-lg">
  Watch Now
</button>
```

Card:
```html
<div class="bg-white rounded-lg p-8 border border-[#e5e7eb]">
  <h2 class="text-[#121212] text-2xl font-semibold">Title</h2>
  <p class="text-[#767676] mt-4">Description</p>
</div>
```

Input:
```html
<input type="email" class="bg-white text-black rounded-md p-4 focus:bg-[var(--osano-toggle-button-on-disabled)] focus:text-[#767676]" placeholder="Your email">
```

9. Summary

TL;DR — TED’s design system is minimal, typographically driven, with bold red accents and a strict grayscale base. It’s built on an 8px grid, uses Inter and Helvetica, and keeps UI flat with rare shadows.

Brand Keywords: content-first, high-contrast, urgency-driven, grid-disciplined, global-readable