01 / Colors

lorem ipsum dolor

// Brand = Page Background

Dev Blue (Page)

#1313ba

--color-campaigns-dev-platform-dos-blue / lorem ipsum dolor

Dev Blue α66

#1313baa8

lorem ipsum dolor / lorem ipsum dolor

Surface Lavender

#CBCBEF

lorem / lorem ipsum dolor

// Surface (lorem)

Surface Light

#F6F6FC

lorem / lorem ipsum(lorem lavender)

Surface Translucent

rgba(246,246,252,.44)

lorem ipsum dolor sit amet consectetur(lorem 98 lorem)

Embedded Product UI

#111111

lorem ipsum Notion lorem UI lorem ipsum dolor

// Text

Text on Brand

#FFFFFF

lorem ipsum dolor / H1(NotionDev lorem)

Text on Brand Muted

rgba(255,255,255,.75)

lorem ipsum dolor sit amet

Text on Light

#1313ba

lorem ipsum dolor(lorem ipsum dolor sit)

Text on Light Body

rgba(19,19,186,.66)

lorem ipsum dolor(NotionDev lorem)

// Semantic (Notion design tokens lorem)

Danger

#f64932

--color-red-500

Warning

#ff6d00

--color-orange-500

Info Blue

#097fe8

--color-blue-500(Dev Blue lorem)

02 / Typography — lorem

lorem ipsum dolor sit

/dev/notion

NotionInter / 96px / 700 / line-height: 96px (1.0) / letter-spacing: -3.5pxDisplay (Hero)

lorem ipsum dolor sit amet Notion lorem.

NotionInter / 64px / 700 / line-height: 64px (1.0) / letter-spacing: -2.125pxH1

Support Tickets lorem Notion CLI

NotionInter / 54px / 700 / line-height: 56px (1.04) / letter-spacing: -1.875pxH2

lorem ipsum dolor sit amet consectetur

NotionInter / 32px / 700 / line-height: 38.4px (1.2)H3 lg

SaaS lorem, lorem ipsum CRUD API lorem ipsum dolor sit. Notion CLI, lorem ipsum dolor, lorem ipsum, Webhook lorem ipsum dolor sit amet consectetur.

NotionInter / 22px / 400 / line-height: 30px (1.4) / letter-spacing: -0.125pxLead

lorem ipsum

NotionInter / 18px / 700 / line-height: 28px (1.56) / letter-spacing: -0.125pxH3 sm

lorem ipsum dolor — lorem ipsum dolor, lorem ipsum dolor sit amet consectetur adipiscing elit, lorem ipsum dolor Notion lorem ipsum dolor sit amet consectetur. Webhook lorem Agent Tools lorem, AI lorem ipsum dolor sit amet consectetur.

NotionInter / 16px / 400 / line-height: 24px (1.5) / letter-spacing: normalBody (on Brand)

lorem ipsum dolor — 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 — lorem Lining Figures lorem ipsum

03 / Terminal — Notion CLI

Notion CLI lorem ipsum

$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 — lorem ipsum dolor

API lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet Notion lorem.

NotionDev lorem ipsum dolor, lorem ipsum dolor, AI lorem ipsum dolornotion CLI lorem ipsum dolor sit amet consectetur adipiscing. SaaS lorem, lorem ipsum CRUD API lorem ipsum dolor sit.

lorem ipsum dolor sit amet consectetur

lorem ipsum dolor sit amet SDK lorem,schema.yml lorem ipsum dolor sit. lorem ipsum dolor sit amet consectetur, lorem ipsum Notion lorem ipsum dolor sit amet consectetur.API lorem ipsum dolor sit→

lorem ipsum / Webhook / Agent Tools

Webhook lorem ipsum dolor sit amet consectetur, Agent Tools lorem AI lorem ipsum dolor. font-family loremNotionInter lorem ipsum, lorem ipsum doloriA Writer Mono lorem ipsum dolor.

lorem ipsum dolorrgba(19, 19, 186, 0.66) — lorem ipsum dolor sit amet consectetur, lorem ipsum dolor sit amet consectetur. ABC abc 123

05 / Buttons