Playful flat maximalist creator-commerce — the hint’s "thick borders + yellow" is off (borders are thin 1px, the canvas is DARK not white, and the primary accent is PINK #ff90e8, with yellow just one of six), but the maximalist archetype holds. The whole page is a warm near-black #242423 that page and cards SHARE, separated by 1px hairlines (mostly white) rather than shadows — elevation is refused, the box-shadow census is empty. Personality lives in a huge white ABC Favorit grotesque (633 uses, Inter stand-in) that runs the display at weight 400 (hierarchy from scale, not weight; only card titles hit 700) with a constant -0.4px tracking, plus a bright SIX-colour accent set — pink #ff90e8 (the --accent), purple #90a8ed, green #23a094, yellow #ffc900, lime #f1f333 and red-orange #dc341e — that appears as flat app-icon squares, price tags, chart lines and hand-drawn doodle illustrations, EACH always carrying BLACK text (--accent-foreground #000000), never white. The primary CTA is a SQUARE (0px) pink block; nav uses full pills (active = white pill); inputs round to 4px and cards use a signature asymmetric corner 24px 24px 24px 4px. There are no CSS gradients, canvas, video or grain — atmosphere is illustration, not effects. Motion is Tailwind-default all 0.15s cubic-bezier(0.4,0,0.2,1) with a marquee/parallax banner and keyframes spin/pulse, no third-party library, and unlike many peers it HONOURS a prefers-reduced-motion block (2 of them). Tailwind v4 breakpoint ladder (40–96rem) with heavy container-query use (11) and genuine light/dark support (5 dark-scheme blocks; the marketing home renders dark). ABC Favorit is licensed, so the preview specimen stands in with Inter.
⚠ needs-dashboard
Browse Gumroad in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: gumroad.com (live DOM, computed styles via scripts/extract.js), 2026-08-05 (desktop 1514px). sheetsBlocked: 0 — full stylesheet coverage. Coverage: marketing home. Seller dashboard behind login (needs-dashboard). Reality check: hint said "bold flat maximalist, thick borders + yellow." Partly wrong. The maximalist creator-commerce archetype HOLDS, but the specifics are off: the current site is a DARK canvas (#242423), not white; borders are thin 1px (usually white), not thick; and the primary accent is PINK #ff90e8, not yellow (yellow #ffc900 is present but is one of six accents). The real signature is a dark canvas carrying huge white ABC Favorit grotesque type, playful hand-drawn doodle illustrations, and a bright SIX-colour accent set (pink, purple, green, yellow, lime, red-orange) always paired with BLACK text. Depth is refused (shadow census empty) — flat cards are the canvas colour with 1px hairlines and an asymmetric 24px 24px 24px 4px corner. Distinct from itch.io (calm content-dense) and any light SaaS page.
Playful, flat and maximalist creator-commerce set on a warm near-black canvas. The whole page is #242423; structure comes from 1px hairlines (mostly white) and generous rounded cards that share the canvas colour rather than lifting off it — depth is deliberately refused. Personality lives in two places: a huge white ABC Favorit grotesque running the display, and a bright six-colour accent set (pink #ff90e8, purple #90a8ed, green #23a094, yellow #ffc900, lime #f1f333, red-orange #dc341e) that appears as flat app-icon squares, price tags, chart lines and hand-drawn doodle illustrations. Every accent carries BLACK text, never white. The primary CTA is a square (0px) pink block. A signature asymmetric card corner (24px 24px 24px 4px) and marquee/parallax motion complete the character. Feels: playful, flat, maximalist, indie-confident.
| Token | Hex | Role / usage |
|---|---|---|
| white | #ffffff | Primary text, product-mockup cards, 1px borders |
| black | #000000 | Text on every accent colour, dark borders |
| primary | #dddddd | Muted text (--primary / --color-primary) |
| canvas | #242423 | Page background AND card fill (flat) |
| Token | Hex | Role / usage |
|---|---|---|
| pink | #ff90e8 | Primary brand accent (--accent): CTAs, tags, chart line |
| pink-600 | #e60076 | Deep pink accent variant |
| pink-800 | #a3004c | Darkest pink accent |
| purple | #90a8ed | Accent square / illustration |
| green | #23a094 | Accent square / illustration |
| yellow | #ffc900 | Accent square / illustration (--orange token) |
| lime | #f1f333 | Accent square / highlight |
| red-orange | #dc341e | Accent square / illustration |
Rule: accents always carry BLACK text (--accent-foreground: #000000). Rule: the canvas and cards share #242423; borders (1px) do the separating, not shadows. Rule: pink #ff90e8 is the default brand accent; the other five are for illustration/variety.
#ffffff, tracking -0.4px.| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 96 / 96 | 400 | -0.4px |
| Section (h2) | 48 / 60 | 400 | -0.4px |
| Card title (h3) | 18 / 28 | 700 | -0.4px |
| Body | 16 / 24 | 400 | -0.4px |
| Button / nav | 18–20 / 28 | 400 | -0.4px |
Patterns: display runs at weight 400 (not bold) at very large sizes — hierarchy from scale, not weight; only card titles bump to 700. No uppercase. Constant -0.4px tracking everywhere.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.