Productivity

notion.so

Build Custom Agents, search across all your apps, and automate busywork. The AI workspace where teams get more done, faster.

18 colors15 componentsNotionInterMulti-page · 12 screens

notion.so — The AI workspace that works for you. | Notion

1 / 12 — The AI workspace that works for you. | Notion

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

Extracted from notion.so

Primary

#0075DE

#097FE8

#62AEF0

#27918D

#9849E8

#1313BA

#FF6D00

#005BAB

Neutral

#000000

#FFFFFF

#31302E

#A39E98

#F6F5F4

#615D59

#F9F9F8

#F2F9FF

Semantic

#F64932

#FFB110

Typography · NotionInter

h322px · 700

body14px · 400

span14px · 500

link16px · 400

list-item12px · 500

h164px · 700

Spacing

16px

8px

24px

4px

12px

32px

20px

28px

Elevation

rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px

rgba(0, 0, 0, 0) 0px 1px 0px 0px

rgba(0, 0, 0, 0.2) 0px 2px 7px 0px

rgba(0, 0, 0, 0.04) 0px 4px 18px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.84688px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.01) 0px 0.175px 1.04062px 0px, rgba(255, 255, 255, 0.6) 0px 0px 1px 0px

Components · 15