ferndesk.com

Ferndesk sets an oversized, very tightly tracked Archivo display face on a warm paper ground (#F4F3EE) and lets nothing else compete with it: the h1 runs 80px at 600 weight on an 80px line with -2.8px of tracking, so two lines of headline read as a solid block of ink, and everything under it — 19px Inter body, 13px buttons, 6px radii — is deliberately small and quiet. The brand color is a dark forest green (#1F6B46) used only on the primary button, which keeps the page from looking like a green site; the actual personality comes from an 8-bit motif that runs down the whole length of it, where every section boundary is a checkerboard dither band in orange, lime and green rather than a rule, and the footer closes with a row of pixel-art sprites. The page then swings between grounds — warm paper, near-black (#1C1A19), a full-bleed forest green block, a lime (#CAF27A) closing CTA — so a 9,000px scroll reads as chapters instead of one long column. Product screenshots are shown at near-full width with real, legible UI inside a rounded frame, and they are what actually explain the product; the copy above them stays to a headline, three lines, and two buttons. The result is a dense B2B page that manages to feel homemade and warm without getting cute about it.

Build on warm paper, not white: ground #F4F3EE, ink #1C1A19, muted ink #73716E, card and frame fills #FFFFFF at a 1px #D1D0CC hairline. Set headings in a grotesk with a tall x-height (Archivo or similar) at 600 weight and punishing negative tracking: h1 80px/80px at -0.035em, h2 64px/64px at -0.035em, h3 24px/27.6px at -0.02em. Set everything else in Inter at 400: body 19px/26.6px, small and all button labels 13px/18.2px at 500, with normal tracking — never track the body. Keep one saturated brand color, a dark forest green #1F6B46, and spend it only on the primary button and the header pill; the secondary button is white with a 1px hairline and the same 6px radius. Radii are small and consistent — 6px for controls and chips, 8px for cards, 10px at most for a media frame; nothing is pill-shaped and nothing is square. Shadows are almost absent: a single soft ambient drop under the large product frame, nothing under a card.

Structure the page as alternating full-bleed grounds rather than one column — warm paper, near-black #1C1A19, a saturated green block, and a lime #CAF27A closing CTA — and bridge every ground change with a hand-pixeled checkerboard dither band about 24–40px tall, two or three brand colors deep (orange #D56D25 into lime #E1E778 into green), bleeding to both edges. That band is the signature; use it instead of any rule, wave or diagonal. On inverted sections, set the heading in #F5F3EF with one clause in #CAF27A, and use a 13px/600 uppercase eyebrow in lime or green above it. Section rhythm: eyebrow, two-line display heading, three lines of 19px body, two buttons, then a full-width piece of product evidence — roughly 120px of air above each heading and 40px between heading and body.

Lead with real product UI at full content width and at 1:1, framed in a white rounded card with a tab row of three or four real labels along its top; never crop a screenshot so small its own labels blur. Break three-up card rows by inverting the last card to near-black with a lime eyebrow. Motion is restrained: 150–200ms color and border transitions on controls, an inline play affordance on video thumbnails, no parallax and no scroll-triggered reveals. Finish the footer on near-black with a row of 8-bit pixel sprites in the brand palette along the very bottom edge — it is the only decoration the system allows, and it earns the dither bands above it.