A dark, bold task-management brand that draws its energy from scale rather than saturation. The canvas is a deep navy-purple #181824 with #26253b panels, and the page is essentially monochrome — white and #f7f7ff text over #8e8da0 muted — with colour rationed to a single call to action. That CTA is the standout technical detail: a 40px pill whose gradient is authored in WIDE-GAMUT color(display-p3 .772 .137 .051) to color(display-p3 .976 .380 .257), resolving to #d70000 to #ff5231 in sRGB, so it renders richer on P3 displays than a hex could. Display type is enormous and tightly tracked — Haffer XH SemiBold at 88px on 83.6px leading, putting line-height BELOW the font size so the hero lines lock together as a block, with -1.76px tracking scaling down to -0.6px at 30px. A pixel typeface, Jersey 10, appears as a deliberate retro wink against the otherwise clean grotesque. Panels use a generous 20px radius and there are ZERO borders anywhere — every boundary is a fill change, softened by four gentle shadows led by rgba(0,0,0,.08) 0 10px 15px and one unusually large backdrop blur(29px). Being Framer-built, the stylesheet declares exactly one transition and one keyframe; all real motion runs through Framer Motion in JS.
Browse Superlist in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: superlist.com (live DOM, computed styles), 2026-07-25. 0 stylesheets blocked. Framer-built: hashed inline classes, no published :root brand tokens, so §2 is read from computed fills/text. The#0000eeseen ~60x is browser-default link colour on unstyled Framer anchors — excluded as leakage. Button:hoveris compiled into Framer Motion JS rather than CSS, so §4 hover is recorded as observed-by-inspection. Reality check: the hint is half right. "Bold type" is correct and then some — an 88px Haffer XH SemiBold display with -1.76px tracking. But "colourful, playful" oversells it: the page is a dark navy-purple #181824 with colour strictly rationed to one orange-red CTA and two small accents. Two genuine finds the hint misses: the CTA gradient is authored in wide-gamutcolor(display-p3 …), and the type stack quietly includes a pixel face (Jersey 10) alongside the grotesque.
A confident, dark productivity brand that gets its energy from scale rather than saturation. The canvas is a deep navy-purple and nearly everything on it is monochrome; the one hot moment is a vivid orange-to-coral CTA that reads as the single call to action on the page. Display type is enormous and tightly tracked, set in Haffer XH at semibold with line-height *below* font size so the two hero lines lock together as a block. A pixel typeface (Jersey 10) appears as a deliberate retro wink against the otherwise clean grotesque. Surfaces are softly rounded at a generous 20px, separated by fills rather than borders — there are no borders anywhere. Feels: dark, bold, confident, quietly playful.
| Token | Hex / value | Role / usage |
|---|---|---|
| canvas | #181824 | page background (deep navy-purple) |
| canvas-2 | #181825 | adjacent section fill |
| panel | #26253b | raised panel |
| white | #ffffff | primary display text |
| off-white | #f7f7ff | body / UI text |
| grey-light | #eeeeee | secondary text |
| muted | #8e8da0 | muted text (49 uses) |
| muted-deep | #696f81 | tertiary text |
| wash-13 | rgba(255,255,255,.13) | translucent control fill |
| wash-05 | rgba(255,255,255,.05) | subtle section wash |
| cta-deep | #d70000 | CTA gradient start (P3-authored) |
| cta-bright | #ff5231 | CTA gradient end (P3-authored) |
| violet | #9087ff | accent text |
| violet-fill | #7577e0 | accent fill |
| pink | #f866db | second accent, sparingly |
Rules: the page is monochrome plus one CTA. The orange-red gradient is the only saturated surface; violet and pink appear as small accents, never as backgrounds. The CTA gradient is authored in wide-gamut P3 — linear-gradient(0deg, color(display-p3 .772 .137 .051), color(display-p3 .976 .380 .257)), which resolves to #d70000 → #ff5231 in sRGB. Use the P3 form with the hex as fallback.
Haffer XH SemiBold carries all headings — and unusually it is used at both weight 600 *and* weight 400 (the h3 role), i.e. the family name is fixed while the weight varies. Tracking is consistently negative and scales with size (-1.76px at 88px, -0.6px at 30px, -0.48px at 24px). The 88px display runs at 83.6px leading — line-height below font size. Inter handles small UI text; Jersey 10 (a pixel/bitmap face) and Blender Medium appear as accent faces; Satoshi appears minimally.
Specimen substitution: previews load Archivo for Haffer XH, Inter for
Inter, and Jersey 10 — which is itself an open Google font, so the pixel
accent is the real face. One bundled Google Fonts link.
| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Display (h1) | Haffer XH SemiBold | 88/83.6 | 600 | -1.76px |
| Section (h2) | Haffer XH SemiBold | 30/36 | 600 | -0.6px |
| Sub-head (h3) | Haffer XH SemiBold | 24/28.8 | 400 | -0.48px |
| Body / UI | Haffer XH SemiBold | 16/19.2 | 600 | normal |
| Small UI | Inter | 14 | 400 | normal |
| Pixel accent | Jersey 10 | display sizes | 400 | normal |
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.