Evernote Design System

Overview

Evernote's relaunched marketing site presents a textbook case of Parchment restraint: a warm yellowish off-white canvas (#f4eee5) carries the full page, with near-black Figtree headlines and a single electric chartreuse (#94e130) appearing exactly twice — once as the primary hero CTA and once as a section illustration accent. Where Notion builds its brand around a cool slate-gray utility canvas and Bear (the macOS notes app) leans warm amber, Evernote plants its identity squarely in the physical notebook metaphor: the paper, the ink, and one highlighter stroke.

The hero makes the argument forcefully. A 72px Figtree headline — "Your second brain" — in near-black on the parchment floor, with the chartreuse button centered beneath it. No gradient, no photography in the hero band, no secondary color. The chartreuse reads as bold precisely because the desert of neutral tones around it is so wide. Below the fold, the system introduces illustration-card sections with lavender-pink, orange, and yellow accent surfaces (each used exactly once), which vary the page rhythm without introducing competing brand voltages.

Typography is Figtree across all display and heading tiers, with Inter appearing only for utility body copy and labels. The display moves are aggressive: 72px at weight 600 with -3.6px tracking for h1, 50px at -2.5px for h2. The body sits at 18px / 400 with +0.18px tracking — the only positive letter-spacing in the system, giving paragraph text an open, easy-to-read quality that reads against the tight display tracking.

Key Characteristics:

• Single chartreuse voltage ({colors.primary} — #94e130), layer 'brand', used in 2 background fills; zero text or border uses. The scarcity is the strategy.
• Warm parchment floor ({colors.surface-1} — #f4eee5, a clustered value that merged nearby gray-beige variants) carries the page identity; pure white (#ffffff) appears on individual cards lifted above it.
• Figtree at tight negative tracking (-3.6px at 72px, -2.5px at 50px) — display headlines carry the visual weight that color is not allowed to.
• Five structural neutrals (#141414, #262626, #4e4d4c, #737373, #a1a1a1) handle every text, border, and secondary-surface role.
• 5px dominant radius (52 occurrences) — unusually tight for consumer productivity, echoing physical paper's square edges.
• Four single-use illustration accent colors (chartreuse, lavender-pink, orange, yellow) appear in section cards below the fold, each once.
• No shadow system — elevation comes from the warm border-to-surface contrast between #a1a1a1 hairlines and the parchment floor.

Colors

Brand

• Chartreuse Primary ({colors.primary} — #94e130): frequency 2. Used as background only (2). Zero text or border occurrences. The only chromatic brand voltage in the system — the hero CTA fill and one section illustration. Its OKLCH chroma (0.211) is nearly as high as Cloudflare's orange; the scarcity is what makes it land rather than overwhelm.

Illustration Accents (single-use)

• Accent Pink ({colors.accent-pink} — #fad0f6): frequency 1. Background fill only. Used as the background of one section illustration card. A muted lavender-pink that reads as a secondary pastel in the illustration system.
• Accent Orange ({colors.accent-orange} — #ffa24d): frequency 1. Background fill only. Warm orange illustration-card accent — pairs with the brand chartreuse across the section carousel.
• Accent Yellow ({colors.accent-yellow} — #ffd919): frequency 1. Background fill only. A saturated chrome-yellow that completes the warm illustration trio.

Surface

• Canvas ({colors.canvas} — #ffffff): frequency 56 (bg: 32, text: 12, border: 12). The card and modal surface — pure white cards lift off the parchment floor without competing with it.
• Surface-1 ({colors.surface-1} — #f4eee5): frequency 12 (bg: 6, border: 6). The page floor — warm parchment. Wired as --color-bg-secondary and --color-stroke-cards.

Text & Structure

• Ink ({colors.ink} — #141414): frequency 600 — text (296), border (297). The dominant ink, wired as --color-text-primary. Not pure black — a very dark near-black that reads softer.
• Ink Pure ({colors.ink-pure} — #000000): frequency 350 — text (183), border (167). Pure black, used on navigation and high-contrast border elements.
• Ink Secondary ({colors.ink-secondary} — #262626): frequency 7. Wired as --color-text-secondary. The secondary text tone for supporting copy.
• Ink Tertiary ({colors.ink-tertiary} — #4e4d4c): frequency 50 — text (26), border (24). Wired as --color-text-tertiary. The caption and metadata tone.
• Ink Muted ({colors.ink-muted} — #737373): frequency 10 — text (5), border (5). Tertiary labels and decorative dividers.
• Hairline ({colors.hairline} — #a1a1a1): frequency 10 (border: 10). Wired as --color-stroke-buttons. The button and input border tone — the lightest structural gray that still reads on parchment.

Typography

Font Families

The system runs Figtree as the primary display, heading, and body face — a contemporary geometric sans-serif by Erik Kennedy, available as a Google Font. It carries every display moment: the 72px hero, 50px section headings, 24px card titles, and 18px body paragraphs. Inter appears as a secondary utility face at 16–20px for longer prose paragraphs and small labels. The two families share similar x-heights and proportions, so the visual boundary between them is subtle at body sizes.

Hierarchy

Principles

Display weight sits at 600 throughout — higher than Cloudflare (500) or Stripe (300), reflecting a consumer product's need for visual authority. The 72px hero at -3.6px tracking is the loudest single moment: at this size, negative tracking tightens the headline into a dense block that the chartreuse button beneath must work to interrupt. The positive tracking (+0.18px) on 18px body text is the counter-move — the body breathes wide while the display compresses. Inter appears only where Figtree would feel overwrought: long utility paragraphs and functional labels.

Note on Font Substitutes

Figtree is a free Google Font — no substitution needed for web projects. For print or Figma at display sizes, Plus Jakarta Sans (Google Fonts) is the closest alternative with comparable geometric warmth. Inter is already available everywhere.

Layout

Spacing System

• Base unit: 8px.
• Tokens: {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 24px · {spacing.lg} 32px · {spacing.xl} 40px · {spacing.2xl} 80px.
• Section vertical padding: 80px between major sections on the parchment canvas.
• Card padding: 32px on primary cards, 24px on compact feature cards.
• Hero padding: 40px vertical, 32px horizontal, centered within a max-content container.

Grid & Container

• Max content width: ~820px for display headlines and hero copy; ~1200px for feature cards.
• Hero: parchment canvas, centered headline + sub-copy + single CTA stack.
• Feature grid: 3-up card row for product feature sections, collapsing to 2-up on tablet.
• Illustration cards: full-bleed accent-colored panels (each a different accent hue) in alternating left-right layouts.

Rhythm

The page alternates between tight editorial (plain parchment with headline + body) and colored illustration (accent-panel sections introducing product screens). No major section uses a background gradient — the transition between bands is always a hard color stop from parchment to accent surface or back.

Elevation

The system has no shadow tier. Depth comes entirely from two sources: (1) hairline borders ({colors.hairline} — #a1a1a1) marking card edges, and (2) surface contrast between the warm parchment floor ({colors.surface-1} — #f4eee5) and white card surfaces ({colors.canvas} — #ffffff). The contrast is modest (~5% lightness in OKLCH) but perceptible on a warm background. No box-shadow values appear in the extraction — this is an entirely flat system.

Shapes

The radius scale is tight-utility, anchored at 5px:

• {rounded.none} 0px — bare structural lines and photo frames.
• {rounded.sm} 5px — dominant rounding (52 occurrences): buttons, input fields, small chip labels.
• {rounded.md} 10px — (30 occurrences): primary feature cards, content containers.
• {rounded.lg} 16px — (5 occurrences): featured panels, modal surfaces.
• {rounded.pill} 52px — pill-shaped CTA variants and tag badges.
• {rounded.full} 100% — circular avatar and icon elements.

The 5px base is notably smaller than the Notion (4-8px varies), Bear (10px+), or Google Keep (12px+) competitors. It signals a product that considers itself a structured workspace tool rather than a casual consumer app — physical paper has square corners; the rounding is the minimum needed to read as interactive.

Components

button-primary — The system's sole chromatic moment. Chartreuse {colors.primary} fill, near-black {colors.ink} text, {rounded.sm} 5px radius, 10×28px padding, 46px height. "Get started for free" is the canonical instance in the hero.

button-secondary — Transparent fill, near-black text, 1px {colors.hairline} (#a1a1a1) border, same radius and height as the primary. Used for "Log in" and secondary navigation CTAs.

top-nav — White {colors.canvas} surface, 60px height, Evernote wordmark and elephant logo at left, product links center, "Log in" + primary CTA at right.

nav-link — Transparent background, pure-black {colors.ink-pure} text at {typography.body-md}, 0×20px horizontal padding. The nav links use pure black rather than the near-black ink, adding subtle visual authority to the navigation row.

hero-heading — Near-black {colors.ink} text, {typography.display-xl} (72px / 600 / -3.6px tracking). The tightest-tracked element in the system.

section-heading — Same near-black ink, {typography.display-lg} (50px / 600 / -2.5px). The section-level h2 used throughout the below-fold content.

body-paragraph — Near-black text at {typography.body-lg} (18px / 400 / +0.18px tracking) — the hero sub-paragraph style. The positive tracking is the only instance of open tracking in the system.

body-paragraph-muted — Tertiary ink {colors.ink-tertiary} (#4e4d4c) at {typography.body-md} for secondary card copy and caption text.

card — White {colors.canvas} fill, {rounded.md} 10px radius, 32px padding, {colors.surface-1} border. The standard product-feature card, lifting off the parchment floor via hairline contrast.

card-parchment — Parchment {colors.surface-1} fill, same radius and padding as card. Used where a card should blend into the page floor rather than lift above it.

card-accent-pink, card-accent-orange — Single-use illustration panels in lavender-pink and orange respectively. Each holds a product screenshot or UI illustration.

text-input — White surface, near-black text, {rounded.sm} 5px radius, 8×12px padding, 40px height, {colors.hairline} border.

footer — Parchment {colors.surface-1} surface, tertiary-ink text, {typography.caption} (12px / 300). The footer drops to the parchment floor — no canvas-colored interruption.

Do's and Don'ts

Do reserve {colors.primary} (#94e130) for exactly one action per screen. Its impact depends entirely on its scarcity — two chartreuse elements on the same viewport look accidental, not designed.

Do use {colors.surface-1} (#f4eee5) — NOT pure white — as the page floor. White card surfaces lifted against the parchment gain visual depth that white-on-white cannot achieve.

Do maintain the negative tracking at display sizes: -3.6px at 72px and -2.5px at 50px. These values are extracted from the actual rendered page; rounding to -2px or -3px flattens the tight typographic block.

Do use {typography.body-lg} (+0.18px) for hero sub-paragraphs — the positive tracking on body text is the deliberate counterweight to the tight display.

Don't use {colors.hairline} (#a1a1a1) for body text or inline labels. It is a border-only token (10 occurrences, all border). For secondary text, use {colors.ink-tertiary} (#4e4d4c) or {colors.ink-muted} (#737373) instead.

Don't apply the illustration accent colors (chartreuse, lavender-pink, orange, yellow) to interactive elements (buttons, links, hover states). Each accent is an illustration-surface-only token; pulling one into button fills creates two competing CTAs.

Don't add a shadow to cards. The system is intentionally flat — adding a box-shadow behind {component.card} on a parchment floor reads as a foreign element from a different design system.

Don't run {typography.display-xl} below 60px. At 72px the -3.6px tracking creates the intended dense block; at 48–56px the same tracking reads as over-kerned rather than editorial.

Known Gaps

• Hover and focus states: only the resting state is captured; button hover, link underline behavior, and input focus rings are not exposed on the marketing surface.
• Dark mode: no dark variant is present on the marketing site; whether the Bending Spoons product has a dark-mode system is not captured here.
• Mobile layout: the 1440px-wide extraction captures desktop layout only; the mobile nav, responsive grid behavior, and touch-target sizing are not documented.
• Product UI components: the design tokens for the actual Evernote note editor (sidebar, note surface, toolbar) are not represented here; this file covers only the marketing surface.
• Animation and micro-interactions: the marketing site uses scroll-triggered section reveals; the spec captures end-state values only.
• Illustration system: the four accent colors (chartreuse, pink, orange, yellow) appear in illustration cards but the illustration style itself (3D renders vs. flat vs. photography) is not captured as a component pattern.