Productivity / Design handoff

Notion
Design system.

A calm workspace language, from everyday controls to connected layouts. An independent study of reusable components, their states and the details developers need to build with them.

Explore the components

Notion / A connected design language

Workspace / Connected building blocks

A place for
the next idea.

Project brief

Design decisions

Ready for handoff

<Component variant="default" />

FoundationsComponents & statesSpecificationsDeveloper handoff

Design Systems Hub/

Notion Design System

Open Assembled Product Screen

01. Foundations & Tokens

02. Atoms (Primitives)

03. Molecules (Composites)

04. Organisms (Modules)

05. Templates (Shells)

06. Assembled Screen

07. Design Guidelines

System ContractWarm Paper Calm

#0075de Blue structural action · #f6f5f4 canvas floor · #213183 Night hero · 8 sticker hues · Zero monospace font.

atoms/Button / Primary CTA (Pill)button-primary

Screen View

Primary Conversion Action · 9999px Pill

Background #0075de · Text #ffffff · Scale(0.95) active press

JSX for button-primary

// Primary Marketing CTA · 9999px Pill
<button
  className="h-11 px-6 rounded-full text-[16px] font-medium bg-[#0075de] text-white hover:bg-[#005bab] active:scale-95 transition shadow-xs flex items-center gap-2"
>
  <span>Get Notion free</span>
  <ArrowRight className="h-4 w-4" />
</button>

DESIGN.md source usage terms

Source reference: GetDesign.md. Brand and product rights remain with their respective owners.

NotionDesign system.

A place forthe next idea.

Every great journey startswith a conversation.

Notion
Design system.

A place for
the next idea.

Every great journey starts
with a conversation.