---
title: "Plain design system"
variant: extended
source: https://www.plain.com/
captured_at: 2026-10-12
theme: light
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/plain-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Plain · Design System

> Calm whitespace, vivid green, and product in focus

**Theme:** light · **Industry:** ai · **Source:** https://www.plain.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Plain pairs a bright, spacious canvas with vivid green calls to action and deep evergreen product sections. Large centered messaging and detailed interface imagery make the page feel approachable while keeping the B2B software product in focus.

## North star

Keep the canvas open and quiet, using evergreen contrast and vivid green only to direct attention toward the product and next action.

## Overview

The page moves between expansive white sections and immersive deep-evergreen feature bands. Green is the key signal: it colors the first line of the hero headline, primary demo buttons, small product indicators, and fine details in interface visuals. Near-black green carries inverse sections and dark text, while warm off-white cards soften testimonial and product content. Typography uses ABC Favorit’s clean, rounded sans character: large, lightly weighted headlines sit close together, with compact uppercase mono labels providing a technical counterpoint. The layout favors centered introductions followed by broad product screenshots, logo rows, and modular feature cards. Generous gaps separate sections; cards use restrained rounding and little visible elevation. Interface imagery is crisp and mostly shown within pale, softly tinted frames. Occasional burgundy and pink accents belong to a case-study card and decorative treatments, not the main brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Evergreen Ink | `#0a2414` | `--color-evergreen-ink` | brand | Deep inverse-section background, dark headline text, and the base tone of dark gradients. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Primary page canvas and the open backdrop around hero, feature, and proof sections. |
| Pale Leaf | `#f3fbe9` | `--color-pale-leaf` | surface | Soft green-tinted panels, product framing, and light text on dark surfaces. |
| True Black | `#000000` | `--color-true-black` | neutral | Measured text color used for dark copy and card content. |
| Signal Green | `#1ad379` | `--color-signal-green` | accent | Primary CTA fill, hero emphasis, links, and small interface highlights. |
| Warm Paper | `#f9f6f1` | `--color-warm-paper` | surface | Warm off-white testimonial and content cards against the white page. |
| Case Burgundy | `#360003` | `--color-case-burgundy` | semantic | Deep burgundy case-study card surface; isolated from the core green-and-white system. |
| Blush Pink | `#ffbac3` | `--color-blush-pink` | accent | Pink text and decorative contrast, especially in case-study or illustration treatments. |
| Muted Rose | `#dd9ba3` | `--color-muted-rose` | accent | Subtle pink gradient detail, appearing as a supporting decorative color rather than a core UI color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#0a2414` (Evergreen Ink) · `--color-surface-2` → `#f9f6f1` (Warm Paper) · `--color-surface-3` → `#f3fbe9` (Pale Leaf) · `--color-surface-4` → `#360003` (Case Burgundy) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#f3fbe9` (Pale Leaf) · `--color-text-subtle` → `#0a2414` (Evergreen Ink) · `--color-accent` → `#1ad379` (Signal Green) · `--color-accent-2` → `#ffbac3` (Blush Pink) · `--color-accent-3` → `#dd9ba3` (Muted Rose) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#0a2414` | 1.28:1 | fail |
| `#000000` | `#f9f6f1` | 19.48:1 | AAA |
| `#000000` | `#f3fbe9` | 19.79:1 | AAA |
| `#f3fbe9` | `#ffffff` | 1.06:1 | fail |
| `#f3fbe9` | `#0a2414` | 15.51:1 | AAA |
| `#f3fbe9` | `#f9f6f1` | 1.02:1 | fail |
| `#0a2414` | `#ffffff` | 16.47:1 | AAA |
| `#0a2414` | `#f9f6f1` | 15.27:1 | AAA |
| `#0a2414` | `#f3fbe9` | 15.51:1 | AAA |

### Gradients

- `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

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Favorit Regular | `--font-body` | webfont | 400 | Headlines, body copy, and captions throughout the page. | Inter |
| ABC Favorit Medium | `--font-abc-favorit-medium` | webfont | 500 | Medium emphasis in compact interface and navigation text. | Inter |
| Geist Mono | `--font-mono` | webfont | 500 | Uppercase navigation links, CTAs, and technical labels. | IBM Plex Mono |

- **ABC Favorit Regular:** Regular-weight sans with tight negative headline tracking; use clear size contrast and sentence case.
- **ABC Favorit Medium:** Use sparingly for stronger emphasis and short labels, retaining the restrained sans feel.
- **Geist Mono:** Compact uppercase text with slight positive tracking; gives controls a precise, technical tone.

### Type scale — Golden Ratio (ratio ≈ 1.644, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1 | -0.02em | — | ABC Favorit Regular | Oversized hero or section headline when a single message needs emphasis. |
| h1 | 48px | 400 | 1.04 | -0.02em | — | ABC Favorit Regular | Primary hero headline and major section titles. |
| h2 | 24px | 400 | 1.17 | -0.02em | — | ABC Favorit Regular | Feature headings, testimonial titles, and secondary section headings. |
| body | 18px | 400 | 1.33 | -0.01em | — | ABC Favorit Regular | Hero description and explanatory product or feature copy. |
| caption | 15px | 400 | 1.33 | -0.01em | — | ABC Favorit Regular | Supporting card copy, interface captions, and small descriptive text. |
| link | 13px | 500 | 1.46 | 0.015em | uppercase | Geist Mono | Compact uppercase navigation and action links. |
| code | 13px | 500 | 1.46 | 0.015em | uppercase | Geist Mono | Technical labels and mono-style interface or product annotations. |

OpenType features in use: `"ss02", "ss06"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 11, 12, 16, 20, 24, 40, 80, 120 px.
- Section rhythm 80px · element gap 24px · card padding 24px · max content width 1200px.

Use a centered content area with a measured maximum width of 1200px. The hero is centered, with a narrow text measure, two adjacent actions, and a wide product image below. Alternate broad white content areas with full-width evergreen bands. Organize feature content into modular cards and image-led splits, keeping alignment clean and section spacing generous. The measured rhythm uses an 80px section gap and 24px element gap; overall density is comfortable rather than packed.

## Shape & elevation

- Radius: button `6px` · card `9px` · media `6px` · link `6px` · xs `6px` · sm `8px` · md `9px` · lg `10px` · xl `12px` · pill `9999px`
- Shadow `sm` (other): `rgba(32, 39, 44, 0.04) 0px 1.37px 2.66038px 0px`
- Shadow `sm-2` (other): `rgba(32, 39, 44, 0.04) 0px 1.18px 2.66038px 0px`
- Shadow `md` (card): `rgba(21, 38, 12, 0.55) 0px 0.602187px 0.602187px -1.16667px, rgba(21, 38, 12, 0.49) 0px 2.28853px 2.28853px -2.33333px, rgba(21, 38, 12, 0.24) 0px 10px 10px -3.5px`

Keep most sections and cards visually flat, using color blocks and whitespace instead of strong shadows. Cards have measured 9px rounding, while buttons and media use 6px rounding. Where depth appears, it is restrained and limited to subtle soft shadows or layered interface screenshots; avoid heavy borders and dramatic floating effects.

## Imagery

Treat product UI as the main visual asset: show crisp, detailed support-workflow screenshots inside pale green or warm off-white framing. Pair screenshots with small diagrams and interface tiles rather than relying on decorative photography. The page also uses a photographic monitor visual in a dark feature section and customer imagery in case-study content; frame these as supporting evidence, not the primary brand signature.

## Components

### Primary CTA

Vivid green fill (#1ad379), blue measured text (#0000ee), and 6px rounding; appears as the prominent BOOK A DEMO action.

### Secondary CTA

Outlined treatment beside the filled hero action, preserving the white canvas and green-accented control language.

### Product interface showcase

Wide, detailed support UI screenshot placed beneath centered hero copy, framed by a pale green product backdrop.

### Feature card

Modular product feature panel with a restrained 9px radius, 24px measured padding, and interface imagery or concise copy.

### Customer logo row

Compact horizontal customer marks between content blocks, providing proof without competing with the headline.

### Case-study card

A distinctive deep burgundy (#360003) testimonial surface with customer quote and supporting image; use as an isolated exception.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #1ad379 · text #0000ee · radius 6px · padding 8px 10px 7px 10px · 400 12px sans-serif
- **Link** (“TRY ARI Autonomous support, where your c”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“With Plain powering our support, we don'”): background #f9f6f1 · text #000000 · radius 9px · padding 24px · 400 12px sans-serif

## Do

- Use white as the default canvas and preserve generous open space.
- Reserve #1ad379 for primary actions and selective product emphasis.
- Use #0a2414 for dark bands and strong headline contrast.
- Set hero copy centrally above a wide product interface visual.
- Use pale and warm card surfaces to distinguish modular content.
- Pair large Favorit-style sans headlines with compact uppercase mono labels.

## Don't

- Do not make every section a dark or saturated color block.
- Do not use vivid green as a large page background.
- Do not crowd the hero with dense copy or controls.
- Do not add heavy shadows, thick borders, or sharp card corners.
- Do not treat burgundy and pink as core brand colors.
- Do not let decorative imagery overpower product UI.

## Agent prompt

Build a new B2B SaaS page in Plain’s visual style. Use Gallery White (#ffffff) as the spacious default canvas, Evergreen Ink (#0a2414) for selective full-width inverse sections and dark text, and Signal Green (#1ad379) for the main CTA and restrained emphasis. Keep headlines clean and lightly weighted, with ABC Favorit or an Inter-like substitute; use compact uppercase mono labels for navigation and technical annotations. Center the hero message over a wide, detailed product interface visual. Organize following content into comfortable, clearly separated sections with pale green or warm off-white modular cards, simple customer proof, and image-led feature blocks. Keep cards subtly rounded and nearly flat. Use burgundy or pink only as isolated illustration or case-study accents, never as the dominant palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | cta | Centered closing call to action with customer-support messaging and two adjacent actions. | Book a demo, Start for free | Centered heading, Green primary CTA, White canvas |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/plain-com