A confident dark-first productivity brand — near-black indigo, crisp white grotesque type, and a playful spectrum of periwinkle, pink and a coral-to-red CTA gradient.
Headlines in Haffer XH (proprietary) — shown here in its Google substitute, Space Grotesk. Body copy in Inter, the site's genuine body face. Hierarchy is built from size and negative tracking, not weight.
Cards use a generous 20px radius and sit flat until hover, when they lift on a soft 10px/15px shadow. Vivid purple→pink fills stand in for Superlist's illustrative thumbnails.
An 8px base unit drives a 4–48px scale, with generous 40px side gutters around a centred 1200px column.
Rounding is generous and tiered — 8px on controls, a prominent 20px on cards, 100px pills, and a dramatic 200px "arch" on illustration frames.
0 10px 15px rgba(0,0,0,.08) card-hover lift.0 24px 48px rgba(24,24,36,.18) for the floating CTA and modals.| Name | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Single-column grids; hero display drops to ~48px; gutters tighten to 22px. |
| Tablet | 768–1023px | 4-up card grids collapse to 2-up; pricing and auth stack to one column. |
| Laptop | 1024–1279px | Full multi-column grids return; hero scales back up toward full display size. |
| Desktop | ≥ 1280px | Centred 1200px column with 40px gutters; full alternating dark/light bands. |
The page is strongly sectioned, alternating dark indigo and lavender-white full-bleed bands with a consistent vertical rhythm of ~72px.
Sample pricing built from the system — the featured plan inverts to the signature dark canvas. (Illustrative; not Superlist's actual pricing.)
A task list rendered in the system's surfaces, hairlines and pill status chips.
| ID | Task | Assignee | Status | When |
|---|---|---|---|---|
| #412 | Finalize Q3 roadmap | Mara K. | Done | Today |
| #411 | Review onboarding copy | Devin O. | In progress | Tomorrow |
| #410 | Sync with design on icons | Priya S. | Done | Mon |
| #409 | Draft launch announcement | You | To do | Thu |
| #408 | Migrate legacy lists | Sam L. | To do | Next week |
Sign-in and sign-up cards demonstrating the input, label, button and SSO patterns.