# Superlist · Design system migration spec

> Source: https://superlist.com  ·  Curated by OpenDesign  ·  en

> This site is a strong example of a modern, dark-mode-first productivity app that balances bold typography with a clean, focused interface.

## 1. Identity DNA

Superlist's design system is built around the analogy of a sleek digital command center, a place where scattered tasks, notes, and plans converge into a single, elegant interface. This unifying principle dictates a dark, immersive environment with a single, vibrant accent for decisive action.

**One-liner:** A unified app for tasks, notes, and plans, powered by AI and voice.
**Keywords:** Productivity · Unified Workspace · AI · Task Management · Notes
**Analogy:** A sleek digital command center that merges your scattered lists into one elegant interface.

## 2. Color

The color system is dark mode first, establishing a deep navy-charcoal backdrop (#181824) that makes content the focus. A high-chroma orange accent (#EE4B28) cuts through the dark field for primary interactions, while white and muted gray handle the typographic hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#181824` | main background |
| `--bg-soft` | `#1E1E2E` | card background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#8E8DA0` | secondary text |
| `--muted` | `#8E8DA0` | placeholder |
| `--accent` | `#EE4B28` | single accent |
| `--line` | `rgba(255, 255, 255, 0.08)` | divider |

**Color principle:** Dark mode first with a vibrant orange accent for primary actions and emphasis.

The principle is one of focused contrast: a quiet, expansive background that allows the vibrant accent to command attention where it matters.

## 3. Typography

Typography speaks with a dual voice: bold, geometric sans-serifs for impactful display headings and a humanist sans-serif for clear, readable body copy. This combination creates a hierarchy that is both confident and functional.

- **Display:** geometric-sans
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.0 | 600 | -1.4px | Main hero headlines |
| heading | 48px | 1.1 | 500 | -1px | Section titles |
| body | 16px | 1.3 | 400 | -0.07px | Paragraphs and descriptions |

**Type rules:**
- Use tight negative letter spacing for large display headings.
- Mix bold weight for emphasis with lighter weights for body text.
- Ensure high contrast (white on dark) for all critical text.

## 4. Spacing

Spacing follows a strict 4px grid, creating a consistent visual rhythm throughout the interface.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 10 / 16 / 20 / 24 / 30 / 40 / 50 / 60 px
- **Rhythm:** Consistent use of 4px grid with generous padding in hero sections.

## 5. Surfaces

Surfaces are defined by subtlety, using soft shadows and near-invisible borders to create depth without visual noise. Cards are presented as dark panels with rounded corners, separated from the background by fine 1px borders.

- **Radius:** sm 4px · md 8px · lg 20px · pill 100px
- **Shadows:**
  - 0px 10px 15px 0px rgba(0, 0, 0, 0.08)
  - 0px 1px 1px 0px rgba(0, 0, 0, 0.1)
  - inset 0px 0.5px 0px 0px rgba(255, 255, 255, 0.45)
- **Borders:** Subtle 1px borders using rgba(255,255,255,0.08) for separation.

## 6. Layout

The layout skeleton is a centered column for content, bookended by a full-width dark hero section and followed by stacked, focused feature areas. This structure prioritizes the reading path and creates a sense of orderly progression.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Centered content with full-width dark hero and stacked feature sections.

## 7. Motion & Interaction

Motion philosophy treats animation as functional feedback, not decoration. Transitions are smooth and purposeful, typically lasting 0.2 seconds, to confirm user actions and guide attention without introducing distraction.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`
- **Patterns:**
  - Color transitions on hover
  - Smooth fade-ins

- **Hover:** Color shifts and subtle opacity changes.
- **Click:** Immediate visual feedback.
- **Transition:** 0.2s cubic-bezier(0.44, 0, 0.56, 1) for color changes.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident and direct, matching the product's ethos of unified productivity. Headlines are short, punchy phrases, and calls-to-action are explicit instructions.

- **Tone:** Confident, modern, and highly productive.
- **Headline style:** Short, punchy, and impactful phrases emphasizing unification.
- **CTA style:** Direct and action-oriented, like 'Sign up for free'.
- **Avoid:** Cluttered layouts / Muted or pastel color palettes / Complex, multi-layered navigation

### Don'ts
- ❌ Don't use light backgrounds — screenshot shows a dark, immersive interface.
- ❌ Don't use rounded serif fonts — screenshot shows geometric sans-serif for headings.
- ❌ Don't use a single-column layout for the entire page — screenshot shows varied layouts.
- ❌ Don't use subtle, low-contrast buttons — screenshot shows vibrant, high-chroma accent buttons.
- ❌ Don't use excessive drop shadows — screenshot shows soft, subtle elevation.
- ❌ Don't use small, cramped spacing — screenshot shows generous padding and margins.

The system deliberately avoids light backgrounds, serif typography for headlines, and complex navigation structures to maintain its focused, immersive character.

## System Prompt (paste into AI tool)

```
Superlist is a premium productivity SaaS app for tasks, notes, and plans. Its design DNA is anchored in a dark, immersive palette (bg: #181824) with a high-chroma orange accent (#EE4B28). It uses bold, geometric sans-serif typography for display text and humanist sans-serif for body content. Critical donts include: never use light backgrounds, avoid serif fonts for headlines, and ensure high contrast for primary actions. The interface emphasizes a unified workspace with clean, dark cards and generous spacing, creating a sleek and modern feel.
```
