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

# Evernote · Design System

> A calm canvas for ideas, tasks, and time.

**Theme:** light · **Industry:** productivity · **Source:** https://evernote.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._

Evernote’s homepage pairs warm, paper-like neutrals with bold typography and layered product-interface imagery. Spacious feature sections and restrained green accents make the productivity message feel approachable and clear.

## North star

Use warm paper-like surfaces, confident Figtree headlines, and layered product imagery to make productivity feel calm and tangible.

## Overview

The page is built on a warm off-white canvas, with pale beige feature panels and a single charcoal band creating gentle section contrast. Near-black headings carry the message, while muted gray supports explanatory copy; vivid lime is reserved for occasional emphasis and CTA moments. Figtree gives large headings a rounded, compact presence with tight tracking, while Inter keeps supporting text straightforward and legible. The layout alternates centered introductory and promotional sections with broad, rounded feature panels that pair copy and product imagery. Product screenshots, notes, task overlays, and photography are arranged as layered compositions, giving the software tangible context without turning the page into a dense interface. Generous whitespace separates sections and card groups. Cards stay mostly flat, relying on pale surfaces, subtle borders, and overlap rather than pronounced shadows. The result feels editorial and calm, while still making the product’s capabilities immediately visible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Paper Canvas | `#f9f6f2` | `--color-paper-canvas` | surface | Main page canvas behind the navigation, hero, feature sections, and footer. |
| Evernote Ink | `#141414` | `--color-evernote-ink` | brand | Primary heading and body text, dark CTA fills, and prominent navigation or link text. |
| Card White | `#ffffff` | `--color-card-white` | surface | Template cards and white product-interface panels layered over warm backgrounds. |
| Soft Graphite | `#4e4d4c` | `--color-soft-graphite` | neutral | Muted descriptive copy and secondary text where softer contrast than headings is needed. |
| Oat Section | `#f4eee5` | `--color-oat-section` | surface | Alternate beige section background, notably the AI tools feature band and selected content panels. |
| Quiet Divider | `#e7e7e7` | `--color-quiet-divider` | semantic | Subtle card and section borders that define edges without heavy elevation. |
| Charcoal Band | `#262626` | `--color-charcoal-band` | surface | Dark full-width productivity promotion band, with light text and decorative imagery. |
| Signal Lime | `#94e130` | `--color-signal-lime` | accent | Occasional bright CTA and emphasis; keep scarce against the warm neutral palette. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Appears in selected link, navigation, and button text; not the dominant text color. |
| Control Gray | `#a1a1a1` | `--color-control-gray` | semantic | Measured button or control stroke detail; use only for restrained interface outlines. |
| Footer Gray | `#737373` | `--color-footer-gray` | neutral | Small secondary footer copy and low-emphasis supporting text. |

### Semantic aliases

`--color-canvas` → `#f9f6f2` (Paper Canvas) · `--color-surface` → `#ffffff` (Card White) · `--color-surface-2` → `#f4eee5` (Oat Section) · `--color-surface-3` → `#262626` (Charcoal Band) · `--color-text` → `#141414` (Evernote Ink) · `--color-text-muted` → `#4e4d4c` (Soft Graphite) · `--color-text-subtle` → `#262626` (Charcoal Band) · `--color-border` → `#e7e7e7` (Quiet Divider) · `--color-accent` → `#94e130` (Signal Lime) · `--color-on-accent` → `#ffffff` (Card White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#141414` | `#f9f6f2` | 17.1:1 | AAA |
| `#141414` | `#ffffff` | 18.42:1 | AAA |
| `#141414` | `#f4eee5` | 15.97:1 | AAA |
| `#141414` | `#262626` | 1.22:1 | fail |
| `#4e4d4c` | `#f9f6f2` | 7.83:1 | AAA |
| `#4e4d4c` | `#ffffff` | 8.43:1 | AAA |
| `#4e4d4c` | `#f4eee5` | 7.31:1 | AAA |
| `#4e4d4c` | `#262626` | 1.79:1 | fail |
| `#262626` | `#f9f6f2` | 14.05:1 | AAA |
| `#262626` | `#ffffff` | 15.13:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter | `--font-body` | webfont | 400, 600 | Body copy, supporting descriptions, and selected secondary headings. | Roboto |
| Figtree | `--font-display` | webfont | 600, 400, 300, 500 | Display and section headings, navigation, links, captions, and much of the interface copy. | Nunito Sans |

- **Inter:** Use regular body weights for clear reading; measured page also uses a light caption and regular-weight h4.
- **Figtree:** Headings are semibold with tight negative tracking; navigation is medium, while links remain readable and untransformed.

### Type scale — Perfect Fourth (ratio ≈ 1.351, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 600 | 1 | -0.05em | — | Figtree | Large hero or campaign headline when a display scale is needed. |
| h1 | 50px | 600 | 1.1 | -0.05em | — | Figtree | Primary hero title, centered above the lead description. |
| h2 | 40px | 600 | 1.1 | -0.03em | — | Figtree | Major feature and promotional section headings. |
| h3 | 24px | 600 | 1.1 | 0 | — | Figtree | Card titles and compact feature headings. |
| h4 | 20px | 400 | 1.5 | -0.05em | — | Inter | Secondary explanatory headings within content. |
| body | 16px | 400 | 1.3 | 0 | — | Inter | Standard feature descriptions and supporting paragraphs. |
| caption | 12px | 300 | 1.2 | 0 | — | Figtree | Small metadata, labels, and interface annotations. |
| nav | 16px | 500 | 1.5 | 0 | — | Figtree | Top-level navigation labels and menu items. |
| link | 18px | 400 | 1.6 | 0.01em | — | Figtree | Text links and inline calls to action. |

## Spacing & layout

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

Use a centered desktop content area with a measured maximum width of 1024px, while section backgrounds can span the viewport. The hero and selected promotional blocks center their headings and copy; feature panels switch to left-aligned text beside product visuals. The page alternates feature splits, card collections, and broad section bands with comfortable breathing room. The measured spacing system uses an 8px base, a 40px section gap, and 16px element gap; preserve this generous, comfortable density rather than packing content tightly.

## Shape & elevation

- Radius: button `5px` · card `10px` · nav `10px` · xs `5px` · sm `10px` · md `16px` · pill `9999px`
- Shadow `hairline` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The page is mostly flat: surfaces are distinguished by warm background shifts and fine borders rather than visible shadows. White cards and floating product windows can overlap to create depth, with rounded edges and carefully contained UI details. Keep elevation restrained and avoid heavy drop shadows.

## Imagery

Use product-interface mockups as the primary visual language: notes, task lists, calendars, search results, and collaboration screens overlap in clean, floating layers. Mix in occasional lifestyle photography within those compositions, but keep screenshots readable and framed by warm neutral panels. Small colorful UI details may appear inside the product imagery; treat them as product content rather than core brand colors.

## Components

### Top navigation

Logo and text links sit on the warm canvas; measured navigation uses Figtree at 16px, with a dark rounded free-start button.

### Hero CTA

Centered hero copy leads to a dark rounded primary button, followed by a compact existing-account link.

### Template cards

White cards use a measured 10px radius and 32px padding, with concise titles, icons, and text links.

### Feature split panel

Warm rounded panel pairs an image or layered product UI with a left-aligned title, description, and dark CTA.

### Dark promotion band

Charcoal background centers the productivity headline and copy; a lime CTA stands out against the dark section.

### Download cards

Three desktop, mobile, and browser-extension cards group short descriptions with platform or browser download links.

### Footer link columns

A quiet canvas supports the logo, language selector, social icons, and several compact columns of text links.

### Measured component styles

- **Primary button** (“Discover more”): background #94e130 · text #ffffff · radius 5px · padding 16px 40px · 400 16px Figtree
- **Secondary button** (“Try it for free”): background #141414 · text #141414 · radius 5px · padding 10px 24px · 400 16px Figtree
- **Link** (“Template Get further faster with ready-m”): transparent background · text #141414 · radius 0px · padding 0px · 400 16px Figtree
- **Card** (“Template Get further faster with ready-m”): background #ffffff · text #141414 · radius 10px · padding 32px · 400 16px Figtree · shadow rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0
- **Navigation item** (“AI Features Explore Plans Enterprise Wha”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Figtree

## Do

- Keep the page canvas warm and paper-like.
- Use Figtree for bold, tightly tracked headings.
- Use Inter for readable supporting paragraphs.
- Reserve lime for a small number of high-attention moments.
- Pair feature copy with recognizable product-interface imagery.
- Separate sections with whitespace and gentle surface changes.

## Don't

- Do not make every section a different saturated color.
- Do not use heavy shadows to lift ordinary cards.
- Do not crowd the feature panels with dense copy.
- Do not turn product UI colors into the overall brand palette.
- Do not center every feature; preserve the page’s left-aligned split sections.
- Do not use oversized decorative gradients as the dominant visual.

## Agent prompt

Build a new productivity SaaS page in Evernote’s calm, paper-like visual style. Use Paper Canvas (#f9f6f2) as the main background, Oat Section (#f4eee5) for occasional section panels, Evernote Ink (#141414) for headings and dark CTAs, and Signal Lime (#94e130) sparingly for emphasis. Set large, tightly tracked headlines in Figtree and supporting copy in Inter. Use a centered content area aligned to the measured 1024px maximum width, with generous section breathing room and clear alternation between centered introductions and left-aligned feature splits. Make the product tangible through readable, layered note and task interface mockups, optionally mixed with lifestyle photography. Keep cards mostly flat, using Card White (#ffffff), subtle Quiet Divider (#e7e7e7) borders, and restrained overlap instead of heavy shadows. Include compact, well-organized navigation and footer links.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Warm inset hero below the top navigation, centered heading and copy, CTA, account link, and product mockup. | primary free-start CTA, existing-account login | centered headline, layered product UI, dark button |
| 2 | feature-grid | Centered section heading above a horizontally arranged set of feature cards and carousel controls. | feature discovery, carousel navigation | white cards, compact feature icons, text links |
| 3 | cta | Full-width charcoal band with centered promotional copy and a bright CTA. | feature promotion, learn more CTA | dark section band, centered content, lime button |
| 4 | feature-split | Rounded beige panel with product imagery on one side and left-aligned copy on the other. | feature explanation, try for free CTA | split composition, overlapping note UI, soft neutral panel |
| 5 | feature-split | Wide rounded panel combines search-result mockups and copy in a side-by-side composition. | search discovery, free-trial CTA | search interface mockup, image layering, neutral panel |
| 6 | feature-split | Full-bleed beige section, centered heading and intro, followed by an AI tool interface visual. | AI feature exploration, try for free CTA | centered introduction, wide product UI, warm section band |
| 7 | feature-split | Rounded feature panel with collaboration imagery and copy arranged side by side. | collaboration feature, free-trial CTA | team photography, shared note overlay, split content |
| 8 | feature-split | Rounded panel pairs a short feature description with layered note and capture examples. | capture workflow, save ideas CTA | paper-note imagery, product UI layers, soft panel |
| 9 | product-grid | Centered section heading above three platform cards in a desktop, mobile, and browser-extension grid. | platform selection, download links | three-card grid, platform badges, compact descriptions |
| 10 | footer | Logo and language selector above a multi-column link directory, with social links and legal details below. | site navigation, language selection | four link columns, social icons, legal links |

## Source CSS custom properties (selected)

```css
--color-text-primary: #141414;
--color-text-secondary: #262626;
--color-text-tertiary: #4E4D4C;
--color-bg-primary: #F9F6F2;
--color-bg-secondary: #F4EEE5;
--color-stroke-buttons: #A1A1A1;
--color-stroke-cards: #E7E7E7;
--tw-border-opacity: 1;
--tw-bg-opacity: 1;
--tw-text-opacity: 1;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
```

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