Design system
web
v1.0.0
90/100

Notion Workspace Kit

@dante · Productivity & SaaS

Warm-minimalist documentation kit inspired by Notion: ivory canvas, near-black serif/sans hybrid type, whisper borders, and block-first density for long-form pages.

HTML/CSS
#blocks
#calm
#docs
#productivity
Notion Workspace Kit
Downloads3
Download package
DESIGN.mdSKILL.md

Overview

Notion Workspace Kit

A documentation-first system that treats every screen as a blank page, then layers blocks of content with the lightest possible chrome. Use it for product marketing pages, knowledge bases, and long-form workspace UIs that want to feel calm and editorial without going monastic.

Principles

  1. Blank canvas first. White (#ffffff) is the default surface, alternated only with warm-white (#f6f5f4) to mark new sections. Never introduce a third background tone in the body of a page.
  2. Warm neutrals, never blue-gray. The greys in this system carry a yellow-brown undertone — #615d59 and #a39e98 for prose, #31302e for dark surfaces. If a tone reads cold, replace it.
  3. Whisper everything. Borders are 1px solid rgba(0,0,0,0.1). Shadows stack four to five layers, each below 0.05 opacity. Depth is felt rather than seen.
  4. Compress at scale. Headlines tighten dramatically: -2.125px tracking at 64px, -1.5px at 48px, -0.625px at 26px, normal at 16px. Body stays at 1.5 line-height for relaxed reading.
  5. One saturated colour. Notion blue (#0075de) is the only chromatic accent in core UI. Use it on primary CTAs, links, focus rings, and active TOC rails — nowhere else.

Tone

Conversational, slightly warm, never shouty. Headlines are short declaratives. Body copy reads like a colleague's doc — present-tense, direct, emoji-friendly without overdoing it. Prefer concrete verbs.

Layout DNA

  • 1200px max content width, 720px reading rail for prose.
  • 80–120px vertical padding between sections, alternating white and warm-white.
  • Documents use 96px top padding and a left margin big enough to feel like paper.
  • Every block hover-tints to warm-white — the page itself is interactive.

Component grammar

  • Buttons: 4px radius, 36px tall, weight 600, 15px. Primary blue, secondary translucent gray, ghost transparent.
  • Pills: 9999px radius, weight 600, 12px with +0.125px tracking — the only positive tracking in the system.
  • Cards: 12px radius, whisper border, multi-layer shadow. Featured cards bump to 16px and the deeper 5-layer shadow.
  • Inputs: 4px radius, 36px tall, #dddddd border, warm-gray placeholder. Focus ring in #097fe8.
  • Page blocks: emoji corner mark, oversized title at 40–64px, body blocks at 16/24 with hover tint.

Don't

Don't use pure black text, cold blue-gray neutrals, heavy 2px borders, hard drop shadows, gradient buttons, or rainbow status pills. Don't crowd hero sections — generous whitespace is the brand.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (22)

paper
#ffffff
warmWhite
#f6f5f4
warmDark
#31302e
ink
#0a0a0a
inkSoft
rgba(0,0,0,0.95)
warmGray500
#615d59
warmGray300
#a39e98
border
rgba(0,0,0,0.1)
inputBorder
#dddddd
accent
#0075de
accentActive
#005bab
focus
#097fe8
deepNavy
#213183
linkLight
#62aef0
badgeBg
#f2f9ff
badgeText
#097fe8
teal
#2a9d99
green
#1aae39
orange
#dd5b00
pink
#ff64c8
purple
#391c57
brown
#523410

Typography (8)

display
NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
heading
NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
serif
Lyon Text, Georgia, ui-serif, serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
iA Writer Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
scale
unparsed
{
  "displayHero": "64px/1.00",
  "displaySecondary": "54px/1.04",
  "section": "48px/1.00",
  "subhead": "26px/1.23",
  "cardTitle": "22px/1.27",
  "bodyLarge": "20px/1.40",
  "body": "16px/1.50",
  "caption": "14px/1.43",
  "badge": "12px/1.33"
}
letterSpacing
unparsed
{
  "display": "-2.125px",
  "section": "-1.5px",
  "subhead": "-0.625px",
  "body": "0",
  "badge": "0.125px"
}
weights
unparsed
{
  "reading": 400,
  "interactive": 500,
  "emphasis": 600,
  "display": 700
}

Components (14)

Button

Primary affordance. Notion-blue solid on white, subtle scale on press.

html
Hand-tuned CSS, NotionInter on warm canvas
1 props · 6 states · 8 tags · 2 sources

Input

Single-line field with persistent label and warm-gray placeholder.

html
Whisper-bordered field on white
2 props · 5 states · 4 tags · 2 sources

Card

Standard content card on white with 12px radius and barely-perceptible elevation.

html
Whisper border + 4-layer shadow
1 props · 2 states · 5 tags · 2 sources
Missing states: focus-visible, disabled

Badge

Notion's signature pill badge — full radius, micro letter-spacing, tinted blue.

html
Tinted blue pill
1 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled

Heading

Display headlines with aggressive negative letter-spacing and tight leading.

html
Compressed display, NotionInter weight 700
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Link

Inline link in body copy. Notion blue with subtle underline on hover.

html
Notion blue, underline-on-hover
0 props · 4 states · 3 tags · 2 sources
Missing states: disabled

Hero

Full-width centered hero with display headline, supporting prose, and dual CTA row.

html
Centered single column, generous top padding
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

Nav

Top navigation: wordmark left, link group center, blue pill CTA right.

html
Clean horizontal nav on white
0 props · 3 states · 6 tags · 2 sources
Missing states: disabled

Footer

Footer with column groups on warm-white surface and whisper top border.

html
Multi-column on warm white
0 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Stat

Metric callout: oversized NotionInter numeral over a brief description.

html
Large numeral with weight 700
0 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled

PageBlock

Notion's signature page header — emoji icon, then title, then a relaxed body block stack on a roomy left margin.

html
Block-first canvas with emoji corner mark and left-rail breathing room
1 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

TocItem

Table-of-contents entry showing nesting via left-padding and a thin active rail.

html
Indented sidebar item with weight shift
1 props · 3 states · 6 tags · 2 sources
Missing states: focus-visible, disabled

CalloutBox

Notion-style callout — soft warm-white fill, whisper border, leading emoji.

html
Tinted block with emoji prefix
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

DatabaseRow

A row from a Notion database — emoji title cell, status pill, owner, and date — divided by whisper borders.

html
Block-table row with whisper dividers
0 props · 2 states · 9 tags · 2 sources
Missing states: focus-visible, disabled

DESIGN.md

Notion Workspace Kit

A documentation-first system that treats every screen as a blank page, then layers blocks of content with the lightest possible chrome. Use it for product marketing pages, knowledge bases, and long-form workspace UIs that want to feel calm and editorial without going monastic.

Principles

  1. Blank canvas first. White (#ffffff) is the default surface, alternated only with warm-white (#f6f5f4) to mark new sections. Never introduce a third background tone in the body of a page.
  2. Warm neutrals, never blue-gray. The greys in this system carry a yellow-brown undertone — #615d59 and #a39e98 for prose, #31302e for dark surfaces. If a tone reads cold, replace it.
  3. Whisper everything. Borders are 1px solid rgba(0,0,0,0.1). Shadows stack four to five layers, each below 0.05 opacity. Depth is felt rather than seen.
  4. Compress at scale. Headlines tighten dramatically: -2.125px tracking at 64px, -1.5px at 48px, -0.625px at 26px, normal at 16px. Body stays at 1.5 line-height for relaxed reading.
  5. One saturated colour. Notion blue (#0075de) is the only chromatic accent in core UI. Use it on primary CTAs, links, focus rings, and active TOC rails — nowhere else.

Tone

Conversational, slightly warm, never shouty. Headlines are short declaratives. Body copy reads like a colleague's doc — present-tense, direct, emoji-friendly without overdoing it. Prefer concrete verbs.

Layout DNA

  • 1200px max content width, 720px reading rail for prose.
  • 80–120px vertical padding between sections, alternating white and warm-white.
  • Documents use 96px top padding and a left margin big enough to feel like paper.
  • Every block hover-tints to warm-white — the page itself is interactive.

Component grammar

  • Buttons: 4px radius, 36px tall, weight 600, 15px. Primary blue, secondary translucent gray, ghost transparent.
  • Pills: 9999px radius, weight 600, 12px with +0.125px tracking — the only positive tracking in the system.
  • Cards: 12px radius, whisper border, multi-layer shadow. Featured cards bump to 16px and the deeper 5-layer shadow.
  • Inputs: 4px radius, 36px tall, #dddddd border, warm-gray placeholder. Focus ring in #097fe8.
  • Page blocks: emoji corner mark, oversized title at 40–64px, body blocks at 16/24 with hover tint.

Don't

Don't use pure black text, cold blue-gray neutrals, heavy 2px borders, hard drop shadows, gradient buttons, or rainbow status pills. Don't crowd hero sections — generous whitespace is the brand.

Adapters (3)

All files (8)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions