# Notion Workspace

## Overview
Paper-white workspace minimalism extracted from notion.com. A pure-white canvas, warm near-black ink text, one restrained blue accent, and hand-drawn illustration warmth. This is a productivity-tool canvas, not a magazine: sans-serif, cozy density, structured card grids, and document-like reading comfort. The design should feel like software that stays out of the way.

## Colors & Roles
- **background / card / popover**: white and near-white warm off-whites. The canvas is `#ffffff` (measured, 97% of page area); `card` steps down a hair (`oklch 0.985 hue 84`) and `muted`/`secondary` form pale warm-gray bands.
- **foreground**: warm near-black — measured as `rgba(0,0,0,.9)` on white; tokenized as `oklch(0.185 0.004 85)`. All neutrals sit on the warm axis (oklch hue 60–85: #31302e, #615d59, #a39e98 measured). Never cold blue-gray.
- **primary**: Notion's CTA blue `#0075de` → `oklch(0.568 0.182 254.3)` (measured background of "Get Notion free"). White foreground.
- **accent**: link blue `#097fe8` → `oklch(0.597 0.183 253.3)` (measured text color). Used for links, focus, small highlights.
- **muted-foreground**: `#615d59` (measured secondary text). **destructive**: `#f64932` (measured).
- **border / input**: 10%-black hairline, tokenized as `oklch(0.908 0.003 84)` (measured border was `#000` at alpha 0.1).
- **chart-1..5**: the measured hand-drawn illustration palette — blue `#62aef0`, red `#f77463`, teal `#2a9d99`, yellow `#ffc95e`, brown `#b18164`. These are decoration/data colors only, never UI chrome.
- **Dark mode is authored** (source has none): warm charcoal `oklch 0.208 hue 84` (Notion-app-dark ~#191919 feel), same warm-gray axis, blue lifted to ~0.64–0.69 L for contrast.

## Typography Rules
One sans family: NotionInter/Inter system stack. Display type is huge and tightly tracked — measured H1: 96px / 600 / −4.6px (≈ −0.048em). Weights 400 body, 500 UI labels, 600–700 headings. Body is the document standard 16px/1.5; secondary text 14px. Headlines are short sentences that end with a period ("Keep work moving 24/7."). Lyon Text serif exists in the source but only as a supporting voice (quotes, flourishes) — never for headlines.

## Layout Principles
Centered container ~1200px. Hero = centered display type + app-screenshot frame. Sections alternate white canvas and `muted` tonal bands. Content lives in 2–5-column card grids with 16–24px gaps — structured density, not editorial emptiness. Section gap `clamp(4rem, 8vw, 7rem)`.

## Depth & Elevation
Almost flat. Measured shadows are multi-layer stacks at 1–4% opacity — visible only as a faint lift under app frames and cards. Policy: hairline borders and tonal steps do the separating; shadows never exceed ~4% opacity. No gradients, glass, noise, or grain.

## Shapes
Modest radii: 4px on small interactive elements (nav ghost buttons, measured button radius 4px), 6px on fields/buttons, 8px on cards (measured 8/12px). Pills (9999px) only for badges and avatar chips. Nothing beyond 12px.

## Component Stylings
- **Button**: primary = blue fill, white text, 6px radius, 8px 16px padding, weight 500. Secondary = warm-gray tint fill. Ghost (nav) = transparent, 4px radius, muted tint on hover. Focus = 2px blue ring, 2px offset.
- **Card**: `card`/`muted` tonal step, 8px radius, optional hairline, at most one whisper-soft shadow. Padding 20–24px; title 700, description 14px `muted-foreground`.
- **Input**: 6px radius, 1px `input` border, white fill; focus swaps border to blue + ring.
- **Nav**: sticky white bar with bottom hairline; logo left, ghost text links center, one blue CTA right.
- **Illustration**: black-ink hand-drawn line art with chart-palette circular badges; prefer illustrations and app screenshots over photography.

## Motion
Tool-like and immediate: 100–200ms hover tints, small fade/translateY(6px) entrances at 350ms. Standard easing. No bounce, spring, or parallax.

## Do's and Don'ts
**Do:** keep every neutral on the warm axis; hold chroma to one blue; build hierarchy from weight and gray steps; track display type tight; end headlines with a period.
**Don't:** use gradients/glass/neon; use heavy shadows; exceed 12px radius; set headlines in serif; use cold gray neutrals; flood large areas with the accent blue.

## Responsive Behavior
Card grids collapse 5→2→1 columns; display type scales with `clamp()`; nav collapses to logo + CTA + menu. Density stays cozy on mobile — reduce columns before reducing content.

## Agent Prompt Guide
> Build this in the 'Notion Workspace' style: paper-white canvas, warm near-black ink text on a warm-gray neutral axis, one restrained blue accent for CTA/links/focus, Inter sans with oversized tightly-tracked display headlines ending in a period, 16px/1.5 document body, 4–8px radii, 10%-black hairlines and muted tonal bands instead of shadows, cozy structured card grids, and hand-drawn illustration warmth in blue/red/teal/yellow/brown — a calm utilitarian productivity-tool canvas.

## Known Gaps / Confidence
Light colors, typography, radii, and shadows are `computed-css` (measured from the live site). Dark mode is fully authored (`vision-inferred`) — the site ships no native dark theme; values follow Notion's app dark mode conventions (warm charcoal). Spacing, motion, and layout are vision-inferred from screenshots. NotionInter and Lyon Text are proprietary; Inter / Noto Serif are the reproduction fallbacks.