lobehub.com

An almost colorless product page that spends its entire color budget in two places: a pastel lavender-to-pink wash bleeding out of the top corners, and one small tinted capsule per section. Everything else is Geist on a #f8f8f8 ground — white cards, hairline borders, 8/12px radii, a single #222222 pill for the primary action. The hero is unusually confident for how little it does: a heavy oblique headline set tight at -1.92px tracking on one line, two lines of 20px/30px body, a black pill beside a chromeless ghost button, and then the product itself, a full app window inset from both margins and deliberately cut off by the fold so the page reads as a window onto software rather than a brochure about it. Below it the page is a long run of bento blocks — each introduced by a pastel eyebrow pill and a short heading, each pairing a text column against a live-looking UI screenshot mounted on a colored gradient plate that is the only saturated thing in its block. The restraint is what makes it work: because the neutral is so flat and the type so uniform, a 6px strip of yellow or a lilac capsule carries as much weight as a full-bleed color section would elsewhere.

Build on a flat near-white ground (#f8f8f8) with pure white cards (#ffffff) and 1px hairline borders at roughly 8% ink. Use one geometric-grotesk family for everything — Geist, Inter or similar — and let weight carry the hierarchy: display 700 at -0.04em tracking and, for the single hero line only, an oblique/italic cut; section headings 600–700 at -0.02em; body 20px/30px at 400 with normal tracking; labels and buttons 13–14px at 500. Ink is a soft black (#222222) with secondary text at ~55% and tertiary at ~40% of it; never use a saturated text color.

Color enters in exactly two ways. First, one pastel gradient wash bleeding out of the top corners of the page — two hues, lavender and pink at 15–20% saturation, resolved to the page ground within about 500px — repeated once at the closing CTA card and nowhere else. Second, per-section pastel tints: give each major block a 999px eyebrow capsule in its own hue at ~12% opacity with the hue's dark text on it, and echo that hue as a narrow exposed gradient strip along one edge of the block's screenshot plate. No block gets a colored background, and no two blocks share a hue.

Radii are a three-step scale: 8px for inputs, chips and small tiles, 12px for cards and screenshot frames, 999px for buttons and eyebrows, plus one oversized 56px radius reserved for the full-width closing CTA card. Buttons are pills at 32px height with 14px horizontal padding: primary is a solid #222222 with #f8f8f8 text, secondary is transparent with only a hairline border and an optional trailing icon — always pair them side by side, never stack two solids. Shadows are near-absent; separation comes from the white-on-#f8f8f8 step and the hairline, with at most a 1px inner highlight on the app screenshots.

Rhythm: full-width sections at a 1150–1200px container with roughly 120px of vertical air between them, and inside each one a bento grid that alternates a text column against a UI screenshot — a 1:2 split for the section's lead card, then a row of two or three equal cards beneath it. Let every screenshot be a real, densely populated interface rather than an abstract illustration, and crop at least one of them at the container edge or the fold so it reads as continuing. Motion is minimal: 150–200ms fades and 2–4px lifts on card hover, a slow horizontal drift on the logo and testimonial rows, and nothing that moves on load except the hero's own entrance. The two moves that make it recognizable are the single oblique headline on an otherwise upright page, and color appearing only as a corner wash plus one capsule-and-strip pair per section.