Skip to content
DesignMunkDesignMunk Submit a site

Superlist

superlist.com
Stop spending time organizing tasks—let AI do it for you.
Productivity Software Framer Homepage Haffer XH Inter
Share Visit site
superlist.com DESKTOP · 1440
Superlist

AI Breakdown

Design export

---
version: alpha
name: Superlist
description: Stop spending time organizing tasks—let AI do it for you.
colors:
  primary: "#ffffff"
  secondary: "#ed240f"
  tertiary: "#c5230d"
  neutral: "#181824"
  border: "#000000"
  brand-prairie-sunset: "#fcb298"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Haffer XH SemiBold
    fontSize: 64px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Haffer XH SemiBold
    fontSize: 46px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.011em
  headline-sm:
    fontFamily: Haffer XH SemiBold
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: -0.012em
  headline-xs:
    fontFamily: Haffer XH SemiBold
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.017em
  body-md:
    fontFamily: Inter
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: -0.02em
rounded:
  sm: 20px
  full: 9999px
spacing:
  xs: 10px
  sm: 20px
  md: 40px
  lg: 80px
  xl: 150px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#0000ee"
    rounded: "{rounded.full}"
    padding: 14px 25px 15px
    height: 51px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 14px 25px 15px
    height: 51px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.border}"
    rounded: "{rounded.sm}"
    padding: 40px
---

# Superlist: Dark Workspace UI With One Loud Red Accent

## Overview

A dark, high-contrast system for a consumer productivity app. The tone is confident, energetic, and slightly playful through strategic red accents. Layouts are spacious at the section level (lg–xl spacing) but keep copy lines short. Default to a single-accent approach: red draws focus to actions and key lines while the rest stays neutral.

## Colors

- **primary (#ffffff):** Default text and icon color on dark backgrounds.
- **secondary (#ed240f):** Accent red for emphasized headlines, key phrases, and primary highlights.
- **tertiary (#c5230d):** CTA fills and high-energy accents where stronger emphasis is needed.
- **neutral (#181824):** Core background for sections, cards, and the app frame.
- **border (#000000):** Hairline dividers and device-like frames on dark surfaces.
- **brand-prairie-sunset (#fcb298):** Warm supporting tint for subtle gradients or illustrative flourishes.
- **surface (#181824):** Component surface color; same as neutral to keep layers cohesive.
- **on-surface (#ffffff):** Text and icon color when specified relative to surface contexts.

## Typography

- Headlines use Haffer XH SemiBold at four sizes: 64px (lg), 46px (md), 33px (sm), and 24px (xs). Tight tracking (-0.02 to -0.011em) and short line lengths keep display copy punchy.
- Haffer XH SemiBold is custom/self-hosted. If you cannot load it, use Manrope, Plus Jakarta Sans, or Outfit as substitutes (all Google fonts) at the same sizes and weights (use 600 for lg/md; 400 where specified for sm/xs).
- Body text is Inter 17px/1.4 with slight negative letter-spacing (-0.02em) for compact, high-contrast reading in dark mode.
- Pairing guidance: headlines carry tone; body remains neutral. Do not mix additional families.

## Layout

- Spacing scale: 10, 20, 40, 80, 150px. Use md (40px) for card padding and vertical rhythm inside sections; lg–xl for section breaks; sm for intra-component gaps.
- Grid is flexible with large gutters; align content to a centered column with generous outer paddings (sm–md) and clear breathing room above and below hero elements (lg–xl).
- Keep line lengths tight for headlines and moderate for body to preserve contrast on dark surfaces.
- Position key CTAs early and repeat near content breaks using the same pill style.

## Elevation & Depth

- Depth is minimal. One soft drop shadow (sm) can lift floating UI or mockups; larger shadows are disabled (md–xl = none).
- Use tonal layering (neutral/surface) and hairline borders (#000000) sparingly for separation.
- The inner shadow token can add subtle sheen or inset separation for inputs or device frames on dark backgrounds.

## Shapes

- Two radii define the language: 20px corners for cards, images, and device frames; 9999px for pill buttons and badges.
- Corner size signals hierarchy: square for simple links, 20px for grouped content, and full for primary interactive elements.

## Components

- Button Primary: background #c5230d, text #0000ee, height 51px, padding 14px 25px 15px, pill radius 9999px. Use for the main CTA.
- Button Secondary: text #ffffff, height 51px, same padding and pill radius; background inherits from the surface.
- Button Link: text #ffffff, radius 0px; for inline actions and light emphasis.
- Card: background #181824, text #000000, 20px radius, 40px padding; pair with on-surface text for readability as needed.

### Hero Header Stack
- Headline: headline-lg (64px) in Haffer XH SemiBold, first line white, emphasis line may use #ed240f. Single primary CTA using button-primary. Vertical spacing lg–xl.

### App Mockup Frame
- A large image or video framed on a neutral surface with 20px corners, a subtle sm shadow, and optional #000000 hairline stroke.

### Feature Trio
- Three short blurbs (Plan your day / Stay on top / Keep home in sync). Use headline-xs for titles and body-md for copy with sm–md gaps.

### Benefit Badge Cloud
- Small pill badges for "AI-Powered, Widgets, Offline, Reminders..." using rounded.full. Text #ffffff on a neutral background with sm gaps.

### AI Section (Talk to Done)
- Two-column layout: copy column with headline-md and a supporting list; media column shows product or illustration. Spacing md–lg.

### Testimonials Carousel/Grid
- Repeating quote cards using card styles: 20px radius, 40px padding, body-md text. Include author/source line below each quote.

### Footer Mega Menu
- Four to five link columns set in body-md, sm line spacing, and md gaps. Include platform download links and an update banner near the footer top.

## Do's and Don'ts

- Do reserve #ed240f/#c5230d for CTAs, key phrases, and active states; keep most UI in #ffffff on #181824.
- Do use 20px corners for media and content blocks; use 9999px only for buttons and small badges.
- Do keep vertical rhythm on the 40/80/150px steps; avoid ad-hoc spacing.
- Don't add heavy shadows; stick to the sm shadow or none.
- Don't introduce additional accent colors; the system relies on a single red.
- Don't stretch headline lines wide—short, high-impact lines read best in this display face.

## Agent Prompt Guide

Quick color reference — Text: #ffffff, Background: #181824, Border: #000000, Accent: #ed240f (primary accent) / #c5230d (CTA fill).

1) Build a hero
- Background #181824. Max-width centered column.
- Headline: "Haffer XH SemiBold" 64px/1.2 (or Manrope 600), letter-spacing -0.02em, color #ffffff. Place a second line in #ed240f.
- Subhead: Inter 17px/1.4, color #ffffff at 80% opacity if your system supports it; otherwise #ffffff.
- Primary CTA: 51px height, padding 14px 25px 15px, radius 9999px, background #c5230d, text #0000ee.
- Vertical spacing: lg above headline, md between elements, xl below section.

2) Feature trio section
- Three columns on desktop, stack on mobile.
- Title style: Haffer 24px/1 (or Manrope 600), color #ffffff.
- Copy: Inter 17px/1.4, color #ffffff.
- Gaps: sm between title and copy; md between cards; section padding lg.

3) Badge cloud of capabilities
- Create small pills with radius 9999px, padding 6px 12px.
- Background: transparent; text #ffffff with 1px border #000000 if separation is needed.
- Grid: auto-fit with sm gaps inside a surface #181824.

4) Testimonial card
- Container: background #181824, radius 20px, padding 40px, optional shadow sm.
- Quote: Inter 17px/1.4 #ffffff. Author line in Inter 17px at 80% opacity.
- Use md spacing between quote and attribution; place cards in a carousel or md grid.

5) Footer columns
- Background #181824. Four columns with headings in Haffer 24px/1 (or Manrope 600) #ffffff; links in Inter 17px #ffffff.
- Column gaps md; section padding lg–xl; use hairline #000000 dividers if needed.

## Similar Brands

- Raycast — Dark UI marketing with a strong red accent and pill CTAs; Superlist is warmer and more consumer-friendly.
- Linear — Minimal dark theme with disciplined spacing; Linear uses purple accents where Superlist uses saturated red.
- Todoist — Shares the red accent and action-first messaging; runs mostly on light backgrounds versus Superlist's dark surface.
- Notion — Clean typography and productivity focus; Notion is monochrome/light while Superlist commits to dark mode.
- Arc — High-contrast dark hero with device frames and rounded shapes; Arc is more gradient-driven, Superlist stays flatter.

More like this

Browse Productivity →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 14 hours ago