Skip to main content
Back to Gallery

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.

superlist.com/Added
Superlist Full Page — desktop screenshot

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.

Mode strategydual-paired
  • 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

Save PNG
  • foreground
    68%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • background
    17%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • brand
    5%
    • HEX#0000EE
    • RGBrgb(0, 0, 238)
    • HSLhsl(240, 100%, 47%)
    • OKLCHoklch(42.90% 0.2973 264.05)
  • foreground
    3%
    • HEX#8E8DA0
    • RGBrgb(142, 141, 160)
    • HSLhsl(243, 9%, 59%)
    • OKLCHoklch(65.06% 0.0280 288.01)
  • background
    2%
    • HEX#F7F7FF
    • RGBrgb(247, 247, 255)
    • HSLhsl(240, 100%, 98%)
    • OKLCHoklch(97.84% 0.0106 286.20)
  • background
    2%
    • HEX#181824
    • RGBrgb(24, 24, 36)
    • HSLhsl(240, 20%, 12%)
    • OKLCHoklch(21.49% 0.0235 284.25)
  • accent
    1%
    • HEX#F866DB
    • RGBrgb(248, 102, 219)
    • HSLhsl(312, 91%, 69%)
    • OKLCHoklch(73.05% 0.2197 336.10)
  • accent
    0%
    • HEX#FF4A36
    • RGBrgb(255, 74, 54)
    • HSLhsl(6, 100%, 61%)
    • OKLCHoklch(66.74% 0.2202 30.12)
  • accent
    0%
    • HEX#FBE74E
    • RGBrgb(251, 231, 78)
    • HSLhsl(53, 96%, 65%)
    • OKLCHoklch(91.80% 0.1667 101.73)

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.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#F7F7FF19.70AAAAAA+102foreground on background
Aa
#F7F7FF#00000019.70AAAAAA-103background on foreground
Aa
#FFFFFF#18182417.57AAAAAA-107background on background
Aa
#181824#FFFFFF17.57AAAAAA+104background on background
Aa
#000000#FBE74E16.64AAAAAA+91foreground on accent
Aa
#FBE74E#00000016.64AAAAAA-91accent on foreground
Aa
#F7F7FF#18182416.49AAAAAA-102background on background
Aa
#181824#F7F7FF16.49AAAAAA+100background 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.

Total12Lazy loaded67%png9svg3

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
Page type
  • Full Page
Industry
  • productivity
  • saas
Theme
  • both
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.