---
version: alpha
name: "Semafor"
website: "https://www.semafor.com"
description: >-
  A 2022-launched global news startup whose homepage is the rarest move in digital news — the entire page renders on a warm cream canvas #fffaeb in the same family of newsprint-yellow papers traditional broadsheets used for a century, with headlines and body set in the proprietary Feature Flat serif family, no marketing hero, no chromatic accent at all in the visible chrome, just a near-black engraved "SEMAFOR" wordmark at top, the gradient cream backdrop that fades to a slightly-darker yellow at the page edges, and a packed multi-column story grid where every story headline links to a single article rendered in the publication's signature "Semaform" format that splits each piece into "The News" / "The View from" / "Notable" sections separated by horizontal hairline rules.

seo:
  title: "Semafor Design System for React — cream canvas #fffaeb, Feature Flat serif, 15 components"
  metaDescription: "Semafor's homepage as a DESIGN.md file — warm cream canvas, Feature Flat serif throughout, no chromatic accents, and the Semaform editorial split. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Cream-canvas-as-system — the warm yellow #fffaeb that runs the entire page is the brand chrome, not a marketing accent; the system's only chromatic move"
    - "Feature Flat serif throughout — every headline, body paragraph, byline, and nav label runs the proprietary Feature Flat serif family at weights 180-395"
    - "Variable-weight serif headlines — weight 370 is the workhorse, weight 180 the lightest body tier, weight 395 the heaviest emphasis; no traditional 400/700 step"
    - "Right-angled chrome — every surface is right-angled or 2-5px softened; the cream canvas does the work that pill chips and rounded cards do on peer sites"
    - "Variable headline scale — display headlines run 24 / 31 / 34 / 42px in Feature Flat Headline and Feature Flat Condensed, the condensed variant marking the section bars"
  tags:
    - "News & Publishing"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Semafor's homepage commits to a single chromatic decision that no contemporary news startup makes. The entire page renders on a warm cream canvas #fffaeb — a yellow-tinted off-white that traditional broadsheets used for a century when their paper was actual newsprint, and that almost every digital-native publisher abandoned for either pure white or a dark canvas. The cream is wired into the brand's CSS as `--theme-color` and is also declared on the meta tag (#f8f5d7) so the browser tints the address bar to match. There is no marketing hero, no rotating cover image, no full-bleed photograph, no chromatic accent anywhere in the visible chrome — just the engraved "SEMAFOR" wordmark at top, the cream backdrop that fades to a slightly-deeper yellow at the page edges through a 118-occurrence gradient, and a packed multi-column story grid where every headline links to an article rendered in the publication's signature "Semaform" format.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 9 color tokens organized around the cream canvas #fffaeb (149 occurrences — 29 background, 1 text, 1 border, and 118 inside the page-edge gradient), an off-black ink ladder of #1f1d1a (465 occurrences, the dominant headline color) and #4b4a47 (1096 occurrences, the dominant body and metadata color), pure #000000 (375 occurrences) for hairline borders, and a single muted teal #3a6d78 reserved for editorial-section accents. Twelve typography tokens cover Feature Flat Headline at 13 / 15 / 16 / 20 / 24 / 31 / 34px in weights 180 / 300 / 370 / 395 / 400, plus Feature Flat Condensed at 42px for the section-bar treatments. Fifteen components describe the wordmark, the section-bar headers, the story-headline row, the dek paragraph, the Semaform-format article preview, the newsletter signup, and the hairline-divided sidebar nav.

    Feed this file to an AI coding tool and it reproduces Semafor's specific moves: cream canvas #fffaeb instead of pure white or dark, Feature Flat serif across every tier, variable-weight serif type that runs at 180 / 370 / 395 instead of the traditional 400 / 700 step, right-angled chrome with no pill-rounded section chips, and the Semaform editorial split that organizes article previews into "The News" / "The View from" / "Notable" sections. The one move worth borrowing for any editorial product: the willingness to commit to a single warm canvas color and stop adding accent colors entirely. Most publishers reach for at least one brand accent for the CTA; Semafor trusts the cream backdrop and the Feature Flat serif to carry the entire identity.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://www.semafor.com"
      title: "Semafor — official site"
      description: "Semafor's public homepage — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Semafor's primary brand color?"
      answer: "Semafor's brand voltage is the cream canvas itself — a warm yellow #fffaeb declared on the meta theme-color (#f8f5d7) and used as the page floor across every visible surface. The cream merges from three nearly-identical hexes in the captured page (#fffaeb, #f8f5d7, #fcfae4) and carries 149 occurrences in the chrome: 29 background fills, 118 gradient stops at the page edges, plus 1 text and 1 border instance. There is no second brand voltage — no Semafor red, no Semafor blue, no signature accent for the CTA. The chrome is functionally monochromatic on the cream-canvas floor with an off-black ink ladder for type and pure black for hairlines."
    - id: "typography"
      title: "What typeface does Semafor use, and what should I use as a substitute?"
      answer: "Semafor runs the Feature Flat serif family across every tier — headlines, body, dek, navigation, and bylines. The family ships in Headline and Condensed cuts. Headline carries 13 / 15 / 16 / 20 / 24 / 31 / 34px sizes, Condensed appears at 42px for the section-bar treatments above each themed group of stories. Variable weights run 180 / 300 / 370 / 395 / 400 — the system uses non-standard weights instead of the traditional 400 / 700 step, with 370 as the workhorse body weight and 180 as the lightest dek tier. Helvetica handles a small set of 12px navigation captions. Source Serif Pro at variable weights is the closest open-source substitute; Tiempos Text is the closest licensed alternative."
    - id: "cream-canvas"
      title: "Why does Semafor use a cream canvas instead of pure white?"
      answer: "The cream canvas #fffaeb is the brand chrome itself. The warmth references the newsprint-yellow paper traditional American broadsheets used for a century when their paper was actual woodpulp newsprint, and the choice signals editorial continuity with that print tradition. The cream is wired into the page's CSS as `--theme-color` and declared on the HTML meta tag (#f8f5d7) so the browser tints its address bar to match — the canvas color extends past the page into the chrome of the browser itself. Below the fold, a 118-occurrence cream-to-deeper-yellow gradient pulls the page edges into a slightly darker yellow, marking the canvas as a deliberate atmospheric move rather than a flat background fill."
    - id: "semaform-format"
      title: "What is the Semaform format and how does the chrome support it?"
      answer: "Semaform is Semafor's signature article structure: every story splits into 'The News' (the verifiable facts), 'The View from' the author (the reporter's analysis), 'Room for Disagreement', 'The View from' a different geography or perspective, and 'Notable' (curated sources from elsewhere). The chrome supports the format by separating each section with horizontal hairline rules in pure black, by setting each section header in a slightly heavier Feature Flat weight (395 vs the body's 370), and by avoiding any chromatic accent or boxed-card surface that would visually compete with the editorial structure. The right-angled chrome and absence of pill chips reinforce the format's claim to editorial seriousness."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own editorial homepage?"
      answer: "Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Semafor's specific moves: cream canvas #fffaeb instead of pure white or dark, Feature Flat serif across every tier, variable weights at 180 / 370 / 395 instead of 400 / 700, right-angled chrome with no rounded section chips, and the Semaform editorial split with hairline rules between named sub-sections. You can reference the tokens directly: every hex, font name, radius, and spacing value is a quoted scalar you can paste into Tailwind config or CSS variables. One caveat: the cream canvas only reads as editorial-newsprint when paired with the serif body. A cream canvas with sans body looks like a yellowed marketing landing page rather than a newspaper homepage."

mockups:
  - "marketing-hero"
  - "editorial-article"

colors:
  cream: "#fffaeb"
  ink: "#1f1d1a"
  ink-muted: "#4b4a47"
  ink-faint: "#9c9a92"
  hairline-soft: "#cbc9c0"
  alpha-black: "#000000"
  surface-warm: "#ece9d2"
  accent-teal: "#3a6d78"
  accent-navy: "#1f2b6d"

typography:
  display-condensed-xl:
    fontFamily: "\"FeatureFlatCondensed-Regular\", \"Times New Roman\", Times, serif"
    fontSize: 42px
    fontWeight: 300
    lineHeight: 50.4px
    letterSpacing: 0
  display-lg:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 34px
    fontWeight: 370
    lineHeight: 40.8px
    letterSpacing: 0
  display-md:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 31px
    fontWeight: 395
    lineHeight: 37.2px
    letterSpacing: 0
  heading-md:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 24px
    fontWeight: 370
    lineHeight: 28.8px
    letterSpacing: 0
  heading-sm:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 20px
    fontWeight: 370
    lineHeight: 24px
    letterSpacing: 0
  body-emphasis:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 16px
    fontWeight: 395
    lineHeight: 19.2px
    letterSpacing: 0
  body-md:
    fontFamily: "\"FeatureFlatHeadline\", serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: 0
  body-sm:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 15px
    fontWeight: 180
    lineHeight: 18px
    letterSpacing: 0
  dek:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 13px
    fontWeight: 300
    lineHeight: 16.9px
    letterSpacing: 0
  body-tight:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 18.85px
    letterSpacing: 0
  nav-link:
    fontFamily: "\"FeatureFlatHeadline\", \"Times New Roman\", Times, serif"
    fontSize: 31px
    fontWeight: 395
    lineHeight: 37.2px
    letterSpacing: 0
  caption:
    fontFamily: "Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 395
    lineHeight: 14.4px
    letterSpacing: 0
  button-md:
    fontFamily: "\"FeatureFlatHeadline\", serif"
    fontSize: 20px
    fontWeight: 395
    lineHeight: 24px
    letterSpacing: 0

rounded:
  none: "0px"
  xs: "2px"
  sm: "5px"
  full: "9999px"

spacing:
  xs: "4px"
  sm: "5px"
  md: "10px"
  base: "12px"
  lg: "20px"
  xl: "30px"
  2xl: "40px"
  3xl: "64px"

components:
  top-nav:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "10px 0"
    borderColor: "{colors.alpha-black}"
  masthead:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.display-condensed-xl}"
    rounded: "{rounded.none}"
    padding: "20px 0"
  nav-link:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-emphasis}"
    padding: "5px 0"
  sidebar-nav-item:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body-emphasis}"
    padding: "4px 14px"
    borderColor: "{colors.alpha-black}"
  section-bar:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.display-condensed-xl}"
    rounded: "{rounded.none}"
    padding: "10px 0"
    borderColor: "{colors.alpha-black}"
  hero-headline:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
    padding: "0"
  story-headline:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    padding: "0"
  story-headline-sm:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.heading-sm}"
    padding: "0"
  body-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-tight}"
  dek-paragraph:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.dek}"
  byline:
    backgroundColor: transparent
    textColor: "{colors.ink-muted}"
    typography: "{typography.caption}"
  button-primary:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "18px 10px 20px"
    height: "33px"
    borderColor: "{colors.ink}"
  button-secondary:
    backgroundColor: "{colors.alpha-black}"
    textColor: "{colors.cream}"
    typography: "{typography.button-md}"
    rounded: "{rounded.none}"
    padding: "18px 10px 20px"
    height: "33px"
  newsletter-signup:
    backgroundColor: "{colors.surface-warm}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "20px"
    borderColor: "{colors.alpha-black}"
  text-input:
    backgroundColor: "{colors.cream}"
    textColor: "{colors.alpha-black}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "0"
    height: "32px"
    borderColor: "{colors.alpha-black}"
  hairline-divider:
    backgroundColor: "{colors.alpha-black}"
    textColor: transparent
    rounded: "{rounded.none}"
    padding: "0"
    height: "1px"
---

## Overview

Semafor's homepage commits to the rarest chromatic decision in contemporary news. **Cream-canvas-as-system.** The entire page renders on a warm yellow `{colors.cream}` (#fffaeb) — a tinted off-white that traditional American broadsheets used for a century when their paper was actual newsprint, and that almost every digital-native publisher abandoned for either pure white or a dark canvas. The cream is wired into the page CSS as `--theme-color` and declared on the HTML meta tag, so the browser tints its own chrome to match — the canvas color leaks past the page into the address bar itself. Where the Washington Post sits on pure white, Axios on a slightly-gray off-white, and Bloomberg on a darker stone, Semafor occupies a chromatic position none of its peers will touch.

The system's typographic discipline is **serif-everything.** Feature Flat serif carries every tier — headlines, body, dek, navigation, byline, button — without a sans counterpart. The family runs at non-standard variable weights (180 / 300 / 370 / 395 / 400) rather than the traditional 400 / 700 step, with 370 as the workhorse weight, 180 as the lightest body-dek tier, and 395 as the heaviest emphasis. A single Helvetica caption tier at 12px / 395 carries metadata only — bylines, timestamps, source attributions. The pairing of cream canvas + Feature Flat serif is the system's two-decision identity; remove either and the chrome reads as a generic content-management template. Where Axios runs sans headlines on serif body and the Post runs serif headlines on sans body, Semafor refuses the split and runs serif everywhere.

The chrome is **right-angled.** Every surface — top-nav, story cards, newsletter signup, sign-in button — sits at `{rounded.none}` 0px with the rare 2-5px softening. There is no pill-rounded section chip, no rounded card, no soft-corner CTA. Section structure is marked instead with 1px pure-black hairline rules: between the top-nav and the masthead, between themed section bands, between sidebar nav items, between Semaform-format article sub-sections. The right-angled chrome combined with the cream canvas reads as broadsheet-editorial; rounded corners would soften the system into a magazine-startup template.

**Key Characteristics:**
- Cream canvas `{colors.cream}` (#fffaeb) — 149 occurrences across the page (29 background, 118 gradient stops, 1 text, 1 border). Declared on the HTML `<meta theme-color>` so the browser chrome tints to match.
- Feature Flat serif across every typographic tier — headlines, body, dek, navigation, byline, button. No sans counterpart except for a single Helvetica caption tier.
- Variable-weight serif at non-standard weights — 180 / 300 / 370 / 395 / 400 instead of the traditional 400 / 700 step. Weight 370 is the workhorse, 180 the lightest, 395 the heaviest emphasis.
- Off-black ink ladder — `{colors.ink}` (#1f1d1a) at frequency 465 for headlines, `{colors.ink-muted}` (#4b4a47) at frequency 1096 for body and metadata, pure `{colors.alpha-black}` (#000000) at frequency 375 for hairline rules only.
- Right-angled chrome — every surface at `{rounded.none}` 0px with rare 2-5px softening; no pill chips, no rounded cards.
- Hairline-rule section structure — 1px pure-black rules separate every named section, sidebar nav item, and Semaform article sub-section.
- No chromatic accent — there is no Semafor red, blue, or signature CTA fill. The chrome runs entirely on cream + ink + black hairlines.
- Section-bar typographic treatment — Feature Flat Condensed at 42px / 300 sits above each themed section group, the only place the condensed cut appears.

## Colors

### Surface

- **Cream** (`{colors.cream}` — #fffaeb): frequency 149 — 29 background, 118 gradient, 1 text, 1 border. The entire page floor. The merged token absorbs three near-identical hexes (#fffaeb, #f8f5d7, #fcfae4) that share the warm-yellow off-white luminance with slight saturation differences. Declared on the `<meta theme-color>` element so the browser address bar tints to match. The 118 gradient occurrences mark the cream-to-deeper-yellow page-edge falloff that pulls the floor into a subtle atmospheric envelope rather than a flat background fill.
- **Surface Warm** (`{colors.surface-warm}` — #ece9d2): frequency 3 — all background. The slightly-deeper cream variant used inside the newsletter-signup card and a small set of inset surfaces that need a half-step contrast against the page floor.

### Text

- **Ink Muted** (`{colors.ink-muted}` — #4b4a47): frequency 1096 — 548 text, 548 border. The dominant body and metadata text color, a warm dark-gray that matches the cream canvas's slight yellow tint. The merged token absorbs a near-identical olive-tinted sibling. Carries Semaform-format body paragraphs, byline rows, and the 1px hairline rules between sub-sections.
- **Ink** (`{colors.ink}` — #1f1d1a): frequency 465 — 233 text, 231 border, 1 background. The headline ink color — Feature Flat headlines at 24-34px sit here, distinct from the slightly-lighter body ink. The OKLCH hue (78° at 0.006 chroma) pulls toward the same warm yellow-brown family as the cream canvas, so the type reads as engraved newsprint rather than glowing black on yellow.
- **Ink Faint** (`{colors.ink-faint}` — #9c9a92): frequency 6 — all border. The faintest ink tone in the system — used for tertiary divider rules and the rare ghosted-state UI element.

### Hairlines

- **Alpha Black** (`{colors.alpha-black}` — #000000): frequency 375 — 194 text, 181 border, 0 background. Pure black exists in the system and carries hairline-rule duty — every 1px section divider, every sub-section boundary inside Semaform articles, every form-input border. The 194 text occurrences belong to the engraved "SEMAFOR" wordmark and the rare bold-emphasis instance in nav labels.
- **Hairline Soft** (`{colors.hairline-soft}` — #cbc9c0): frequency 3 — all border. A warm-gray softer hairline tone used for the rare in-card divider that needs to read quieter than the pure-black rule.

### Accents (rare)

- **Accent Teal** (`{colors.accent-teal}` — #3a6d78): frequency 8 — 4 text, 4 border. A muted desaturated teal used for editorial-section accents on the article-read page (the "Gulf" themed-section indicator, a small set of inline section markers). Almost absent from the homepage chrome but declared in the system as the single non-monochromatic option.
- **Accent Navy** (`{colors.accent-navy}` — #1f2b6d): frequency 4 — 2 text, 2 border. A deep editorial navy reserved for the rare inline link or section accent. Like the teal, almost absent from the homepage chrome but exposed by the system as a reserve accent.

## Typography

### Font Families

The system runs the **Feature Flat** serif family across every tier — headlines, body, dek, navigation, byline, and button. The family ships in **Headline** and **Condensed** cuts. Headline carries 13 / 15 / 16 / 20 / 24 / 31 / 34px sizes at variable weights 180 / 300 / 370 / 395 / 400; Condensed appears at 42px / 300 only, marking the section-bar treatments above each themed group of stories. A small set of 12px navigation captions runs in **Helvetica** at weight 395 — the system's single concession to a sans tier, used only for byline metadata and source attributions. Fallbacks walk `"Times New Roman", Times, serif` for the Feature Flat tiers and `sans-serif` for the Helvetica tier.

The single-typeface-across-every-tier discipline is the rarest typographic move in editorial design — most contemporary publishers run a serif headline / sans body split or the reverse. Semafor commits to serif everywhere and uses weight variation (180 / 370 / 395) to mark hierarchy rather than family contrast.

### Hierarchy

| Token | Family | Size | Weight | Line Height | Use |
|---|---|---|---|---|---|
| `{typography.display-condensed-xl}` | Feature Flat Condensed | 42px | 300 | 50.4px | Section-bar headers above themed groups |
| `{typography.display-lg}` | Feature Flat Headline | 34px | 370 | 40.8px | Lead-story headline above the fold |
| `{typography.display-md}` | Feature Flat Headline | 31px | 395 | 37.2px | Sidebar nav links, "Home / Politics / Business" |
| `{typography.heading-md}` | Feature Flat Headline | 24px | 370 | 28.8px | Column-story headlines |
| `{typography.heading-sm}` | Feature Flat Headline | 20px | 370 | 24px | Section h2 ("Politics", "Business", "Energy", "Gulf") |
| `{typography.body-emphasis}` | Feature Flat Headline | 16px | 395 | 19.2px | Sidebar nav items, sub-section labels |
| `{typography.body-md}` | Feature Flat Headline | 20px | 400 | 24px | Inline body emphasis, button labels |
| `{typography.body-sm}` | Feature Flat Headline | 15px | 180 | 18px | Dek paragraphs (the lightest body tier) |
| `{typography.dek}` | Feature Flat Headline | 13px | 300 | 16.9px | Sidebar dek paragraphs, secondary descriptions |
| `{typography.body-tight}` | Feature Flat Headline | 14.5px | 400 | 18.85px | Story-card body excerpts ("Why it matters", "What they're saying") |
| `{typography.nav-link}` | Feature Flat Headline | 31px | 395 | 37.2px | Sidebar nav anchors at the right of the homepage |
| `{typography.caption}` | Helvetica | 12px | 395 | 14.4px | Byline metadata, timestamp rows, source attributions |
| `{typography.button-md}` | Feature Flat Headline | 20px | 395 | 24px | Sign-in button, newsletter signup button |

### Principles

The headline tier runs at weight 370 (lead headlines) and 395 (sidebar links and section labels) — neither value corresponds to a standard CSS keyword. The body dek tier runs at weight 180 (the lightest variable instance in the captured page) and the inline-emphasis tier at 395. The system's deliberate non-standard weights signal a variable-font system tuned for newsprint feel: 180 reads as a faint dek, 370 as a confident body, 395 as a quiet emphasis, with the traditional 400 / 700 step entirely absent. The lightest dek at weight 180 is the system's defining typographic moment — most editorial systems would sit at weight 300 minimum.

The section-bar treatment in Feature Flat Condensed at 42px / 300 is the only place the condensed cut appears, and the only place the page leans on a typographic-display moment. Every other heading runs in the Headline cut, and the visual rhythm of the page is structural-bar → headline → dek rather than display-banner → body.

### Note on Font Substitutes

Feature Flat is a custom proprietary family. **Source Serif Pro** at variable weights is the closest open-source substitute — comparable cap height, similar diagonal stress, available at non-standard weights through the VF axis. **Tiempos Text** is the closest licensed alternative if a paid family is on the table. For the Helvetica caption tier, the system font stack is already what Semafor ships; **Inter** at weight 500 transfers cleanly at 12px if you need an open alternative.

## Layout

### Spacing System

- **Base unit:** 10-12px (the dominant gap values at frequencies 54 and 20 respectively).
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 5px · `{spacing.md}` 10px · `{spacing.base}` 12px · `{spacing.lg}` 20px · `{spacing.xl}` 30px · `{spacing.2xl}` 40px · `{spacing.3xl}` 64px.
- **Vertical rhythm:** the dominant 10px 0px 0px pattern (frequency 52) marks the tight inter-element padding inside story cards.
- **Section vertical padding:** 30-64px between major themed bands.
- **Newsletter-signup padding:** 20px on every side; button padding 18px top / 10px sides / 20px bottom (asymmetric, accommodating the descender of the serif).

### Grid & Container

- **Max content width:** the homepage runs at a fluid multi-column grid with no fixed-pixel max-width on the captured page; sidebar nav anchored to a fixed right column at ~140px wide.
- **Above-fold layout:** a packed multi-column story grid with lead headline + photograph anchor center, supporting story cards left and right, and an opinion / video strip top.
- **Sidebar nav:** right-side fixed column carrying single-word section anchors (Home, Politics, Business, Technology, Energy, Gulf, China, Africa, Security, Media, CEO Signal, Semafor World Economy) at 31px / 395, separated from the page body by a 1px black vertical rule.
- **Below-fold section bands:** each themed group (Politics, Business, Technology, Energy, Gulf, China, Africa, Security, Media) opens with a 42px Feature Flat Condensed section-bar header, then a 2-column story grid of stories from that vertical.

### Rhythm

The page runs on **uniformly dense editorial rhythm.** There is no generous-vs-packed alternation; every section sits in the same multi-column grid with 10-12px internal padding and 30-40px between bands. Section bars (`{component.section-bar}`) with the Feature Flat Condensed 42px header are the only structural pause between bands. The Semaform article-preview format runs through the story cards with 'The News' / 'The View from' sub-sections marked by horizontal hairline rules, mirroring the inside-article structure on the homepage preview.

## Elevation

The system has **no shadow tier** on the visible chrome. Every surface — story cards, newsletter signup, sign-in button, sidebar nav — sits flat on the cream canvas. Depth comes from the 1px pure-black hairline rules that separate every named section, and from the subtle cream-to-deeper-yellow gradient at the page edges that pulls the floor into an atmospheric envelope.

- **Flat (no shadow):** masthead, story grid, newsletter signup, sidebar nav, footer — 100% of homepage surfaces.
- **Hairline structure:** 1px `{colors.alpha-black}` (#000000) rules separate every named section, sub-section, sidebar nav item, and form input. The hairline carries the entire structural elevation job.
- **Page-edge gradient:** 118 occurrences of the cream-token gradient mark a soft falloff at the page edges, fading cream `{colors.cream}` into a slightly-deeper yellow at the column rules.

## Shapes

The radius scale is **right-angled.**

- `{rounded.none}` 0px — every surface (masthead, story card, newsletter signup, sign-in button, text input, sidebar nav item). The dominant radius on the page.
- `{rounded.xs}` 2px — frequency 10; a small set of icon-background corners.
- `{rounded.sm}` 5px — frequency 2; the rare in-card chip rounding.
- `{rounded.full}` 9999px — frequency 6 (rendered as `50%` in CSS); circular profile-photo avatars only.

There is no pill-rounded section chip, no soft-cornered CTA, no rounded card. The right-angled chrome is the system's structural decision — softening any element would move the page from broadsheet-editorial toward magazine-startup template.

## Components

**`top-nav`** — Cream `{colors.cream}` surface with a 1px `{colors.alpha-black}` bottom rule, 10px vertical padding. Carries the sidebar-nav anchor labels.

**`masthead`** — Cream surface, 20px vertical padding. Holds the engraved "SEMAFOR" wordmark in `{typography.display-condensed-xl}` (Feature Flat Condensed 42px / 300). The visual anchor — the only typographic-display moment on the page besides section bars.

**`nav-link`** — Transparent fill, ink text in `{typography.body-emphasis}` (16px / 395), 5px vertical padding. Renders inside the sidebar nav.

**`sidebar-nav-item`** — Transparent fill, ink text in `{typography.body-emphasis}` (16px / 395), 4×14px padding. The right-rail single-word section anchors (Home / Politics / Business / Technology / Energy / Gulf / China / Africa / Security / Media / CEO Signal / Semafor World Economy).

**`section-bar`** — Cream surface with a 1px `{colors.alpha-black}` bottom rule, 10px padding. Holds the section name in `{typography.display-condensed-xl}` (Feature Flat Condensed 42px / 300). Marks every themed-section group below the fold ("Politics", "Business", "Technology", "Energy", etc.).

**`hero-headline`** — Ink `{colors.ink}` text in `{typography.display-lg}` (Feature Flat Headline 34px / 370, 40.8px line-height). The lead-story headline above the fold.

**`story-headline`** — Ink text in `{typography.heading-md}` (24px / 370). Column-story headlines below the lead.

**`story-headline-sm`** — Ink text in `{typography.heading-sm}` (20px / 370). Section h2 headers and smaller story headlines.

**`body-paragraph`** — Ink-muted `{colors.ink-muted}` text in `{typography.body-tight}` (14.5px / 400). Story-card body excerpts.

**`dek-paragraph`** — Ink-muted text in `{typography.dek}` (13px / 300). Sidebar dek paragraphs and secondary descriptions under headlines.

**`byline`** — Ink-muted text in `{typography.caption}` (Helvetica 12px / 395). Byline rows, timestamp meta, source attributions — the system's only non-serif typographic moment.

**`button-primary`** — Cream `{colors.cream}` fill, ink text, 1px `{colors.ink}` border, right-angled `{rounded.none}` shape, 18px / 10px / 20px asymmetric padding (the top-bottom asymmetry accommodates the serif descender), 33px height. "Sign in" is the canonical instance. No fill color — the button shape comes from the rule outline, not a fill.

**`button-secondary`** — Inverted: pure-black `{colors.alpha-black}` fill, cream text, right-angled, same asymmetric padding. "Sign up for free" is the canonical instance in the newsletter-signup card.

**`newsletter-signup`** — Surface-warm `{colors.surface-warm}` (#ece9d2) fill, ink text, 1px `{colors.alpha-black}` border, right-angled, 20px padding. The inset signup card.

**`text-input`** — Cream fill, black text, 1px `{colors.alpha-black}` border on the bottom edge only (acting as an underline rule rather than a boxed input), 32px height, 0 padding. The newsletter input field.

**`hairline-divider`** — 1px pure `{colors.alpha-black}` rule with 0 padding. The structural separator that carries every section and sub-section boundary in the system.

## Do's and Don'ts

**Do** commit to the cream canvas `{colors.cream}` (#fffaeb) as the system's chromatic foundation. The single decision to render on warm yellow instead of pure white or dark is the brand identity — switching to a white canvas erases the editorial-newsprint reference that defines the chrome.

**Do** declare the cream on `<meta theme-color>` so the browser's address bar tints to match. The canvas-leaks-into-browser-chrome move is part of the system's atmospheric envelope and the page reads incomplete without it.

**Do** run Feature Flat serif across every tier — headlines, body, dek, nav, byline, button. Adding a sans tier for the body or the CTA breaks the serif-everywhere discipline and turns the page into a contemporary-template news layout.

**Do** use 1px pure-black `{colors.alpha-black}` hairline rules for every named section and sub-section boundary. The hairline-rule structure replaces the rounded-card layout most peers use; pure black on cream reads as the engraved newsprint rule.

**Don't** introduce a chromatic accent for the CTA. The system has no brand voltage — the sign-in button is rule-outlined on cream, the newsletter button is black on cream. Adding a Semafor red or blue accent breaks the monochromatic editorial commitment.

**Don't** render the buttons with `{rounded.sm}` 5px or `{rounded.full}` softening. The right-angled chrome is the system's structural decision; soft-corner buttons read as magazine-startup template rather than broadsheet-editorial.

**Don't** swap the cream canvas for pure white. The merged token absorbs three near-identical cream hexes (#fffaeb, #f8f5d7, #fcfae4) that share the warm-yellow off-white tonality; switching to pure white loses the entire newsprint reference and makes the serif headlines read as too-cold.

**Don't** introduce a weight-700 Feature Flat headline. The system runs at non-standard variable weights (180 / 300 / 370 / 395 / 400) and the heaviest instance is 395 — bumping to 700 turns the editorial broadsheet into a generic news headline and undercuts the variable-font discipline.

## Known Gaps

- **Article surfaces:** this DESIGN.md captures the homepage only. The Semaform article-read page carries its own typographic scale and named sub-section dividers ("The News" / "The View from" / "Room for Disagreement" / "The View from" / "Notable") that are not represented here as components.
- **Newsletter surfaces:** Semafor's named newsletter family (Flagship, Principals, Business, Technology, Africa, Gulf, etc.) carries its own per-newsletter chrome and accent treatments that are not represented here.
- **Hover and focus states:** the captured surface exposes resting states only; hover variants for nav links, story cards, and the sign-in button are not visible in the static capture.
- **Section-specific accents:** the declared `{colors.accent-teal}` (#3a6d78) and `{colors.accent-navy}` (#1f2b6d) carry editorial-section accent duty on article-read pages (the "Gulf" section in particular). Both are almost absent from the homepage chrome.
- **Dark mode:** the captured homepage is cream-only; no dark variant is exposed in the visible CSS.
- **Motion:** the page-edge cream-to-yellow gradient is static, but the lead-story photograph occasionally swaps via fade and the sidebar nav can collapse on narrow viewports. The spec captures end-state values only.
- **Helvetica caption tier:** the single 12px Helvetica metadata tier is the system's only non-serif moment but it appears in fewer than a dozen locations on the page; the system's typographic identity is functionally Feature-Flat-only.