styles
← 갤러리

Notion Workspace

종이 같은 화이트 캔버스에 따뜻한 잉크 텍스트, 절제된 블루 액센트, 손그림 일러스트의 온기를 얹은 문서형 생산성 도구 스타일.

corporate-clean workspace-minimalpaper-canvasdocument-likewarm-grayutilitarianhand-drawn-warmthsaas-product
⬇ AI 번들 (llms.md) DESIGN.md tokens.json
라이브 프리뷰 — 동일 샘플 UI에 이 스타일 적용

설명

Notion 홈페이지에서 추출한 워크스페이스 미니멀리즘. 순백에 가까운 종이 캔버스 위에 웜 그레이 축(hue 60-85)의 근검정 텍스트를 얹어 문서를 읽는 듯한 편안함을 만들고, 채도 있는 컬러는 블루 CTA·링크 하나로 절제한다. 위계는 크기·굵기·웜 그레이 단계로만 세우고, 구획은 그림자 대신 10% 헤어라인과 은은한 톤 단차로 나눈다. 4-8px의 소박한 라운드, 거의 보이지 않는 다층 섀도우, 촘촘하지만 숨 쉬는 여백이 특징. 손그림 일러스트의 블루·레드·틸·옐로·브라운 팔레트가 차트와 장식에 온기를 더한다. Warm Editorial의 세리프 잡지 감성과 달리, 이것은 산세리프 기반의 실용적인 '도구' 캔버스다.

타입 스케일

display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
small Ag 스타일 견본 Style Specimen
caption Ag 스타일 견본 Style Specimen

단일 산세리프(Inter 계열)로 도구답게. 디스플레이는 매우 크고(측정 H1 96px/600) 강한 네거티브 자간(-4.6px/96px ≈ -0.048em)으로 조여서 제품의 자신감을 표현. 본문은 16px/1.5의 문서 표준. 세리프(Lyon Text)는 인용문 등 장식적 순간에만 보조로.

골든 예제 (exemplar)

Where work finally clicks.

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

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.

Do

  • 뉴트럴은 전부 웜 그레이 축(hue 60-85)으로 — 순수 차가운 회색 대신 종이 느낌을 유지한다
  • 채도 컬러는 블루(primary/링크) 하나로 절제하고, 나머지 색은 일러스트·차트에만 허용한다
  • 위계는 굵기(400/500/700)와 muted-foreground 단계로 세운다
  • 디스플레이 타이포는 크고 자간을 강하게 조인다(-0.03~-0.05em), 헤드라인은 마침표로 끝나는 문장형
  • 구획은 헤어라인과 muted 톤 단차로, 그림자는 1-4% 불투명도 이하로

Don't

  • 그라디언트·글래스모피즘·네온 컬러 금지
  • 무겁고 진한 그림자 금지 — 종이 위 카드가 살짝 뜬 정도까지만
  • radius 12px 초과의 과한 라운드 금지 (pill은 배지·아바타에만)
  • 세리프 헤드라인 금지 — 세리프는 인용·장식적 본문에만 보조로
  • 차가운 블루그레이 뉴트럴 금지 — 웜 축을 벗어나지 말 것
  • 블루 액센트를 배경 대면적에 쓰지 말 것 (CTA·링크·포커스에만)

컴포넌트 노트

button
base: primary: 블루 채움 + 흰 텍스트, radius 6px, padding 8px 16px, font 500. secondary: secondary 배경(웜 그레이 틴트) + foreground 텍스트, 동일 radius.
hover: primary는 살짝 어둡게, secondary는 muted로 틴트 심화. 100-150ms.
focus: 2px ring(블루) + 2px offset.
disabled: opacity 0.5.
ghost_variant: 네비 항목: 투명 배경 + radius 4px + 호버 시 muted 틴트.
card
배경 card 또는 muted 톤 단차, radius 8px, 헤어라인 border 선택적, 초저불투명 소프트 섀도우 0-1단계. padding 20-24px. 제목은 700, 설명은 muted-foreground 14px.
input
radius 6px, 1px border(input), 배경 background. 포커스 시 border 블루 + ring. 라벨 14px/500.
nav
화이트 스티키 바 + 하단 헤어라인. 좌측 로고, 중앙 텍스트 링크(radius 4px ghost 호버), 우측 블루 CTA 하나.
illustration
흑백 손그림 라인 일러스트 + chart 팔레트(블루/레드/틸/옐로/브라운) 원형 배지로 포인트. 사진보다 일러스트·앱 스크린샷 우선.