# Notion Workspace 종이 같은 화이트 캔버스에 따뜻한 잉크 텍스트, 절제된 블루 액센트, 손그림 일러스트의 온기를 얹은 문서형 생산성 도구 스타일. - taxonomy: corporate-clean · workspace-minimal, paper-canvas, document-like, warm-gray, utilitarian, hand-drawn-warmth, saas-product · complexity=low - page types: landing, app, docs, marketing, dashboard - best for: 생산성·협업 SaaS 제품 랜딩, 문서·지식베이스·docs 사이트, 앱 UI가 주인공인 제품 소개 페이지, 차분한 스타트업 마케팅 사이트 - avoid for: 강렬한 브랜드 임팩트가 필요한 캠페인 페이지, 다크·시네마틱 게이밍/엔터테인먼트, 럭셔리·패션 등 장식적 감성 브랜드, 네온·그라디언트 중심의 Web3 사이트 - provenance: website (Notion — The AI workspace that works for you) — confidence: colors_light=computed-css, colors_dark=vision-inferred, typography=computed-css, radius=computed-css, shadows=computed-css, spacing=vision-inferred, motion=vision-inferred, layout=vision-inferred, taxonomy=0.85 ## Design rules # 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. ## Tokens (theme.css — use these values verbatim, do not re-derive) ```css /* Notion Workspace — theme.css (generated, do not edit) */ :root { --radius: 8px; --radius-selector: 4px; --radius-field: 6px; --font-sans: 'NotionInter', 'Inter', -apple-system, system-ui, 'Segoe UI', Helvetica, Arial, sans-serif; --font-serif: 'Lyon Text', Georgia, 'Noto Serif', serif; --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', monospace; --font-display: 'NotionInter', 'Inter', -apple-system, system-ui, sans-serif; --spacing: 4px; --shadow: 0px 4px 18px 0px color-mix(in oklab, oklch(0 0 0) 4%, transparent); --ks-display-weight: 600; --ks-display-tracking: -0.048em; --background: oklch(1 0 0); --foreground: oklch(0.185 0.004 85); --card: oklch(0.985 0.003 84); --card-foreground: oklch(0.185 0.004 85); --popover: oklch(1 0 0); --popover-foreground: oklch(0.185 0.004 85); --primary: oklch(0.568 0.182 254.3); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.962 0.004 84); --secondary-foreground: oklch(0.309 0.004 84.6); --muted: oklch(0.955 0.004 84); --muted-foreground: oklch(0.481 0.008 67.6); --accent: oklch(0.597 0.183 253.3); --accent-foreground: oklch(1 0 0); --destructive: oklch(0.651 0.213 30.9); --destructive-foreground: oklch(1 0 0); --border: oklch(0.908 0.003 84); --input: oklch(0.908 0.003 84); --ring: oklch(0.568 0.182 254.3); --chart-1: oklch(0.729 0.123 246.7); --chart-2: oklch(0.711 0.164 29.3); --chart-3: oklch(0.634 0.098 191.5); --chart-4: oklch(0.864 0.138 82.2); --chart-5: oklch(0.644 0.072 52.2); } .dark { --background: oklch(0.208 0.004 84); --foreground: oklch(0.928 0.003 84); --card: oklch(0.242 0.005 84); --card-foreground: oklch(0.928 0.003 84); --popover: oklch(0.262 0.005 84); --popover-foreground: oklch(0.928 0.003 84); --primary: oklch(0.635 0.16 252); --primary-foreground: oklch(0.985 0.002 84); --secondary: oklch(0.275 0.005 84); --secondary-foreground: oklch(0.895 0.003 84); --muted: oklch(0.275 0.005 84); --muted-foreground: oklch(0.655 0.008 74); --accent: oklch(0.685 0.135 250); --accent-foreground: oklch(0.208 0.004 84); --destructive: oklch(0.672 0.19 30); --destructive-foreground: oklch(0.985 0.002 84); --border: oklch(0.305 0.005 84); --input: oklch(0.305 0.005 84); --ring: oklch(0.685 0.135 250); --chart-1: oklch(0.729 0.123 246.7); --chart-2: oklch(0.711 0.164 29.3); --chart-3: oklch(0.665 0.098 191.5); --chart-4: oklch(0.845 0.13 82.2); --chart-5: oklch(0.67 0.072 52.2); } ``` ## Golden example (exemplar.html — match this structure and token usage) ```html

Where work finally clicks.

Capture context, find answers, and keep every doc in one calm, paper-white place.

Try it free Request a demo

Keep work moving 24/7.

Q&A agents

Answer questions instantly using knowledge you already have.

Task routing

Triage and hand off repetitive work automatically.

Weekly reports

A tidy summary lands in your inbox, every Friday.

See what agents can do →

Everything reads like a document: warm near-black ink, quiet hairlines, and hierarchy built from weight and gray steps — never loud color.

``` ## Apply - shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/notion-workspace.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only. - other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references. - single HTML/artifact: embed the theme.css block in a `