Superlist · Full Page
Superlist
Consumer-productivity that's playful without ever feeling cheap — electric-blue + hot-pink brand, motion-rich, Haffer display. Wunderlist lineage, a modern voice.

Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
Superlist is the rare consumer-productivity landing that feels playful without ever feeling cheap — proof that you can be loud and disciplined at the same time. We catalogued it because it solves the hardest problem in the to-do category: making organization look joyful instead of clerical, using saturated brand color and motion as the personality rather than the product screenshot. If you are shipping a consumer app that needs to feel alive on first paint yet still read as a serious tool, this is the reference to keep open while you design.
Design decisions observed
- Saturated brand color as the entire personality — an electric blue and a hot pink do the emotional work that a normal SaaS page would hand to illustration. The palette is the brand voice, not a decoration on top of it.
- A confident display type voice (Haffer XH SemiBold) carries every heading at heavy negative tracking, so headlines feel set and intentional rather than typed. The page sounds like it has an opinion.
- Playful punctuation through a pixel/arcade display face (Jersey 10) used as a deliberate accent — a wink that signals 'this is fun software' without turning the whole page into a toy.
- Soft, friendly elevation — cards float on gentle drop shadows lifted by a hairline inset white highlight, the lighting trick that makes consumer UI feel tactile and pressable rather than flat and corporate.
- Generous pill geometry — a 20px corner radius dominates the surface and full 100px pills handle every button, so the entire page reads rounded, soft, and approachable by default.
- Restraint inside the playfulness — a single 0.2s ease curve governs every transition. The motion is consistent enough to feel engineered, which is what keeps the color and shape from tipping into noise.
What to study
- How Superlist makes high-saturation color feel premium instead of childish — the trick is committing two brand hues hard and letting near-black/near-white do the structural work, so the color always lands as an event.
- The display-vs-accent type relationship — a single serious workhorse display family for authority, plus one novelty face used sparingly as flavor. Learn how one playful font earns its keep without diluting hierarchy.
- Friendly elevation craft — the inset white top-highlight on cards (rgba(255,255,255,0.45) 0 0.5px 0 inset) paired with a soft 10-15px drop shadow. This two-part recipe is the entire difference between 'cheap card' and 'tactile object'.
- Pill-first shape language — how a dominant 20px radius plus full-round buttons creates an instantly recognizable softness, and how to keep it from feeling bubbly by pairing it with confident heavy type.
What to avoid
- Don't reach for the saturated brand hues as backgrounds or large fills — Superlist keeps them as accents and type, letting near-black and near-white hold the surface. Flood the page with the blue or pink and the joy curdles into a logo soup.
- Don't over-deploy the novelty display face — the arcade/pixel font works precisely because it's rare. Set body copy or multiple headings in it and you trade 'rafine oyunbaz' for 'theme park'.
- Don't add a second motion curve thinking variety reads as life — Superlist's energy comes from color and shape, not from easing zoo. One curve, applied consistently, is what keeps the playfulness disciplined.
Taste notes
The page behaves like a well-made toy for adults — every surface is rounded and pressable, the color arrives in confident bursts rather than washes, and the heavy display type keeps the whole thing from floating away into cuteness. You're being delighted, not sold to. The genius is the tension: maximalist palette held inside minimalist structure, a single easing curve disciplining a riot of hue, so the result feels alive and engineered at once.
Lineage & references
- The spiritual sequel to Wunderlist — built by the same founders, it carries forward the idea that personal productivity software is allowed to feel warm and human, not spreadsheet-grey.
- Sits in the playful-consumer-productivity cohort alongside Things, Todoist, and Cron/Notion Calendar — apps that treat organizing your life as something that should feel good, with color and motion as first-class brand assets.
- Part of the Framer-built marketing generation (Framer Motion under the hood, framerusercontent asset pipeline) — landing pages where the brand expresses itself through animation and saturated identity color rather than dense feature grids.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Playful-but-refined consumer productivity. Near-black (#181824) and near-white (#f7f7ff) hold the structure while two committed brand hues — electric blue #0000ee and hot pink #f866db — carry all the personality as accents and type, never as floods. Display voice is Haffer XH SemiBold at heavy negative px tracking (-1.76px on hero), with a pixel/arcade face (Jersey 10) used sparingly as a wink. Geometry is pill-first: a dominant 20px radius and full 100px buttons make every surface soft and pressable. Elevation is friendly — soft 10-15px drop shadows lifted by an inset white top-highlight. Motion is one disciplined curve, cubic-bezier(0.44, 0, 0.56, 1) at 0.2s, applied everywhere. Joy held inside discipline.
Main prompt
Use this capture as a design language transfer brief for my project. Adopt the palette (near-black #181824 / near-white #f7f7ff structure + committed brand accents electric blue #0000ee and hot pink #f866db used as type and highlights, never as large fills), typographic voice (Haffer XH SemiBold display with heavy negative px tracking, Inter for body, one playful pixel display face used sparingly), pill-first shape language (20px dominant radius, 100px full-round buttons), friendly elevation (soft 0 10px 15px rgba(0,0,0,0.08) drop shadow + inset white top-highlight rgba(255,255,255,0.45) 0 0.5px 0), and a single motion curve cubic-bezier(0.44, 0, 0.56, 1) at 0.2s across every page and component I ship. Treat this as my project's constitution — any new component should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.
Overview
- Layout
- Flow
- Content width
- Bounded
- Framing
- Layered
- Grid strength
- Soft
Color philosophy
Structure-by-neutral, personality-by-saturation. Near-black #181824 and near-white #f7f7ff/#ffffff do ~95% of the surface work; the two brand-tier hues — electric blue #0000ee and hot pink #f866db — appear almost exclusively as accent type, links, and highlights at single-digit surface share. A secondary expressive set (teal #22c55e, yellow #fbe74e, red #ff4a36, periwinkle #7577e0) provides categorical pops for list/tag states. Cool slate #8e8da0 handles de-emphasized text.
- Black #000000 text (1620 measured occurrences) on near-white background — dominant reading layer
- Near-white #f7f7ff / pure #ffffff (413+54 occurrences) — primary inverse text and light surface
- Electric blue #0000ee (brand tier, 122 occurrences) — primary accent: links, focus, key emphasis. Surface share kept low
- Hot pink #f866db (brand tier, 34 occurrences) — secondary accent for delight moments and highlights, never a fill
- Slate #8e8da0 (82 occurrences) — captions, metadata, de-emphasized labels
- Expressive set teal #22c55e / yellow #fbe74e / red #ff4a36 / periwinkle #7577e0 — categorical list/tag/status pops only, low frequency
- Dark surface #181824 reserved for inverse sections — pairs with #f7f7ff foreground at high contrast
Gradients (paste-ready)
linear-gradient(0deg, color(display-p3 0.772358 0.137098 0.050813) 0%, color(display-p3 0.97561 0.379986 0.256739) 100%) linear-gradient(rgb(24, 24, 36) 0%, rgba(25, 28, 43, 0) 100%) linear-gradient(0deg, rgb(24, 24, 36) 0%, rgba(25, 28, 43, 0) 100%)
Typography rules
- Display / heading family: Haffer XH SemiBold (self-hosted, framerusercontent woff2, display:swap). Carries hero, section headings, emphasis labels. Regular/Bold/Italic variants available for weight play.
- Body / UI family: Inter (self-hosted woff2, display:swap) at 14-18px. Also: Satoshi 500 for select UI labels, Inter for captions.
- Playful accent face: Jersey 10 (pixel/arcade Google font) — used sparingly as a wink on a single hero word or playful marker, never for body or multiple headings. Fragment Mono available for code/tabular.
- Display tracking in px, not em — and heavily negative: -1.76px on 88px hero (heading-1), -1.4px on 48-70px headings, -0.96px on 48px, -0.48px on 24px, -0.16px on 16px UI. Constant optical tightening at every display size.
- Heading line-height runs tight on display: 83.6px on 88px hero (~0.95), 52.8px on 48px (1.1), 28.8px on 24px (1.2). Body Inter sits at 1.3-1.4 (18.2px on 14px, 21.6px on 18px).
- Weight usage: Haffer SemiBold ~600 for headings and strong UI; Inter 400 for body, 500 for emphasis; Satoshi 500 for select labels. Don't introduce a third sans display family.
- Body copy max ~45-60ch at 16-18px Inter; small print 12-14px with line-height 1.3.
Spacing rules
- Base rhythm leans on 10px and 20px (the two dominant gaps — 201 and 158 occurrences). Effective scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 23 / 25 px.
- Primary gap/gutter values for flex layouts: 10 and 20px dominate; 8px for tight clusters; 2px for micro inline overlap; larger 30 / 60 / 64 / 70px for generous section-level breathing.
- Container max-widths: 400px (narrow content cluster / card column, 30 occurrences), 800px (prose / mid rail), 1500px (full page bound, 14 occurrences). Do not exceed 1500px.
- Card padding clusters around 16-25px (the 23 and 25px values are padding-specific). Always pick from the scale; no magic numbers.
- Section vertical rhythm leans on the 30-70px tier for desktop air; mobile compresses toward the 16-25px band.
Design tokens
Palette, type, and space — all agent-readable.
11 colors · hex / rgb / hsl / oklch
- foreground68%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- background17%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- brand5%
- HEX
#0000EE - RGB
rgb(0, 0, 238) - HSL
hsl(240, 100%, 47%) - OKLCH
oklch(42.90% 0.2973 264.05)
- HEX
- foreground3%
- HEX
#8E8DA0 - RGB
rgb(142, 141, 160) - HSL
hsl(243, 9%, 59%) - OKLCH
oklch(65.06% 0.0280 288.01)
- HEX
- background2%
- HEX
#F7F7FF - RGB
rgb(247, 247, 255) - HSL
hsl(240, 100%, 98%) - OKLCH
oklch(97.84% 0.0106 286.20)
- HEX
- background2%
- HEX
#181824 - RGB
rgb(24, 24, 36) - HSL
hsl(240, 20%, 12%) - OKLCH
oklch(21.49% 0.0235 284.25)
- HEX
- accent1%
- HEX
#F866DB - RGB
rgb(248, 102, 219) - HSL
hsl(312, 91%, 69%) - OKLCH
oklch(73.05% 0.2197 336.10)
- HEX
- accent0%
- HEX
#FF4A36 - RGB
rgb(255, 74, 54) - HSL
hsl(6, 100%, 61%) - OKLCH
oklch(66.74% 0.2202 30.12)
- HEX
- accent0%
- HEX
#FBE74E - RGB
rgb(251, 231, 78) - HSL
hsl(53, 96%, 65%) - OKLCH
oklch(91.80% 0.1667 101.73)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 2 nodes captured; depth capped at 6 for readability.
- body
- └─ div
Accessibility
WCAG contrast matrix.
84 combinations · 38 pass AA · 24 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #F7F7FF | 19.70 | AAA | AAA | +102 | foreground on background |
Aa | #F7F7FF | #000000 | 19.70 | AAA | AAA | -103 | background on foreground |
Aa | #FFFFFF | #181824 | 17.57 | AAA | AAA | -107 | background on background |
Aa | #181824 | #FFFFFF | 17.57 | AAA | AAA | +104 | background on background |
Aa | #000000 | #FBE74E | 16.64 | AAA | AAA | +91 | foreground on accent |
Aa | #FBE74E | #000000 | 16.64 | AAA | AAA | -91 | accent on foreground |
Aa | #F7F7FF | #181824 | 16.49 | AAA | AAA | -102 | background on background |
Aa | #181824 | #F7F7FF | 16.49 | AAA | AAA | +100 | background on background |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://framerusercontent.com/images/Phd9aIZqoVQ1Fa1b71cdzFkU.png?scale-down-to=2048&width=2664&height=1538- Format
- PNG
- Dimensions
- 1268×731
- Loading
- auto
- srcset
- yes
- srcset descriptor
- https://framerusercontent.com/images/Phd9aIZqoVQ1Fa1b71cdzFkU.png?scale-down-to=512&width=2664&height=1538 512w,https://framerusercontent.com/images/Phd9aIZqoVQ1Fa1b71cdzFkU.png?scale-down-to=1024&width=2664&height=1538 1024w,https://framerusercontent.com/images/Phd9aIZqoVQ1Fa1b71cdzFkU.png?scale-down-to=2048&width=2664&height=1538 2048w,https://framerusercontent.com/images/Phd9aIZqoVQ1Fa1b71cdzFkU.png?width=2664&height=1538 2664w
- Full Page
- productivity
- saas
- both
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


