# Gumroad Flat 크림색 바탕 위 새까만 텍스트와 핫핑크 액센트로 외치는 플랫 브루탈리즘 — 그림자 없이 얇고 또렷한 검정 테두리, 거대한 레귤러 웨이트 그로테스크 헤드라인, 쨍한 원색 블록으로 승부하는 검로드식 대담함. - taxonomy: brutalist · flat, shadowless, high-contrast, hot-pink, cream-canvas, oversized-type, bold-borders, playful, creator-economy · complexity=medium - page types: landing, marketing, ecommerce - best for: 크리에이터·디지털 상품 마켓플레이스 랜딩, 개성 강한 SaaS 제품의 히어로 섹션, 대담하고 친근한 스타트업 마케팅 페이지, 거대한 헤드라인으로 한 문장을 외치고 싶은 랜딩 - avoid for: 데이터 밀도 높은 엔터프라이즈 대시보드, 차분함·신뢰가 필요한 금융·의료 서비스, 절제된 미니멀 럭셔리 브랜드, 장문 독서 중심의 진지한 콘텐츠 사이트 - provenance: website (Earn your first dollar online with Gumroad) — confidence: colors_measured=computed-css, color_roles=vision-inferred, typography=computed-css, radius=computed-css, shadows=computed-css, taxonomy=vision-inferred, motion=vision-inferred, layout=vision-inferred ## Design rules # Gumroad Flat ## Overview Flat brutalism, Gumroad-style. The entire language is three moves: a warm cream canvas, pure-black text, and one loud hot-pink brand accent — with **no shadows at all**. Depth is faked purely by thin 1px solid black borders and flat color blocks; there is not even an offset hard shadow (that absence is what separates this from neo-brutalism). Headlines are enormous but stay at regular weight, so the page shouts through scale and contrast, not bold weight. Playful pink coin/logo motifs scatter across the background. If a screen feels timid, the fix is a bigger headline or a bolder pink block — never a shadow. ## Colors & Roles Warm cream (`background` #f4f4f0) with near-black `foreground`. The brand pops through `accent` — a hot pink (oklch 0.799/0.170/335) that fills the coin motifs and the arrow/brand CTAs; it is low-frequency in the measurement but unmistakable in the screenshot, so it wins the accent role over the redder alternative. `primary` is the neutral strong action: a solid black button in light mode. `secondary` is a measured brand yellow (#ffc900), `destructive` a measured red (#dc341e); a lime (#f1f333) rides along in the chart ramp. `border`/`input` are pure black — thin but high-contrast. In dark mode surfaces go pure black with a measured `#242423` neutral for cards and the primary button, `foreground` flips to white, and `border`/`input` flip to white so the "outline = form" grammar survives. `muted` stays low-chroma for supporting text only. ## Typography Rules Giant, light headlines. The signature is scale without weight: `display` reaches `clamp(4rem, 12vw, 12rem)` and `h1` `clamp(2.5rem, 7vw, 6rem)`, both at weight **400–500** with tight tracking (−0.02 to −0.01em) and line-height ≤ 1.0. Do not bold them — the drama is size, not stroke. Body is a plain 16px / 1.375 at weight 400. Only `h3` (card titles) goes to 700. The face is the commercial grotesque ABC Favorit; **Hanken Grotesk** is the Google-Fonts fallback. Sentence case throughout — no uppercase sticker labels. ## Layout Principles Max content width ~1280px. A full-bleed cream nav bar (thin 1px bottom hairline) sits over a centered, symmetrical giant hero. Product/feature content drops into a bold-bordered card grid. Whitespace is airy: the oversized headline needs room to breathe on the cream field, and scattered pink coin/logo illustrations set the rhythm between sections rather than heavy dividers. ## Depth & Elevation There is no elevation system — `shadows` is measured as none, and this style keeps it that way. Depth is communicated entirely by a 1px solid black border plus flat fills. `effects.depth` is near-zero (0.15). Never add a drop shadow, glow, or even a hard offset shadow; layering separates by border and background color alone. ## Shapes Mostly crisp corners. Buttons and inputs use a small `field` radius (~4px); cards use a chunkier `box` radius (~16px). Pills and count/star chips go fully round (`selector` 9999px) — the active nav item is a black pill. A signature product-card variant rounds three corners and leaves one square (`24px 24px 24px 4px`). Corners are friendly but the black outline stays hard and thin. ## Component Stylings - **Button (primary)**: solid black fill, white text, 1px black border, ~4px radius, padding ~14px 28px, **no shadow**. Hover inverts the fill toward hot pink or nudges scale to 1.02. - **Button (accent)**: hot-pink fill, black text, 1px black border — used for brand/arrow CTAs. - **Card**: cream (dark: #242423) fill, 1px border, ~16px radius, no shadow, padding 24–32px. Product cards may square one corner. - **Input**: cream fill, 1px black border, ~4px radius, no inset shadow, with a square search-icon button pinned to the right. Focus adds a 2px pink ring. - **Nav**: full-bleed cream bar with a 1px bottom hairline; heavy wordmark logo; the active link is a black pill with cream text; top-right "Start selling" is a black fill button (pink in dark mode). - **Badge/Chip**: fully round pill, 1px border, brand or cream background (e.g. star-rating count). ## Motion Light and snappy, not floaty. Durations 120–180ms. With no shadows to animate, reactions are color swaps (black↔pink fill inversion), link-underline sweeps, and micro-scale (1.02). Scattered coin/logo motifs may drift gently on scroll. Prefer color and small translate/scale over opacity fades; do not overdo parallax. Emphasis easing has a slight overshoot for a springy feel. ## Do's and Don'ts **Do:** put pure black text and a hot-pink accent on a cream canvas; make headlines enormous but keep them weight 400–500; outline every button/card/input with a thin solid black border; build depth from borders and flat color blocks only; split CTAs into black (neutral) and pink (brand) fills. **Don't:** use any drop shadow — not even a hard offset one (that's neo-brutalism, a different entry); bold the giant headlines into 700–900; use gradients, glass, or pastel low-contrast palettes; draw faint 1px gray dividers instead of true black borders. ## Responsive Behavior The centered hero and card grid collapse to a single stacked column on mobile; the nav bar keeps its bottom hairline. Display type scales fluidly via `clamp()`. Border widths stay 1px and shadows stay absent across all breakpoints — the flatness is the brand and must not thin out or gain elevation on small screens. ## Agent Prompt Guide > Build this in the 'Gumroad Flat' style: a warm cream (#f4f4f0) canvas with pure-black text and a hot-pink (#ff90e8) brand accent. Absolutely no shadows of any kind — depth comes only from 1px solid black borders (white in dark mode) and flat color blocks. Headlines are enormous (up to 96–192px) but stay at regular weight 400–500 with tight tracking, so the drama is scale not weight. Buttons are crisp black fills (radius ~4px) with a hot-pink accent variant for brand CTAs; cards use ~16px radius and thin black outlines. Scatter playful pink coin/logo motifs, keep it high-contrast, confident, and airy. ## Known Gaps / Confidence Colors, typography, radius, and the absence of shadows are `computed-css` (measured from live gumroad.com, light + native dark). Color **role** assignment is `vision-inferred`: the hot-pink accent is low-frequency in the measurement but confirmed as the brand accent from the screenshot, overriding the extractor's red guess. Two honest judgment calls: (1) dark `primary` uses the measured neutral `#242423` (the inverted counterpart of light's black button) to keep `primary` distinct from the pink `accent` — the live site actually recolors its main dark CTA pink, which would collapse primary≈accent. (2) Border width is kept at the measured 1px; the bold impression comes from pure-black-on-cream contrast and large filled blocks, not thick strokes — deliberately thinner than the sibling neo-brutalist entry. The font is commercial (ABC Favorit); Hanken Grotesk is the practical Google-Fonts approximation. Motion and layout are `vision-inferred`. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Gumroad Flat — theme.css (generated, do not edit) */ :root { --radius: 16px; --radius-selector: 9999px; --radius-field: 4px; --font-sans: 'ABC Favorit', 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif; --spacing: 8px; --shadow: 0px 0px 0px 0px color-mix(in oklab, oklch(0 0 0) 0%, transparent); --ks-display-weight: 500; --ks-display-tracking: -0.02em; --background: oklch(0.966 0.005 106.5); --foreground: oklch(0 0 0); --card: oklch(0.966 0.005 106.5); --card-foreground: oklch(0 0 0); --popover: oklch(0.966 0.005 106.5); --popover-foreground: oklch(0 0 0); --primary: oklch(0 0 0); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.859 0.176 89.0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.92 0.005 106.5); --muted-foreground: oklch(0.26 0.002 106.1); --accent: oklch(0.799 0.170 335.2); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.586 0.207 31.0); --destructive-foreground: oklch(1 0 0); --border: oklch(0 0 0); --input: oklch(0 0 0); --ring: oklch(0.799 0.170 335.2); --chart-1: oklch(0.799 0.170 335.2); --chart-2: oklch(0.859 0.176 89.0); --chart-3: oklch(0.933 0.193 110.3); --chart-4: oklch(0.586 0.207 31.0); --chart-5: oklch(0 0 0); } .dark { --background: oklch(0 0 0); --foreground: oklch(1 0 0); --card: oklch(0.26 0.002 106.5); --card-foreground: oklch(1 0 0); --popover: oklch(0.26 0.002 106.5); --popover-foreground: oklch(1 0 0); --primary: oklch(0.26 0.002 106.5); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.859 0.176 89.0); --secondary-foreground: oklch(0 0 0); --muted: oklch(0.26 0.002 106.5); --muted-foreground: oklch(0.72 0.004 106.5); --accent: oklch(0.799 0.170 335.2); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.586 0.207 31.0); --destructive-foreground: oklch(1 0 0); --border: oklch(1 0 0); --input: oklch(1 0 0); --ring: oklch(0.799 0.170 335.2); --chart-1: oklch(0.799 0.170 335.2); --chart-2: oklch(0.859 0.176 89.0); --chart-3: oklch(0.933 0.193 110.3); --chart-4: oklch(0.586 0.207 31.0); --chart-5: oklch(1 0 0); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Go from 0 to $1

Anyone can earn their first dollar online. Just start with what you know, and get paid.

Start selling
Search marketplace …

Sell anything

Courses, ebooks, memberships — list it and get paid today.

Make your own road

One flat pink block, one thin black outline, zero shadow.

9.3K ★

Get paid fast

Depth from color and border alone — one corner squared, brand-style.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/gumroad.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `