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

# Mode · Design System

> Editorial typography meets vivid, data-led design

**Theme:** dark · **Industry:** saas · **Source:** https://mode.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._

Mode’s homepage pairs a deep evergreen canvas with vivid lime panels and expressive serif headlines. Spacious sections, product visuals, customer proof, and clear calls to action make the analytics platform feel both human and capable.

## North star

Anchor every section in evergreen, then use oversized editorial type and intentional lime panels to make the product story easy to scan.

## Overview

The page is built around a deep evergreen canvas (#043f2e), with warm pale surfaces and bright lime blocks providing strong contrast and a distinctive visual signature. Grenette supplies oversized, editorial serif headlines; Graphik keeps navigation, explanatory copy, and controls crisp and functional. The hero combines headline lettering with a photograph and a compact analytics card, then later sections alternate centered statements, paired feature panels, product artwork, customer logos, testimonials, and calls to action. Rounded lime panels often carry dark-green text, while the page’s broad green fields keep separate content blocks visually connected. Layout is spacious rather than dense, with a measured 1200px page maximum and 120px section gap. Product illustrations use extra colors, but the recurring brand identity comes from the evergreen-and-lime palette. Buttons stay simple, with thin borders and compact corner rounding.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Evergreen Canvas | `#043f2e` | `--color-evergreen-canvas` | brand | Dominant page canvas and dark-green text on pale or lime panels; also used for navigation and primary button backgrounds. |
| Warm Parchment | `#eef2e3` | `--color-warm-parchment` | surface | Pale text and light panel surface; used for outlined demo buttons, feature panels, and selected footer elements. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Distinct light footer canvas near the page end; not the main site canvas. |
| Forest Green | `#2a6f2b` | `--color-forest-green` | brand | Customer proof section band and dark green cards that contrast with lime testimonial panels. |
| Citrus Lime | `#c8f169` | `--color-citrus-lime` | accent | Signature bright panels, headline backplates, links, borders, and text on dark primary buttons. |
| Leaf Green | `#78c51c` | `--color-leaf-green` | accent | Bright green band behind the demo and product feature panels; secondary to the evergreen and citrus pairing. |

### Semantic aliases

`--color-canvas` → `#043f2e` (Evergreen Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#eef2e3` (Warm Parchment) · `--color-text` → `#eef2e3` (Warm Parchment) · `--color-text-muted` → `#043f2e` (Evergreen Canvas) · `--color-border` → `#c8f169` (Citrus Lime) · `--color-accent` → `#043f2e` (Evergreen Canvas) · `--color-accent-2` → `#2a6f2b` (Forest Green) · `--color-accent-3` → `#c8f169` (Citrus Lime) · `--color-on-accent` → `#c8f169` (Citrus Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eef2e3` | `#043f2e` | 10.51:1 | AAA |
| `#eef2e3` | `#ffffff` | 1.14:1 | fail |
| `#043f2e` | `#ffffff` | 11.96:1 | AAA |
| `#043f2e` | `#eef2e3` | 10.51:1 | AAA |
| `#043f2e` | `#ffffff` | 11.96:1 | AAA |
| `#043f2e` | `#eef2e3` | 10.51:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Graphik | `--font-body` | webfont | 400, 500, 600 | Navigation, body copy, buttons, links, and small uppercase labels. | Inter |
| Grenette | `--font-display` | webfont | 400 | Display headlines and prominent editorial statements. | Cormorant Garamond |

- **Graphik:** Functional sans with measured 400–600 weights; use compact, clear copy and uppercase, letter-spaced eyebrow labels.
- **Grenette:** Regular-weight serif; headlines are large, tightly tracked, and sentence case rather than all caps.

### Type scale — Augmented Fourth (ratio ≈ 1.398, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 0.9 | -0.02em | — | Grenette | Oversized editorial statement or hero display headline. |
| h1 | 72px | 400 | 1.1 | -0.02em | — | Grenette | Primary hero headline. |
| h2 | 70px | 400 | 1.1 | -0.03em | — | Grenette | Major section headings and centered statements. |
| h3 | 56px | 400 | 1.2 | -0.02em | — | Grenette | Feature and testimonial panel headings. |
| h4 | 36px | 400 | 1.03 | -0.01em | — | Graphik | Smaller card or supporting section headings. |
| body | 18px | 400 | 1.3 | 0 | — | Graphik | Explanatory paragraphs and product descriptions. |
| caption | 14px | 500 | 1.44 | 0 | — | Graphik | Small supporting labels and attribution details. |
| button | 14px | 500 | 1.1 | 0 | — | Graphik | Primary and secondary call-to-action labels. |
| nav | 14px | 500 | 1.44 | 0 | — | Graphik | Header navigation labels. |
| link | 14px | 600 | 1.3 | 0 | — | Graphik | Inline and standalone navigation links. |
| eyebrow | 14px | 500 | 1.2 | 0.06em | uppercase | Graphik | Uppercase section labels and demo markers. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 2, 10, 12, 15, 16, 17, 18, 20, 22, 24, 30, 32, 36, 40, 56, 120 px.
- Section rhythm 120px · element gap 16px · card padding — · max content width 1200px.

Use a measured 1200px maximum page width with a spacious vertical rhythm and a measured 120px section gap. The opening hero is left-aligned and pairs a large headline composition with media and supporting copy. Follow it with centered statements, three-column feature content, and a long product-artwork region. Later, change the background in broad horizontal bands for customer proof, testimonials, and product panels. Use two-column compositions where imagery or product modules need room; keep text blocks short and easy to scan.

## Shape & elevation

- Radius: button `4px` · card `16px` · link `16px` · xs `4px` · sm `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease-in-out` on interactive elements.

The visual system is mostly flat: broad color fields, crisp panel edges, and no measured shadows. Separate content through background bands and contrasting fills rather than floating cards. Buttons use thin borders and restrained corner rounding; larger feature and testimonial panels use more pronounced rounding. Layering comes from the stepped headline backplates, overlapping media, and illustrations.

## Imagery

The hero uses a candid workplace photograph alongside an analytics graphic, presenting both people and product. Further down, product-interface illustrations and a layered stack graphic explain the platform; their pastel and varied colors belong to the artwork, not the core brand palette. Customer logos and a portrait support the proof section. Favor contained, rounded image panels and clear separation from the evergreen canvas.

## Components

### Navigation bar

Pale rounded header panel over the evergreen canvas, with a wordmark, compact Graphik links, sign-in control, and lime-accented primary action.

### Announcement strip

A narrow citrus-lime band at the top with centered update copy, an underlined learn-more link, and a close control.

### Hero composition

Large Grenette headline sits on stepped lime backplates; pair workplace photography and an analytics visual with short copy and two calls to action.

### Feature panels

Two-column rounded panels contrast warm pale and citrus-lime surfaces, combining Grenette titles, concise Graphik copy, and product-interface illustrations.

### Customer proof

Forest-green band with a centered serif heading, customer logo grid, and a lime testimonial panel with portrait and attribution.

### Demo and product cards

Bright leaf-green section containing a dark green demo panel and a second product-story panel with multiple rounded lime feature tiles.

### Call-to-action buttons

Compact rounded rectangles with thin borders; pair evergreen fills and citrus-lime text with pale filled or pale outlined alternatives.

### Footer

Multi-column link directory with a large lime wordmark, compact Graphik labels, and legal links on a distinct light canvas.

### Measured component styles

- **Primary button** (“Try for free”): background #043f2e · text #c8f169 · border 1px solid #043f2e · radius 4px · padding 17px 30px 16px 30px · 400 16px Graphik
- **Secondary button** (“Request demo”): transparent background · text #eef2e3 · border 1px solid #eef2e3 · radius 4px · padding 17px 30px 16px 30px · 500 14px Graphik
- **Link** (“Ad hoc analysis”): background #c8f169 · text #043f2e · radius 16px · padding 16px · 500 16px Graphik
- **Card** (“MODERN BUSINESS INTELLIGENCE Beyond BI a”): background #2a6f2b · text #000000 · radius 16px · padding 0px · 400 16px Times New Roman
- **Navigation item** (“Why Mode”): transparent background · text #043f2e · radius 0px · padding 0px · 500 14px Graphik

## Do

- Keep evergreen as the dominant page canvas.
- Use citrus lime for strong, deliberate focal panels.
- Set major headlines in an expressive serif.
- Use Graphik-style sans typography for functional copy.
- Alternate centered statements with structured product panels.
- Keep calls to action simple and clearly contrasted.

## Don't

- Do not replace the green palette with generic blue SaaS colors.
- Do not make every section a white card.
- Do not use heavy shadows to create hierarchy.
- Do not crowd the spacious section rhythm.
- Do not mistake illustration colors for core brand colors.
- Do not set every headline in the sans-serif face.

## Agent prompt

Build a SaaS page using the Mode visual language. Make Evergreen Canvas (#043f2e) the dominant background, and use Citrus Lime (#c8f169) for headline backplates, feature panels, and high-contrast accents. Reserve Forest Green (#2a6f2b) and Leaf Green (#78c51c) for distinct section bands; use Warm Parchment (#eef2e3) for light panels and Clean White (#ffffff) sparingly. Pair Grenette-style editorial serif headlines with Graphik-style functional sans copy. Use a spacious 1200px maximum layout and 120px section rhythm, alternating centered statements, paired product panels, proof, and calls to action. Keep panels rounded, edges crisp, and elevation flat. Product imagery may have its own colors, but the surrounding interface should retain the measured brand palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Left-aligned hero with stepped headline backplates, workplace photo, analytics graphic, copy, and paired actions. | Free-trial action, Demo request, Product value summary | Serif headline, Lime headline panels, Rounded media, Dual buttons |
| 2 | feature-split | Centered serif heading and short supporting statement on the evergreen canvas. | Value proposition, Supporting explanation | Centered alignment, Editorial heading, Open background |
| 3 | feature-grid | Three-column feature content expressed through large paired pale and lime rounded panels. | Feature explanation, Product examples | Contrasting panel fills, Interface illustrations, Serif card headings |
| 4 | integrations | Centered heading, supporting text, and two links on the evergreen background. | Platform overview, Product exploration | Centered composition, Serif heading, Text links |
| 5 | product-showcase | Long, open evergreen section with centered stacked product artwork. | Concept visualization, Product capability context | Layered illustration, Generous negative space |
| 6 | logo-cloud | Centered title above a two-row logo grid on a forest-green band. | Customer credibility, Logo recognition | Monochrome logo treatment, Centered serif heading |
| 7 | testimonials | Two-column customer proof area with a broad lime quote card and portrait. | Customer endorsement, Named attribution | Lime quote panel, Portrait image, Oversized quotation mark |
| 8 | cta | Single-column demo invitation within a bright leaf-green section band. | Weekly group demo, Seat reservation | Dark green panel, Product preview, Compact action |
| 9 | feature-grid | Two-column product story with copy on one side and a cluster of feature tiles on the other. | Capability overview, Platform link | Dark green container, Lime tiles, Editorial title |
| 10 | cta | Two-column closing call to action on evergreen, with oversized lime brand lettering and copy. | Free-trial action, Demo request | Oversized lime graphic, Paired buttons, High contrast |
| 11 | footer | Three-column link directory on a distinct white canvas, with a prominent wordmark. | Grouped site navigation, Legal links, Social links | Multi-column lists, Compact sans labels, Brand mark |

## Source CSS custom properties (selected)

```css
--fonts-serif: Grenette;
--fonts-sans: Graphik;
--colors-white: #FCFCFC;
--colors-g1: #EEF2E3;
--colors-g2: #C8F169;
--colors-g3: #78C51C;
--colors-g4: #2A6F2B;
--colors-g5: #043F2E;
--colors-b1: #BBD1FB;
--colors-b2: #7EA6F3;
--colors-b3: #3166CE;
--colors-p1: #CECAFA;
--colors-p2: #A68FFF;
--colors-p3: #6A4BC5;
--colors-r1: #FFBBBE;
--colors-r2: #FB848B;
--colors-r3: #DB4049;
--colors-gray1: #F8F8F8;
--colors-gray2: #F3F3F3;
--colors-gray3: #E7E7E6;
--colors-gray4: #DFDFDE;
--colors-gray5: #CECFCD;
--colors-gray6: #B7B8B5;
--colors-gray7: #80827D;
--colors-gray8: #6B6D68;
--colors-gray9: #5A5C58;
--colors-gray10: #242423;
--fontSizes-h0: 120px;
--fontSizes-h1: 72px;
--fontSizes-h2: 56px;
--fontSizes-h3: 36px;
--fontSizes-h4: 24px;
--fontSizes-h4Mobile: 20px;
--fontSizes-p1: 18px;
--fontSizes-p2: 16px;
--fontSizes-p3: 14px;
--fontSizes-p4: 12px;
--fontSizes-quote: 36px;
--fontSizes-quoteMobile: 20px;
--letterSpacings-1: 0.01em;
```

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