# Superlist — Marketing site Design Spec

> 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 `#0000ee` seen ~60x is
> browser-default link colour on unstyled Framer anchors — excluded as leakage.
> Button `:hover` is 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-gamut `color(display-p3 …)`**, and the type stack quietly includes a
> **pixel face (Jersey 10)** alongside the grotesque.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

**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 |

## 4. Component Stylings

The primary CTA is a **40px** pill at **8px** radius filled with the P3
orange-red gradient and white text. The dominant page radius is a generous
**20px** (51 uses) on cards and panels, with 100px/200px used for large rounded
shapes and 4px/2px for small chips. **There are zero borders on the page** —
every boundary is a fill change. Shadows are soft and infrequent, led by
`rgba(0,0,0,.08) 0 10px 15px`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | P3 gradient #d70000→#ff5231, #fff, 8px, 40px | brightness lift (Framer Motion JS, no CSS rule) | no custom ring found | — | not observed |
| Nav link | #f7f7ff, 16/600 | `color 0.2s cubic-bezier(.44,0,.56,1)` | as above | — | — |
| Card / panel | #26253b or wash .13, 20px | — | — | — | — |
| Chip | rgba(255,255,255,.13), 4px | — | — | — | — |

Focus note: **no custom focus ring exists** — Framer compiles interaction to JS
and leaves the browser default. Treat as an accessibility gap and supply a
visible ring (e.g. `0 0 0 3px #ff5231`).

## 5. Layout Principles

A single-row nav (mark + wordmark left, dropdown link cluster centred, Sign in +
gradient Sign up right) over a full-bleed dark canvas. The hero is centred: two
88px display lines, the second tinted, with the product UI revealed below on
scroll. Sections stack full-width on the same dark canvas, separated by fill
changes and 20px-radius panels rather than rules. One background video.

## 6. Depth & Elevation

Radius: **20px** dominant (cards, panels), 8px (CTA), 10px, 4px, 2px, 38px,
100px, and a `200px 200px 0 0` dome for one large shape. **Zero borders** on the
entire page. Four shadows, all soft: `rgba(0,0,0,.08) 0 10px 15px` (30 uses), a
layered `rgba(0,0,0,.1) 0 1px 1px + rgba(0,0,0,.05)…`, a `rgba(255,255,255,.25)
0 -1px 1px` top rim-light, and one `rgba(0,0,0,.05) 0 0 0 1px inset`. One
`backdrop-filter: blur(29px)`.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| color | 0.2s | cubic-bezier(0.44, 0, 0.56, 1) | links and text (the only CSS transition, 45x) |

**A finding, not a gap:** the stylesheet declares exactly **one** CSS transition
(`color 0.2s`) and exactly **one** keyframe — `__framer-loading-spin`, the Framer
loader. All real motion runs through **Framer Motion** (detected) in JS, so
durations are not readable from CSS. The declared house easing is a symmetric
`cubic-bezier(.44,0,.56,1)`; other declared easings are `ease-out` and `linear`.
There is **no `prefers-reduced-motion` block** (`reducedMotionBlocks:0`) — add one
when rebuilding, especially with a background video present.

## 8. Backgrounds, Effects & WebGL

- The signature is the **wide-gamut P3 CTA gradient** (see §2) — worth preserving in P3 rather than flattening to hex.
- Two fade-out gradients in the canvas colour, `linear-gradient(#181824 0%, rgba(25,28,43,0) 100%)` and its 0deg mirror, used as section masks.
- One `backdrop-filter: blur(29px)` — an unusually large blur.
- One background video. No raster background layers, no canvas/WebGL, no grain.

## 9. Do's and Don'ts

### Do
- Build on the deep navy-purple #181824 and keep everything else monochrome.
- Let scale carry the energy: 88px display at -1.76px tracking with line-height *below* font size.
- Reserve saturation for the single orange-red CTA; author it in P3 with a hex fallback.
- Use a generous 20px radius on cards and panels.
- Separate with fill changes — the page has no borders at all.
- Keep the pixel face (Jersey 10) as a small deliberate accent, not a headline face.

### Don't
- Don't read "playful" as bright — the canvas is dark and colour is rationed.
- Don't add borders; the system uses none.
- Don't let violet or pink become background fills.
- Don't loosen the negative tracking on display type.
- Don't ship without a focus ring or a reduced-motion block; the site omits both.

## 10. Responsive Behavior

Framer's ladder (the .98 fractional maxes are Framer's off-by-one style):

| Breakpoint | What changes |
|---|---|
| max 809 / 809.98px | phone + small tablet: single column, display type scales down |
| 810px | tablet layout |
| max 1199px | tablet upper bound |
| max 1399 / 1399.98px | desktop before wide |

`darkSchemeBlocks: 1` — there **is** one `prefers-color-scheme: dark` block, though
the site is dark by default. No container queries. No reduced-motion block.

## 11. Agent Prompt Guide

- Canvas `#181824` · Panel `#26253b` · Text `#ffffff` / `#f7f7ff` · Muted `#8e8da0` · **No borders** · CTA gradient `#d70000 → #ff5231` (P3) · Accents `#9087ff` / `#f866db`
- Font: Haffer XH SemiBold display (Archivo stand-in) + Inter UI + Jersey 10 pixel accent · Display: 88/83.6, 600, -1.76px · Radius: 20px panels / 8px CTA · Control height: 40px
- Focus: none defined — add `0 0 0 3px #ff5231` · Hover: `color 0.2s cubic-bezier(.44,0,.56,1)`; everything else is Framer Motion JS

<superlist_design_language>
Dark, bold task-management brand that gets its energy from scale, not saturation.
Canvas is a deep navy-purple #181824 (sections #181825, panels #26253b) with
white #ffffff display text, #f7f7ff body and #8e8da0 muted — essentially
monochrome. The one hot moment is the primary CTA, a 40px pill at 8px radius
filled with a WIDE-GAMUT gradient authored as color(display-p3 .772 .137 .051) →
color(display-p3 .976 .380 .257), resolving to #d70000 → #ff5231 in sRGB; violet
#9087ff and pink #f866db appear only as small accents, never as fills. Display
type is enormous and tightly tracked — Haffer XH SemiBold (stand-in Archivo) at
88px on 83.6px leading, so line-height sits BELOW font size, with -1.76px tracking
scaling to -0.6px at 30px; Inter handles small UI and a PIXEL face (Jersey 10) is
a deliberate retro accent. Cards and panels use a generous 20px radius, and there
are ZERO borders anywhere — every boundary is a fill change, with four soft
shadows led by rgba(0,0,0,.08) 0 10px 15px and one backdrop blur(29px). Being
Framer-built, the stylesheet declares exactly one transition (color 0.2s
cubic-bezier(.44,0,.56,1)) and one keyframe; all other motion is Framer Motion JS.
Feels: dark, bold, confident, quietly playful. Avoid: reading playful as bright,
adding borders, letting violet/pink become backgrounds, loosening the negative
tracking, shipping without a focus ring or reduced-motion block.
</superlist_design_language>