---
version: alpha
name: Superlist
description: A deep indigo-black canvas where the quirky Haffer XH grotesque sets oversized headlines, a full rainbow of vivid accents (hot pink, electric blue, acid yellow, fire red) splashes across the dark, and even a pixel-font display sneaks in — a task app that behaves like a playful design toy.

colors:
  # Surface / canvas
  background: "#181824"          # deep indigo-black — the signature canvas
  surface: "#26253b"             # raised panel / card surface
  surface-soft: "#1f1f30"        # subtle elevated band
  overlay: "#0d0d14"             # deepest wells, cookie bar

  # Ink / text
  ink: "#ffffff"                 # primary headings and body on dark
  ink-secondary: "#8e8da0"       # muted supporting copy, captions
  ink-tertiary: "#696f81"        # faintest metadata

  # Brand accent — the vivid rainbow (Superlist's signature multi-color system)
  primary: "#f866db"             # hot pink — the lead accent, the brand's signature
  primary-hover: "#fb7ae2"       # lighter pink hover
  accent-magenta: "#f739f7"      # electric magenta
  accent-red: "#ff4a36"          # fire red / orange-red
  accent-yellow: "#fbe74e"       # acid yellow
  accent-blue: "#2590f1"         # electric blue
  accent-green: "#22c55e"        # vivid green
  on-primary: "#181824"          # dark text on the bright accents

  # Borders
  border: "#33323e"              # hairline panel edges on dark
  border-faint: "#26253b"        # faintest dividers

  # Shadow tints (opaque approximations for the elevation table)
  shadow-soft: "#000000"         # was rgba(0,0,0,0.4) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Haffer XH, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 88px
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: -1.76px
  display:
    fontFamily: "Haffer XH, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 70px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: -1.4px
  display-pixel:
    fontFamily: "Jersey 10, Haffer XH, monospace"
    fontSize: 70px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -1.4px
  heading:
    fontFamily: "Haffer XH, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.96px
  heading-sub:
    fontFamily: "Haffer XH, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 30px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.6px
  body-large:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: -0.36px
  body:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.16px
  button:
    fontFamily: "Haffer XH, Inter, -apple-system, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.07px
  label:
    fontFamily: "Inter, -apple-system, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px

rounded:
  sm: 4px
  md: 8px
  lg: 10px
  xl: 20px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px
  card-soft:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 24px

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px

  badge:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Superlist Design System

## Overview

Superlist treats a to-do app like a design toy. The canvas is a deep, slightly-blue indigo-black (`{colors.background}`) — not flat `#000`, but a warm-tinted dark that gives the whole site a nighttime, almost neon feel. Against it, the headlines go enormous: "Real-time collaboration", "Repeatable tasks", set at 88px (`{typography.display-hero}`) in **Haffer XH**, a quirky grotesque with an oversized x-height and just-off proportions that make it feel hand-drawn rather than corporate. The type is the personality — confident, large, and a little weird on purpose.

The signature move is the color. Where most dark productivity tools pick one tasteful accent and hold the line, Superlist throws a full vivid rainbow across the dark: hot pink (`{colors.primary}`) leads, joined by electric magenta (`{colors.accent-magenta}`), fire red (`{colors.accent-red}`), acid yellow (`{colors.accent-yellow}`), electric blue (`{colors.accent-blue}`), and vivid green (`{colors.accent-green}`). These colors get used playfully — as splashes, highlights, animated accents, and category markers — turning a task list into something that feels alive and a bit chaotic in the best way. The hot pink is the anchor; the rest are its supporting cast.

There's even a third typographic voice: a **pixel font** (Jersey 10, `{typography.display-pixel}`) used as a retro-game accent in places, reinforcing the playful, toy-like spirit. Body copy drops to clean Inter so the reading stays effortless, but the brand moments — the headlines, the buttons, the color splashes — are unapologetically expressive. Surfaces are gently raised indigo panels (`{colors.surface}`) with hairline borders, buttons are fully pill-shaped, and the overall impression is a serious productivity app wearing a playful, color-saturated costume.

**Key Characteristics:**
- Deep indigo-black canvas (`{colors.background}`, `#181824`) — warm-tinted dark, not flat black
- **Haffer XH** oversized grotesque headlines (`{typography.display-hero}`) at 88px — quirky, confident, a little hand-drawn
- A full vivid rainbow accent system: hot pink, magenta, fire red, acid yellow, electric blue, green
- Hot pink (`{colors.primary}`) anchors the palette; the other accents are playful supporting splashes
- A **pixel font** (Jersey 10, `{typography.display-pixel}`) as a retro-game accent voice
- Clean Inter for body copy (`{typography.body}`) — readable calm beneath the loud brand moments
- Fully pill-shaped buttons (`{rounded.pill}`) — soft and friendly
- Raised indigo panels (`{colors.surface}`) with hairline borders (`{colors.border}`) for cards
- White text (`{colors.ink}`) with muted indigo-gray (`{colors.ink-secondary}`) for hierarchy
- Built on Framer — animated, expressive, motion-forward by nature

## Colors

### Surface & Canvas
- **Indigo-Black** (`{colors.background}`): The signature canvas — a deep blue-tinted dark.
- **Panel** (`{colors.surface}`): Raised card and panel surface, a lighter indigo.
- **Soft Band** (`{colors.surface-soft}`) / **Well** (`{colors.overlay}`): Subtle elevated bands and the deepest wells.

### Brand Accent — The Rainbow
- **Hot Pink** (`{colors.primary}`): The lead accent and brand signature. Hover lightens to `{colors.primary-hover}`.
- **Magenta / Red / Yellow / Blue / Green** (`{colors.accent-magenta}`, `{colors.accent-red}`, `{colors.accent-yellow}`, `{colors.accent-blue}`, `{colors.accent-green}`): The vivid supporting cast — splashes, highlights, and category markers across the dark.

### Ink / Text
- **White** (`{colors.ink}`): Headings and body on the dark canvas.
- **Indigo Gray** (`{colors.ink-secondary}`): Muted supporting copy and captions.
- **Faint Gray** (`{colors.ink-tertiary}`): The lowest-emphasis metadata.

### Borders & Shadow Tints
- **Hairline** (`{colors.border}`): Panel edges on the dark.
- **Faint Divider** (`{colors.border-faint}`): The softest separators.
- **Shadow tint** (`{colors.shadow-soft}`): Opaque stand-in for the dark drop shadow (originally rgba — flattened for the Google spec).

## Typography

### Font Family
- **Display**: `Haffer XH` — a quirky display grotesque with a large x-height and slightly-off proportions. Used at SemiBold (600) for all headlines, with an Italic cut for buttons.
- **Pixel accent**: `Jersey 10` — a retro pixel/bitmap display face used as a playful secondary headline voice.
- **Body / UI**: `Inter`, with fallbacks `-apple-system, system-ui, sans-serif`. Carries all reading copy and captions.
- **OpenType / tracking**: heavy negative tracking on the oversized display (-1.76px at 88px); near-zero on body.

### Hierarchy

The full type scale lives in the `typography:` token block.

| Token | Use |
|---|---|
| `display-hero` | 88px / Haffer XH 600 / -1.76px — the marquee headline |
| `display` | 70px / Haffer XH 600 — large section titles |
| `display-pixel` | 70px / Jersey 10 — the retro pixel-font accent voice |
| `heading` | 48px / Haffer XH 600 — feature headings |
| `heading-sub` | 30px / Haffer XH 600 — sub-section headings |
| `body-large` | 18px / Inter 500 — lead paragraphs |
| `body` | 16px / Inter 400 — standard body and inputs |
| `button` | 16px / Haffer XH 600 — button labels |
| `caption` | 14px / Inter — metadata, helper text |
| `label` | 12px / Inter — fine print, tags |

### Principles
- **Haffer for personality, Inter for reading**: the quirky display owns the headlines; clean Inter does the quiet work.
- **Go big**: headlines run oversized (88px) — scale is part of the playful confidence.
- **The pixel font is a wink**: Jersey 10 appears as an occasional retro accent, never for body.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The dark canvas plus generous spacing (`{spacing.4xl}`–`{spacing.5xl}` between sections) lets the oversized type and color splashes breathe without crowding.

### Grid & Container
- Centered content column with generous gutters
- Feature sections often stack oversized headlines vertically, each a color moment
- Product UI mockups float in raised indigo panels

### Whitespace Philosophy
- **Dark as the stage**: the indigo-black is a backdrop that makes the vivid accents and white type pop
- **Big type, open space**: oversized headlines need room — spacing stays generous
- **Motion-aware**: built on Framer, layouts assume things animate in — negative space leaves room for movement

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, hairline `{colors.border}` only | Page sections, inline content |
| Raised (Level 1) | Lighter surface fill (`{colors.surface}`) + hairline | Cards and panels — separation by luminance, not shadow |
| Floating (Level 2) | Soft dark drop shadow (`{colors.shadow-soft}`) | Product mockups, the cookie bar, overlays |

**Shadow Philosophy**: On a dark canvas, Superlist separates layers mostly by luminance — a slightly lighter indigo panel reads as raised without any shadow at all. Real drop shadows are reserved for genuinely floating elements (overlays, the cookie bar, product screenshots), and they stay soft and dark. Depth is quiet; the energy comes from color, not shadow.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `sm` | 4px | Tiny inline chips |
| `md` | 8px | Inputs, small controls |
| `lg` | 10px | Mid containers |
| `xl` | 20px | Cards and panels — the standard card radius |
| `pill` | 9999px | Buttons, tags, toggles |

The system trends soft and rounded: 20px on cards and full pills on buttons. The roundness offsets the loud color and big type, keeping the whole thing feeling friendly rather than aggressive.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Hot pink (`{colors.primary}`) fill, dark text, fully pill. The lead CTA. Hover lightens to `{colors.primary-hover}`.
- **`button-secondary`** — Raised indigo (`{colors.surface}`) fill, white text, pill. Hover lifts to `{colors.surface-soft}`.

### Cards
- **`card`** / **`card-soft`** — Raised indigo surfaces, 20px radius, hairline border. Separation by luminance on the dark canvas.

### Inputs
- **`input`** — Indigo panel fill, white text, 8px radius. **`input-focus`** keeps the dark calm with a subtle treatment rather than a loud ring.

### Navigation
- **`nav-bar`** — Sits on the indigo-black canvas with white Haffer labels; minimal, flush at the top.

### Links & Badges
- **`link`** — Hot pink text.
- **`badge`** — Acid-yellow (`{colors.accent-yellow}`) fill with dark text, pill — one of the rainbow accents pressed into service as a tag.

## Do's and Don'ts

### Do
- Build on the indigo-black canvas (`{colors.background}`, `#181824`) — warm-tinted dark, never flat `#000`
- Set headlines in **Haffer XH** SemiBold (`{typography.display-hero}`) and go oversized — 88px is on-brand
- Use the vivid rainbow (`{colors.primary}`, `{colors.accent-blue}`, `{colors.accent-yellow}`…) as playful splashes and accents
- Anchor the palette with hot pink (`{colors.primary}`) and let the other colors support it
- Drop to Inter (`{typography.body}`) for all reading copy — keep the loud stuff to brand moments
- Make buttons fully pill-shaped (`{rounded.pill}`) and cards `{rounded.xl}` (20px)
- Separate layers by luminance (`{colors.surface}`) before reaching for shadows
- Use the Jersey 10 pixel font (`{typography.display-pixel}`) sparingly as a retro accent

### Don't
- Don't use flat black — the indigo tint (`{colors.background}`) is the brand's warmth
- Don't pick a single tasteful accent and hold the line — the multi-color rainbow is the point
- Don't set headlines in a generic sans — Haffer XH's quirk is the personality
- Don't go small and timid on type — the confidence is in the scale
- Don't use the pixel font for body or large blocks — it's a wink, not a workhorse
- Don't add hard, heavy drop shadows everywhere — depth is quiet, color is loud
- Don't sharpen the corners — roundness keeps the loud palette friendly

---

## Responsive Behavior

### Breakpoints
*(Framer-driven; the values below reflect the standard stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; 88px headlines scale to ~40px; color splashes simplify; cards stack full-width |
| Tablet | 640–1023px | Two-column feature arrangements begin |
| Desktop | 1024–1279px | Full layout; oversized stacked headlines |
| Large | ≥1280px | Centered content column with generous gutters; full motion |

### Touch Targets
- Pill buttons run comfortably tall with `12px 24px` padding
- Generous spacing keeps tap targets clear of each other

### Collapsing Strategy
- **Type**: oversized headlines scale down hard on mobile while keeping proportional negative tracking
- **Color**: vivid splashes simplify but stay vivid — the palette doesn't go gray on small screens
- **Spacing**: section padding compresses from ~96px toward ~48px

### Image Behavior
- Product screenshots sit in raised indigo panels and reflow as grid/flex children, keeping rounded corners

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Indigo-Black (`{colors.background}`)
- Text: White (`{colors.ink}`)
- Brand accent: Hot Pink (`{colors.primary}`)
- Supporting accents: Blue (`{colors.accent-blue}`), Yellow (`{colors.accent-yellow}`), Red (`{colors.accent-red}`), Green (`{colors.accent-green}`)
- Secondary text: Indigo Gray (`{colors.ink-secondary}`)
- Border: Hairline (`{colors.border}`)
- Primary CTA: Hot Pink (`{colors.primary}`), pill-shaped

### Example Component Prompts

- "Create a hero on indigo-black (`{colors.background}`) with an 88px white (`{colors.ink}`) Haffer XH SemiBold headline, letter-spacing -1.76px, and a vivid color splash using `{colors.accent-blue}` or `{colors.accent-yellow}` behind it"
- "Build a primary button: hot-pink (`{colors.primary}`) fill, dark (`{colors.on-primary}`) text, fully pill (`{rounded.pill}`), `12px 24px` padding, Haffer XH 600 label, hover lightens to `{colors.primary-hover}`"
- "Build a secondary button: raised indigo (`{colors.surface}`) fill, white text, pill radius, hover lifts to `{colors.surface-soft}`"
- "Create a card: raised indigo (`{colors.surface}`) surface, hairline (`{colors.border}`) edge, `{rounded.xl}` radius, `24px` padding — separation by luminance, no shadow"
- "Design an input: indigo panel (`{colors.surface}`) fill, white text, `{rounded.md}` radius, `12px 16px` padding"
- "Render a tag/badge: acid-yellow (`{colors.accent-yellow}`) fill with dark text, pill radius, `4px 10px` padding"
- "Add a retro accent headline in the Jersey 10 pixel font (`{typography.display-pixel}`) for a playful section marker"

### Iteration Guide

1. Start on indigo-black (`{colors.background}`, `#181824`). If your background is flat `#000`, warm it to the indigo tint.
2. Headlines must be Haffer XH SemiBold (`{typography.display-hero}`) and large. If timid or generic-sans, fix the font and scale up.
3. Bring in the rainbow — pink leads (`{colors.primary}`), supported by blue, yellow, red, green as playful splashes. One accent only = wrong brand.
4. Drop body copy to Inter (`{typography.body}`) so reading stays calm under the loud brand moments.
5. Round everything: cards `{rounded.xl}`, buttons `{rounded.pill}`.
6. Separate panels by luminance (`{colors.surface}`) first; reserve shadows for truly floating elements.
7. Sprinkle the Jersey 10 pixel font (`{typography.display-pixel}`) as an occasional retro wink — never for body.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Superlist. Brand names and trademarks belong to their respective owners.