Skip to main content
Back to Gallery

Plain · Full Page

Plain

Restraint as a reaction to every bad support tool — teal accent, dark-green canvas, ABC Favorit + Geist Mono. Customer support in Linear's discipline.

plain.com/Added
Plain Full Page — desktop screenshot

Editorial disclaimer

Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.

Curator verdict

Why we catalogued it?

Plain is what happens when a support tool is designed by people who clearly resent every support tool they've ever used — and it shows in the restraint. We catalogued it because it proves the Linear-tier discipline playbook ports cleanly out of dev-tooling and into a category historically buried under chat bubbles, mascots, and gradient noise. If you're building anything operational that wants to feel calm, fast, and credible to a technical buyer, this is the landing to keep open in the next tab.

Design decisions observed

  • Single-family confidence — the entire page is carried by one humanist sans across heading and body, with a monospace reserved only for tiny eyebrow labels. No second display face is brought in to 'add personality'; the personality is the restraint.
  • A near-mono palette with a single living accent — the page reads as off-white on deep green-black, and the brand's teal does all the emphasis work. Color is treated like punctuation, not paint.
  • Editorial typographic scale, not UI scale — display headings step down through a wide, confident ladder with negative tracking, while body sits at a comfortable 18px reading size. It's a marketing page that respects the eye, not a dashboard cosplaying as one.
  • Elevation by whisper, not by shadow — surfaces lift on multi-layer shadows so faint (4-18% alpha, sub-pixel offsets) they register as edges rather than drop-shadows. Nothing floats theatrically.
  • One motion idea, applied everywhere — a single easing curve at a single duration governs the whole page. The result feels coherent because there is quite literally nothing to feel incoherent about.
  • Generous bounded measure — content lives inside a calm 1200px rail with narrow sub-rails for prose clusters, so nothing ever sprawls edge-to-edge or crowds the reader.

What to study

  • How a support tool earns a developer's trust on first scroll — Plain borrows the dev-tooling visual contract (mono eyebrows, tight tracking, calm canvas) to signal 'we are engineers too' before a single feature is read. Steal the signaling, not the screenshots.
  • The discipline of one accent — watch how a single brand color carries every call-to-action, link, and emphasis without ever needing a second hue. It's a masterclass in subtraction.
  • Editorial heading rhythm on a product page — the display ladder is sized and tracked like a magazine, not a component library. Learn how negative tracking at large sizes makes type feel 'bound' and intentional.
  • Motion as a coherence tool rather than a delight tool — a single curve and duration applied uniformly is what makes the page feel engineered. Constraint, not choreography, is the lesson.

What to avoid

  • Don't read Plain's calm as 'safe' and dial it toward a consumer-bright palette — the entire credibility signal collapses the moment you add a second loud accent. The teal works because it's alone.
  • Don't mistake the editorial type scale for a license to add a serif or a second display face — Plain's authority is single-family. Mixing here dilutes exactly the discipline you came to borrow.
  • Don't inflate the motion — the one-curve, one-duration restraint is deliberate. Adding springs, parallax, or staggered theatrics would make it read like every other support tool it's trying not to be.

Taste notes

The page behaves like a well-kept workshop — everything is where a builder would expect it, the surfaces barely lift off the canvas, and the lone teal accent does the job of an entire color system. You're being shown a tool, not sold a feeling, and the absence of persuasion is itself the most persuasive thing about it. It sits in the same quiet, engineered register as Linear, but pointed at the support desk instead of the issue tracker — proof that operational software can be calm without being boring.

Lineage & references

  • Direct heir to the Linear-school of operational-software marketing — the same restraint-as-authority thesis, the same mono-label-plus-humanist-sans contract, applied to customer support instead of issue tracking.
  • Sits in the modern support-tooling cohort that's re-teaching the category how to look — alongside Intercom's Fin-era cleanup and the developer-first API posture of tools like Front and Pylon, all reacting against the legacy Zendesk visual register.
  • Part of the 2024+ Framer-built, calm-canvas generation of B2B SaaS landings — pages that treat typographic discipline and a single living accent as the whole brand, rather than leaning on illustration or gradient spectacle.

Design language brief

Paste-ready for your agent.

A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.

Philosophy

Calm operational minimalism carried by a single humanist sans. The canvas is off-white (#f3fbe9) over a deep green-black (#0a2414); ABC Favorit (Regular 400 / Medium 500) carries voice, weight, and rhythm across heading and body alike, with Geist Mono reserved exclusively for tiny eyebrow labels (13px, +0.195px tracking). Display headings step down a wide editorial ladder (80 / 48 / 44 / 24px) with negative px tracking (-1.6 to -0.48px) so type feels bound. A single brand teal (#17b267) and the classic link blue (#0000ee) are the only accents — color as punctuation, never paint. Elevation is delivered through near-invisible multi-layer shadows; motion is one curve at one duration, applied everywhere. Discipline over decoration, coherence over choreography.

Main prompt

Use this capture as a design language transfer brief for my project. Adopt the palette (off-white #f3fbe9 foreground on a deep green-black #0a2414 canvas, with a single brand teal #17b267 accent and classic blue #0000ee for inline links), the single-family typographic system (ABC Favorit Regular/Medium across heading and body, Geist Mono only for tiny mono eyebrow labels), the editorial heading ladder with negative px tracking (80/48/44/24px), the calm spacing scale (4/8/10/12/16/20/24/40/62px on a 1200px bounded container), whisper-quiet multi-layer elevation, the granular radius ladder (6/8/9/10/12px), and the single-curve motion language (cubic-bezier(0.44, 0, 0.56, 1) at 0.4s) across every page and component I ship. Treat this as my project's constitution — any new component I author should pass as if crafted in the same studio. Apply the language, not the source brand's specific copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.

Overview

Layout
Editorial
Content width
Bounded
Framing
Flat
Grid strength
Soft

Color philosophy

Near-monochrome calm canvas — off-white foreground #f3fbe9 reading over a deep green-black #0a2414 background does ~95% of the surface work, with pure #000000 and #ffffff appearing in component-level contexts. A single brand teal #17b267 carries every accent, emphasis, and call-to-action; the classic link blue #0000ee is reserved for inline anchor text. Semantic red #e23c3c handles error/destructive state only. Accents stay punctuation, never fill.

Mode strategydual-paired
  • Off-white #f3fbe9 foreground (ABC Favorit 400) is the dominant reading layer over the #0a2414 green-black canvas — pairing maintains 4.5+ contrast for body text
  • Brand teal #17b267 (measured 191 occurrences) is the only emphasis accent — buttons, key links, highlighted figures. Keep its surface area under ~5%
  • Classic link blue #0000ee (157 occurrences) reserved for inline anchor text within prose — the browser-default-leaning hue is intentional, signaling 'real link, not decorated button'
  • Pure neutrals #000000 / #ffffff appear in card/panel contexts and inverted surfaces; the off-white #f3fbe9 and green-black #0a2414 remain the brand pairing
  • Semantic red #e23c3c (11 occurrences) is reserved for error and destructive state — never decorative
  • Pink #ffbac3 appears only inside an atmospheric conic gradient accent, never as a fill or text color

Gradients (paste-ready)

radial-gradient(50% 50%, rgba(10, 36, 20, 0.5) 0%, rgb(10, 36, 20) 100%)
linear-gradient(rgba(10, 36, 20, 0) 20%, rgb(10, 36, 20) 100%)
conic-gradient(rgba(255, 186, 195, 0.83) 182.489deg, rgba(255, 186, 195, 0) 339.654deg, rgba(255, 186, 195, 0.83) 360deg)

Typography rules

  • Primary family: ABC Favorit (self-hosted woff2). Two weights only: Regular (400) for reading + Medium (500) for UI labels and emphasis. Monospace: Geist Mono, reserved exclusively for tiny eyebrow/kicker labels.
  • Weight ladder is strictly 400 / 500 — do not introduce 600 or 700. Emphasis is carried by the 500 Medium step and by size, never by a heavier cut.
  • Display tracking is negative and in px, not em: -1.6px on the 80px hero, -0.96px on 48px headings, -0.48px on 24px headings, -0.18px on 18px body. Tracking tightens as size grows — a constant optical correction.
  • Heading ladder (observable): 80px/76px hero (ABC Favorit Regular), 48px/50px section heading, 44px/52.8px display, 24px/28px subhead (Regular or Medium 500). Body reads at 18px/24px and 15px/20px.
  • Mono eyebrow labels: Geist Mono 13px, weight 500, line-height 19px, letter-spacing +0.195px — the only positive tracking on the page, and the only place mono appears.
  • No italic for emphasis — the 500 Medium weight carries it. No second display or serif face; the entire authority is single-family.
  • Paragraph measure stays comfortable at body 18px inside the narrow content rails (360–792px); never let prose run the full 1200px container width.

Spacing rules

  • Base rhythm is a 4px grid. Observed scale: 4 / 8 / 10 / 12 / 16 / 20 / 24 / 30 / 33 / 40 / 60 / 62px — calm and generous, not micro-dense.
  • Container max-width 1200px (the dominant bounded rail, frequency 24). Narrow content rails nest inside at 360 / 480 / 592 / 680 / 792px for prose and form clusters.
  • Flex/grid gutters draw from 4 / 8 / 10 / 12 / 16 / 20 / 24 / 40 / 62px — the 10 and 20 gaps are the most frequent (card rows, feature grids).
  • Section vertical rhythm leans on the larger tokens (40 / 60 / 62px) between major blocks; tighter 16–24px inside cards and content clusters.
  • Card padding lands in the 16–24px range on desktop; pull from the scale, never invent magic numbers.

Design tokens

Palette, type, and space — all agent-readable.

20 colors · hex / rgb / hsl / oklch

Save PNG
  • foreground
    85%
    • HEX#000000
    • RGBrgb(0, 0, 0)
    • HSLhsl(0, 0%, 0%)
    • OKLCHoklch(0.00% 0.0000 0.00)
  • brand
    5%
    • HEX#0A2414
    • RGBrgb(10, 36, 20)
    • HSLhsl(143, 57%, 9%)
    • OKLCHoklch(23.46% 0.0446 153.98)
  • brand
    3%
    • HEX#17B267
    • RGBrgb(23, 178, 103)
    • HSLhsl(151, 77%, 39%)
    • OKLCHoklch(67.25% 0.1624 154.66)
  • accent
    3%
    • HEX#0000EE
    • RGBrgb(0, 0, 238)
    • HSLhsl(240, 100%, 47%)
    • OKLCHoklch(42.90% 0.2973 264.05)
  • background
    1%
    • HEX#F3FBE9
    • RGBrgb(243, 251, 233)
    • HSLhsl(87, 69%, 95%)
    • OKLCHoklch(97.72% 0.0251 126.54)
  • background
    1%
    • HEX#FFFFFF
    • RGBrgb(255, 255, 255)
    • HSLhsl(0, 0%, 100%)
    • OKLCHoklch(100.00% 0.0000 89.76)
  • foreground
    0%
    • HEX#1F1F28
    • RGBrgb(31, 31, 40)
    • HSLhsl(240, 13%, 14%)
    • OKLCHoklch(24.33% 0.0170 285.06)
  • background
    0%
    • HEX#F9F6F1
    • RGBrgb(249, 246, 241)
    • HSLhsl(38, 40%, 96%)
    • OKLCHoklch(97.41% 0.0074 80.72)
  • background
    0%
    • HEX#9797A9
    • RGBrgb(151, 151, 169)
    • HSLhsl(240, 9%, 63%)
    • OKLCHoklch(68.23% 0.0262 285.68)

Inspector

Tab through the captured artifacts.

Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.

Page structure

Semantic hierarchy at a glance.

Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 2 nodes captured; depth capped at 6 for readability.

  • body
  • └─ div (×2)

Accessibility

WCAG contrast matrix.

296 combinations · 152 pass AA · 98 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.

PreviewfgbgRatioNormalLargeAPCA LcContext
Aa
#000000#FFFFFF21.00AAAAAA+106foreground on background
Aa
#FFFFFF#00000021.00AAAAAA-108background on foreground
Aa
#000000#FFFFFE20.99AAAAAA+106foreground on background
Aa
#FFFFFE#00000020.99AAAAAA-108background on foreground
Aa
#000000#F7FAF920.00AAAAAA+103foreground on background
Aa
#F7FAF9#00000020.00AAAAAA-104background on foreground
Aa
#000000#F3FBE919.79AAAAAA+102foreground on background
Aa
#F3FBE9#00000019.79AAAAAA-103background on foreground
Aa
#000000#F9F6F119.48AAAAAA+101foreground on background
Aa
#F9F6F1#00000019.48AAAAAA-102background on foreground

Image strategy

Asset loading & format policy.

Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.

Total29Lazy loaded83%png23svg6

Hero image

https://framerusercontent.com/images/HniGCslQmEkXBEZ62EGDp5rlLV0.png?scale-down-to=2048&width=4261&height=3478
Format
PNG
Dimensions
1224×999
Loading
auto
srcset
yes
srcset descriptor
https://framerusercontent.com/images/HniGCslQmEkXBEZ62EGDp5rlLV0.png?scale-down-to=512&width=4261&height=3478 512w,https://framerusercontent.com/images/HniGCslQmEkXBEZ62EGDp5rlLV0.png?scale-down-to=1024&width=4261&height=3478 1024w,https://framerusercontent.com/images/HniGCslQmEkXBEZ62EGDp5rlLV0.png?scale-down-to=2048&width=4261&height=3478 2048w,https://framerusercontent.com/images/HniGCslQmEkXBEZ62EGDp5rlLV0.png?scale-down-to=4096&width=4261&height=3478 4096w,https://framerusercontent.com/images/HniGCslQmEkXBEZ62EGDp5rlLV0.png?width=4261&height=3478 4261w
Page type
  • Full Page
Industry
  • saas
  • developer-tools
Theme
  • dark
Added
  • 2026-06-23

Editorial credit

Featured Sponsor slot — your brand here

Dedicated logo placement — no rotation, on every export.

Become a sponsor

COMPARE THIS WITH

See also

Adjacent patterns worth studying.

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.