---
name: Superlist
description: "This site is a strong example of a modern, dark-mode-first productivity app that balances bold typography with a clean, focused interface."
version: alpha

colors:
  background: "#181824"
  primary: "#FFFFFF"
  secondary: "#8E8DA0"
  tertiary: "#EE4B28"
  neutral: "#8E8DA0"
  bg-soft: "#1E1E2E"
  line: "rgba(255, 255, 255, 0.08)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 70px
    lineHeight: 1.0
    fontWeight: 600
    letterSpacing: "-1.4px"
  heading:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "-0.07px"

rounded:
  sm: 4px
  md: 8px
  lg: 20px
  pill: 100px

spacing:
  xs: 4px
  sm: 8px
  md: 10px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 30px

---

## Overview

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

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

## Colors

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

- **Background (`#181824`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Secondary text (`#8E8DA0`)** — uses `ink-soft` token
- **Accent (`#EE4B28`)** — uses `accent` token
- **Muted (`#8E8DA0`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.08)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

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

## Elevation & Depth

- 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.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 20px
- `pill`: 100px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```