# Evernote — Style Reference
> Calm workspace, grounded neutrals
**Theme:** light
Evernote projects a calm, confident workspace aesthetic with an off-white canvas and muted neutral surfaces. Typography is grounded and readable, while a single vibrant green accent provides functional punctuation for primary actions and key highlights. Interaction elements are lightweight but clearly defined, emphasizing clarity and focus over heavy ornamentation.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas | `#f9f6f2` | `--color-canvas` | Page backgrounds, large content sections — provides a warm, inviting default background |
| Surface Off-White | `#f4eee5` | `--color-surface-off-white` | Secondary surface background, subtle visual separation from the main canvas |
| Pure White | `#ffffff` | `--color-pure-white` | Component backgrounds, elevated cards, and feature blocks — creates visual lift and contrast |
| Vivid Evernote Green | `#94e130` | `--color-vivid-evernote-green` | Green action color for filled buttons, selected navigation states, and focused conversion moments |
| Midnight Graphite | `#141414` | `--color-midnight-graphite` | Primary text, prominent headings, main interactive button backgrounds |
| Deep Black | `#000000` | `--color-deep-black` | Dominant text for high contrast, occasionally used for button borders and fills |
| Carbon Gray | `#262626` | `--color-carbon-gray` | Secondary text, subheadings, and more subdued body copy |
| Medium Gray | `#4e4d4c` | `--color-medium-gray` | Tertiary text, descriptive labels, and supporting information |
| Muted Silver | `#a1a1a1` | `--color-muted-silver` | Inactive interface elements, subtle borders for ghost buttons and dividers |
| Light Gray Stroke | `#e7e7e7` | `--color-light-gray-stroke` | Subtle borders for cards and input fields, indicating containment without heaviness |
| Soft Gray | `#737373` | `--color-soft-gray` | Lowest contrast text, legal notices, and minor descriptive elements |
| Decorative Violet | `#000015` | `--color-decorative-violet` | Violet decorative accent for icons, marks, and small graphic details. Do not promote it to the primary CTA color |
## Tokens — Typography
### Figtree — Primary typeface for all page elements; its geometric yet friendly character supports both headlines and body text. The tight letter spacing for display sizes gives it a modern, efficient feel, while slight positive spacing for captions maintains readability. · `--font-figtree`
- **Substitute:** Inter
- **Weights:** 300, 400, 500, 600
- **Sizes:** 8px, 12px, 13px, 14px, 16px, 18px, 20px, 24px, 40px, 50px, 72px
- **Line height:** 1.00, 1.10, 1.20, 1.30, 1.40, 1.50, 1.60
- **Letter spacing:** -0.05em (at 72px), -0.03em (at 50px, 40px), 0.01em (at 8px)
- **Role:** Primary typeface for all page elements; its geometric yet friendly character supports both headlines and body text. The tight letter spacing for display sizes gives it a modern, efficient feel, while slight positive spacing for captions maintains readability.
### Inter — Secondary typeface, primarily for body text, providing a highly legible and versatile option that complements Figtree without competing for attention. Tighter letter spacing indicates a functional, dense information layout. · `--font-inter`
- **Substitute:** system-ui
- **Weights:** 400, 600
- **Sizes:** 16px, 20px
- **Line height:** 1.30, 1.50
- **Letter spacing:** -0.05em
- **Role:** Secondary typeface, primarily for body text, providing a highly legible and versatile option that complements Figtree without competing for attention. Tighter letter spacing indicates a functional, dense information layout.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body | 14px | 1.5 | — | `--text-body` |
| subheading | 18px | 1.3 | — | `--text-subheading` |
| heading-sm | 24px | 1.3 | — | `--text-heading-sm` |
| heading | 40px | 1.2 | -0.48px | `--text-heading` |
| heading-lg | 50px | 1.1 | -0.75px | `--text-heading-lg` |
| display | 72px | 1 | -1.08px | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 8px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 80 | 80px | `--spacing-80` |
| 120 | 120px | `--spacing-120` |
| 144 | 144px | `--spacing-144` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 10px |
| buttons | 5px |
| circular | 52px |
| largeCards | 16px |
### Layout
- **Page max-width:** 1320px
- **Section gap:** 32px
- **Card padding:** 32px
- **Element gap:** 8px
## Components
### Primary Filled Button
**Role:** Call to action
Filled with Vivid Evernote Green (#94e130), with Pure White (#ffffff) text. Features 5px border radius and generous 16px vertical, 40px horizontal padding for prominence.
### Secondary Filled Button
**Role:** Secondary call to action
Filled with Midnight Graphite (#141414), with white text if on a dark background or Deep Black (#000000) text if on a light background. Features 5px border radius and 10px vertical, 28px horizontal padding.
### Ghost Text Button
**Role:** Tertiary action or navigation link
Transparent background, Deep Black (#000000) text. Minimal padding (0px vertical, 6px horizontal) and no border radius to appear as a discrete text link.
### Primary Feature Card
**Role:** Content container
Pure White (#ffffff) background, 10px border radius, no box shadow, 32px padding on all sides. Used for showcasing main features or grouped content.
### Secondary Content Card
**Role:** Informational container
Surface Off-White (#f4eee5) background, with a prominent 16px border radius, no box shadow. Used for larger, illustrative content blocks with substantial top padding (80px) and side padding (40px).
### Muted Navigation Link
**Role:** Navigation items
Deep Black (#000000) text on transparent background, no border radius, 10px vertical and 28px horizontal padding. Muted Silver (#a1a1a1) for inactive states.
## Do's and Don'ts
### Do
- Prioritize text legibility by using Midnight Graphite (#141414) or Deep Black (#000000) for primary content on light backgrounds like Canvas (#f9f6f2) or Pure White (#ffffff).
- Use Vivid Evernote Green (#94e130) exclusively for primary calls to action or key interactive states to maintain its impact and clarity.
- Apply 5px border radius for interactive elements like buttons and navigation items to give them a soft, approachable geometry.
- Maintain a clear content hierarchy using Figtree for all typographic elements, with display sizes (72px, 50px) using negative letter-spacing for impact.
- Segment content using distinct background colors: Canvas (#f9f6f2) for the main page, Pure White (#ffffff) for elevated cards, and Surface Off-White (#f4eee5) for secondary sections.
- Utilize an 8px base unit for all spacing values, ensuring consistent rhythm and density across layouts and components.
- Employ Light Gray Stroke (#e7e7e7) for all hairline borders and subtle dividers, maintaining a lightweight interface feel.
### Don't
- Do not introduce new saturated colors; limit accents to Vivid Evernote Green (#94e130) with occasional Decorative Violet (#000015) for non-interactive elements.
- Avoid heavy drop shadows or complex gradients on cards; the system relies on background color shifts and solid borders for surface separation.
- Do not use letter-spacing on body text; it should remain at its default for optimal readability.
- Do not use Pure White (#ffffff) as a background for direct page sections; it's reserved for contained components like cards to appear elevated.
- Do not vary border radii arbitrarily; stick to 5px for interactive elements, 10px for standard cards, and 16px for larger feature cards.
- Avoid dense, information-heavy blocks without sufficient padding; use 32px padding for cards and sections to ensure comfortable breathing room.
- Do not introduce unnecessary iconography that distracts from core content; icons should be functional and simple, often with a subtle color accent.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas | `#f9f6f2` | Base page background |
| 1 | Surface Off-White | `#f4eee5` | Secondary background for sections and larger content blocks |
| 2 | Pure White | `#ffffff` | Component backgrounds, cards, and elevated UI elements |
## Imagery
The site predominantly uses product screenshots within a simulated user interface, often presented on Pure White (#ffffff) cards to highlight functionality. Photography is minimal, mostly focused on business-oriented people in work settings. Illustrations are abstract and atmospheric, characterized by blurred, multi-colored organic shapes that serve as decorative background elements, particularly in hero sections, rather than conveying specific meaning. Icons are outlined, simple, and functional, occasionally with a fill in Vivid Evernote Green (#94e130) or other brand-related colors for clarity. Imagery largely serves to showcase product features and create a professional, contemporary atmosphere.
## Layout
The page adheres to a max-width 1320px centered container for main content, often bordered by the Canvas (#f9f6f2) background. Hero sections frequently feature a centered headline and description over either a full-bleed dark background with blurred abstract shapes or the primary Canvas (#f9f6f2). Section rhythm often alternates between the Canvas (#f9f6f2) and Surface Off-White (#f4eee5) backgrounds. Content is frequently arranged in multi-column grids or side-by-side text-and-image blocks. A prominent 3-column card grid is used for feature showcases. The navigation is a sticky top bar with clearly segmented interactive elements.
## Agent Prompt Guide
Quick Color Reference:
text: #262626
background: #f9f6f2
border: #e7e7e7
accent: #000015
primary action: #94e130 (filled action)
Example Component Prompts:
1. Create a Primary Action Button: #94e130 background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
2. Design a feature card: Pure White (#ffffff) background, 10px border-radius, Light Gray Stroke (#e7e7e7) 1px border. Inside, use a heading 'Template' (Figtree weight 600, 24px, Midnight Graphite #141414) and body text 'Get further faster...' (Figtree weight 400, 14px, Deep Black #000000). Apply 32px padding on all sides.
3. Implement a main hero section heading: 'Your second brain' using Figtree weight 600, 72px, Midnight Graphite (#141414), letter-spacing -1.08px. Follow with a sub-headline 'Remember everything...' Figtree weight 400, 18px, Carbon Gray (#262626).
4. Create a secondary content card: Surface Off-White (#f4eee5) background, 16px border-radius. Padding 80px top, 40px left and right, 0px bottom. This card will contain a heading (Figtree weight 600, 40px, Midnight Graphite #141414) and secondary text (Figtree weight 400, 16px, Carbon Gray #262626).
## Similar Brands
- **Notion** — Clear, focused UI with a strong emphasis on content, minimal decorative elements, and functional use of color accents.
- **Todoist** — Predominantly light theme, clean typography, system-like component styling, and a single accent color for primary actions.
- **Slack (light theme)** — Off-white default canvas, highly readable text, and a distinct brand color used to highlight interactive elements and states.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-canvas: #f9f6f2;
--color-surface-off-white: #f4eee5;
--color-pure-white: #ffffff;
--color-vivid-evernote-green: #94e130;
--color-midnight-graphite: #141414;
--color-deep-black: #000000;
--color-carbon-gray: #262626;
--color-medium-gray: #4e4d4c;
--color-muted-silver: #a1a1a1;
--color-light-gray-stroke: #e7e7e7;
--color-soft-gray: #737373;
--color-decorative-violet: #000015;
/* Typography — Font Families */
--font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 14px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.3;
--text-heading-sm: 24px;
--leading-heading-sm: 1.3;
--text-heading: 40px;
--leading-heading: 1.2;
--tracking-heading: -0.48px;
--text-heading-lg: 50px;
--leading-heading-lg: 1.1;
--tracking-heading-lg: -0.75px;
--text-display: 72px;
--leading-display: 1;
--tracking-display: -1.08px;
/* Typography — Weights */
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
/* Spacing */
--spacing-unit: 8px;
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-120: 120px;
--spacing-144: 144px;
/* Layout */
--page-max-width: 1320px;
--section-gap: 32px;
--card-padding: 32px;
--element-gap: 8px;
/* Border Radius */
--radius-md: 5px;
--radius-lg: 10px;
--radius-2xl: 16px;
--radius-full: 52px;
/* Named Radii */
--radius-cards: 10px;
--radius-buttons: 5px;
--radius-circular: 52px;
--radius-largecards: 16px;
/* Surfaces */
--surface-canvas: #f9f6f2;
--surface-surface-off-white: #f4eee5;
--surface-pure-white: #ffffff;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-canvas: #f9f6f2;
--color-surface-off-white: #f4eee5;
--color-pure-white: #ffffff;
--color-vivid-evernote-green: #94e130;
--color-midnight-graphite: #141414;
--color-deep-black: #000000;
--color-carbon-gray: #262626;
--color-medium-gray: #4e4d4c;
--color-muted-silver: #a1a1a1;
--color-light-gray-stroke: #e7e7e7;
--color-soft-gray: #737373;
--color-decorative-violet: #000015;
/* Typography */
--font-figtree: 'Figtree', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body: 14px;
--leading-body: 1.5;
--text-subheading: 18px;
--leading-subheading: 1.3;
--text-heading-sm: 24px;
--leading-heading-sm: 1.3;
--text-heading: 40px;
--leading-heading: 1.2;
--tracking-heading: -0.48px;
--text-heading-lg: 50px;
--leading-heading-lg: 1.1;
--tracking-heading-lg: -0.75px;
--text-display: 72px;
--leading-display: 1;
--tracking-display: -1.08px;
/* Spacing */
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-80: 80px;
--spacing-120: 120px;
--spacing-144: 144px;
/* Border Radius */
--radius-md: 5px;
--radius-lg: 10px;
--radius-2xl: 16px;
--radius-full: 52px;
}
```

Pristine Digital Workspace. A…

Warm, minimal productivity suite.…
Warm, Crisp Canvas

Desktop OS window pane, minimalist…
Serene teal workspace
Polished Workflow, Vibrant…
Crisp canvas, structured workspace.
calm clinical canvas
Architectural blueprint on white…
Sky-bound clarity

Crisp paper on a clean desk. A…

Sky Blueprint on Bright Paper –…

Midnight machine hum — a deep…

Black text on parchment-white,…
Vibrant productivity hub: a…
Clean canvas, purposeful accents
Evergreen clarity on a clean slate
white canvas, playful ink sketches
ink on parchment
Expansive sky, clean canvas.