Superlist
A nighttime workspace with coral embers—a quiet eggplant app surface where a single warm orange spark signals every action
Superlist uses a productivity language in midnight purple tones: deep eggplant, warm coral as the sole primary color, and large sans-serif headlines that capture the entire atmosphere. The interface evokes the feeling of late-night focused work—quiet, layered, and confident, with color used only as functional punctuation on calls to action, active states, and key points. Surfaces are layered in subtle dark tones with a purple undertone (#181824 → #26253b), avoiding pure black to ensure the depth feels warm rather than sterile. Components feature generous rounded shapes (20px cards, pill buttons), soft shadows, and "breathe" through comfortable 10-16px gaps rather than tight grids. The headline's voice is everything: a 600-point weight at 70-88px with tight letter spacing of -0.02em treats the text as typographic rather than UI—it's closer to editorial copy than SaaS.
Dark sections span the entire width of the page, with centered, maximum-width content containers. The main section is vertically centered and contains a headline, subtext, and call to action (CTA), followed by a large product screenshot overlapping the next section. Subsequent sections alternate between centered text blocks and card grids. The reviews section uses a three-column grid with review cards and 16 gutters. Navigation is a single top bar with a logo on the left, centered links, and login actions on the right—no fixed sidebar or mega-menu. The gutters between sections are generous (16 gutters), creating a spacious, editorial rhythm rather than a dense product grid.
Visual space is dominated by product screenshots—a large frame with rounded corners, showcasing the actual app interface, fills the main and secondary sections. Photos are minimal, used only as user avatars or previews of in-app media (for example, the concert image in the right panel of the product mockup). Logos on the trust bar are flat, muted white text symbols. There are no decorative illustrations, no abstract graphics, no 3D renders. The visual strategy is to showcase the product at scale, let the typography do the emotional work, and use coral as the sole accent color.
Palette
Brand
- Coral Ember
#ff4a36— Orange is used as a secondary accent for decorative details and to highlight infrequent cues. It should not be used as the primary color for calls to action.
Neutral
- Aubergine Canvas
#181824— The page background, the main canvas, is a warm, dark shade that replaces pure black, making the user interface appear layered rather than flat. - Elevated Plum
#26253b— Card surfaces, input fields, navigation containers—one step easier than canvas to create depth without a visible boundary. - Pure White
#ffffff— Main headings, button text, icon outlines – maximum contrast on a dark canvas. - Fog Text
#696f81— The main text, secondary headings, and muted borders all feature a 7:1 contrast ratio for comfortable reading against an eggplant-colored background. - Ash Text
#8e8da0— A neutral color is supported for secondary UI elements, dividers, and muted labels. It should not be used as the primary color for calls to action. - Mist Highlight
#a3a3a7— Subtle borders, dividers, and inactive navigation elements create a subtle neutral tone that still stands out against the canvas.
Typography
from 12 to 88px · 9 steps
- sans-serif — replacement: Inter · outlines 400 · sans-serif - found in the extracted data but not described by the AI.
- Haffer XH SemiBold — replacement: Inter Tight · outlines 400, 600 · The primary font for display and headings. It's used at a size of 70–88px for hero headings with a letter spacing of -0.02em and a weight of 600. The narrow letter spacing and large letter height give the headings an editorial weight, making the dark interface look more like a magazine cover than a dashboard. Replace with Inter Tight or General Sans in a bold weight.
- Jersey 10 — replacement: Anybody · outlines 400 · A large, decorative font for accent numbers and highlights. Used sparingly at very large sizes to create typographic accents. Can be replaced with Anybody or Cabinet Grotesk.
Intervals and form
| Purpose | Meaning |
|---|---|
| Density | average |
| Basic step | 10-16px |
| Button radius | 100px |
| Card radius | 20px |
| Shadows | soft shadows |
| Between sections | 80px |
| Page width | 1200px |
AI will build your website in Superlist style and fill it
- Fill with products and posts via the link - Instagram, TikTok, Facebook.
- Transfer content from your old site—just specify the address.
- Modern design on the best engine: React ( Next.js) with server rendering and SEO optimization out of the box.
- Fully automated SEO optimization for search results and neural network recommendations.
Similar styles
- DNA — Midnight Observatory as seen through a particle lens
- Abetterlou — Sparks on Saddle Leather - a warm creamy font glowing against a deep coffee-black background, with amber-gold buttons that feel like hot metal pressed into the page.
- Galileo-ft — A deep-space command deck with electric blue signals
- Decide AI — Observatory at midnight - mint signal
- Redis Agency — The editorial workshop, open after hours, is a pitch-black place where all the branding work is done by serif fonts and a single red radish.
- Spellbook — A midnight courtroom lit with coral ink—a dark editorial surface where the only sound is the warm orange pen stroke
- Linear — midnight precision instrument
- Origin Financial — A midnight gallery of quiet opulence. A quiet, almost dark room where large serif fonts and a few illuminated colored panels create the feeling that finance is a carefully curated work of art.
- Hyperstudio — The design is scratched into obsidian. Text and fine lines frame a white space of pure black, with occasional golden compass marks indicating the way.
- Air — sculpture "Midnight Sky Through Glass"
- Raycast — Midnight Command Center, Coral Neon
- dope.security — Midnight terminal with purple beacons