---
version: alpha
name: "Superlist"
website: "https://www.superlist.com"
description: >-
  A task-management marketing site whose hero deliberately fractures the display headline across two typefaces and two colors — Haffer XH SemiBold at 88px / 600 carries "Tasks, notes, and plans." in white, and the second line "Finally in one app." flips to a saturated tomato-red. Below, a midnight-indigo canvas at #181824 anchors product screenshots that show off the app's own playful chromatic vocabulary: a saturated cobalt-blue panel, a hot-magenta tile, a citrine-yellow card, and a soft mid-violet body tone. Body copy runs Blender Medium and Inter at modest weights; the system is a Wunderlist-team statement that productivity software does not have to look austere.

seo:
  title: "Superlist Design System for React — midnight indigo, Haffer XH, 16 components"
  metaDescription: "Superlist's marketing site as a DESIGN.md file. Midnight indigo canvas, Haffer XH SemiBold display, tomato-red inline accent. Tokens for React, Next.js, and AI tools."
  highlights:
    - "Split-color hero — the h1 fractures into a white line and a tomato-red second line, the only saturated text moment in the chrome"
    - "Midnight-indigo canvas — #181824 carries 38 background occurrences, a deliberately purple-shifted near-black instead of true black or charcoal"
    - "Multi-typeface display system — Haffer XH SemiBold for headlines plus a single Jersey 10 pixel-font cameo at 70px and Blender Medium for body"
    - "Product-as-palette — the screenshots themselves provide the brand chromatic vocabulary (cobalt, magenta, yellow) so the chrome stays nearly monochrome"
    - "Generous 20px corners — 51 of 73 captured radii sit at 20px, with pill chips at 100px reserved for promotional CTAs"
  tags:
    - "Productivity & SaaS"
    - "Project Management"
  lastUpdated: "2026-05-18"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Superlist's marketing site opens with one of the more distinctive typographic moves in the productivity category: the hero h1 is split across two colors and two lines. "Tasks, notes, and plans." renders in white at 88px Haffer XH SemiBold, then "Finally in one app." flips to a saturated tomato-red in the same face and weight. It is the only saturated-text moment in the entire chrome — a single deliberate fracture of the display tier, signaling that the page is a statement rather than a checklist. Where Notion paints its hero in clay-warm whites and Linear sits on graphite, Superlist commits to a midnight-indigo floor at #181824, a near-black that is deliberately purple-shifted rather than blue-shifted or true neutral.

    The DESIGN.md file packages the marketing system into a machine-readable spec. Inside: 15 color tokens led by midnight-indigo canvas at #181824 (38 background occurrences), a tomato-red split-display accent at #ff4a36, a hot-magenta tile fill #f866db, and a citrine yellow at #fbe74e — all of which appear on the product screenshots themselves rather than in the chrome around them. Typography spans five families in measured proportion: Haffer XH SemiBold for every display and heading tier (88px hero, 48px section, 24px sub), Blender Medium as the body workhorse at 16px / 400, Inter for nav and footer at 14px / 400 with -0.07px tracking, Satoshi inside product mockups, and a single Jersey 10 pixel-font cameo at 70px that nods to retro game-text. Radii cluster on 20px (51 of 73 occurrences), with a 100px pill reserved for promotional CTAs. 16 components cover the split-color hero heading, the cobalt sample card, the magenta and yellow tiles, the pill nav buttons, the dark surface card, the recurring-tasks list, the testimonial strip, and the integration logo wall.

    Feed this file to Claude or Cursor and the agent reproduces Superlist's specific moves: a purple-shifted near-black canvas instead of true #000000, a split-color display heading with the second line in red, generous 20px corner rounding everywhere except promotional pills, and product screenshots that carry the chromatic load rather than chrome decoration. The one move worth borrowing carefully is the split-color hero — it works because the brand has earned a single saturated accent over a near-monochrome page and uses it once. Multiply it and the entire restraint collapses.
  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.superlist.com"
      title: "Superlist — official site"
      description: "Superlist's public marketing site — 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 Superlist's primary brand color?"
      answer: "Superlist's chrome runs on midnight indigo — a deliberately purple-shifted near-black at #181824 that carries 38 background occurrences across the captured page. The only saturated brand-text moment is the tomato-red second line of the hero h1 at #ff4a36, used exactly once. The brighter chromatic notes that read as Superlist's signature — cobalt-blue panels, hot-magenta tiles, citrine-yellow cards — appear inside the product screenshots rather than as chrome elements, so the brand's identity is built on the indigo floor plus a single red display fracture, with the product itself providing every other chromatic voice. Mid-violet #8e8da0 carries secondary text at 31 occurrences."
    - id: "typography"
      title: "What typefaces does Superlist use, and what should I substitute?"
      answer: "Superlist runs a five-family system, each with a specific role. Haffer XH SemiBold carries every display and heading tier — 88px hero h1 at weight 600 with -1.76px tracking, 48px section h2, 24px sub-heads — and is the dominant typographic voice in the marketing chrome. Blender Medium handles body copy at 16px / 400 in the testimonial bands. Inter takes nav and small-label duty at 14px / 400 with slightly tight -0.07px tracking. Satoshi runs inside the product mockups at 16px / 500. Jersey 10, a retro pixel-style display, makes a single 70px cameo in one section as a deliberate stylistic punctuation. For open-source substitutes use General Sans for Haffer XH, Inter for itself, and VT323 for the Jersey 10 cameo."
    - id: "split-color-hero"
      title: "Why is the second line of the hero a different color?"
      answer: "The hero h1 is deliberately fractured into two lines and two colors — 'Tasks, notes, and plans.' in white, then 'Finally in one app.' in saturated tomato-red #ff4a36. It is the only saturated-text moment in the entire captured chrome, and it does a job a separate display weight would normally do. Where most SaaS hero treatments either run the whole headline in one color or rely on a weight contrast to mark emphasis, Superlist holds weight constant at 600 across both lines and uses color contrast alone to indicate the resolution clause. The move is unusual in the productivity category and reads as a confidence signal — the brand has earned one accent and spends it on a single phrase."
    - id: "canvas-color"
      title: "Why is the canvas purple-shifted instead of true black?"
      answer: "The page floor is #181824, a near-black with a clear violet undertone — measured at OKLCH lightness 0.21 with hue 284, which sits in the cool-purple range. Pure black #000000 appears in the captured page but only as text and border ink (667 occurrences each), never as a background fill of size. The deliberate purple shift softens the contrast with the white display text and lets the product screenshots — which use saturated cobalt, magenta, and yellow — read as belonging to the same chromatic family. A true black canvas would make those product colors feel pasted-on; the indigo floor lets them sit naturally."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own React productivity marketing site?"
      answer: "Yes — drop the file into Claude, Cursor, or any AI tool that reads structured design tokens and the agent will reproduce Superlist's specific moves: purple-shifted near-black canvas rather than true black or charcoal, a split-color hero heading using a single saturated red as the second-line accent, generous 20px corner rounding by default with 100px pills reserved for promotional CTAs, and product screenshots that carry the chromatic vocabulary rather than chrome decoration. Reference tokens directly when you want a specific value: {colors.canvas} resolves to #181824, {colors.accent-red} to #ff4a36, {typography.display-xl} to Haffer XH SemiBold 88px / 600 / -1.76px tracking. Every hex, font, radius, and spacing entry is a quoted literal you can paste into Tailwind config or CSS variables."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#26253b"
  accent-red: "#ff4a36"
  accent-magenta: "#f866db"
  accent-magenta-bright: "#f739f7"
  accent-cobalt: "#0000ee"
  accent-blue: "#2590f1"
  accent-yellow: "#fbe74e"
  accent-emerald: "#22c55e"
  ink: "#ffffff"
  ink-muted: "#8e8da0"
  ink-secondary: "#696f81"
  ink-tertiary: "#535676"
  canvas: "#181824"
  surface-1: "#eeeeee"
  hairline: "#000000"

typography:
  display-xl:
    fontFamily: "\"Haffer XH SemiBold\", \"Haffer XH\", system-ui, sans-serif"
    fontSize: 88px
    fontWeight: 600
    lineHeight: 83.6px
    letterSpacing: "-1.76px"
  display-lg:
    fontFamily: "\"Haffer XH SemiBold\", \"Haffer XH\", system-ui, sans-serif"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 84px
    letterSpacing: "-1.4px"
  display-md:
    fontFamily: "\"Haffer XH SemiBold\", \"Haffer XH\", system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 52.8px
    letterSpacing: "-0.96px"
  display-sm:
    fontFamily: "\"Haffer XH SemiBold\", \"Haffer XH\", system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 36px
    letterSpacing: "-0.6px"
  heading-md:
    fontFamily: "\"Haffer XH SemiBold\", \"Haffer XH\", system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 28.8px
    letterSpacing: "-0.48px"
  heading-sm:
    fontFamily: "\"Haffer XH SemiBold\", \"Haffer XH\", system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 27px
    letterSpacing: "-0.27px"
  body-lg:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 25.2px
    letterSpacing: "-0.36px"
  body-md:
    fontFamily: "\"Blender Medium\", system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 20.8px
    letterSpacing: 0
  body-sm:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 18.2px
    letterSpacing: "-0.07px"
  caption:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 14.4px
    letterSpacing: 0
  ui-mock:
    fontFamily: "Satoshi, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 19.2px
    letterSpacing: 0
  display-pixel:
    fontFamily: "\"Jersey 10\", monospace"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 63px
    letterSpacing: "-1.4px"

rounded:
  none: "0px"
  sm: "8px"
  md: "10px"
  lg: "20px"
  xl: "38px"
  pill: "100px"
  full: "200px"

spacing:
  xxs: "2px"
  xs: "6px"
  sm: "8px"
  base: "10px"
  md: "16px"
  lg: "20px"
  xl: "30px"
  2xl: "40px"
  3xl: "60px"
  4xl: "64px"

components:
  hero-heading-white:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
    padding: "0px"
  hero-heading-accent:
    backgroundColor: "transparent"
    textColor: "{colors.accent-red}"
    typography: "{typography.display-xl}"
    padding: "0px"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-md}"
  sub-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
  body-paragraph-muted:
    backgroundColor: "transparent"
    textColor: "{colors.ink-muted}"
    typography: "{typography.body-sm}"
  button-primary:
    backgroundColor: "{colors.accent-red}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
    height: "44px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.pill}"
    padding: "10px 20px"
    height: "44px"
    borderColor: "{colors.ink}"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.none}"
    padding: "20px 40px"
    height: "60px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.accent-cobalt}"
    typography: "{typography.caption}"
    padding: "8px 12px"
    height: "28px"
  card-dark:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "20px"
  card-cobalt:
    backgroundColor: "{colors.accent-cobalt}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-mock}"
    rounded: "{rounded.lg}"
    padding: "20px"
  card-magenta:
    backgroundColor: "{colors.accent-magenta}"
    textColor: "{colors.ink}"
    typography: "{typography.ui-mock}"
    rounded: "{rounded.lg}"
    padding: "20px"
  card-yellow:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.canvas}"
    typography: "{typography.ui-mock}"
    rounded: "{rounded.lg}"
    padding: "20px"
  text-input:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.md}"
    padding: "10px 16px"
    height: "40px"
    borderColor: "{colors.ink-tertiary}"
---

## Overview

Superlist's marketing site does something few productivity brands attempt. **Split-color display.** The hero h1 deliberately fractures across two lines and two colors — "Tasks, notes, and plans." renders in white Haffer XH SemiBold at 88px / 600, then "Finally in one app." flips to a saturated tomato-red `{colors.accent-red}` (#ff4a36) in the same face and weight. Color contrast does the work that a separate weight tier or a typographic accent would normally do. Where Notion paints its hero in clay-warm whites and Linear holds violet over graphite, Superlist commits to a midnight-indigo canvas `{colors.canvas}` (#181824) — a near-black deliberately shifted into the cool-purple range at OKLCH hue 284 — and trusts a single red phrase to carry the entire chromatic load above the fold.

The page's restraint is reinforced by where the brighter colors actually live. The cobalt-blue panel, hot-magenta tile, citrine-yellow card, and emerald accents that read as Superlist's signature all appear inside the product screenshots themselves rather than as chrome elements. The chrome around them stays nearly monochrome — white display, mid-violet secondary text `{colors.ink-muted}` (#8e8da0) at 31 occurrences, and the midnight-indigo floor. The brand has externalized its chromatic personality into the product canvas, which is a confident move only available to a team whose product UI is itself visually opinionated.

Typography runs five families in measured proportion. Haffer XH SemiBold carries every display and heading tier from 88px hero to 18px sub-head. Blender Medium handles body copy in the testimonial bands. Inter takes nav and footer duty. Satoshi runs inside the product mockups. And a single Jersey 10 pixel-font cameo at 70px provides one stylistic punctuation moment — a retro game-text reference that telegraphs the brand's playful DNA without compromising the surrounding editorial tone.

**Key Characteristics:**
- Midnight-indigo canvas `{colors.canvas}` (#181824) — purple-shifted near-black, 38 background occurrences. The hue choice (OKLCH 284) is deliberate, not incidental.
- Split-color hero h1 — white first line plus tomato-red `{colors.accent-red}` (#ff4a36) second line. The only saturated text moment in the captured chrome.
- Haffer XH SemiBold across display and heading tiers, with weights restricted to 400 and 600 — no 700+ moment.
- Five typeface system: Haffer XH SemiBold (display), Blender Medium (body), Inter (nav/caption), Satoshi (product mockups), Jersey 10 (single pixel-font cameo).
- Generous 20px default radius — 51 of 73 captured corner values; the rounding scale skips the 4–8px tight tier entirely.
- 100px pill rounding reserved for promotional CTAs; a 200px super-pill appears once on a circular badge.
- Product-as-palette — the cobalt, magenta, yellow, and emerald that signal "Superlist" all live inside the screenshots, not in surrounding chrome.
- 10px and 20px dominate the spacing scale (88 and 72 occurrences respectively), with section padding at 40–60px on the dark canvas.

## Colors

### Brand

- **Accent Red** (`{colors.accent-red}` — #ff4a36): frequency 2. Used as the second-line text fill in the hero h1 and once as an inline icon. The single saturated-text moment in the captured chrome — Superlist's voltage is spent on one phrase.
- **Primary** (`{colors.primary}` — #26253b): frequency 3. A deeper indigo than the page canvas, used as a faint card-on-card surface tone where one elevated dark surface needs to read off the floor.

### Surface

- **Canvas** (`{colors.canvas}` — #181824): frequency 40 (38 background, 2 gradient). The page floor — a purple-shifted near-black at OKLCH lightness 0.21 / hue 284, deliberately not true `#000000`. Lets the saturated product screenshots feel like they belong to the same chromatic family.
- **Surface-1** (`{colors.surface-1}` — #eeeeee): frequency 36 (18 text, 18 border). A near-white used inside the testimonial card and on small avatar borders — the only light surface in the captured chrome.

### Text

- **Ink** (`{colors.ink}` — #ffffff): frequency 339 across the captured chrome (166 text, 166 border, 4 shadow). The dominant text color on the dark canvas, used pure white without a muted variant for body display.
- **Ink Muted** (`{colors.ink-muted}` — #8e8da0): frequency 62 (31 text, 31 border). Mid-violet secondary text — the perfect compromise tone between the white display and the indigo canvas. Carries small captions, secondary labels, and divider-rule borders.
- **Ink Secondary** (`{colors.ink-secondary}` — #696f81): frequency 16. A deeper violet-grey, used inside product mockup text — slightly cooler than `{colors.ink-muted}`.
- **Ink Tertiary** (`{colors.ink-tertiary}` — #535676): frequency 2. Used for very-low-contrast micro labels inside the product UI screenshots.

### Hairline

- **Hairline** (`{colors.hairline}` — #000000): frequency 1372 (667 text, 667 border, 37 shadow, 1 background). Pure black is the dominant hairline tone — used as a 1px divider on every white card surface inside the product mockups. The chrome itself sits on midnight indigo, so true black borders only appear inside the product UI canvas.

### Product Accents (live inside the screenshots, not the chrome)

- **Accent Cobalt** (`{colors.accent-cobalt}` — #0000ee): frequency 104 (52 text, 52 border). The browser-default hyperlink blue. Used as the nav-link text color and as the fill of the cobalt-blue panel inside the "Production planning - June" screenshot.
- **Accent Magenta** (`{colors.accent-magenta}` — #f866db): frequency 32 (16 text, 16 border). The hot-pink tile inside the "Widgets at a glance" screenshot.
- **Accent Magenta Bright** (`{colors.accent-magenta-bright}` — #f739f7): frequency 2. A higher-saturation magenta cameo.
- **Accent Yellow** (`{colors.accent-yellow}` — #fbe74e): frequency 2. The citrine tile inside the "Recurring tasks" screenshot.
- **Accent Blue** (`{colors.accent-blue}` — #2590f1): frequency 2. A second-stop blue inside product mock illustrations.
- **Accent Emerald** (`{colors.accent-emerald}` — #22c55e): frequency 2. A status-success green inside product mocks.

## Typography

### Font Families

The system runs **five families**, each assigned to a specific surface role rather than to a generic display / body / mono split:

- **Haffer XH SemiBold** — every display and heading tier. The marketing chrome's dominant voice.
- **Blender Medium** — body copy in testimonial bands at 16px / 400.
- **Inter** — nav links, small captions, and footer text.
- **Satoshi** — text inside product UI screenshots at 16px / 500.
- **Jersey 10** — a single 70px pixel-font cameo, used once as a stylistic punctuation moment.

Fallback chains walk to `system-ui, sans-serif` for the sans families and to `monospace` for Jersey 10.

### Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | 88px | 600 | 83.6px | -1.76px | Hero h1 (both white and red lines) |
| `{typography.display-lg}` | 70px | 400 | 84px | -1.4px | Tertiary display, captured once |
| `{typography.display-md}` | 48px | 600 | 52.8px | -0.96px | Section h2 ("Everyday superpowers.", "Stop juggling five different apps.") |
| `{typography.display-sm}` | 30px | 600 | 36px | -0.6px | Smaller section h3 |
| `{typography.heading-md}` | 24px | 400 | 28.8px | -0.48px | Sub-heads on dark cards |
| `{typography.heading-sm}` | 18px | 400 | 27px | -0.27px | Tertiary card heads |
| `{typography.body-lg}` | 18px | 500 | 25.2px | -0.36px | Lead paragraphs, button labels |
| `{typography.body-md}` | 16px | 400 | 20.8px | 0 | Default running text (Blender Medium) |
| `{typography.body-sm}` | 14px | 400 | 18.2px | -0.07px | Nav links, footnotes (Inter) |
| `{typography.caption}` | 12px | 400 | 14.4px | 0 | Micro-labels |
| `{typography.ui-mock}` | 16px | 500 | 19.2px | 0 | Text inside product UI screenshots (Satoshi) |
| `{typography.display-pixel}` | 70px | 400 | 63px | -1.4px | One-time Jersey 10 pixel-font cameo |

### Principles

Display weights stay at 400 and 600 — no 700+ tier exists. The hero h1 at 88px / 600 is the loudest typographic moment in the system. Negative tracking scales with size: -1.76px on the 88px hero, -0.96px on the 48px section h2, -0.27px on the 18px sub-head. The hero's split-color treatment substitutes for what a typical SaaS system would do with a weight contrast or a typographic decoration — Superlist uses color alone to mark the resolution clause.

### Note on Font Substitutes

Haffer XH SemiBold is a commercial release from Displaay. **General Sans** (free from Indian Type Foundry) is the closest open substitute at the same weights; its slightly looser counters read close to Haffer XH at body sizes, though the optical correction at 88px display is noticeably different. **Blender Medium** has no obvious open replacement — Inter Medium is the practical fallback. **Satoshi** is free from Indian Type Foundry and can be used directly. For the Jersey 10 cameo, **VT323** or **Pixelify Sans** transfer the pixel-text feel.

## Layout

### Spacing System

- **Base unit:** 10px (the dominant gap at 88 occurrences), with 20px (72 occurrences) as the secondary module. The system runs on a 10/20 cadence rather than the 4/8 dominant in most dev-tools brands.
- **Tokens:** `{spacing.xxs}` 2px · `{spacing.xs}` 6px · `{spacing.sm}` 8px · `{spacing.base}` 10px · `{spacing.md}` 16px · `{spacing.lg}` 20px · `{spacing.xl}` 30px · `{spacing.2xl}` 40px · `{spacing.3xl}` 60px · `{spacing.4xl}` 64px.
- **Section padding (vertical):** ~60px between major bands on the indigo canvas.
- **Card internal padding:** `{spacing.lg}` (20px) on the dark surface cards; `{spacing.2xl}` (40px) on the testimonial strip.
- **Hero padding:** 40px horizontal, ~80px vertical — the split-color h1 sits roughly centered with the CTA pill directly beneath.

### Grid & Container

- **Max content width:** ~1280px on the hero and product-screenshot bands.
- **Hero block:** centered single-column with the split-color h1 stacked above the sub-paragraph and a "Get Started" pill CTA.
- **Logo wall:** a single-row "Stop spending time organizing your tasks — let us do it for you. Superlist uses AI to turn voice recordings into action items, summarize meeting notes, and help you focus on what actually matters." band sits above a 5-column row of integration logos (GitHub, Slack, Google, Outlook, Linear).
- **Product screenshot bands:** 2-column 50/50 splits pairing a phone or desktop product mockup with explanatory text. Each mockup carries its own embedded color palette (cobalt panel, magenta tile, yellow card).
- **Three-up feature row:** "Quick and fast voicenotes / Recurring tasks / Widgets at a glance" — three product cards in a row beneath the "Everyday superpowers." section heading.

### Rhythm

The page alternates between **dark-canvas editorial bands** (display heading + body paragraph, no surface fill) and **product-screenshot bands** (chromatic mockups breaking the monochrome floor). Section breaks are marked by 60px vertical padding rather than by background-color shifts. There is no atmospheric gradient anywhere — every section terminates on the same indigo floor, and chromatic interest comes from the product mockups themselves.

## Elevation

The system has essentially **no shadow tier on the dark canvas**. The chrome runs flat — display headings, body paragraphs, and section headings all sit directly on the indigo floor with no card surface around them.

- **Flat (no shadow):** hero, body bands, testimonial strip, integration logo wall — 95% of the chrome.
- **Product-screenshot lift:** the embedded mock product cards (cobalt, magenta, yellow) sit as flat `{rounded.lg}` (20px) tiles on the indigo canvas. They read as elevated through saturation contrast rather than through any drawn shadow.
- **Inside-product shadows:** within the product UI mockups themselves there is a small set of 1px hairline borders and faint drop-shadows on individual list-item rows — but these belong to the captured product UI, not to the marketing chrome.

The marketing surface trusts surface-color contrast (indigo floor vs. saturated product tiles) to carry every elevation cue.

## Shapes

The radius scale is **generous-soft**, dominated by a single 20px value:

- `{rounded.none}` 0px — used on full-bleed photographic blocks.
- `{rounded.sm}` 8px — frequency 11. Small UI surfaces inside product mocks.
- `{rounded.md}` 10px — frequency 6. Inputs and small chips.
- `{rounded.lg}` 20px — frequency 51. The dominant radius — used on every dark surface card, every product-screenshot tile, the testimonial strip, and the cobalt/magenta/yellow product mock surfaces.
- `{rounded.xl}` 38px — frequency 1. A single larger softness used on one feature surface.
- `{rounded.pill}` 100px — frequency 4. Promotional CTA pills (the hero "Get Started" button and the "Subscribe" CTA in the footer).
- `{rounded.full}` 200px — frequency 1. A single super-rounded circular badge.

The scale skips the 4px tight tier and the 12 / 14 / 16px middle tier almost entirely — the system is binary, 8px on small surfaces or 20px everywhere else, with pills reserved for the two warmest CTAs on the page.

## Components

**`hero-heading-white`** — White `{colors.ink}` text on the transparent indigo hero, `{typography.display-xl}` (88px / 600 / -1.76px). The first line of the split-color h1 ("Tasks, notes, and plans.").

**`hero-heading-accent`** — Tomato-red `{colors.accent-red}` (#ff4a36) text in the same `{typography.display-xl}` token. The second line of the split-color h1 ("Finally in one app."). The component pair is what makes the hero distinctive; rendering them as a single h1 fill would lose the entire move.

**`section-heading`** — White text, `{typography.display-md}` (48px / 600). Used for "Everyday superpowers.", "Stop juggling five different apps.", and section-band openers.

**`sub-heading`** — White text, `{typography.heading-md}` (24px / 400). Used on dark card titles and product-screenshot captions.

**`body-paragraph`** — White text at `{typography.body-md}` (Blender Medium 16px / 400). Default running text in testimonial bands.

**`body-paragraph-muted`** — Mid-violet `{colors.ink-muted}` text at `{typography.body-sm}` for secondary labels and footnotes.

**`button-primary`** — Tomato-red `{colors.accent-red}` fill, white text, `{rounded.pill}` 100px radius, 10x20 padding, 44px height. The "Get Started" pill in the hero — the only saturated CTA in the captured chrome.

**`button-secondary`** — Transparent fill, white text, 1px white border, `{rounded.pill}` radius. Reserved for tertiary actions.

**`top-nav`** — Indigo `{colors.canvas}` surface, 60px height, 20x40 padding. Houses the Superlist wordmark flush-left, product links centered, and "Sign in" / "Get Started" cluster flush-right.

**`nav-link`** — Cobalt-blue `{colors.accent-cobalt}` text at `{typography.caption}` (12px / 400). The hyperlink color is the saturated cobalt #0000ee — a deliberate choice that echoes the browser-default unstyled `<a>` color and gives the nav a distinctive web-native voltage.

**`card-dark`** — Indigo `{colors.canvas}` fill, white text, `{rounded.lg}` 20px radius, 20px internal padding. The default card surface in product-screenshot bands.

**`card-cobalt`** — Cobalt-blue `{colors.accent-cobalt}` fill, white text, `{rounded.lg}` radius. The bright-blue panel inside the "Production planning - June" hero screenshot.

**`card-magenta`** — Hot-pink `{colors.accent-magenta}` fill, white text, `{rounded.lg}` radius. The "Widgets at a glance" tile.

**`card-yellow`** — Citrine `{colors.accent-yellow}` fill, indigo text, `{rounded.lg}` radius. The "Recurring tasks" tile. The text color flips to dark on the yellow surface for contrast.

**`text-input`** — Indigo fill, white text, `{rounded.md}` 10px radius, 10x16 padding, 40px height, 1px `{colors.ink-tertiary}` border.

## Do's and Don'ts

**Do** treat the split-color hero as a single deliberate fracture. The white-then-red two-line h1 is the system's signature move; multiplying it into three or more color shifts inside the headline would dilute the resolution clause and turn the editorial gesture into chromatic noise.

**Do** keep the canvas at the purple-shifted `{colors.canvas}` (#181824) rather than true black or a charcoal. The OKLCH hue 284 is the value that lets the saturated product screenshots feel like they belong; a neutral near-black would make those colors read as pasted-on.

**Do** put the chromatic load inside the product screenshots. Cobalt, magenta, yellow, and emerald all live inside the captured UI mocks — promoting them to chrome decoration would compete with the product itself and break the "product-as-palette" discipline.

**Do** restrict Haffer XH SemiBold to weights 400 and 600. The system has no 700+ moment; bumping the display to 800 turns the editorial dek into a generic enterprise hero and undercuts the playful Wunderlist-team DNA.

**Don't** swap the indigo canvas for pure `#000000`. True black flattens the contrast with the saturated product mockups and removes the violet undertone that ties the chromatic system together.

**Don't** use the tomato-red `{colors.accent-red}` (#ff4a36) anywhere outside the hero second line. It is a single-purpose accent — promoting it to a status-error tone or a CTA fill would over-spend the system's only saturated text moment.

**Don't** introduce a 4 / 12 / 14 / 16px middle radius tier. The shape system is binary — 8px on small surfaces or 20px on cards, with a 100px pill reserved for CTAs. A middle radius would soften the contrast between surface tiles and pill buttons.

**Don't** style nav links to a brand neutral. The cobalt-blue `{colors.accent-cobalt}` (#0000ee) link color is the browser-default hyperlink hue — Superlist surfaces it deliberately as a web-native signal. Restyling it to white or muted-grey loses the deliberate browser-default reference.

## Known Gaps

- **Hover and focus states:** the captured page does not expose interactive-state styling for the primary or secondary buttons. The full state matrix (focus ring, disabled tint, press state) is not represented.
- **Light mode:** the marketing surface is dark-only. Superlist's product (web, iOS, Android, Mac) ships a light theme but it is not exposed on the marketing chrome.
- **Form input error states:** `{component.text-input}` carries the resting state for the footer newsletter / sign-up field; error and validation styling lives inside the product UI.
- **Motion:** the hero and product-screenshot bands include scroll-driven entrance animations and product UI demos that loop, but the spec captures end-state values only.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Superlist application (web `app.superlist.com` and native clients) carries a richer token system — list view chrome, command palette, integration cards, calendar view — that is not represented here.
- **Pricing page chrome:** the captured page is the marketing landing only; the `/pricing` page and the AI feature deep-dives use their own card layouts that are not extracted.
- **Jersey 10 placement:** the single 70px pixel-font cameo is captured as a typography token but its exact in-page context is not documented; treat it as an opt-in stylistic punctuation rather than a recurring tier.