---
title: "Superlist design system"
variant: extended
source: https://www.superlist.com/
captured_at: 2026-10-12
theme: dark
industry: productivity
generator: Design DNA (https://four.wiralomi.com/style/superlist-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Superlist · Design System

> A dark canvas for work, life, and lively product stories.

**Theme:** dark · **Industry:** productivity · **Source:** https://www.superlist.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Superlist pairs a near-black violet canvas with bright product imagery and crisp, centered headlines. The long homepage moves from a focused hero into app demonstrations, feature stories, reviews, and a compact multi-column footer.

## North star

Keep the dark canvas quiet and let confident type, coral emphasis, and vivid product media do the storytelling.

## Overview

The page is built on a nearly uniform dark violet canvas, with white headlines and restrained muted text creating a clear reading hierarchy. A vivid warm coral accent highlights the hero’s second headline line and signup CTA; its measured appearance is limited, so keep it as a focal signal rather than a broad surface colour. Haffer XH SemiBold gives display and heading text a compact, confident shape, while Blender Medium and Inter support body copy, navigation, and links. The centered opening has generous breathing room above a large, rounded application preview. Farther down, alternating centered statements, split feature sections, and paired interface cards keep the long scroll varied without changing the dark foundation. Product screenshots and bright blue or violet backplates carry most of the colour variation; treat those as media, not core interface tokens. Softly rounded media, understated elevation, and ample section pauses preserve a polished, product-led feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Violet | `#181824` | `--color-midnight-violet` | brand | Near-black violet canvas spanning the page and anchoring every section. |
| Bright Paper | `#ffffff` | `--color-bright-paper` | neutral | Primary headings, prominent copy, links, and footer text. |
| Slate Hush | `#696f81` | `--color-slate-hush` | neutral | Muted supporting text and secondary descriptions on the dark canvas. |
| Lavender Ash | `#8e8da0` | `--color-lavender-ash` | neutral | Quieter navigation, footer labels, and subdued heading text. |
| Signal Coral | `#ff5231` | `--color-signal-coral` | accent | Sparse headline emphasis and warm focal details; the signup CTA appears as a coral-red gradient. |

### Semantic aliases

`--color-canvas` → `#181824` (Midnight Violet) · `--color-text` → `#ffffff` (Bright Paper) · `--color-text-muted` → `#696f81` (Slate Hush) · `--color-text-subtle` → `#8e8da0` (Lavender Ash)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#181824` | 17.57:1 | AAA |
| `#696f81` | `#181824` | 3.51:1 | AA-large |
| `#8e8da0` | `#181824` | 5.41:1 | AA |

### Gradients

- `linear-gradient(0deg, rgb(24, 24, 36) 0%, rgba(25, 28, 43, 0) 100%)`
- `linear-gradient(rgb(24, 24, 36) 0%, rgba(25, 28, 43, 0) 100%)`
- `linear-gradient(0deg, color(display-p3 0.772358 0.137098 0.050813) 0%, color(display-p3 0.97561 0.379986 0.256739) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| CUSTOM;Blender Medium | `--font-body` | system | 400 | Dominant body-copy family across the page. | Barlow |
| Inter | `--font-inter` | webfont | 400, 500 | Navigation, captions, and medium-weight link text. | Inter |
| Haffer XH SemiBold | `--font-display` | webfont | 600, 400 | Display headlines and section headings. | Manrope |
| Satoshi | `--font-satoshi` | webfont | 500 | Small supporting interface or text details. | Inter |
| Jersey 10 | `--font-jersey-10` | webfont | 400 | Occasional decorative or product-specific microcopy. | Jersey 10 |

- **CUSTOM;Blender Medium:** Measured at regular weight; keep body copy compact and readable rather than oversized.
- **Inter:** Use regular navigation and captions; links are medium weight with slightly tight tracking.
- **Haffer XH SemiBold:** Semibold headlines use tight negative tracking and natural mixed case.
- **Satoshi:** Measured in a small share of text at medium weight; keep usage secondary.
- **Jersey 10:** Rare display-style use; reserve for small playful details, not primary reading text.

### Type scale — Perfect Fourth (ratio ≈ 1.32, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 64px | 600 | 0.95 | -0.02em | — | Haffer XH SemiBold | Large, centered hero headline and standout campaign statements. |
| h1 | 51px | 600 | 1.2 | -0.02em | — | Haffer XH SemiBold | Primary hero and major page-level headings. |
| h2 | 48px | 600 | 1.1 | -0.02em | — | Haffer XH SemiBold | Feature-section headlines and prominent mid-page statements. |
| h3 | 30px | 600 | 1.2 | -0.02em | — | Haffer XH SemiBold | Feature titles and secondary content headings. |
| h4 | 24px | 400 | 1.2 | -0.02em | — | Haffer XH SemiBold | Smaller feature headings and supporting section labels. |
| body | 16px | 400 | 1.3 | 0 | — | CUSTOM;Blender Medium | Main explanatory copy and product feature descriptions. |
| caption | 14px | 400 | 1.3 | -0.005em | — | Inter | Compact interface notes, product details, and minor annotations. |
| nav | 14px | 400 | 1.3 | -0.005em | — | Inter | Header navigation and compact footer link labels. |
| link | 18px | 500 | 1.4 | -0.02em | — | Inter | Prominent inline links and calls to explore or sign up. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 8, 10, 16, 20, 25, 30, 40, 50, 60, 64 px.
- Section rhythm 40px · element gap 10px · card padding 40px · max content width 1390px.

The measured page uses a wide canvas with a 1390px maximum content width and a compact density. Its hero is centered, followed by a broad, full-bleed product preview; lower sections mix centered statements with split feature layouts and paired showcase cards. Keep text blocks narrower than the surrounding media, and use the measured 40px section gap and 10px element gap as rhythm references. The long single-page sequence relies on generous visual pauses between content groups rather than distinct background bands.

## Shape & elevation

- Radius: card `20px` · media `20px` · nav `10px` · link `8px` · xs `8px` · sm `10px` · md `20px` · pill `9999px`
- Shadow `md` (card): `rgba(0, 0, 0, 0.08) 0px 10px 15px 0px`
- Shadow `inset` (other): `rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset`
- Shadow `hairline` (section): `rgba(255, 255, 255, 0.25) 0px -1px 1px 0px`
- Motion: standard transition `0.2s cubic-bezier(0.44, 0, 0.56, 1)` on interactive elements.

The page is mostly flat: dark sections blend into the shared canvas, with no measured border colour defining a card system. Media and testimonial cards use rounded framing and modest shadowing, while a subtle inset highlight can separate layered interface surfaces. Keep elevation restrained and let contrast, imagery, and spacing create depth.

## Imagery

Large product-interface screenshots are the primary visual content, including a desktop workspace with a vivid video pane and phone mockups on bright blue or violet backplates. The hero preview is wide and framed with rounded corners; lower feature media alternates between paired screens and device-led demonstrations. Bright colours inside screenshots and backplates belong to the product imagery, not the restrained site palette.

## Components

### Hero headline

Centered Haffer XH SemiBold statement with white opening text and a coral-emphasized second line.

### Signup CTA

Compact centered signup action; the screenshot shows a bright coral-red gradient against the dark canvas.

### Application preview

Wide desktop interface demonstration with rounded media framing and a bright video panel embedded at the right.

### Feature split

Alternating text-and-media storytelling, with subdued supporting copy and product imagery on a blue or violet field.

### Product card

Rounded interface screenshot card; measured card radius is 20px, with modest shadowing on selected cards.

### Footer link columns

Dense multi-column navigation on the dark canvas, using muted labels and restrained colour accents for column headings.

### Measured component styles

- **Primary button**: transparent background · text #ffffff · radius 0px · padding 0px · 600 16px Haffer XH SemiBold Italic
- **Link** (“Sign up for free”): transparent background · text #0000ee · radius 8px · padding 0px · 400 12px sans-serif
- **Card** (“Superlist is an amazing app — simple, be”): transparent background · text #000000 · radius 20px · padding 40px · 400 12px sans-serif · shadow rgba(0, 0, 0, 0.08) 0px 10px 15px 0px
- **Navigation item** (“Become an affiliate”): transparent background · text #8e8da0 · radius 0px · padding 0px · 400 14px Inter

## Do

- Use Midnight Violet #181824 as the dominant page canvas.
- Set primary headlines in bold, tightly tracked display type.
- Reserve Signal Coral #ff5231 for small, high-attention moments.
- Give product screenshots room to act as the page’s visual colour.
- Alternate centered messaging with product-led feature layouts.
- Use rounded media framing and restrained shadows.

## Don't

- Do not introduce broad light-coloured section bands.
- Do not use coral as a large background surface.
- Do not treat screenshot blues and violets as brand tokens.
- Do not crowd the hero headline, copy, CTA, and preview together.
- Do not add heavy borders or deep, dramatic shadows.
- Do not turn muted text into a competing headline colour.

## Agent prompt

Build a new productivity homepage in Superlist’s visual language. Use Midnight Violet (#181824) as the continuous canvas, Bright Paper (#ffffff) for primary text, Slate Hush (#696f81) and Lavender Ash (#8e8da0) for secondary hierarchy, and sparse Signal Coral (#ff5231) for emphasis. Set large, tightly tracked headlines in a Haffer-like semibold sans; use clean sans-serif body copy and compact navigation. Start with centered messaging and a focused signup action, then give product screenshots a prominent, rounded showcase. Build later sections from alternating text-and-media stories and paired interface previews, leaving clear pauses between them. Keep the layout wide but content-focused, elevation subtle, and interface framing clean. Treat vivid colours inside product screenshots as media, not as additional site palette colours.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single dark-canvas sequence: centered hero, wide product preview, alternating feature layouts, reviews, and multi-column footer. | signup CTA, product demonstration, feature storytelling, testimonial proof | centered headline, coral emphasis, rounded media, dark canvas, multi-column footer |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/superlist-com