keep.md

Keep's landing page is a near-white, left-aligned product page that lets one saturated orange do all the talking. Everything sits on a ground in Inter at a medium-weight 42px headline with tight −1px tracking, and the copy runs at an unusually generous 20px/32px body size so the page reads like a well-set document rather than a dense SaaS pitch. Sections are numbered ("01.", "04.") and paired with a two-line headline that breaks on purpose, then a row of three soft gray -ish cards, each holding a tiny faux-UI vignette — a browser clip with an orange highlight, a feed card with a "new" badge, a folder of pill tags — that shows the feature instead of describing it. Radii are consistent at 10px with pill buttons at 9999px; the only color anywhere is on the primary CTA, on link-style labels ("Included with Personal"), and as a warm highlight tint (, ) inside the mockups. The mood is calm, technical and quietly confident: a developer-tool landing that feels like Markdown itself — plain, structured, monochrome with one accent.

Build on a near-white ground () with white () only for nested UI cards and for secondary surfaces and neutral buttons. Use Inter throughout: headlines at 40–44px, weight 500, letter-spacing −1px, line-height 1.2; body at 20px, weight 400, line-height 1.6; captions at 12–14px in /. Text is , never pure black. Pick exactly one accent — a saturated orange — and use it for the primary pill button, inline emphasis text, tiny status badges, and pale tints (, ) for highlights; never as a background for a whole section. Radius system: 10px for panels and cards, 9999px for every button and tag, 4px for small inline elements. No borders and no shadows on section cards — they are flat tonal panels (–) on the page ground, with a thin hairline only inside nested mock UI. Left-align everything to a ~880px content column with wide right whitespace; number each section with a small muted "01." label, then a two-line headline, then a one-sentence 20px paragraph, then a three-up grid of cards. Inside cards place a Lucide-style 20px line icon top-left and a small white product vignette anchored to the bottom, cropped by the card. Buttons: 32px tall pills, 14px/500 text, 14px horizontal padding; primary is orange with white text, secondary is with text. Integration/partner logos render monochrome gray at a single height. Keep the header borderless: wordmark left, plain text links right, one gray pill for signup.