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

# Evergreen · Design System

> Editorial elegance with a distinctly green purpose

**Theme:** light · **Industry:** saas · **Source:** https://www.evergreen.so/ · **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._

Evergreen pairs oversized editorial headlines with a warm ivory canvas and hand-drawn foliage to make workplace recognition feel human and planet-minded. Clear product examples, proof points, and rounded black calls to action carry the long homepage from introduction to conversion.

## North star

Pair warm, spacious editorial layouts with crisp black typography and restrained botanical accents, keeping product proof easy to scan.

## Overview

The page is anchored by a warm, nearly ivory canvas (#fffff3), with pale stone bands (#edede2) separating major feature and conversion sections. Black (#000000) supplies headline contrast, outlines and the main filled CTA; muted charcoal (#333333) softens supporting copy. White (#ffffff) is reserved for product and testimonial panels, while fresh mint (#beedc0) appears as a small accent and within the illustrated interface and leaf motifs. Typography sets the character: an expressive IvyPresto-style serif for large editorial headlines, balanced by Rubik for navigation, body copy, labels and controls. Centered hero messaging gives way to alternating two-column product explanations, compact statistics, logos, and testimonials. Generous vertical breathing room keeps this long page approachable. Botanical line drawings, portrait cutouts and interface mockups add personality without displacing the restrained palette. Borders are visible and crisp; elevation stays mostly flat, with rounded pills used selectively for actions and metrics.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Evergreen Ink | `#000000` | `--color-evergreen-ink` | brand | Primary display and navigation text, strong outlines, the announcement strip, and the filled trial CTA. |
| Warm Ivory | `#fffff3` | `--color-warm-ivory` | surface | Dominant page canvas across the hero, proof points, feature content, and footer. |
| Panel White | `#ffffff` | `--color-panel-white` | surface | Clean contrast inside product mockups, quote cards, and selected button or link surfaces. |
| Soft Stone | `#edede2` | `--color-soft-stone` | surface | Broad alternate background bands behind recognition features and the pricing and conversion section. |
| Quiet Charcoal | `#333333` | `--color-quiet-charcoal` | neutral | Secondary copy and muted link text; also appears in component text where softer contrast is needed. |
| Seedling Mint | `#beedc0` | `--color-seedling-mint` | accent | Small green highlights, rounded statistic markers, and foliage or interface illustrations rather than a page-wide fill. |

### Semantic aliases

`--color-canvas` → `#fffff3` (Warm Ivory) · `--color-surface` → `#ffffff` (Panel White) · `--color-surface-2` → `#edede2` (Soft Stone) · `--color-text` → `#000000` (Evergreen Ink) · `--color-text-muted` → `#333333` (Quiet Charcoal) · `--color-border` → `#000000` (Evergreen Ink) · `--color-accent` → `#beedc0` (Seedling Mint)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fffff3` | 20.85:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#edede2` | 17.81:1 | AAA |
| `#333333` | `#fffff3` | 12.54:1 | AAA |
| `#333333` | `#ffffff` | 12.63:1 | AAA |
| `#333333` | `#edede2` | 10.72:1 | AAA |
| `#beedc0` | `#fffff3` | 1.3:1 | fail |
| `#beedc0` | `#ffffff` | 1.31:1 | fail |
| `#beedc0` | `#edede2` | 1.11:1 | fail |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Rubik | `--font-body` | webfont | 400, 600, 500, 700 | Navigation, body copy, supporting headings, labels, buttons, and links. | Rubik |
| ivypresto-headline | `--font-display` | webfont | 600 | Display and primary editorial headlines, especially the centered hero and major feature titles. | Bodoni Moda |

- **Rubik:** Use a clean, friendly sans with mostly regular weights and selective medium or bold emphasis; keep case natural and tracking neutral.
- **ivypresto-headline:** Use a refined high-contrast serif at semibold weight for large headlines; sentence case, with neutral tracking.

### Type scale — Perfect Fourth (ratio ≈ 1.325, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 73.5px | 600 | 1.49 | 0 | — | ivypresto-headline | Oversized editorial hero headline and other prominent brand statements. |
| h1 | 54px | 600 | 1.48 | 0 | — | ivypresto-headline | Primary hero and top-level section headlines. |
| h2 | 30px | 600 | 1.54 | 0 | — | Rubik | Major feature, pricing, and conversion headings in Rubik. |
| h3 | 27.5px | 600 | 1.54 | 0 | — | Rubik | Supporting feature headings and card-level section titles. |
| h4 | 23.5px | 400 | 1.41 | 0 | — | Rubik | Secondary explanatory headings and short supporting statements. |
| body | 18px | 400 | 1 | 0 | — | Rubik | Main descriptive copy, product explanations, and proof-point captions. |
| caption | 17.5px | 400 | 1.7 | 0 | — | Rubik | Testimonial attribution, small print, and supporting detail. |
| button | 21px | 700 | 1.7 | 0 | — | Rubik | Prominent trial and tree-planting action labels. |
| nav | 20.5px | 500 | 1 | 0 | — | Rubik | Top navigation labels and footer navigation group links. |
| link | 18px | 400 | 1 | 0 | — | Rubik | Inline links, supporting actions, and footer destinations. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 5, 10, 12, 14, 17, 18, 19, 20, 22, 24, 26, 29, 35, 36, 48 px.
- Section rhythm 72px · element gap — · card padding 35px · max content width 1296px.

Use a centered, comfortable-width page shell, with the measured maximum width of 1296px. The hero is centered and spacious; below it, shift between broad single-column proof sections and two-column product-feature layouts. Keep statistics in a concise horizontal row and testimonials in paired cards. Major section transitions are generous, using the measured 72px section gap as the rhythm reference; dense content belongs inside product mockups rather than the surrounding page. Alternate ivory and pale stone bands to distinguish long-page chapters.

## Shape & elevation

- Radius: button `9999px` · input `7px` · card `50%` · xs `10px` · pill `9999px`
- No box shadows measured: the page is flat.

The page is mostly flat: section bands, outlines, and clean panel contrast do the structural work instead of shadows. Use crisp black borders on cards and mockups, with white interiors against ivory or stone. Reserve rounded shapes for pill CTAs, metric chips, portrait cutouts, and illustration details; avoid adding unmeasured shadow effects.

## Imagery

Mix product-interface mockups, small portrait cutouts, partner logos, and hand-drawn foliage. Keep portraits framed as part of recognition examples rather than as oversized lifestyle photography. Botanical leaves use thin dark outlines and mint fills, often extending behind cards or peeking from section edges. Interface imagery is compact, legible, and contained in white bordered panels; the overall treatment is flat illustration rather than 3D or video.

## Components

### Announcement strip

A black full-width bar above the navigation with centered white announcement copy and an underlined inline link.

### Primary trial CTA

A black pill-shaped button with white, bold Rubik text; place it centrally in hero and conversion areas.

### Outlined navigation action

A white or transparent rounded button with a crisp black outline for the Schedule a demo action.

### Recognition mockup

A bordered, mostly white product panel showing Slack or Teams integration and compact peer-recognition entries; foliage can frame the panel.

### Metric chip

Short headline statistic inside a mint rounded capsule, paired with a small explanatory caption beneath.

### Testimonial card

A white, black-outlined quote card with portrait, compact attribution, and leaf illustrations placed around its edges.

### Newsletter signup

Footer email field with black outline and an adjacent black Plant a tree button, followed by compact link columns.

### Measured component styles

- **Primary button** (“Start 14 Day Trial”): background #000000 · text #333333 · radius 40.5px · padding 14.4px 26.4px · 400 12px Rubik
- **Secondary button** (“Schedule a demo”): transparent background · text #000000 · border 2px solid #000000 · radius 30px · padding 2.4px 21.6px · 400 12px Rubik
- **Link** (“Home”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px Rubik
- **Input**: transparent background · text #000000 · border 2px solid #000000 · radius 7px · padding 0px 18.9px · 400 21px Rubik
- **Card** (““Evergreen brings positive feedback into”): transparent background · text #333333 · border 2px solid #000000 · radius 10px · padding 72px 16.8px 36px 16.8px · 400 12px Rubik
- **Navigation item** (“ESG”): transparent background · text #000000 · radius 0px · padding 0px · 500 20.25px Rubik

## Do

- Use Warm Ivory #fffff3 as the main canvas.
- Set major headlines in an editorial serif.
- Use Rubik for navigation, body copy, and controls.
- Separate long-page chapters with Soft Stone #edede2.
- Keep botanical mint accents selective and illustrative.
- Use crisp black borders and high-contrast CTAs.

## Don't

- Do not replace the warm ivory canvas with pure white.
- Do not use mint as a dominant full-page background.
- Do not add gradients, glossy effects, or heavy shadows.
- Do not make every section a centered card grid.
- Do not crowd supporting copy around oversized headlines.
- Do not let illustrations obscure product content.

## Agent prompt

Build a new page in Evergreen’s visual style using Warm Ivory #fffff3 as the primary canvas and Soft Stone #edede2 for occasional full-width section bands. Use Evergreen Ink #000000 for strong headlines, outlines, and filled CTAs; use Quiet Charcoal #333333 for softer supporting copy, Panel White #ffffff for mockup interiors, and Seedling Mint #beedc0 sparingly in metric chips or foliage. Pair an expressive high-contrast serif for display headings with Rubik for navigation, body, labels, and controls. Keep the main message spacious and editorial, then alternate concise proof sections with two-column product explanations. Use hand-drawn leaf motifs and compact product-interface panels as supporting imagery. Favor flat surfaces, visible borders, generous section breathing room, and rounded pill actions; avoid gradients and heavy shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered editorial headline, supporting paragraph, trial CTA, and wide product mockup. | primary trial action, product proof below fold | serif headline, black pill CTA, foliage-framed mockup |
| 2 | feature-grid | Centered section headline above four evenly spaced statistics. | quick-scan proof points, linked statistic references | mint metric chips, short captions, ivory canvas |
| 3 | stats | Two-column row of four compact statistics on the shared canvas. | scannable metrics, source links | minimal statistic captions, open spacing |
| 4 | logo-cloud | Centered trust statement above a row of customer marks. | social proof, brand recognition | small customer logos, monochrome presentation |
| 5 | testimonials | Two quote cards in columns, each surrounded by portraits and leaf illustrations. | peer validation, named attribution | outlined white cards, portrait cutouts, foliage framing |
| 6 | reviews | Centered rating badge and review stars beneath customer proof. | third-party trust signal, rating summary | compact review mark, outlined stars |
| 7 | gallery | Centered strip of small supporting visual assets. | visual proof, lightweight transition | small image row, unboxed presentation |
| 8 | feature-split | Stone band with product example on one side and explanatory feature content on the other. | feature explanation, product-context proof | outlined mockup, botanical band decoration, supporting metrics |
| 9 | feature-split | Alternating two-column feature content with interface imagery and explanatory copy. | reporting benefits, feature-to-outcome mapping | dashboard mockups, serif feature headings, small green markers |
| 10 | gallery | A compact strip of supporting product or brand imagery on the ivory canvas. | visual reinforcement, transition to conversion | small image set, unboxed presentation |
| 11 | pricing | Stone band with three reassurance points above a centered pricing message and CTA. | price disclosure, trial conversion, risk reassurance | centered serif heading, black pill CTA, compact reassurance icons |
| 12 | footer | Ivory footer with brand and newsletter on the left, link columns to the right. | newsletter signup, site navigation | outlined email input, black submit button, compact link columns |

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