Productivity

Notion

notion.so18 colors15 componentsNotionInterMulti-page · 12 screens

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

Remix Visit

Remix

Visit

12 screenshots captured· notion.so

1 / 12 · The AI workspace that works for you. | Notion · Above the fold

Preview

the generated design system

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

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

Error/Danger

#FFB110

Warning

Typography · NotionInter

h322px · 700 · 28px

body14px · 400 · 20px

span14px · 500 · 20px

link16px · 400 · 24px

list-item12px · 500 · 16px

h164px · 700 · 64px

h196px · 600 · 100px

h254px · 700 · 56px

h232px · 700 · 40px

h242px · 700 · 48px

h518px · 700 · 28px

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

Remixes of Notion

6 remixes

Latest remixes