Superlist

About Superlist

A list and task app for teams and personal projects. Fits productivity tools, todo apps, planner products, and team-workflow landing page designs.

Request a DESIGN.md analysisCustom, made for Superlist Website Starter KitBuild your site from a starter template

Design tokens

24 colors · 15 type styles

Indigo (#6b66da) primary on a pure black (#000000) canvas, set in Haffer XH SemiBold for headlines and Inter for body text. The highlights below are read from the Superlist DESIGN.md in the Pass bundle, which carries all 24 color tokens, 15 type styles and the full component rules.

Colors

Primaryindigo#6b66da
Secondaryvivid coral#ff4a36
Canvaspure black#000000
Surfacemuted indigo#26253b
Inkpure white#ffffff

Type

Haffer XH SemiBoldDisplayweight 600, 54 to 88px
InterBodyweights 400, 500, 600, 12 to 18px

Radius

none 0px
xxs 2px
xs 4px
sm 8px
md 10px
lg 20px
xl 30px
pill 100px

Spacing

xxxs 2px
xxs 4px
xs 8px
sm 10px
md 16px
lg 24px
xl 32px
xxl 40px
rhythm-50 50px
rhythm-80 80px

Components

Primary buttonbutton-primary
Primary buttons fill with vivid coral (#ff4a36) and carry pure white (#ffffff) text, set in Inter 12px at weight 600, with pill corners (100px) and 10px 16px padding.
Cardfeature-card
Cards sit on cool near-black (#181824), with 20px corners and 40px padding.
Text inputtext-input
Text inputs use pure white (#ffffff), with pill corners (100px).

Three ways to ship a Superlist-style UI.

Use in your AI builder, no-code tool, or CMS

Lovablev0BoltFramerWebflowWordPressWixSquarespace CanvaGoDaddy

Paste the DESIGN.md in and ask the tool to restyle your existing site to match this design, or start a brand new one from scratch with the same visual language.