--- version: alpha name: "The Ringer" description: "Pure-black sports and culture editorial built on GT America, sky-blue pill CTAs, and photograph-first storytelling." colors: background: "#ffffff" surface: "#000000" surface-alt: "#f5f5f5" # light section backgrounds, newsletters strip ink: "#000000" ink-inverse: "#ffffff" ink-muted: "#767676" # bylines, metadata, captions primary: "#30c1ff" # The Ringer sky blue — pill CTAs, focus rings, hover states on-primary: "#000000" primary-hover: "#29a4d9" # was rgba(0,0,0,0.71) derived shift — Google format requires hex primary-container: "#e5e7eb" # neutral chip backgrounds border: "#000000" border-light: "#e5e7eb" # card separators on light sections focus-ring: "#30c1ff" success: "#00b112" # green indicator badges warning: "#ff891b" # orange indicator badges error: "#ff2b19" # red indicator badges shadow-soft: "#c7c5c7" # card lift, muted context typography: display-hero: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 80px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.74px display: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.67px heading-section: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.55px heading-sub: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: -0.52px heading-editorial: fontFamily: "Bradford LL, Georgia, Cambria, Times New Roman, serif" fontSize: 24px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.21px body-large: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.34px body: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px nav-link: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.32px button-ui: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.96px caption: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.2 letterSpacing: -0.24px label: fontFamily: "GT America, Archivo, Barlow, system-ui, -apple-system, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.2 letterSpacing: -0.24px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 40px 3xl: 48px 4xl: 64px rounded: none: 0px sm: 6px md: 16px lg: 24px xl: 40px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink-inverse}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.ink-inverse}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px button-ghost: backgroundColor: "transparent" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 10px 20px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 16px card-dark: backgroundColor: "{colors.surface}" textColor: "{colors.ink-inverse}" rounded: "{rounded.xl}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.pill}" padding: 12px 16px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.ink}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 10px badge-dark: backgroundColor: "{colors.surface}" textColor: "{colors.ink-inverse}" typography: "{typography.label}" rounded: "{rounded.pill}" padding: 4px 10px nav-pill: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" padding: 6px 12px nav-pill-active: backgroundColor: "{colors.surface}" textColor: "{colors.ink-inverse}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" padding: 6px 12px --- # The Ringer Design System ## Overview The Ringer's homepage is a study in editorial restraint punched up by a single chromatic commitment. The canvas is pure white on standard article pages and switches to pure black (`{colors.surface}`) for the homepage header, hero zones, and sticky navigation — a hard editorial toggle rather than a tonal shift. Against that black, the brand's signature sky blue (`{colors.primary}`) fires on every pill CTA, every hover state, and every interactive badge, functioning less like a brand color and more like a cursor pointer: it marks wherever action is possible. The result is a sports-and-culture publication that looks expensive without being showy. The typography system is singular in its restraint: GT America, a neo-grotesque with sharp humanist proportions, handles every context from 80px hero display to 12px caption. There is no serif for pull-quotes, no condensed display face for section openers — just one family at varying weights and tracked spacing. This mono-family approach makes the hierarchy work entirely through size and weight contrast: 80px weight-700 for heroes at tight `1.0` line-height, 16px weight-400 for body at loose `1.5`. Bradford LL, a warm editorial serif (fallback Georgia), appears only on long-form article pages for body copy — not on the homepage — giving the reading experience a different register without touching the chrome. The third defining quality is photograph-led layout. Story tiles are image-first, with rounded `16px`–`24px` corners on photograph containers, a generous `40px` radius on featured article cards, and full pill `9999px` on every control surface (buttons, nav pills, search inputs, notification badges). Where The Verge uses sharp `2–3px` radii on tiles to feel like a CRT tech terminal, The Ringer rounds everything aggressively — the magazine DNA of Bill Simmons and pop-culture criticism expressed in `border-radius`, not just words. **Key Characteristics:** - Pure black homepage surface (`{colors.surface}`) and white article canvas (`{colors.background}`) — a hard two-register toggle, not a gradient - Sky blue accent (`{colors.primary}`) used exclusively for interactive signals: pill CTAs, hover highlights, focus rings - GT America neo-grotesque as the sole display and body face — no decorative display font, hierarchy via weight and size only - Bradford LL serif appears only in article long-form body copy — never in navigation, chrome, or homepage tiles - 80px `{typography.display-hero}` with `1.0` line-height and `-1.74px` tracking for hero headlines — confident compression - Aggressive pill rounding (`{rounded.pill}`) on all controls — buttons, search inputs, nav chips, notification dots - Article/feature cards at `{rounded.xl}` (40px) and `{rounded.lg}` (24px) — rounded enough to feel magazine, not card-game - Photo-first tile layout with `{rounded.lg}` (16–24px) image crops — every story is an image story - Subtle multi-layer card shadows (5-step depth shadow, 0.05 max opacity) — elevation without melodrama - 8px-base spacing scale: dense on homepage tile grids, generous on article body margins - Color-shift hover on navigation links: black → `rgba(0,0,0,0.71)` — transparent near-fade rather than color swap - Motion: 150ms cubic-bezier(0.4, 0, 0.2, 1) across all transitions — Google-fast, not editorial-slow ## Colors ### Primary Canvas & Ink - **Pure White** (`{colors.background}`): The default article and light-section canvas. Homepage zones flip to black. - **Pure Black** (`{colors.surface}`): Homepage header, hero tiles, sticky nav, footer. The "TV broadcast mode" surface. - **Black Ink** (`{colors.ink}`): Primary text on light canvas — headlines, body, bylines. - **White Ink** (`{colors.ink-inverse}`): Primary type on black surfaces — nav items, hero headlines, dark-section CTAs. - **Muted Gray** (`{colors.ink-muted}`): Captions, timestamps, comment counts, secondary metadata on light surfaces. ### Brand Accent - **Ringer Blue** (`{colors.primary}`): The publication's definitive accent — sky blue applied to every pill CTA, active nav chip, focus ring, and hover badge. Visible on both black and white surfaces. On-primary text is pure black (`{colors.on-primary}`). - **Blue Hover** (`{colors.primary-hover}`): Darkened Ringer Blue for button hover states — a subtle depth shift rather than a color swap. ### Supporting & Semantic - **Neutral Chip** (`{colors.primary-container}`): Gray-100 background for category tags and filter chips on light surfaces. - **Light Border** (`{colors.border-light}`): Card separators, section dividers, input outlines on white canvas. - **Shadow Base** (`{colors.shadow-soft}`): The highlight stop in multi-layer card shadows (gray `#c7c5c7` at very low opacity). - **Success Green** (`{colors.success}`): Live status indicators, active show badges. - **Warning Orange** (`{colors.warning}`): Notification urgency badges. - **Error Red** (`{colors.error}`): Form validation, critical alerts. ### Gradient System The Ringer uses gradients only as photograph overlays — `linear-gradient(rgba(0,0,0,0) 37%, rgba(0,0,0,0.8) 81%)` — to ensure white text legibility on story tile images. Chrome surfaces are gradient-free; all UI elements are flat solid fills. ## Typography ### Font Family - **Primary**: `GT America` (self-hosted neo-grotesque from Commercial Type), fallback stack: `Archivo, Barlow, system-ui, -apple-system, sans-serif`. The sole face for all homepage, navigation, and UI contexts. - **Editorial Serif**: `Bradford LL` (serif), fallback stack: `Georgia, Cambria, Times New Roman, serif`. Used for article long-form body copy only — not on homepage tiles or any chrome. - **OpenType Features**: Negative letter-spacing at display sizes uses the font's native optical alignment. Positive `+0.96px` tracking on `{typography.button-ui}` for button label clarity at small size. *Note: GT America is a licensed typeface from Commercial Type. For external implementations: **Archivo** or **Barlow** are close substitutes (geometric-leaning grotesque with comparable weight distribution). Bradford LL is replaceable with **Spectral** or **Lora** for editorial serif contexts.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | 80px hero headlines, feature section openers, modal title large | | `display` | 40px sub-hero heds, section lead stories, large card titles | | `heading-section` | 32px section headers, weekly-show titles | | `heading-sub` | 28px secondary heds, podcast episode titles | | `heading-editorial` | 24px Bradford LL — article deck text, pull quotes (article pages only) | | `body-large` | 18px lead paragraphs, newsletter promo blurbs | | `body` | 16px default reading copy, nav text, form labels | | `nav-link` | 16px medium-weight — horizontal nav categories, section links | | `button-ui` | 14px bold, `+0.96px` tracked — all pill CTAs and action labels | | `caption` | 12px — bylines, timestamps, comment counts | | `label` | 12px medium — category chips, tag pills, status labels | ### Principles - **Mono-family by design**: GT America handles every context. The discipline is in the weight range (400–700) and size compression — not introducing a second or third display face. - **Compression at the top**: Display heroes at `1.0` line-height and `-1.74px` tracking pack visual mass tightly. Body at `1.5` releases it. The contrast between these two registers defines the editorial rhythm. - **Uppercase sparingly**: Button labels carry `+0.96px` letter-spacing (the wideness signals "tap target"), but the system does not default to UPPERCASE headlines. Case is sentence case throughout. - **Bradford as permission slip**: The serif enters only in long-form article body, where reading comfort takes priority over brand coherence. It never appears in chrome. - **Weight 700 for structure, 400 for reading**: 700 is the structural marker (heds, button labels, section openers). 400 is the reading register. 500 appears only at mid-UI contexts — navigation links, medium-weight metadata. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. The Ringer runs a compact 8px-base rhythm. Homepage tile grids stack with `{spacing.sm}` (8px) gutters; article body margins open to `{spacing.xl}` (32px) and `{spacing.2xl}` (40px). The spacing personality shifts by context: dense broadcast-grid on the homepage, generous editorial breathing room inside articles. ### Grid & Container - Max content width: 1280px on desktop - Homepage: full-width hero with contained-width headline text; 3-up or 4-up story tile grids below - Section grids: 2-up and 3-up with `{spacing.md}` (16px) gutters on desktop, `{spacing.sm}` (8px) on mobile - Sidebar layout on article pages: ~728px reading column + ~320px sidebar rail at breakpoints above 1024px ### Whitespace Philosophy - **Compact but not claustrophobic**: The tile grid is dense enough to show as much editorial content as possible, but rounded card corners and consistent `{spacing.md}` internal padding keep it from feeling compressed. - **Article body breathes**: Long-form reading gets generous line-height (`1.5`), wide margins, and `{spacing.xl}`–`{spacing.2xl}` vertical section gaps. - **Photograph is the negative space**: Instead of using whitespace to separate tiles, The Ringer uses image contrast — full-bleed photos inside rounded containers do the visual work that gutters do elsewhere. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Default body content, nav bar at rest, section labels | | Subtle (Level 1) | `rgba(0,0,0,0.05) 0px 3px 7px` | Story tile hover lift, input focus state | | Card (Level 2) | `rgba(0,0,0,0.04) 0px 13px 13px, rgba(0,0,0,0.03) 0px 30px 18px` | Featured article cards, podcast episode cards | | Elevated (Level 3) | `rgba(0,0,0,0.05) 0px 27px 27px, rgba(0,0,0,0.09) 0px 61px 36px` | Modal dialogs, dropdown menus, sticky navigation on scroll | | Dialog (Level 4+) | `rgba(0,0,0,0.10) 0px 7px 15px` (simplified) | Overlays, full-screen drawers | | Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: The Ringer uses a 5-stop multi-layer shadow system (matching Material-like depth curves) but keeps all shadow opacities below 0.10. The result is elevation that reads as physical depth rather than designed drama — cards lift slightly off the page on hover, modals sit clearly above content, but nothing casts the kind of exaggerated shadow seen in design-system showcases. The focus ring breaks with the neutral shadow palette by using Ringer Blue (`{colors.focus-ring}`), making keyboard navigation feel like using the brand's own interactive accent. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed photography inside containers, horizontal rule separators | | `sm` | 6px | Inline badges on dark tiles, small image thumbnails | | `md` | 16px | Story tile image crops, medium card containers | | `lg` | 24px | Feature article cards, episode containers, primary content cards | | `xl` | 40px | Large featured cards, hero section wrappers | | `pill` | 9999px | All buttons, search inputs, nav chips, notification badges, tag labels | The shape philosophy is binary-ish: photos and flat dividers are sharp (`{rounded.none}`); content cards graduate from `{rounded.md}` to `{rounded.xl}` based on prominence; every interactive control is pill. The Ringer does not use mid-range `8–12px` radii — the gap between `{rounded.sm}` (6px) and `{rounded.md}` (16px) is deliberate. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button Variants - **`button-primary`** — Sky blue (`{colors.primary}`) fill, black text, pill shape. The definitive CTA for subscriptions, sign-ups, and primary actions. Hover transitions to `{colors.primary-hover}` at 150ms. - **`button-secondary`** — Black fill (`{colors.surface}`), white text, pill shape. Used on light-canvas sections where a dark CTA creates stronger contrast than the blue. - **`button-ghost`** — Transparent fill, black border, black text. For tertiary actions and low-emphasis controls like "See all episodes" or "Load more" inline with content. ### Cards - **`card`** — White background, `{rounded.lg}` corners, `{spacing.md}` padding. Default story tile container on light sections. - **`card-dark`** — Black background, `{rounded.xl}` corners, `{spacing.lg}` padding. Hero and featured-section cards on the homepage dark zone. ### Inputs Standard inputs use `{rounded.pill}` — search fields are full pills, keeping them visually aligned with the button language. On focus, a `{colors.focus-ring}` border appears (Ringer Blue) and the outline ring fires for keyboard users. ### Badges / Tags - **`badge`** — Neutral gray-100 chip on light sections for category tags and filters ("NBA", "NFL", "Podcasts"). - **`badge-dark`** — Black fill, white text, pill. Used on dark tiles for the same category signals. ### Navigation - **Top Nav**: Black background, white text, Ringer Blue active pill chip. Logo left, categories center-left horizontal, right cluster (search, sign-in, subscribe CTA). Sticky on scroll; category text dims to `rgba(0,0,0,0.71)` on hover (near-fade effect, not a color swap). - **`nav-pill`** / **`nav-pill-active`**: Transparent / black fill — the same pattern as a segmented control, not individual buttons. ## Do's and Don'ts ### Do - Use `{colors.primary}` exclusively for interactive signals: CTAs, active states, focus rings. It marks where action is possible. - Default all control shapes to `{rounded.pill}` — buttons, inputs, nav chips, badges. Only content containers round to `{rounded.lg}`–`{rounded.xl}`. - Keep the type system mono-family: GT America (or Archivo/Barlow) handles every context on the homepage. Introduce Bradford LL only for article long-form body. - Use the hard canvas switch: `{colors.surface}` (black) for hero/header zones, `{colors.background}` (white) for article and light-section zones. No mid-toned gray canvases. - Let photographs be the primary visual element. Use `{rounded.md}` (16px) on image wrappers and keep image aspect ratios consistent in tile grids. - Apply `{typography.display-hero}` at weight 700 with `-1.74px` tracking for hero headlines — tight compression communicates sports urgency. - Use 5-stop multi-layer shadows at sub-0.10 opacity for card elevation — physical depth without drama. - Keep motion at 150ms cubic-bezier(0.4, 0, 0.2, 1) for all link, button, and card transitions. ### Don't - Don't introduce a second display face or condensed headline font. The Ringer's authority comes from consistency, not typographic variety. - Don't use `{colors.primary}` on body text, decorative elements, or non-interactive ink. Sky blue is an action signal, not a highlight. - Don't apply `{rounded.none}` (sharp corners) to interactive controls — every button, chip, and input uses `{rounded.pill}`. Sharp corners belong to photography only. - Don't create mid-tone gray canvases. The system toggles between pure white (`{colors.background}`) and pure black (`{colors.surface}`) — no gray-50, gray-100 page backgrounds. - Don't use exaggerated drop shadows (opacity > 0.10). The elevation system works through multi-layer subtlety — a single 20px blur at 0.25 opacity breaks the physical-depth feel. - Don't add decorative CSS gradients to UI surfaces. Gradients belong to photograph overlays only (`linear-gradient` used to ensure text legibility on images). - Don't use uppercase for editorial headlines. Button labels carry tracking for legibility at small size; headline text stays sentence case. - Don't substitute `{colors.primary}` on black surfaces without verifying contrast — sky blue on black passes at large sizes but can fail WCAG AA at body sizes. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <400px | Single column, hero display drops to 48px, hamburger nav | | Mobile | 400–639px | Single column, hero display 56–64px, 1-up tile stack | | Mobile Large | 640–767px | 2-up tile grid begins, hero display 64px | | Tablet | 768–1023px | 2-up or 3-up tiles, partial inline nav categories, sidebar collapses | | Desktop | 1024–1279px | Full inline nav, 3-up or 4-up tiles, article sidebar visible | | Large Desktop | ≥1280px | Max 1280px container, 4-up tile grid, generous gutters | ### Touch Targets - All pill CTAs maintain minimum 44px tap height across breakpoints - Nav pills resize to maintain 44px height at mobile — horizontal nav collapses to hamburger below 1024px - Card tiles are fully tappable (not just headline text); entire `{components.card}` area is the touch target ### Collapsing Strategy - **Top nav**: Full horizontal categories collapse to hamburger drawer below 1024px; search and subscribe CTAs persist in header - **Hero display**: `{typography.display-hero}` (80px) scales down progressively: 80px → 64px → 56px → 48px, weight 700 throughout - **Tile grid**: 4-up → 3-up → 2-up → 1-up with `{spacing.sm}` (8px) gutters maintained throughout - **Article sidebar**: Collapses below 1024px; related links move inline with article body ### Image Behavior - Story tile images maintain 16:9 aspect ratio crop across all breakpoints with `object-fit: cover` - Hero images use full-viewport-width treatment with text overlay and photo gradient (`rgba(0,0,0,0)` → `rgba(0,0,0,0.8)`) - Portrait crops on mobile hero use art-directed `object-position` to keep subject framing intact --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Dark surface: `{colors.surface}` - Text (light canvas): `{colors.ink}` - Text (dark canvas): `{colors.ink-inverse}` - Brand accent: `{colors.primary}` - Muted text: `{colors.ink-muted}` - Border: `{colors.border-light}` - CTA: `{colors.primary}` ### Example Component Prompts - "Build a Ringer-style homepage hero on `{colors.surface}` (black). Use `{typography.display-hero}` (GT America 80px weight 700, `1.0` line-height, `-1.74px` tracking) in `{colors.ink-inverse}` (white) for the headline. Below, a deck in `{typography.body-large}` (18px, weight 400, `{colors.ink-muted}` on black — use `{colors.ink-inverse}` for legibility on dark). Pair with a sky-blue pill CTA (`{components.button-primary}`) — `{colors.primary}` fill, black text, `{rounded.pill}`, `{typography.button-ui}` (14px 700 +0.96px tracked). On hover, transition to `{colors.primary-hover}` at 150ms cubic-bezier(0.4, 0, 0.2, 1)." - "Create a 3-up story tile grid on white (`{colors.background}`). Each tile is a `{rounded.lg}` (24px) card with a 16:9 photo at `{rounded.md}` (16px). Below the image: `{typography.heading-sub}` (28px GT America weight 700, `{colors.ink}`, `-0.52px` tracking). Below the hed: `{typography.caption}` byline in `{colors.ink-muted}`. Tile hover: apply a 5-layer subtle shadow (`rgba(0,0,0,0.05) 0px 3px 7px` through `rgba(0,0,0,0.04) 0px 13px 13px`) at 150ms." - "Design a Ringer-style navigation bar on `{colors.surface}`. Logo left. Center-left: horizontal category pills using `{components.nav-pill}` (transparent, `{typography.nav-link}`, `{rounded.pill}`); active category uses `{components.nav-pill-active}` (black fill, white text — invert for dark nav). Right: a ghost `{components.button-ghost}` 'Sign In' + a filled `{components.button-primary}` 'Subscribe'. Nav link hover: `color-shift` to `rgba(255,255,255,0.71)` (near-fade on dark surface) at 150ms." - "Build a category badge tag system: light-surface version uses `{components.badge}` — `{colors.primary-container}` (gray-100) fill, `{colors.ink}` text, `{typography.label}` (12px medium), `{rounded.pill}`, `4px 10px` padding. Dark-surface version uses `{components.badge-dark}` — `{colors.surface}` fill, `{colors.ink-inverse}` text, same shape. Both use `{colors.primary}` (sky blue) fill for the selected/active state with `{colors.on-primary}` (black) text." - "Create a Ringer-style article long-form reading experience. Canvas: `{colors.background}`. Body text: Bradford LL (`{typography.heading-editorial}` family, 18px / `1.65` / `{colors.ink}`). Section headings: `{typography.heading-section}` (GT America 32px weight 700). Byline: `{typography.caption}` in `{colors.ink-muted}`. Max reading column width: 728px. Inline links use `{colors.primary}` (sky blue) — on hover darken to `{colors.primary-hover}` at 150ms." ### Iteration Guide 1. Start with the canvas split: article pages get `{colors.background}` (white); homepage header, hero, and navigation get `{colors.surface}` (black). This hard switch is the identity anchor. 2. Reserve `{colors.primary}` (sky blue) exclusively for interactive elements — CTAs, active states, focus rings, hyperlinks. Never use it as a decorative fill or background. 3. Apply `{rounded.pill}` to every control surface without exception — buttons, inputs, search, chips. Apply `{rounded.lg}`–`{rounded.xl}` to content cards. Photography is `{rounded.none}` or `{rounded.md}` only. 4. Run headlines in GT America weight 700 with negative letter-spacing — tighter at display sizes (`-1.74px` at 80px), releasing toward zero at body sizes. 5. Use 5-layer box-shadow at max 0.10 opacity for elevation. No single large blur — stack 4–5 layers at increasing Y and blur radii. 6. Keep hover and transition effects at 150ms cubic-bezier(0.4, 0, 0.2, 1). Color-shift links use an opacity near-fade (not a swap to blue); buttons swap fill to `{colors.primary-hover}`. 7. Bradford LL serif is the editorial pivot — only enters for long-form article body. Every other context stays GT America. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by The Ringer. Brand names and trademarks belong to their respective owners.