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.

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.
- 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
- foreground85%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- brand5%
- HEX
#0A2414 - RGB
rgb(10, 36, 20) - HSL
hsl(143, 57%, 9%) - OKLCH
oklch(23.46% 0.0446 153.98)
- HEX
- brand3%
- HEX
#17B267 - RGB
rgb(23, 178, 103) - HSL
hsl(151, 77%, 39%) - OKLCH
oklch(67.25% 0.1624 154.66)
- HEX
- accent3%
- HEX
#0000EE - RGB
rgb(0, 0, 238) - HSL
hsl(240, 100%, 47%) - OKLCH
oklch(42.90% 0.2973 264.05)
- HEX
- background1%
- HEX
#F3FBE9 - RGB
rgb(243, 251, 233) - HSL
hsl(87, 69%, 95%) - OKLCH
oklch(97.72% 0.0251 126.54)
- HEX
- background1%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- foreground0%
- HEX
#1F1F28 - RGB
rgb(31, 31, 40) - HSL
hsl(240, 13%, 14%) - OKLCH
oklch(24.33% 0.0170 285.06)
- HEX
- background0%
- HEX
#F9F6F1 - RGB
rgb(249, 246, 241) - HSL
hsl(38, 40%, 96%) - OKLCH
oklch(97.41% 0.0074 80.72)
- HEX
- background0%
- HEX
#9797A9 - RGB
rgb(151, 151, 169) - HSL
hsl(240, 9%, 63%) - OKLCH
oklch(68.23% 0.0262 285.68)
- HEX
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.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FFFFFE | 20.99 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFE | #000000 | 20.99 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #F7FAF9 | 20.00 | AAA | AAA | +103 | foreground on background |
Aa | #F7FAF9 | #000000 | 20.00 | AAA | AAA | -104 | background on foreground |
Aa | #000000 | #F3FBE9 | 19.79 | AAA | AAA | +102 | foreground on background |
Aa | #F3FBE9 | #000000 | 19.79 | AAA | AAA | -103 | background on foreground |
Aa | #000000 | #F9F6F1 | 19.48 | AAA | AAA | +101 | foreground on background |
Aa | #F9F6F1 | #000000 | 19.48 | AAA | AAA | -102 | background 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.
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
- Full Page
- saas
- developer-tools
- dark
- 2026-06-23
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also


