# Notion Calendar — Marketing Site Design Spec

> Source: notion.com/product/calendar (live DOM, computed styles), 2026-07-18 (desktop 1512px).
> Coverage: product marketing page. App/calendar client: pending login (`needs-dashboard`). Responsive: breakpoints from tokens only; mobile rendering not verified.
> Note: a distinct surface from the main Notion workspace capture (`apps/notion`) — that one is warm editorial paper; this product page is stark white/black with a pastel event palette.

## 1. Visual Theme & Atmosphere

Stark, high-contrast productivity minimalism: a pure-white canvas with pure-black ink and a tightly centered hero — product glyph, small product label, then a short bold NotionInter headline set at 700 with very tight negative tracking ("It's time."). Everything is one typeface and two values, black on white, so the only colour in the whole system arrives through the calendar itself: a set of soft pastel event chips (mint, peach, apricot, lilac, sky, butter) laid over a warm-gray `#f6f5f4` product panel. Buttons are small, black-filled or white-outlined rectangles at modest radii. The result reads as precise and utilitarian — a tool, not a campaign. Feels: crisp, utilitarian, focused, calm.

## 2. Color Palette & Roles

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#ffffff` | Page background |
| surface | `#f6f5f4` | Warm-gray product panel / inset sections |
| surface-2 | `#f9f9f8` | Subtle alternate surface |
| black | `#000000` | Primary button, dark chrome |
| ink-panel | `#191918` / `#111111` | Near-black panels |

### Text
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#000000` | Headlines and body — the primary text colour |
| muted | `#a39e98` | Secondary text, captions (warm gray) |
| white | `#ffffff` | Text on black buttons |

### Accent — pastel event chips (the only colour)
| Token | Hex | Role / usage |
|---|---|---|
| mint | `#ddfcfa` | Calendar event chip |
| sky | `#e1f9ff` | Calendar event chip |
| lilac | `#f7e5ff` | Calendar event chip |
| peach | `#ffebe3` | Calendar event chip |
| apricot | `#ffe9d3` | Calendar event chip |
| butter | `#fff4cb` | Calendar event chip |
| blush | `#fef3f1` | Pale event / highlight |
| cream | `#fff5e0` | Pale event / highlight |
| ice | `#f2f9ff` | Pale event / highlight |

### Links
| Token | Hex | Role / usage |
|---|---|---|
| blue | `#0075de` | Link colour |
| blue-2 | `#097fe8` | Link hover / alt |

Rule: chrome is strictly black on white with warm-gray panels; saturated colour never appears in UI furniture — the pastel set is reserved for calendar event chips, and blue only for links.

## 3. Typography Rules

- One family: `NotionInter, Inter, -apple-system, sans-serif` across everything.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display (h1) | 64 / 64 | 700 | -2.125px |
| Section (h2) | 42 / 48 | 700 | -1.5px |
| Product label | 16 / 24 | 600 | normal |
| Lead / sub | 20–24 | 400 | normal |
| Body / UI | 14 / 20 | 400 | normal |
| Nav link | 16 | 400 | normal |

Patterns: unlike the warm editorial Notion workspace site, this product page goes **bold** — headings are 700 with aggressive negative tracking (-2.125px at 64px). Body drops to a compact 14/20. One family, two weights, no italics.

## 4. Component Stylings

### Buttons
- **Primary (black)**: bg `#000000`, text `#ffffff`, radius ~`8px`, h ~`40px`, NotionInter 15–16px 500/600. ("Get Notion Calendar free" / nav "Open Notion".)
- **Secondary (outlined)**: white bg, 1px light border, black text, same radius and height. ("Download for macOS".)
- **Nav link**: transparent, black, radius `4px`, 16px 400.

### Nav
- Full-width white bar: Notion "N" glyph left, center links with dropdowns (Product / Solutions / Resources / Developers / Enterprise / Pricing / Request a demo), right Log-out text link + black "Open Notion" button.

### Signature component — calendar grid
- A warm-gray `#f6f5f4` product panel (large radius) holding the calendar: day columns with hairline rules, an hour gutter in small muted `#a39e98` type, and rounded pastel event chips (mint / sky / lilac / peach / apricot / butter) carrying compact 14px black labels. A current-time indicator line runs across.

### Inputs
- Not prominently captured on marketing. Focus ring not captured.

## 5. Layout Principles

- Centered hero: product glyph → product name label → short bold headline → 3-line sub → two small CTAs → large product panel.
- Content column is narrow and centered; the product panel spans wider.
- Generous whitespace; strong central axis.

## 6. Depth & Elevation

- Radii: `4px` (nav links), ~`8px` (buttons), large rounded product panel (~`16–20px`), small rounded event chips.
- Elevation: essentially flat — the warm-gray panel and hairline rules do the separating. The product glyph carries a small drop shadow; UI surfaces do not.

## 7. Motion

- Restrained: hover shifts on links and buttons; dropdown nav menus. No heavy scroll library confirmed.

## 8. Backgrounds, Effects & WebGL

- Flat solid white and warm-gray `#f6f5f4` surfaces. No gradients, grain or WebGL captured.
- All visual interest comes from the calendar grid and its pastel event chips.

## 9. Do's and Don'ts

### Do
- Keep the canvas pure white with pure-black text and warm-gray `#f6f5f4` product panels.
- Set headings in NotionInter at **700** with tight negative tracking (-2.125px at 64px) — this product page is bolder than the main Notion site.
- Center the hero on a narrow column: glyph, product label, short headline, sub, two small CTAs.
- Reserve the pastel palette strictly for calendar event chips.
- Use small black-filled and white-outlined buttons at modest (~8px) radii.
- Drop body copy to a compact 14/20.

### Don't
- Don't use saturated colour in UI chrome — pastels belong to events, blue to links.
- Don't set headings light; this surface uses 700, not the workspace site's lighter editorial treatment.
- Don't make buttons full pills — they are modest rounded rectangles.
- Don't add shadows to panels; flat surfaces plus hairlines carry the structure.
- Don't introduce a second typeface.

## 10. Responsive Behavior

- Centered column scales fluidly; nav collapses on mobile (markup present). Mobile rendering not verified — captured at desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Ink `#000000` · Muted `#a39e98` · Panel `#f6f5f4` · Link `#0075de` · Event pastels (mint `#ddfcfa`, sky `#e1f9ff`, lilac `#f7e5ff`, peach `#ffebe3`, apricot `#ffe9d3`, butter `#fff4cb`)
- Font: NotionInter (one family) · Display 64px/700 at -2.125px · Section 42px/700 · Body 14/20 · Radius 4px link / ~8px button / ~16px panel · Button height ~40px
- Focus: not captured · Hover: subtle darken on buttons, blue on links

<notion-calendar_design_language>
Use the Notion Calendar design language: stark high-contrast productivity minimalism on a pure-white canvas with pure-black ink, all set in one family (NotionInter). The hero is tightly centered — product glyph, small product label, then a short BOLD headline at weight 700 with very tight negative tracking (64px at -2.125px; sections 42px at -1.5px) over a short sub and two small CTAs. Body drops to a compact 14/20 at 400 and secondary text is a warm gray #a39e98. Buttons are modest rounded rectangles (~8px, ~40px tall), a black #000 primary beside a white outlined secondary; nav links sit at 4px radius. The only colour in the entire system is the calendar itself: a warm-gray #f6f5f4 product panel holding a day-column grid with hairline rules, a muted hour gutter and rounded PASTEL event chips — mint #ddfcfa, sky #e1f9ff, lilac #f7e5ff, peach #ffebe3, apricot #ffe9d3, butter #fff4cb — with blue #0075de reserved for links. Surfaces are flat with no shadows; structure comes from the warm-gray panel and hairlines. Feels: crisp, utilitarian, focused, calm. Avoid: saturated colour in UI chrome, light heading weights (this surface is 700, unlike the warm editorial Notion workspace site), full-pill buttons, panel shadows, or a second typeface.
</notion-calendar_design_language>