# craft.do

Source: https://www.craft.do/v3
Captured: 2026-09-20
Tags: saas, landing, light, both, editorial, organic, playful, warm, human, calm, optimistic
Colors: #a6d4f0, #f0f3f4, #d5dade, #f8e28f, #8db2c5, #576d78, #738e9d, #171717
Type (h1): UntitledSerifFont · 66px/66px · 400 · tracking -1.98px — "Your space for notes, tasks, and big ideas"
Type (h2): UntitledSerifFont · 54px/59.4px · 400 · tracking -1.08px — "How people use Craft"
Type (h3): UntitledSerifFont · 46px/56.12px · 400 · tracking -1.38px — "Craft isn’t just for one thing, it’s for your things."
Type (body): UntitledSerifFont · 24px/28.8px · 400 · tracking -0.72px — "Work reports, project boards, personal wiki"
Type (small): apple-system · 12px/16.8px · 400 · tracking -0.24px — "Todo"
Type (button): UntitledSansFont · 16px/24px · 500 — "Try Craft Free"
Button: "Try Craft Free" — fill #030302, text #ffffff, radius 9999px, border 0px, padding 8px 14px, height 36px, type 16px/500
Radii: 24px (40), 4px (9), 9999px (4), 32px (4), 8px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/craft-do-v3/hero.webp?v=4dd4105f
- Page crop (mid-1): https://media.lvly.design/library/craft-do-v3/mid-1.webp?v=73baf7fe
- Page crop (mid-2): https://media.lvly.design/library/craft-do-v3/mid-2.webp?v=161727c1
- Hero (mobile): https://media.lvly.design/library/craft-do-v3/mobile-hero.webp?v=17fedf82
- Full page (desktop): https://media.lvly.design/library/craft-do-v3/full.jpg?v=87240a42
- Full page (mobile): https://media.lvly.design/library/craft-do-v3/mobile-full.jpg?v=2394f704
- Clip preview (mp4): https://media.lvly.design/library/craft-do-v3/video-a29un7.preview.mp4?v=e9748690

A note-taking app dressed as a paper collage. The page sits on a warm off-white ground (#fcf9f7) and opens not with a full-bleed hero but with an inset, heavily rounded stage — a cut-paper landscape of sky, torn white ridges, a periwinkle mountain and a sheet of ruled yellow legal pad, with a soft drop shadow under the product window that overlaps it all. Everything is set in a high-contrast transitional serif (Untitled Serif): the 66px display line, the 24px body, and the italic pull quotes alike; the only sans on the page is the 16px/500 button label, which quietly marks "this is a control" without a single extra box. Below the fold the rhythm is generous white space punctuated by full-width tinted panels at a 24px radius — lavender, mint, butter yellow — each one a self-contained mini-layout of pale cards on a saturated ground, so the page reads as a stack of colored paper sheets rather than a scroll of sections. What makes it work is the restraint holding the whimsy: the illustration is loud and the typography is quiet, hairline rules and single-avatar bylines carry the testimonials, and the only hard black on the page is the pill CTA (#030302 on white text), so the eye finds the action instantly in a field of pastel.

## Steal-worthy details

- The hero is an inset card, not a full-bleed band — a ~20px margin of page ground on all sides and a large corner radius, so the whole landscape reads as a pasted-in sheet rather than a background
- Floating capsule nav with no bar and no border: a pill of white sitting on a diffuse light halo, wordmark left, links center, log-in plus a black pill CTA right — it stays fixed and keeps the halo treatment over every section it passes
- Two CTA weights, same shape: the header pill is hard black on white; the in-hero pill is a pale tint of the sky behind it with dark ink, so the primary action never fights the illustration it sits on
- Torn-paper collage instead of a gradient — hand-cut white ridges, a matte periwinkle silhouette, a flat black blob and a ruled yellow pad, all with visible deckled edges and paper grain, layered flat with no perspective
- The product screenshot breaks the collage: a rounded app window pushed up into the artwork and cropped by the stage's bottom edge, so the UI is a foreground object in the scene rather than a framed picture beside it
- A serif at every size, including 24px body copy set at a 1.2 line-height with -0.03em tracking — tight leading is what keeps a serif body from reading as a novel; the sans is reserved for button labels alone
- Section panels as colored sheets: full-width tinted blocks at a 24px radius, each holding pale near-white cards at a smaller radius on the saturated ground, with the section label in 12px caps above a 46px serif head
- Testimonials as one line of furniture: a small circular avatar, a thin hairline rule, then an italic serif quote at body-plus size — no card, no border, no quotation-mark graphic beyond the glyphs themselves

## Style recipe

Build on a warm paper ground, `#fcf9f7`, with ink at `#171717` and pure white reserved for cards and panels that should read as sheets laid on top.

Set everything in one high-contrast transitional serif. Display 66px/66px at -0.03em, section heads 54px/1.1 at -0.02em, sub-heads 46px/1.22 at -0.03em, body 24px/1.2 at -0.03em, eyebrows 12px/1.4 uppercase in a muted gray. Keep every weight at 400 — let size and color carry hierarchy, never boldface. Reserve a neutral grotesque for one job only: control labels at 16px/500. That single switch is what makes buttons read as buttons with no extra chrome.

Color in pastel sheets, not accents. Pick three or four desaturated tints — sky `#a6d4f0`, butter `#f8e28f`, a mint and a lavender at the same lightness — and spend each one on a full-width section panel rather than on text or icons. Inside a tinted panel, drop near-white cards at ~92% lightness of the tint. The only saturated value in the system is near-black `#030302`, spent exclusively on the primary pill CTA with `#ffffff` text.

Radii: 24px is the system default — panels, cards, the app window, the hero stage. 32px for the largest containers, 9999px for every button and tag, 4px for chips and inline tokens inside product screenshots. Never square a corner.

Buttons are pills at 36px tall with 8px/14px padding and no border. Ship two: solid near-black on light ground, and a tinted-fill variant that borrows the hue of whatever it sits on, with dark ink.

Shadows are soft and low: a wide, diffuse ambient shadow under floating objects (the nav capsule, the product window, the pasted cards) and nothing at all on flat panels. No borders anywhere except hairline rules used as punctuation — a 1px `#d5dade` line between an avatar and a quote, and nothing else.

Spacing is the luxury: 120–200px of empty ground between sections, and let a pull quote or an award row float alone in that space with no container. Inside panels, tighten to a 24–32px gutter so the density contrast is obvious.

The two moves that make it recognizable: **inset the hero** — give the opening scene a page-ground margin on all four sides and a large radius so it reads as a pasted sheet, not a background — and **replace photography and gradients with cut-paper collage**: flat, matte, hand-torn shapes with deckled edges and visible grain, layered without perspective, with one product screenshot pushed up into the scene and cropped by the stage's own edge. Motion stays minimal: fades and 200–300ms eased position shifts; nothing parallaxes, because a collage that moves in layers stops being paper.