Complete design system extracted from www.superlist.com — every token, component, interaction pattern, and accessibility note, all from real values.
All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.
Body: Sans-Serif · Display: Haffer XH SemiBold. Font files loaded by the site: Fragment Mono (400) · Jersey 10 (400) · Haffer XH SemiBold (400) · Haffer XH SemiBold Italic (400).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Micro | Features Use Cases UpdatesPricingBlogDownload Sign inSign up |
||
| Micro | Features Use Cases UpdatesPricingBlogDownload Sign inSign up |
||
| Micro | Features Use Cases UpdatesPricingBlogDownload Sign inSign up |
||
| Body | Use Cases |
||
| Display Hero | Tasks, notes, and plans.Finally in one app. |
||
| Display Hero | Tasks, notes, and plans.Finally in one app. |
||
| Body | Schedule tasks, reminders and habits so you're ready for the day ahead. |
||
| Body | Sign up for free |
||
| Body | Use Cases |
||
| UI Label | Features |
Nav demo using extracted colors, font, real link labels.
| Background | #181824 |
| Text color | #ffffff |
| Font family | Sans-Serif |
| Links (extracted) | Features · Use Cases · Updates · Pricing · Blog |
| Copyright (extracted) | © 2026 Superlist |
Layout values (height, padding, link states) are demo styling — not extracted from the site.
Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 8px · fill type: solid · padding density: normal.
bg #ff4a36 · color #ffffff · radius: 8px
Demo variant — outlined treatment of the extracted primary color #ff4a36.
Demo variant — text-only treatment of the extracted primary color.
Generic disabled-state demo — not extracted from the site.
Depth communicated through shadows and background contrast.
bg #ffffff · text #000000
bg #181824 · text #000000
bg #181825 · text #000000
Real case studies found on the scraped site — titles and URLs extracted from live links.
Projects
./project-management-for-teams
Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.
hello@superlist.com (extracted from site)
radius: not detected · demo border/background styling
Demo focus treatment using extracted primary color #ff4a36.
Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.
Corner radius tokens observed across components. All values extracted from live stylesheet.
Box-shadow tokens extracted from CSS variables. Shadow values represent real usage.
rgba(0, 0, 0, 0.1) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 2px 4px 0px, rgba(255, 255, 255, 0.45) 0px 0.5px 0px 0px inset
rgba(255, 255, 255, 0.25) 0px -1px 1px 0px
rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
Demo transitions use the fastest extracted duration (0.2s cubic-bezier(.44,0,.56,1)).
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
| Token | Value | Occurrences |
|---|---|---|
| duration-fast | 0.2s | 1× in stylesheet |
| duration-base | 0.4s | 1× in stylesheet |
| duration-slow | 0.8s | 1× in stylesheet |
| easing-1 | cubic-bezier(.44,0,.56,1) | 1× in stylesheet |
| easing-2 | ease-out | 1× in stylesheet |
| easing-3 | linear | 1× in stylesheet |
Breakpoint boundaries detected in the scraped stylesheet media queries, with real rule counts.
| Breakpoint | Boundary | Usage |
|---|---|---|
| Tablet | 810px | 47 @media rules |
| Desktop | 1200px | 21 @media rules |
| Wide | 1400px | 2 @media rules |
Extracted from https://www.superlist.com/ stylesheets.
Assets and links extracted from the scraped pages.
https://framerusercontent.com/images/S2Wtl2S4B9vfVDGUscUdUsFHak.svg
https://framerusercontent.com/images/uRSwK1gu24bUyJyjiCccAW7PYs.svg
No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.