# ferndesk.com

Source: https://ferndesk.com/
Captured: 2026-09-20
Tags: saas, landing, mixed, both, retro-warm, editorial, playful, warm, playful, confident, human
Colors: #f5f5f2, #d1d0cc, #edab8c, #b0b1ad, #e08435, #73716e, #8d948d, #514f4c
Type (h1): Archivo Marketing · 80px/80px · 600 · tracking -2.8px — "The help center that never goes stale."
Type (h2): Archivo Marketing · 64px/64px · 600 · tracking -2.24px — "This month, you changed a default."
Type (h3): Archivo Marketing · 24px/27.6px · 600 · tracking -0.48px — "Connect your tools."
Type (body): Inter Marketing · 19px/26.6px · 400 — "Ferndesk is a complete help center with an agent that checks every article again"
Type (small): Inter Marketing · 13px/18.2px · 500 — "Start free"
Type (button): Inter Marketing · 13px/18.2px · 500 — "Start free"
Button: "Verification" — fill #ffffff, text #1c1b19, radius 6px, border 1px, padding 10px 16px 10px 14px, height 37px, type 13px/500
Radii: 6px (29), 8px (11), 3px (8), 4px (4), 10px (2)

## Images

- Hero (desktop): https://media.lvly.design/library/ferndesk-com/hero.webp?v=10a166a5
- Page crop (mid-1): https://media.lvly.design/library/ferndesk-com/mid-1.webp?v=b212ab6b
- Page crop (mid-2): https://media.lvly.design/library/ferndesk-com/mid-2.webp?v=1a46705b
- Hero (mobile): https://media.lvly.design/library/ferndesk-com/mobile-hero.webp?v=a9f941b0
- Full page (desktop): https://media.lvly.design/library/ferndesk-com/full.jpg?v=558a9cf6
- Full page (mobile): https://media.lvly.design/library/ferndesk-com/mobile-full.jpg?v=880de81c
- Clip preview (mp4): https://media.lvly.design/library/ferndesk-com/video-myroa6.preview.mp4?v=cd1b899e

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.

## Steal-worthy details

- Display type as the whole hierarchy — h1 80px/80px at 600 with -2.8px tracking (-0.035em), h2 64px/64px at -2.24px, h3 only 24px, then a hard drop to 19px body. The three display sizes all sit at a 1.0 line-height ratio, which is what makes each heading read as a solid slab
- Tiny controls under huge type — buttons are 13px/500 in a 37px-high pill with 6px radius and 10/16px padding, next to an 80px headline. The ~6:1 ratio between headline and button label is the move; a 16px button would flatten the whole page
- Checkerboard dither bands as section seams — every grounds change is bridged by a hand-pixeled 8-bit checkerboard (orange #D56D25 into lime #E1E778 into green), bleeding off both edges, instead of a hairline or a diagonal. It is the one device that makes the page recognizable from a thumbnail
- Tabbed product frame carrying the hero — the screenshot sits in a rounded card whose top row is four real tabs (Verification, Help center, Automatic updates, AI conversations) with a "Migrate your docs" link pinned right, so one visual holds four product claims and the hero needs no feature list
- Screenshots kept legible, never decorative — the product image runs to a 1,120px content width at roughly 1:1, so 11px UI labels inside it are actually readable rather than a blurred suggestion of an app
- Inverted sections that carry a lime highlight — the near-black (#1C1A19) blocks set the heading in white with one phrase in lime, and park a right-hand column of struck-through past states beside it, so the problem is dramatized in type rather than in an illustration
- Third testimonial card as the inverse — two video thumbnails in white cards, then a dark card with a lime eyebrow and a pull quote as the third. Breaking the rhythm on the last item of a three-up stops it reading as a stock logo wall
- Pixel-sprite row closing the footer — a line of 8-bit characters in the brand's greens, orange, blue and yellow across the very bottom edge, the only purely decorative element on the page and the payoff for the dither bands above it

## Style recipe

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.