Learning & Reference / iOS / Android / Web

TED

TED stays out of the way of the talk: a black and white page in Inter, one red for the logo and topic labels, and flat gray tiles for everything you can do around a video.

Download
  • #EB0028
  • #121212
  • #494949
  • #F6F6F6
  • #ECECEC
  • #FFFFFF

Color

Every color token in the file, grouped by role.

Brand

  • primary#EB0028
  • on primary#FFFFFF
  • ink secondary#494949

Surfaces

  • canvas#FFFFFF
  • surface#F6F6F6

Text

  • ink#121212
  • ink muted#696969
  • ink faint#B5B5B5
  • on band#FFFFFF

Lines

  • border#D9D9D9

More

  • membership#D91E18
  • chip#ECECEC
  • band#121212
  • tag dark#262626
  • nudge#2763FF

Typography

Each style is set with the file's own family, size, weight and spacing.

  • InterOpen font, shown as published.
  • display40px / 600 / 42px

    TED

  • headline32px / 600 / 35.2px

    TED

  • title28px / 400 / 36.4px

    Pack my box with five dozen liquor jugs

  • section22px / 700 / 29.7px

    Pack my box with five dozen liquor jugs

  • body16px / 400 / 24px

    The quick brown fox jumps over the lazy dog

  • small14px / 500 / 18.9px

    The quick brown fox jumps over the lazy dog

  • eyebrow12px / 600 / 18px

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • xs2px
  • sm4px
  • md8px
  • lg12px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md12px
  • base16px
  • lg20px
  • xl24px

Components

Component tokens drawn with the colors, type and corners they name.

  • button membership
    button-membership
  • button outline
    button-outline
  • action chip
    action-chip
  • duration tag
    duration-tag
  • nav item
    nav-item
  • dark band
    dark-band
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 121 lines
version: alpha
name: TED-design-analysis
description: "A talks library drawn in black and white: Inter everywhere, a near-black ink, one signal red for the logo and topic labels, dark editorial bands, gray chip actions and 4px corners on almost everything."
status: Draft
appVersion: "measured in a browser, 2026-10-15"
platformsCovered: [Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#eb0028"
  on-primary: "#ffffff"
  membership: "#d91e18"
  ink: "#121212"
  ink-secondary: "#494949"
  ink-muted: "#696969"
  ink-faint: "#b5b5b5"
  canvas: "#ffffff"
  surface: "#f6f6f6"
  chip: "#ececec"
  band: "#121212"
  on-band: "#ffffff"
  tag-dark: "#262626"
  border: "#d9d9d9"
  nudge: "#2763ff"

typography:
  display:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 42px
    letterSpacing: -2px
  headline:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 35.2px
    letterSpacing: -1.28px
  title:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 36.4px
    letterSpacing: -0.18px
  section:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 22px
    fontWeight: 700
    lineHeight: 29.7px
  body:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
  small:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 18.9px
  eyebrow:
    fontFamily: "Inter, ui-sans-serif, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 600
    lineHeight: 18px
    letterSpacing: 0.48px

rounded:
  xs: 2px
  sm: 4px
  md: 8px
  lg: 12px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  base: 16px
  lg: 20px
  xl: 24px

components:
  button-membership:
    backgroundColor: "{colors.membership}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    height: 40px
    padding: 0 16px
  button-outline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.sm}"
    height: 44px
    padding: 12px 16px
  action-chip:
    backgroundColor: "{colors.chip}"
    textColor: "{colors.ink}"
    typography: "{typography.small}"
    rounded: "{rounded.sm}"
    height: 43px
  duration-tag:
    backgroundColor: "{colors.tag-dark}"
    textColor: "{colors.on-band}"
    typography: "{typography.eyebrow}"
    rounded: "{rounded.xs}"
    height: 21px
    padding: 0 4px
  nav-item:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    height: 56px
    padding: 20px 12px
  dark-band:
    backgroundColor: "{colors.band}"
    textColor: "{colors.on-band}"
    typography: "{typography.headline}"
    padding: 24px

Overview

TED publishes short talks by speakers from many fields, free to watch on the web and in the apps. The public site is drawn almost entirely in black and white: Inter for every line of text, a near-black ink, gray chips for actions and dark editorial bands, with one red reserved for the logo and the small topic labels. [Observed]

What defines the look:

  1. One signal red. #eb0028 fills the logo and sets the uppercase topic eyebrows above each talk. It is never a background for page content. [Measured]
  2. Inter, tight at the top. Section headlines are 32 on 35.2 at 600 with -1.28px tracking, and the newsletter title is 40 on 42 with -2px. Talk titles drop to weight 400. [Measured]
  3. Near-black, not black. Ink and dark bands are #121212, with grays #494949, #696969 and #b5b5b5 for secondary text. [Measured]
  4. 4px corners. Inputs, chips, buttons and cards use 4px. Duration tags use 2px. Only the newsletter radio pills are fully round. [Measured]
  5. Gray chip actions. Share, Save, Like and Comment on a talk are flat gray tiles, not outlined or colored buttons. [Measured]

Source for this file: the TED home page, the talks listing, one talk page and the newsletter sign-up page, measured in a browser at 1440 and 390 wide on 2026-10-15, plus a pass with the dark color scheme requested. TED does not publish a design system. No account screens and no app captures were used. See Known Gaps.

Core

Colors

RoleValueWhere
Signal red#eb0028Logo fill, uppercase topic eyebrows [Measured]
Membership red#d91e18The Membership button and the related topics heading [Measured]
Ink#121212Headlines, talk titles, dark bands [Measured]
Secondary text#494949, #696969Descriptions, speaker names, metadata [Measured]
Faint text#b5b5b5Inactive action labels, footer notes [Measured]
Canvas#ffffffPage [Measured]
Surface#f6f6f6Action tiles, panels [Measured]
Chip#ecececThe active Share tile and section fills [Measured]
Duration tag#262626 with white textTalk length on thumbnails [Measured]
Border#d9d9d9, and ink at 16 percentInputs, filter chips [Measured]
Sign-in nudge#2763ffA full-width bar under the talk inviting sign-in [Measured]

Typography

Inter is the only text face, loaded as a variable font from 100 to 900. [Measured]

RoleDesktopMobileWeight
Newsletter title40 on 42, -2px32 on 35.2, -1.28px600 [Measured]
Section headline32 on 35.2, -1.28px24 on 27.6, -0.96px600 [Measured]
Listing title36 on 4524 on 31.2400 [Measured]
Talk title28 on 36.422 on 28.6400 [Measured]
Talk section heading22 on 29.7not measured700 [Measured]
Body16 on 2416 on 24400 [Measured]
Small and action labels14 on 18.9 to 19.6same400 to 700 [Measured]
Eyebrow12 on 18, 0.48px, uppercasesame600 [Measured]

Headlines tighten tracking as they grow (about -0.04em at 32 and -0.05em at 40), while body text keeps normal tracking. [Measured]

Shape and spacing

4px is the house corner for inputs, chips, buttons, tiles and the sign-in bar. Duration tags use 2px, a few talk page panels 8 and 12, and the newsletter choices are full pills. [Measured] The top navigation items carry 20px vertical and 12px side padding, inputs 12 to 16px. Action tiles are 43 to 44 high. [Measured]

Iconography and motion

Icons come from a dedicated icon font loaded by the site. [Measured] Motion was not measured. [Inferred]

Themes

Light only. Requesting the dark color scheme changes nothing on the pages measured, so the site has no dark theme. The dark look comes from fixed #121212 bands. [Measured]

Platform: iOS

How the TED iOS app looks and behaves was not captured. TED does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on iOS: Chevron plus previous title, swipe from the left edge.

Not measured. [Inferred]

Primary navigation

Expected on iOS: Bottom tab bar, about five items.

A bottom tab bar for the main areas of a video library. [Inferred]

Main action

Expected on iOS: Nav bar or bottom bar button.

Playing a talk, likely from a full-width thumbnail. [Inferred]

Sheets, dialogs and messages

Expected on iOS: Action sheets, alerts, modals.

Not measured. [Inferred]

Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Not measured. [Inferred]

Text sizing

Expected on iOS: Dynamic Type.

Not measured. [Inferred]

Touch and pointer targets

Expected on iOS: 44pt minimum.

Not measured. [Inferred]

Insets and system bars

Expected on iOS: Safe areas, status bar.

Not measured. [Inferred]

Icons

Expected on iOS: SF Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on iOS: Equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on iOS: For each important component: what iOS expects, what this app does, and why it deviates.

The app is expected to share the black and white palette, the red logo and Inter-like type with the web. [Inferred]

Platform: Android

How the TED Android app looks and behaves was not captured. TED does not publish a design system, so every item below is inferred from the web design and platform conventions. No device capture was done.

Back and up navigation

Expected on Android: System back and gesture, up arrow in the top bar.

Not measured. [Inferred]

Primary navigation

Expected on Android: Navigation bar, rail on tablets.

A bottom navigation bar for the main areas of a video library. [Inferred]

Main action

Expected on Android: Floating action button.

Playing a talk, likely from a full-width thumbnail. [Inferred]

Sheets, dialogs and messages

Expected on Android: Bottom sheets, dialogs, snackbars.

Not measured. [Inferred]

Controls

Expected on Android: Material switches, pickers, chips.

Not measured. [Inferred]

Text sizing

Expected on Android: Font scale.

Not measured. [Inferred]

Touch and pointer targets

Expected on Android: 48dp minimum.

Not measured. [Inferred]

Insets and system bars

Expected on Android: Edge to edge, system bars.

Not measured. [Inferred]

Icons

Expected on Android: Material Symbols or custom.

Not measured. [Inferred]

Account and sign-in rules

Expected on Android: Account deletion and data safety requirements. Note the date checked.

Not verified. Sign-in rules and account deletion were not checked. [Inferred] Checked: 2026-10-15 against the public web only.

Platform conformance

Expected on Android: For each important component: what Android expects, what this app does, and why it deviates.

The app is expected to share the black and white palette, the red logo and Inter-like type with the web. [Inferred]

Platform: Web

The home page, talks listing, a talk page and the newsletter page, measured at 1440 and 390 wide.

Back and up navigation

Expected on Web: Browser back, breadcrumbs.

Browser back. Talk pages have no breadcrumb. [Observed]

Primary navigation

Expected on Web: Top nav or sidebar.

Desktop: a white top bar of uppercase text menus (Watch, Discover, Attend, Participate, About) at 16 on 24, 56 high, with Sign in and a red Membership button at the right. Mobile: the menus collapse behind a 44 high menu button and Sign in shrinks to a 32 high link. [Measured]

Main action

Expected on Web: Page-level button.

On a talk, the video itself. Around it, a 40 high Membership button in #d91e18 with a 4px corner, and an outlined "Read transcript" button 44 high with a 1px ink border and 12px bold uppercase text. [Measured]

Sheets, dialogs and messages

Expected on Web: Modals, toasts.

A full-width #2763ff bar under the talk invites signing in to save and comment, with a 4px corner and 50 high. [Measured] Modals were not measured. [Inferred]

Controls

Expected on Web: Native or custom.

Talk listing filters are white chips with a 1px border of ink at 16 percent, a 4px corner and 44 high on mobile. The search field is 48 high with a 1px #d9d9d9 border. Newsletter choices are full-pill radio buttons with a 1px ink border, and the email field is 44 high. [Measured]

Text sizing

Expected on Web: Browser zoom.

Sizes are fixed pixel values that step down at the mobile width (32 to 24 for section headlines, 28 to 22 for talk titles). [Measured]

Touch and pointer targets

Expected on Web: Pointer and keyboard.

Mobile action tiles, filter chips and the menu button are 43 to 44 high. Desktop menus are 56 high. Newsletter Select buttons are 38 high. [Measured]

Insets and system bars

Expected on Web: Viewport, scrollbars.

Not measured. [Inferred]

Icons

Expected on Web: Any.

An icon font for interface glyphs, drawn in ink. [Measured]

Account and sign-in rules

Expected on Web: Not applicable unless the product has accounts.

Not applicable to the public pages measured. Sign-in is offered but not required to watch. [Observed]

Platform conformance

Expected on Web: For each important component: what the web norm is, what this app does, and why it deviates.

A conventional responsive site: the top menus collapse to a menu button, type steps down, and the 4px corner and palette stay the same at every width. [Measured]

Cross-platform consistency

Consistent across platforms: the red logo, black and white palette and Inter text. [Measured for web, Inferred for the apps]

Intentionally different: not measured. [Inferred]

Do's and Don'ts

Do

  • Keep the page black and white, and spend red only on the logo and topic eyebrows.
  • Set headlines in Inter 600 with tracking tightened as size grows.
  • Use 4px corners for inputs, chips, tiles and buttons.
  • Use flat gray tiles for secondary actions like Share and Save.

Don't

  • Don't fill large areas with red.
  • Don't use pure black for ink or bands. Use #121212.
  • Don't round buttons into pills. Only the newsletter radio choices are round.

Known Gaps

  • The signed-in experience, the video player controls and modals were not measured.
  • The iOS and Android apps were not captured, and TED publishes no design system, so every mobile topic is inferred.
  • Motion and exact breakpoints were not measured.
  • The site has no dark theme on the pages measured. Whether the apps have one is not known.
  • Account deletion and store policy rules were not verified.
  • The cookie banner uses the same red as the logo. It belongs to a consent vendor and was left out of the measurements.