# keep.md

Source: https://keep.md/
Captured: 2026-09-13
Tags: saas, landing, light, both, minimal, corporate-clean, calm, technical, friendly, trustworthy, confident
Colors: #fcfcfc, #d1d1d0, #b2b2b2, #939393, #faddc7, #737373, #ff6604, #feb47f
Type (h1): Inter · 42px/50.4px · 500 · tracking -1.05px — "Keep anything as Markdown"
Type (h2): Inter · 24px/32px · 500 — "Everything you save, in one place you own."
Type (h3): Inter · 18px/28px · 500 — "You save it"
Type (body): Inter · 20px/32.5px · 400 — "Save everything you read, write, watch, and hear as clean Markdown your AI agent"
Type (small): Inter · 12px/12px · 500 — "Claude"
Type (button): Inter · 14px/20px · 500 — "Sign up"
Button (primary): "Sign up" — fill #ececec, text #191919, radius 9999px, border 0px, padding 0px 14.4px, height 32px, type 14px/500
Radii: 10px (45), 9999px (8), 4px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/keep-md/hero.webp?v=c64ced2e
- Page crop (mid-1): https://media.lvly.design/library/keep-md/mid-1.webp?v=cfec416f
- Page crop (mid-2): https://media.lvly.design/library/keep-md/mid-2.webp?v=b3a6f341
- Hero (mobile): https://media.lvly.design/library/keep-md/mobile-hero.webp?v=571e5aff
- Full page (desktop): https://media.lvly.design/library/keep-md/full.jpg?v=c850d966
- Full page (mobile): https://media.lvly.design/library/keep-md/mobile-full.jpg?v=ae187c06
- Clip preview (mp4): https://media.lvly.design/library/keep-md/video-4tfva5.preview.mp4?v=f103af50

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.

## Steal-worthy details

- Body copy at 20px/32.5px in Inter 400 next to a 42px/500 headline — a modest heading-to-body ratio that makes the whole page feel readable rather than shouty.
- Numbered section markers ("01.", "04.") in small muted gray above each headline, and headlines deliberately broken across two lines ("Everything you save, / in one place you own.").
- Feature cards as flat light-gray panels (10px radius, no border, no shadow) with a small line icon top-left and a miniature white "app card" sitting inside the lower half, cropped by the panel edge — the mockup peeks out rather than being fully framed.
- One brand orange  used three ways: solid pill CTA, plain coloured text labels, and as pale tints ( highlight, ) inside the mock UI — so the accent recurs without ever becoming a second surface color.
- Primary + secondary CTA pair: orange solid pill "Start for free" next to a neutral  pill "Copy setup prompt", followed by a row of monochrome integration logos at the same optical height.
- Nav is a plain text row with a single gray pill "Sign up"; the logo is a small black glyph plus the word "Keep" — no chrome, no border under the header.
- Micro-details inside mockups (an orange-underlined "Saved to Keep" toast, an orange progress bar labelled "Fetching transcript", monospace README excerpts) carry product credibility without a screenshot.

## Style recipe

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.