# Superlist design system

> Superlist design system measured from superlist.com: Haffer XH SemiBold font, #F866DB primary, 7 color hex codes, type scale, spacing and a free DESIGN.md.

Canonical page: https://sitepeel.dev/design-md/superlist.com/

Superlist’s website (superlist.com) uses the Haffer XH SemiBold font and #F866DB as its main color on a white background. Measured by Sitepeel on November 4, 2026.

## What font does Superlist use?

Superlist uses Haffer XH SemiBold (weights 400 and 600) and Inter (weight 400) on superlist.com. Page titles are 64px at weight 600 (48px on phones) and body text is 14px. Measured on November 4, 2026.

- Haffer XH SemiBold (weights 400, 600)
- Inter (weights 400)
- CUSTOM;Blender Medium (weights 400)
- sans-serif (weights 400)

## Superlist colors: palette and hex codes

Superlist’s main colors are #FFFFFF (white) for the background, #696F81 (blue) for text and #F866DB (purple) as the main accent, with #9087FF (light indigo) as another accent. Measured on November 4, 2026.

- #FFFFFF: white
- #696F81: blue
- #8E8DA0: cool gray
- #F866DB: purple
- #000000: near black
- #181824: cool charcoal
- #9087FF: light indigo

## What is Superlist built with?

Superlist’s website (superlist.com) is built with Framer, React, Motion and Google Fonts. Measured on November 4, 2026.

- Site builder & CMS: Framer
- JavaScript framework: React 18.3.1
- Analytics: Meta Pixel 2.9.435, PostHog 1.445.5, Google Ads, Google Analytics
- Animation & 3D: Motion
- Fonts & icons: Google Fonts

## Questions and answers

### What font does Superlist use?

Superlist’s website uses Haffer XH SemiBold (weights 400 and 600) and Inter (weight 400). Page titles are 64px at weight 600 (48px on phones) and body text is 14px. Measured on November 4, 2026.

### What are the Superlist colors and hex codes?

On superlist.com: #FFFFFF (white) for the background, #696F81 (blue) for text and #F866DB (purple) as the main accent, with #9087FF (light indigo) as another accent. The color palette above lists all 7 colors with their hex codes and where each one is used.

### What is the Superlist design system?

The design system on this page is superlist.com’s, as measured on November 4, 2026: Haffer XH SemiBold type, #F866DB as the main color and 8px corners, written down as a DESIGN.md. It is not Superlist’s own documentation.

### What is Superlist built with?

Superlist’s website (superlist.com) is built with Framer, React, Motion and Google Fonts. The full tech stack Sitepeel found: Framer, React, Meta Pixel, PostHog, Motion, Google Fonts, Google Ads, Google Analytics and Google Tag Manager. Measured on November 4, 2026.

### What is the Superlist DESIGN.md?

A plain-text file with Superlist’s measured colors, type, spacing, corners and components as tokens, plus short rules, in the DESIGN.md format Google published with Stitch. Your AI coding agent reads it and builds in this style. More about DESIGN.md.

### How do I use it with Claude Code or Cursor?

Download the file and put it in your project’s root folder, then ask your agent to follow DESIGN.md. Step-by-step guides: Claude Code, Cursor, Codex, GitHub Copilot.

### Is this Superlist’s official design system?

No. Sitepeel measured it from superlist.com’s public page on November 4, 2026. It is an independent analysis, not made or approved by Superlist.

### Can I use Superlist’s style in my own product?

Use it to learn, prototype and compare. For a real product, make the style your own, and never copy Superlist’s logo, name, pictures or text.

### How accurate are the values?

Each value was measured on the rendered page after it fully loaded, on desktop and mobile: colors where they appear, type with tracking, spacing, corners, shadows and hover states. Sites change, so check the date at the top.

## Files

- [DESIGN.md](https://sitepeel.dev/design-md/superlist.com/DESIGN.md): the plain file to put in your project.
- [All brand DESIGN.md files](https://sitepeel.dev/design-md/examples/index.md)

Independent analysis by Sitepeel (sitepeel.dev), not affiliated with Superlist.

## The DESIGN.md file

```markdown
---
version: alpha
name: Superlist
description: "Light interface measured from superlist.com: Haffer XH SemiBold type with Inter, purple accents, flat surfaces and 8px corners."
colors:
  background: "#FFFFFF"
  surface: "#FFFFFF"
  on-surface: "#696F81"
  on-background: "#696F81"
  on-surface-variant: "#8E8DA0"
  primary: "#F866DB"
  on-primary: "#000000"
  inverse-surface: "#181824"
  secondary: "#9087FF"
typography:
  headline-display:
    fontFamily: Haffer XH SemiBold
    fontSize: 64px
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Haffer XH SemiBold
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Haffer XH SemiBold
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
  body-md:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: -0.005em
  body-lg:
    fontFamily: CUSTOM;Blender Medium
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.3
  body-sm:
    fontFamily: sans-serif
    fontSize: 12px
    fontWeight: 400
  label-md:
    fontFamily: Satoshi
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.2
  headline-display-mobile:
    fontFamily: Haffer XH SemiBold
    fontSize: 48px
    fontWeight: 600
    lineHeight: 0.95
    letterSpacing: -0.02em
  headline-lg-mobile:
    fontFamily: Haffer XH SemiBold
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.02em
  headline-md-mobile:
    fontFamily: Haffer XH SemiBold
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.02em
rounded:
  sm: 8px
  md: 10px
spacing:
  xs: 2px
  sm: 6px
  md: 10px
  lg: 25px
  xl: 50px
  gutter: 10px
  margin: 25px
  container: 1500px
components:
  link:
    textColor: "{colors.on-surface-variant}"
---

# Superlist Design System

## Overview

Superlist describes itself as: “From the creators of Wunderlist — the all-in-one task management app for to-do lists, notes, and projects. AI-powered productivity that replaces 5 apps. Free to start, works on Mac, Web, iOS & Android.” The interface is light, built on **White (#FFFFFF)** with **Blue (#696F81)** text, and **Purple (#F866DB)** as the main accent.

Type is set in **Haffer XH SemiBold** and **Inter**. Headlines run large with tight negative tracking; body text is 14px. The surface language is flat. Corners are mostly 8px.

Measured from [superlist.com](https://www.superlist.com/) on November 4, 2026 at 1440×900 and 390×844 from 341 rendered elements. Values are computed styles from the live page, not the original source files.

## Colors

The palette has 7 roles.

- **White (#FFFFFF):** Page background. Token `background`.
- **Blue (#696F81):** Primary text and headings, seen 8 times. Token `on-surface`.
- **Cool Gray (#8E8DA0):** Secondary text, seen 46 times. Token `on-surface-variant`.
- **Purple (#F866DB):** Main accent color, seen 17 times. Token `primary`.
- **Near Black (#000000):** Text and icons on primary. Token `on-primary`.
- **Cool Charcoal (#181824):** High-contrast fills, seen 4 times. Token `inverse-surface`.
- **Light Indigo (#9087FF):** Accent in text, fills and borders, seen 19 times. Token `secondary`.

## Typography

**Haffer XH SemiBold**, **Inter**, **CUSTOM;Blender Medium**, **sans-serif** and **Satoshi** share the interface. Fallback stack: `Haffer XH SemiBold, Haffer XH SemiBold Placeholder, sans-serif`. Other loaded fonts: Jersey 10.

- **headline-display:** Haffer XH SemiBold 64px at weight 600, line height 0.95, tracking -0.02em (48px on mobile). Page title (h1).
- **headline-lg:** Haffer XH SemiBold 48px at weight 600, line height 1.1, tracking -0.02em (36px on mobile). Section headings (h2).
- **headline-md:** Haffer XH SemiBold 24px at weight 400, line height 1.2, tracking -0.02em (18px on mobile). Sub-section headings.
- **body-md:** Inter 14px at weight 400, line height 1.3, tracking -0.005em. Body text.
- **body-lg:** CUSTOM;Blender Medium 16px at weight 400, line height 1.3. Lead paragraphs.
- **body-sm:** sans-serif 12px at weight 400. Secondary and small text.
- **label-md:** Satoshi 16px at weight 500, line height 1.2. Buttons, navigation and labels.

## Layout

Spacing does not follow a strict grid: 6% of measured values are multiples of 4px, so match the measured steps rather than rounding to a grid.

- **Scale:** xs 2px, sm 6px, md 10px, lg 25px, xl 50px.
- **Gaps:** 10px is the most common gap in flex and grid layouts.
- **Container:** content is capped at 1500px.
- **Page margin:** 25px on each side of full-width sections.
- **Breakpoints:** 809px, 809.98px, 810px, 1199px, 1299.98px, 1399px.

## Elevation & Depth

The design is flat: no shadows were measured. Hierarchy comes from color contrast.

## Shapes

Most elements use 8px corners. Measured radii, most used first:

- **sm (8px):** 12 elements.
- **md (10px):** 4 elements.

## Components

Measured from the rendered page. Token values reference the tokens above.

- **link:** transparent fill, #8E8DA0 text, padding 0px.

## Do's and Don'ts

- Do use #FFFFFF for the page.
- Do keep text in 2 levels: #696F81, #8E8DA0.
- Do reserve #F866DB for primary actions and key highlights.
- Do set headlines in Haffer XH SemiBold with tight tracking (-0.02em).
- Do reuse the measured spacing steps (6px, 10px, 25px).
- Do use 8px corners on most elements; larger surfaces also use 10px.
- Don't use #8E8DA0 for body text; it reaches 3.25:1 on #FFFFFF. Keep it for large text or metadata.
- Don't add drop shadows for depth; use borders and contrast.
- Don't introduce new font families beyond Haffer XH SemiBold, Inter, CUSTOM;Blender Medium, sans-serif and Satoshi.
- Don't use #F866DB for large backgrounds or body text.
- Don't make interface transitions slower than 0.2s.

## Motion

Interface transitions are quick: 0.2s.

- **Easing:** `cubic-bezier(0.44, 0, 0.56, 1)`.

Generated by [Sitepeel](https://sitepeel.dev/design-md/superlist.com/), the free DESIGN.md generator (engine 2026.10.29+b828a475ee10).

```