How to Improve Landing Page Craft (Typography, Whitespace, Design System)

Craft is the dimension visitors notice subliminally. They cannot articulate why a Stripe page feels "premium" and a competitor page feels "templated" — but they convert at the Stripe page anyway. The differences are typography, whitespace, design-system rigor, and visual restraint.

Six moves close most of the Craft gap. None require a redesign. All take under an hour if your codebase has a design token system. Without tokens, budget two hours.

Step 1 — Audit your typography hierarchy

Map every text size on the page. A strong hierarchy has 4-6 distinct sizes: display (hero), headline (h2), subhead (h3), body, caption, metadata. Each size should have a clear gap from the next — if your display is 56px and your headline is 52px, the hierarchy is collapsing.

Audit your H2s. Are they all the same size? They should be. Anything inconsistent reads as templated rather than crafted.

Step 2 — Increase whitespace density

Open Stripe, Linear, Notion, Vercel. Notice how much vertical space sits between sections. Now compare to your page. Most B2B pages cram sections together because "fold concerns" make the team panic about scroll length. The result feels templated.

Add 32-64px of vertical space between every section. Add 12-24px above and below every paragraph. The page will feel "expensive" without changing anything else.

Step 3 — Commit to a design system

Define color tokens (primary, secondary, accent, neutrals, status colors). Define font sizes (display, h1, h2, h3, body, caption). Define spacing units (4px, 8px, 16px, 24px, 32px, 48px, 64px, 96px).

Apply consistently. No off-token one-offs ("this section needs 18px because reasons"). Every off-token decision is a vote against craft.

Step 4 — Reduce to one accent color

Most B2B pages use 3-5 distinct accent colors to "differentiate sections." Top-decile pages use one accent, applied with restraint. The single-accent approach makes every accented element feel intentional; the multi-accent approach makes the page feel like a slide deck.

Pick one accent. Apply to: the CTA, the active nav state, the H2 highlight em-tags, one or two key bullet markers. Everything else is in the neutral palette.

Step 5 — Cut visual noise

Remove every decorative element that does not carry information. Stock illustrations, gradient backgrounds, abstract shapes, "modern" geometric icons — all decorative. All carry zero conversion signal. All add cognitive load.

Test: cover each decorative element with a sticky note. Does the page still communicate? If yes, delete the element.

Step 6 — Re-score on Lytms and ship

Run the page through Lytms. The Craft bar should have moved up 0.8-1.5 points if you applied all five prior steps.

Ship the page. Then — separate from the Lytms score — show the new page to three brand-conscious people (a designer, a founder, a senior marketer). Ask what feels different. The subjective feedback will confirm what the Lytms score now measures: the page reads as crafted, not templated.