# plain.com

Source: https://www.plain.com/
Captured: 2026-11-01
Tags: saas, landing, mixed, both, minimal, bento, calm, technical, confident, optimistic, trustworthy
Colors: #fbfdfa, #cdcfcf, #d7f5df, #adb0af, #49dc94, #8c928e, #7ae5b1, #616f66
Type (h1): ABC Favorit Regular · 80px/80px · 400 · tracking -1.6px — "Build support your own way"
Type (h2): ABC Favorit Regular · 48px/50px · 400 · tracking -0.96px — "Tools add"
Type (h3): ABC Favorit Medium · 24px/28px · 500 · tracking -0.48px — "Start fast. Scale fearlessly."
Type (body): ABC Favorit Regular · 18px/24px · 400 · tracking -0.18px — "Your customers are talking to you in Slack, MS Teams, email, and inside your pro"
Type (small): ABC Favorit Regular · 12px/16px · 400 · tracking -0.12px — "Channels"
Type (button): sans-serif · 12px/normal · 400 — "BOOK A DEMO"
Button: "Book a demo" — fill #1ad379, text #f3fbe9, radius 6px, border 0px, padding 8px 10px 7px 10px, height 34px, type 12px/400
Radii: 6px (29), 9px (24), 12.28px (9), 9999px (1), 18px (1)

## Images

- Hero (desktop): https://media.lvly.design/library/plain-com/hero.webp?v=fbad17bc
- Page crop (mid-1): https://media.lvly.design/library/plain-com/mid-1.webp?v=e666d3b4
- Page crop (mid-2): https://media.lvly.design/library/plain-com/mid-2.webp?v=6e9dae4b
- Hero (mobile): https://media.lvly.design/library/plain-com/mobile-hero.webp?v=808d4d6b
- Full page (desktop): https://media.lvly.design/library/plain-com/full.jpg?v=f50b16c7
- Full page (mobile): https://media.lvly.design/library/plain-com/mobile-full.jpg?v=a866c8c6
- Clip preview (mp4): https://media.lvly.design/library/plain-com/video-tre8t9.preview.mp4?v=a2daf6aa

Plain runs a near-white canvas (#fbfdfa) with one loud signal green (#1ad379) and a deep forest ink (#0f2418-ish) that does double duty as text color and as the fill of full-bleed dark bands. Everything is set in ABC Favorit at regular weight, even the 80px display, with tight negative tracking (-0.02em), so the page reads soft and engineered rather than shouty. The one deliberate texture break is monospace: every button and text link is uppercase, letter-spaced mono in green, which makes the CTAs feel like terminal commands. Product UI is shown as crisp, low-contrast white panels sitting on pale mint and warm-cream washes framed by thin dashed green route lines, and the long scroll alternates light feature grids with forest-green sections for rhythm.

## Steal-worthy details

- Two-tone stacked headline: the first line in brand green, the second in near-black forest ink, same size and weight, no other emphasis, so color alone carries the hierarchy
- Monospace uppercase CTAs: "BOOK A DEMO" / "START A TRIAL" set in a mono face with wide tracking at 12px, solid green fill paired with a 1px green outline twin, 6px radius; the type is the brand, not the shape
- Hero product frame on a pale mint card (#d7f5df tint, ~12px radius) crossed by thin dashed and solid green curves, like transit routes converging on the UI; decoration that also implies "routing"
- Customer logo strip pinned to the bottom edge of the first viewport, monochrome and evenly spaced, so social proof is visible before any scroll
- Inline logo cluster inside a headline: "Tools add [a row of tiny app icons] distance", where the icons replace words mid-sentence and make the problem literal
- Forest-green band holding a 3×2 grid of dark cards with thin mint hairlines and small line-art illustrations, each with a tiny mono eyebrow above a medium-weight title
- "Speed, meet power" comparison section as a two-column definition list on forest green: scenario on the left with a green mono link beneath, a long candid paragraph on the right, separated by one thin divider
- Timeline section ("29 mins and 59 secs") that pins three timestamps across a horizontal line and lists what you achieve by each, turning onboarding speed into a scannable chart
- Arrow links done as long hairline arrows trailing a mono label ("DISCOVER AGENTS ⟶"), the stroke as long as the word, instead of a chevron glyph

## Style recipe

Build on a near-white canvas (#fbfdfa) with deep forest-green ink (around #0f2418) for text and for occasional full-bleed dark bands that alternate with light sections. Use one brand accent, a saturated signal green #1ad379, for primary fills, links and the first line of display headlines; support it with pale mint washes (#d7f5df, #f2fbe9) and a warm off-white cream for illustration panels, plus cool grays #cdcfcf / #8c928e for borders and secondary text. Typeset everything in a geometric-grotesk like ABC Favorit (fallback: Inter Display or Söhne) at weight 400: display 80/80px at -1.6px tracking, h2 48/50px at -0.96px, h3 24/28px weight 500 at -0.48px, body 18/24px at -0.18px, small 12/16px. Split hero headlines into two lines and color them green then ink, with no bold. Set all buttons and text links in an uppercase monospace at 12px with ~0.08em tracking: primary is a solid green fill with pale #f3fbe9 text, secondary is a 1px green outline with green text, both 6px radius, ~34–40px tall. Radii are small and consistent: 6px controls, 9px chips and inner panels, 12px cards, pills only for avatars or status. Show product UI as flat white panels with 1px light-gray borders and almost no shadow, placed on tinted cards and decorated with thin dashed and solid green curves. On dark bands, use cards one step lighter than the background with mint hairline borders and simple line-art icons. Links end in a long thin arrow stroke rather than a chevron. Keep spacing generous (120px+ between sections) and let color shifts between bands, not ornaments, create the rhythm.