A list and task app for teams and personal projects. Fits productivity tools, todo apps, planner products, and team-workflow landing page designs.
Screenshots of 4 pages from superlist.com: homepage, changelog, pricing and careers.
Design tokens
24 colors · 15 type stylesIndigo (#6b66da) primary on a pure black (#000000) canvas, set in Haffer XH SemiBold for headlines and Inter for body text. These values are read from the Superlist DESIGN.md in the Pass bundle, which carries all 24 color tokens, 15 type styles, the radius and spacing scales and the full component rules.
Three ways to ship a Superlist-style UI.
Use in your AI builder, no-code tool, or CMS
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.
Not affiliated with Superlist. All trademarks belong to their respective owners.
About Superlist
Home page hero
The home page has a thin coral bar along the top and a very pale lavender background. A tilted, ticket-like coupon at the top left shows a small QR code, a note that the app is free forever for individuals and a coral download-superlist button with perforated edges. The centered wordmark has two tiny colored dots under it, and a plain sign-in link with a small arrow sits at the right. The headline, "Home to all your lists," is set in a heavy, tight navy sans-serif, with a coral rounded checkbox icon in place of a word. Three pill tabs follow: teamwork, personal projects and everything in between. A large product window sits below, with a lists sidebar (app launch, kitchen renovation, daily habits, recipes, design work), a checklist of project tasks with some ticked off and small app badges and avatars, and a tall purple moonlit landscape image on the right.
Feature blocks
The page continues as a stack of wide rounded panels, each split into a pastel left half and a saturated right half. In one, "Integrated with apps you love," the heading sits on pale mint and the right half is green with a floating task card of email, code review, design, call and ticket items, surrounded by sticker-like app logos. In another, "Work & personal at the flip of a switch," the heading uses coral and navy on a pale pink half beside a coral half with an inbox card that mixes shopping, yoga and a call. The headline colors match the panel colors.
Changelog page
The changelog page is dark navy. A huge coral title, "Changelog," ends with a blinking cursor bar and is surrounded by small blue, coral and violet dots. The first entry is titled "A more PRO ductive you," with a coral version pill and a date. Its image is a coral panel showing a pro personal plan card with a monthly price, a yearly total, an upgrade button with a cursor and loose colored scribbles around it. Below, coral headings for features and improvements and bug fixes list items with coral checkboxes.
Pricing page
The pricing page returns to the light lavender theme. The headline, "Pricing for all your needs," highlights the last word in coral, and a monthly or yearly toggle shows a twenty percent saving. Four tall cards sit in a rounded tray: free, pro, free team and pro team. The pro cards have violet borders and hand-drawn doodle headers, a starburst and a crown. Each card has a price, a billing note and a checklist with violet checkboxes, and some unreleased items are greyed out with a small soon tag.
Careers page
The careers page has a headline, "Join us on an adventure," above a grid of fifteen video-call tiles in three rows, each showing a team member's face and a city name such as Berlin, Seattle, Amsterdam or Tallinn. A short quote in coral, "Oh, the places you'll go!," leads into a list of very large benefits: work from anywhere, competitive salary and generous equity.
Based on full-page screenshots of superlist.com: the home page, the changelog, the pricing page and the careers page. Prices and plan limits reflect the capture date, and the changelog entry is dated early 2024. Check the live site before relying on specific details.
Related designs
