craft.do

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.

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.