夜間の業務も
まかせられる機能。

DESIGN.md から抽出したデザイントークンのカタログ。カラー、フォント、コンポーネント、スペーシングの全値を可視化。computed style 実測値に基づく。

Notion を無料で入手 DESIGN.md を読む

01 / Colors

カラーパレット

Brand / CTA
CTA White
#FFFFFF
ダーク上のCTAボタン背景
Brand Black
#000000
ライト上のCTA・ロゴ
Accent Blue
#2383E2
リンク・インライン強調
Text
Text Primary
rgba(255,255,255,0.95)
本文テキスト(ダーク上)
Text Primary (Light)
rgba(0,0,0,0.95)
本文テキスト(ライト上)
Text Secondary
rgba(255,255,255,0.6)
補足テキスト
Text Disabled
rgba(255,255,255,0.3)
無効状態
Semantic
Success
#6FCF97
成功・完了
Danger
#EB5757
エラー・削除
Warning
#F2C94C
警告・注意
Background & Surface
Background Primary
#191918
ダーク背景
Background Secondary
#1E1E1D
セクション背景
Background Tertiary
#252524
ネスト背景
Surface
#2F2F2F
カード・入力欄
Surface Hover
#3A3A3A
ホバー状態
Border Default
rgba(255,255,255,0.13)
標準ボーダー
Border Focus
#2383E2
フォーカスリング

02 / Typography -- 実測値

タイポグラフィ階層

夜間の業務もまかせられる機能。
64px / 700 / line-height: 64px (1.0) / letter-spacing: normalDisplay
ドキュメントを整理する
54px / 700 / line-height: 56px (1.04) / letter-spacing: normalHeading 1
プロジェクト管理とタスク追跡
22px / 700 / line-height: 28px (1.27) / letter-spacing: normalHeading 2
本文テキスト -- Notion はドキュメント、Wiki、プロジェクト管理を一つのワークスペースに統合するオールインワンのプロダクティビティツールです。チームの知識を整理し、プロジェクトを前に進め、新入社員のオンボーディングも効率化します。
16px / 400 / line-height: 24px (1.5) / letter-spacing: normalBody
補足テキスト -- Caption (14px)
14px / 400 / line-height: 20px (1.43) / color: Text Secondary
最小テキスト -- Small (12px)
12px / 400 / line-height: 16px (1.33)
1,234,567
font-feature-settings: "lnum", "locl" 0 -- 数字は Lining Figures(等高数字)

ドキュメントページの組版サンプル

プロダクティビティを再定義する

Notion はドキュメント、Wiki、プロジェクト管理を一つのワークスペースに統合します。チームの知識を整理し、プロジェクトを前に進めるための基盤を提供します。

ブロックベースのエディタ

テキスト、画像、コードブロック、データベースなど、あらゆるコンテンツを/コマンドで挿入できます。font-family は NotionInter をカスタムビルドし、font-feature-settings: "lnum" で数字を Lining Figures に統一しています。ABC abc 123

日本語と英数字が混在するドキュメントでも、Inter ベースの欧文グリフとシステム和文フォントの組み合わせで、統一感のある表示を実現しています。


04 / Buttons

ボタンバリエーション


05 / Cards

カードコンポーネント

ドキュメント管理

チームの知識をひとつのワークスペースに集約。ブロックベースのエディタで、あらゆるコンテンツを柔軟に構成できます。

詳しく見る

プロジェクト管理

タスク、タイムライン、カンバンボードを一元管理。チームの進捗を可視化し、プロジェクトを確実に前に進めます。

詳しく見る

Notion AI

AIが業務を自動化し、ドキュメント作成、要約、翻訳などをサポート。夜間の業務もまかせられる機能を提供します。

詳しく見る

06 / Forms

フォーム要素

デフォルト -- border: rgba(255,255,255,0.13), radius: 6px
フォーカス -- border: #2383E2 (Accent Blue)
エラー -- border: #EB5757 (Danger)

07 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
カード・リスト項目
Level 2
ドロップダウン・ポップオーバー
Level 3
モーダル・ダイアログ
Focus Ring
#2383E2 (Accent Blue)

08 / Spacing

スペーシングスケール

4
8
16
24
32
48
64

09 / Layout

コンテンツ幅

Max Container 1200px
Content Area 940px
Article Body 680px