CURATED · OPEN · FREE

Superlist

A unified app for tasks, notes, and plans, powered by AI and voice.

productsaasplayful

↓ Download design system (22 MB)Open in OpenDesign

Visit: https://superlist.com

📦 Browse pack contents →

Identity DNA

ProductivityUnified WorkspaceAITask ManagementNotes

A sleek digital command center that merges your scattered lists into one elegant interface.

Color

#EE4B28Accent

#FFFFFFInk

#8E8DA0Ink soft

#181824BG

#1E1E2EBG soft

rgba(255, 255, 255, 0.08)Line

Dark mode first with a vibrant orange accent for primary actions and emphasis.

Typography

geometric-sans · humanist-sans · monospace

display70px · 600
heading48px · 500
body16px · 400

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.

Spacing

4px

8px

10px

16px

20px

24px

30px

40px

50px

60px

Consistent use of 4px grid with generous padding in hero sections.

Surfaces

sm · 4px

md · 8px

lg · 20px

pill · 100px

Subtle 1px borders using rgba(255,255,255,0.08) for separation.

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)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.44, 0, 0.56, 1)easing

Color transitions on hover · Smooth fade-ins

Color shifts and subtle opacity changes. · Immediate visual feedback.

Components

button Pill-shaped buttons with bold text, primarily using the vibrant orange accent.
card Dark cards with subtle borders and soft shadows, featuring rounded corners (20px).
chip Not prominently featured in the screenshots.
input Clean, minimal input fields with dark backgrounds.
hero Massive typography centered on a dark background with a large product preview below.

Voice & Don'ts

Tone Confident, modern, and highly productive.
Headlines Short, punchy, and impactful phrases emphasizing unification.
CTAs Direct and action-oriented, like 'Sign up for free'.

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.
Avoid: Cluttered layouts
Avoid: Muted or pastel color palettes
Avoid: Complex, multi-layered navigation

Inside the pack — real screenshots

Superlist — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko