Stark productivity minimalism, distinct from the warm editorial Notion workspace site: a pure-white canvas with pure-black NotionInter headlines at a bold 700 and very tight tracking, a tightly centered hero, small black and white-outlined buttons, and a warm-gray product panel whose pastel event chips (mint, sky, lilac, peach, apricot, butter) are the only colour in the system.
Browse Notion Calendar in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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.
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.
| 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 |
| 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 |
| 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 |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.