디자인 시스템

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

다운로드3

패키지 JSON 다운로드

DESIGN.md SKILL.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

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.
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.
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.
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.
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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (8)

display

NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

heading

NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

body

NotionInter, Inter, -apple-system, system-ui, Segoe UI, Helvetica, Arial, sans-serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

serif

Lyon Text, Georgia, ui-serif, serif

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

mono

iA Writer Mono, JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace

48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 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
}

컴포넌트 (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 소스

Input

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

html

Whisper-bordered field on white

2 props · 5 states · 4 tags · 2 소스

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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: 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 소스

누락 상태: focus-visible, disabled

DESIGN.md

Notion Workspace Kit

Principles

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.
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.
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.
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.
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

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.

어댑터 (3)

adapters/tokens.css
text/css
다운로드
adapters/html/index.html
text/html
다운로드
adapters/html/styles.css
text/css
다운로드

전체 파일 (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

버전

v1.0.02026. 5. 8.
다운로드