/dev/notion

SaaS向けの、よくあるCRUD APIとは一線を画します。

curl -fsSL https://ntn.dev | bash
Notion CLIで構築を開始する、またはドキュメントを読む
Notionを無料で始める ドキュメントを読む
01 / Colors

カラーパレット

// Brand = Page Background
Dev Blue (Page)
#1313ba
--color-campaigns-dev-platform-dos-blue / ページ全体の背景
Dev Blue α66
#1313baa8
ライト面の本文・補助テキスト
Surface Lavender
#CBCBEF
バッジ・ステータスラベル
// Surface (重ね面)
Surface Light
#F6F6FC
カード・コード面（ライト lavender）
Surface Translucent
rgba(246,246,252,.44)
ブルー面に重ねる半透明パネル（最多98回）
Embedded Product UI
#111111
埋め込み Notion 製品 UI モックアップのみ
// Text
Text on Brand
#FFFFFF
ブルー面の本文・H1（NotionDev の大半）
Text on Brand Muted
rgba(255,255,255,.75)
ブルー面の補助テキスト
Text on Light
#1313ba
ライト面の見出し（黒ではなくブランド色）
Text on Light Body
rgba(19,19,186,.66)
ライト面の本文（NotionDev 固有）
// Semantic (Notion design tokens 流用)
Danger
#f64932
--color-red-500
Warning
#ff6d00
--color-orange-500
Info Blue
#097fe8
--color-blue-500（Dev Blue とは別）
02 / Typography — 実測値

タイポグラフィ階層

/dev/notion
NotionInter / 96px / 700 / line-height: 96px (1.0) / letter-spacing: -3.5pxDisplay (Hero)
あらゆるデータソースをNotionに同期。
NotionInter / 64px / 700 / line-height: 64px (1.0) / letter-spacing: -2.125pxH1
Support Tickets と Notion CLI
NotionInter / 54px / 700 / line-height: 56px (1.04) / letter-spacing: -1.875pxH2
宣言型スキーマと永続的カーソル
NotionInter / 32px / 700 / line-height: 38.4px (1.2)H3 lg
SaaS向けの、よくあるCRUD APIとは一線を画します。Notion CLI、宣言型スキーマ、ワーカー、Webhook を備えた開発者プラットフォーム。
NotionInter / 22px / 400 / line-height: 30px (1.4) / letter-spacing: -0.125pxLead
メンション
NotionInter / 18px / 700 / line-height: 28px (1.56) / letter-spacing: -0.125pxH3 sm
本文テキスト — ワーカーに加え、宣言型スキーマと永続的カーソルを組み合わせることで、外部データをNotionデータベースへ自然に流し込めます。Webhook と Agent Tools により、AI ワークフローに組み込むこともできます。
NotionInter / 16px / 400 / line-height: 24px (1.5) / letter-spacing: normalBody (on Brand)
補足テキスト — Caption (14px) / rgba(255,255,255,0.75)
NotionInter / 14px / 400 / line-height: 20px (1.43)Caption
curl -X POST https://api.notion.com/v1/databases/{id}/query
iA Writer Mono / 14px / 400 / line-height: 20pxCode Inline
1,234,567
font-feature-settings: "lnum", "locl" 0 — 数字を Lining Figures に揃える
03 / Terminal — Notion CLI

Notion CLI とワーカー

$notion workers run sync:tickets
Workers > sync:tickets
Syncing 12,481 records from Zendesk...
Done. Synced in 4.2s.
$notion agent run data-scout
Data Scout > tool:Query
Found 4 matching pages.
$claude code --task "review schema migration"
Claude Code # Running tests...
42 passed, 0 failed
[S]Syncssync:zendesk
[A]Agent Toolstool:Query
[H]Webhookson:created
[W]Workersnotion run
04 / Article — ドキュメント組版

API ドキュメントの組版サンプル

あらゆるデータソースをNotionに同期。

NotionDev はドキュメント、データベース、AIエージェントを notion CLI とワーカーで結びつける開発者プラットフォームです。SaaS向けの、よくあるCRUD APIとは一線を画します。

宣言型スキーマと永続的カーソル

外部データソースに対する SDK を、schema.yml 一枚で記述できます。ワーカーがバックグラウンドで動き、変更点を Notion データベースへ自然に流し込みます。APIドキュメントを読む→

メンション・Webhook・Agent Tools

Webhook で他システムからのイベントを購読し、Agent Tools 経由で AI に作業させます。font-family は NotionInter をベースに、コード断片は iA Writer Mono で組まれています。

日本語本文は rgba(19, 19, 186, 0.66) — 黒ではなくブランド色の透過で、ページ全体に統一感を持たせます。ABC abc 123

05 / Buttons

ボタンバリエーション

Notionを無料で始める
Primary (Nav)
日本語
Tertiary (Footer)
ログイン
Ghost
例を見る
Small
APIドキュメントを読む→
Inline Link
// Menu Buttons (LLM picker)
Claude GPT-5 Gemini Llama
06 / Cards

カードコンポーネント

Notion CLI

ローカル環境から Notion ワークスペースを操作。スキーマ、ワーカー、シンクをコードで管理できます。

ドキュメント →

Agent Tools

AI エージェントに Notion 上の操作を委ねる。検索、作成、更新を関数として公開できます。

ドキュメント →

Webhooks

ページの作成・更新・削除に応じて任意のエンドポイントに通知。リアルタイム連携を可能にします。

ドキュメント →
07 / Forms

フォーム要素

// デフォルト — border: rgba(255,255,255,.13), radius: 0
// フォーカス — border: #1313ba (Dev Blue)
// エラー — border: #f64932 (Danger)
08 / Elevation

Depth & Elevation

Level 0: Flat
影なし、ボーダーのみ
Level 1
--shadow-100
Level 2
--shadow-200
Level 3
--shadow-300
Focus Ring
#1313ba
09 / Spacing

スペーシングスケール

4
8
16
24
32
48
64
96
120
10 / Layout

コンテンツ幅

Max Container 1200px
Content Area 1100px
Article Body 780px