What is Superlist's primary brand color?

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.

What typefaces does Superlist use, and what should I substitute?

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.

Why is the second line of the hero a different color?

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.

Why is the canvas purple-shifted instead of true black?

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.

Can I use this DESIGN.md to build my own React productivity marketing site?

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.

Superlist Design System

Superlist's marketing site as a DESIGN.md file.

About Superlist DESIGN.md

Curated by Dov AzencotUpdated May 18, 2026Source superlist.com

Productivity & SaaS
Project Management

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.

What makes it distinct

Split-color herothe 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 systemHaffer XH SemiBold for headlines plus a single Jersey 10 pixel-font cameo at 70px and Blender Medium for body
Product-as-palettethe screenshots themselves provide the brand chromatic vocabulary (cobalt, magenta, yellow) so the chrome stays nearly monochrome
Generous 20px corners51 of 73 captured radii sit at 20px, with pill chips at 100px reserved for promotional CTAs

Live at superlist.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

superlist.com

Explore Superlist

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Superlist design system FAQ

Common questions about Superlist's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Superlist — official site

Superlist's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.