# usestable.com

Source: https://www.usestable.com/
Captured: 2026-09-20
Tags: saas, landing, light, both, corporate-clean, editorial, warm, trustworthy, confident, calm
Colors: #f9f4f1, #d9d4d1, #1f1d33, #8b888b, #b5b1ae, #6d6b6e, #43414e, #4a71d5
Type (h1): Soehne · 14px/21px · 600 · tracking 0.56px — "VIRTUAL MAIL MANAGEMENT FOR YOUR BUSINESS"
Type (h2): Recoleta · 24px/33.6px · 500 · tracking -0.8px — "Trusted by 15,000+ businesses — from formation to IPO"
Type (h3): Soehne · 32px/41.6px · 500 · tracking -0.4px — "Handle your mail faster"
Type (body): Soehne · 16px/24.8px · 400 — "New guide! Learn how to turn mail into a workflow that runs itself. Read the gui"
Type (button): Soehne · 16px/19.2px · 600 — "Talk to sales"
Button: "Talk to sales" — fill #ffffff, text #000000, radius 12px, border 1px, padding 16px 20px, height 53px, type 16px/600

## Images

- Hero (desktop): https://media.lvly.design/library/usestable-com/hero.webp?v=ec71904f
- Page crop (mid-1): https://media.lvly.design/library/usestable-com/mid-1.webp?v=1e892dc9
- Page crop (mid-2): https://media.lvly.design/library/usestable-com/mid-2.webp?v=a88a51df
- Hero (mobile): https://media.lvly.design/library/usestable-com/mobile-hero.webp?v=fcde2a8d
- Full page (desktop): https://media.lvly.design/library/usestable-com/full.jpg?v=132b9e4a
- Full page (mobile): https://media.lvly.design/library/usestable-com/mobile-full.jpg?v=2c40b96b
- Clip preview (mp4): https://media.lvly.design/library/usestable-com/video-a0lz06.preview.mp4?v=b98e641e

Stable dresses a deeply unglamorous product — virtual mail — in warm paper and a bookish serif, and the mismatch is the whole idea. The page sits on a cream ground (#F9F3EE) rather than white, so white is freed up to mean "card"; every panel is a single value step above the page with a #D9D5D2 hairline, and nothing needs a shadow to separate. Type carries the personality: Recoleta at 48px/500 with −1.2px tracking for the display line, Söhne for literally everything else, and a rust-orange uppercase eyebrow (14px/600, +0.56px tracking) as the only warm accent in a page whose actions are all cobalt blue (#3D66D3). The hero's right half is a composed proof shot rather than a screenshot: the product's inbox bleeds off the right edge with three small white cards — an AI summary, the mailing address, a completed deposit — floating at its corners, and a dashed hand-drawn arc in rust tucked behind the top-left of the stack. Below the fold the page alternates full-bleed navy (#232136) bands with the cream, reusing one dark palette for stats, features and testimonials; inside the dark the hairline lifts to a violet-navy (#514D75) and links go periwinkle. It reads calm and grown-up without going corporate-sterile, and the serif is doing most of that work.

## Steal-worthy details

- Navy announcement strip above the nav — full-bleed #232136, one 15px sentence with the last clause bolded and a `→` glyph, no dismiss control; the strip and the nav are pinned together, so both repeat in every scroll capture
- Serif display, grotesk everything-else — Recoleta 48px/500 at −1.2px tracking for the hero line and the section headings, Söhne 16px/400 at 24.8px for body and 16px/600 for buttons; the serif never appears below display size, which is what keeps it from reading as nostalgic
- Rust uppercase eyebrow over the headline — 14px/600, +0.56px tracking, ~#C63D24, the single warm accent on a page whose actions are all blue; it does the category-labeling a subhead would otherwise waste a line on
- Exactly two button looks, repeated verbatim in the header — solid #3D66D3 primary and #FFFFFF secondary with a 1px hairline, both 12px radius, 16px/20px padding, 53px tall, 16px/600 label; the hero pair and the nav pair are the same two controls
- Composed product collage instead of a screenshot — the app UI bleeds off the right edge and three small white cards (AI summary, address, deposit confirmation) overlap its corners at different depths, with a dashed rust arc behind the stack as the only drawn ornament
- Full-bleed navy bands as the rhythm device — #232136 sections alternate with the cream ground, each holding a rounded card whose hairline lifts to #514D75 and whose links go periwinkle #A8C3EE; one inverted palette covers stats, features and testimonials
- Stats as three hairline panels on navy — 60% / 50% / 4x at display size with a one-line caption under each, bordered rather than filled, so the numbers sit on the band instead of on cards
- Segments shown as photographs with a burned-in pill — three portrait-ish photo cards, each with a rounded label chip anchored in its bottom-left corner over the image, doing the work an icon-and-heading trio usually does

## Style recipe

Build on a warm paper ground, not white. Page `#F9F3EE`; surfaces `#FBF9F7` with a 1px `#D9D5D2` hairline and a 16–24px radius — a card is one value step up, never a shadow. Reserve pure `#FFFFFF` for the secondary button and for product imagery.

Type: a warm display serif (Recoleta, Tiempos Headline, GT Super) at 48px/500, line-height 1.2, letter-spacing −1.2px for hero lines and 24px/500 at −0.8px for section titles; a neutral grotesk (Söhne, Inter) for everything else — body 16px/400 at 1.55 line-height in `#65615C`, section subheads 32px/500 at −0.4px, buttons 16px/600. Never set the serif below 24px. Above each display line put an eyebrow: 14px/600, uppercase, +0.56px tracking, in a rust accent (`#C63D24`).

Color roles: ink `#232136`; primary action `#3D66D3`; warm accent `#C63D24` used only for eyebrows and hand-drawn ornament — never for a button; muted text `#65615C`; hairline `#D9D5D2`. Inverted sections take `#232136` full-bleed, white ink, hairline `#514D75`, and links in periwinkle `#A8C3EE`.

Two buttons and no more: primary solid `#3D66D3`, white label; secondary `#FFFFFF` with a 1px hairline and near-black label. Both 12px radius, 16px/20px padding, ~52px tall. Put the same pair in the header so the CTA never changes shape as the page scrolls.

Rhythm: alternate the cream ground with full-bleed navy bands roughly every two sections; inside a band, use the same card geometry as on light. Sections run ~120–160px of vertical padding on a 1440px frame with a max content width around 1280px. Lists use circled outline checkmarks at ~20px rather than bullets. Stats go in bordered, unfilled panels so the number is the only weight.

Imagery: never drop a flat screenshot. Let the product UI bleed past one edge and overlap it with two or three small white cards, each showing one concrete outcome (a summary, an address, a confirmed amount), at slightly different depths. Add at most one hand-drawn ornament — a dashed arc or motion mark in the rust accent — behind the stack. Photography is real people at desks, cropped tight, with a rounded label chip anchored in the bottom-left corner.

Motion stays under 200ms: hover darkens a solid button ~6% and lifts a card's hairline; nothing translates more than 2px.