# 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`.