# Notion — DESIGN.md

A calm black-on-white workspace where the product window is the hero and colour is kept for tags.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-24

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed families: **NotionInter** (marketing, with Inter as the next fallback; pull quotes use **Lyon Text**) and a **ui-sans-serif** system stack in the product. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light editorial with illustration

### Observed palette
- Canvas: `#ffffff`
- Primary text: `rgba(0, 0, 0, 0.95)`
- Body text: `rgba(0, 0, 0, 0.898)`
- Primary button: `#0075de`
- Secondary button fill: `#e6f3fe`
- Secondary button text: `#005bab`
- Recommended plan card: `#f2f9ff`
- Card border: `#f6f5f4`
- Closing band (sampled from screenshot): `#f6f5f3`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline | 96px / 100px | 600 | −4.6px |
| Page headline (pricing, AI) | 64px / 64px | 700 | −2.125px |
| Section heading | 54px / 56px | 700 | −1.875px |
| Feature heading | 42px / 48px | 700 | −1.5px |
| Lead paragraph | 20px / 28px | 400 | −0.125px |
| Price | 22px / 28px | 700 | −0.25px |
| Pull quote (Lyon Text serif) | 32px / 40px | 400 | normal |
| Body and button label | 16px / 24px | 400 (buttons 500) | normal |

### Layout & hierarchy
- Centred hero with a very large tight headline, one lead sentence and two buttons, followed by a mock Notion window as the proof.
- A 64px global nav: logo left, Product / Resources menus plus Pricing and Request a demo centred, Log in and a blue Get Notion free button right.
- Sections alternate a left-aligned heading and one line of copy with a pastel-framed product vignette; pricing moves into two card groups and a long comparison table.

### Components & behavior
- Primary button: #0075de fill, white 16px / 500 label, 8px radius, 6px / 15px padding (38px high in the hero).
- Secondary button: #e6f3fe fill with #005bab label, same shape; plan cards use 36px buttons.
- Plan cards: 12px radius, 32px padding; the Free/Plus card has a 2px #f6f5f4 border, the Business/Enterprise card a #f2f9ff fill.
- Hand-drawn black line illustrations and a serif pull-quote face add warmth to an otherwise plain sans layout.

## Product — Light document workspace

### Observed palette
- Canvas: `#ffffff`
- Primary text: `rgb(44, 44, 43)`
- Secondary text: `rgb(125, 122, 117)`
- Tertiary text: `rgb(161, 158, 153)`
- Cell border: `rgba(42, 28, 0, 0.07)`
- Active view tab: `rgba(33, 27, 23, 0.05)`
- Accent button: `#2783de`
- Sidebar (sampled from screenshot): `#f9f8f6`
- In progress pill (sampled): `#f1e3b6`
- Planning pill (sampled): `#cae3f7`
- High priority pill (sampled): `#f7dad6`
- Low priority pill (sampled): `#d6e6dc`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Page title | 32px / 38.4px | 700 | normal |
| Database title | 24px / 31.2px | 600 | normal |
| Row title and board column | 14px / 21px | 500 | normal |
| Cell text | 14px / 21px | 400 | normal |
| View tab | 14px / 16.8px | 500 | normal |
| Column header | 14px / 16.8px | 400 | normal |
| Top-bar caption | 12px / 18px | 400 | normal |

### Layout & hierarchy
- A slim top bar (breadcrumb left, page name centred, actions and one blue button right) over a full-width cover band and a centred page column.
- Databases sit inside the page: title, a row of pill view tabs with filter, sort and search icons on the right, then the table, board or timeline.
- Records open in a side peek over the right half, keeping the database visible on the left.

### Components & behavior
- View tabs: 32px high, 20px radius, 6px / 12px padding; the active tab gets a 5% warm-black fill and dark text, others grey text.
- Select and status pills: small rounded tints (yellow, blue, red, green) with a darker text of the same hue; status pills add a coloured dot.
- Tables use hairline warm borders (rgba(42, 28, 0, 0.07)), no zebra striping, and a summary row (COMPLETE 0/2, COUNT 2).
- Accent button: #2783de, 6px radius, 28px high, 14px / 500 label.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Database table view: Notion's public Projects & Tasks template on notion.site, logged out. A top bar with Templates, the template name and a blue "Start with this template" button; a pale cover band; the page title; then a Projects database with view tabs (All Projects, Project Timeline, All Tasks, Tasks by Status) and a table with coloured Status and Priority pills and progress bars. Names are Notion's own sample data. Screenshot: `captures/notion-product-projects-table.jpg`.
- Timeline view: The Project Timeline tab: a frozen left table (Project name, Status) beside a quarter timeline with a red today marker on 24 September 2026. The sample projects are dated 2025, so no bars appear in the visible range; only jump-back arrows show. Quarter, Today and arrow controls sit top right. Screenshot: `captures/notion-product-projects-timeline.jpg`.
- Board view: The Tasks by Status tab switches the heading to Tasks and shows a board: To-do, In progress, Complete and No Status columns with tinted headers and cards carrying assignee, date, priority pill and related project. Screenshot: `captures/notion-product-tasks-board.jpg`.
- Side peek: Hovering a row reveals an OPEN button; it opens Project 1 in a side peek over the right half. The peek lists properties (Status, Owner, Dates, Priority, Progress, Summary), a Relations link to 2 tasks, an "About this project" section and an embedded Tasks board. The opened row keeps a blue selection outline. Screenshot: `captures/notion-product-project-peek.jpg`.
- Template sidebar: The menu button pins a left sidebar headed by the Notion logo: "Template includes" lists the page and its four views as a tree, with the current view highlighted. The page shifts right to make room. Screenshot: `captures/notion-product-sidebar.jpg`.
- Help Center home: "Hi, how can we help you?" with a wide pill search field and four quick-topic chips (Billing, Dashboards view, Restoring content, Sharing & permissions), then a grid of Popular topics cards with line illustrations. A left rail lists Help Center sections with chevrons. A cookie banner was declined before capture. Screenshot: `captures/notion-product-help.jpg`.
- Help category: Databases: The Databases category: the left rail expands Build databases to Databases and Database views, and the main column shows a description and Popular topics cards with video thumbnails (Intro to databases, Relations & rollups) and an illustration (Intro to formulas), plus a See all button. Screenshot: `captures/notion-product-help-databases.jpg`.
- Help article: "Intro to databases": breadcrumb Help Center > Databases, a large title, a Notion Academy video thumbnail with a presenter, an "In this help doc" summary and a sticky Contents list on the right with the current section highlighted in blue. Screenshot: `captures/notion-product-help-article.jpg`.

## Avoid
- Do not apply the 96px marketing headline scale to document pages; the product title is 32px.
- Do not present sampled values as exact; pill, sidebar and closing-band colours are sampled from screenshots.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts, signed-in behavior, editing or the onboarding flow.

## Reference pages
- Homepage: https://www.notion.com/
- Pricing: https://www.notion.com/pricing
- Notion AI: https://www.notion.com/product/ai

## Capture scope
Logged-out desktop journey through the template Marketplace: Discover, search suggestions, results, a Notion-made template, its category and creator pages, then Get template to the log-in and sign-up screens. No account was created and nothing was entered, so onboarding and the signed-in workspace are not captured; the product screens use a public Notion template page on notion.site and the Help Center instead. Featured tiles, counts and prices change over time.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.