Brand preview

Meet the night shift.

Notion presents itself as the all-in-one workspace through a confident, illustration-rich brand voice — anchored by a deep navy hero band, a signature purple pill primary CTA, and a rich palette of pastel-tinted feature cards.

Ramp HQ Kanban
24Open
18In Progress
142Done
Note
01 / Colors

Color swatches grouped by role.

Brand & Primary
Primary#5645d4
Primary Pressed#4534b3
Primary Deep#3a2a99
Brand Navy#0a1530
Brand Navy Deep#070f24
Brand Navy Mid#1a2a52
Link Blue#0075de
Brand Spectrum
Brand Orange#dd5b00
Brand Pink#ff64c8
Brand Purple#7b3ff2
Brand Teal#2a9d99
Brand Green#1aae39
Brand Yellow#f5d75e
Brand Brown#523410
Card Tints
Peach#ffe8d4
Rose#fde0ec
Mint#d9f3e1
Lavender#e6e0f5
Sky#dcecfa
Yellow#fef7d6
Yellow Bold#f9e79f
Cream#f8f5e8
Gray#f0eeec
Surfaces & Dividers
Canvas#ffffff
Surface#f6f5f4
Surface Soft#fafaf9
Hairline#e5e3df
Hairline Soft#ede9e4
Hairline Strong#c8c4be
Text
Ink Deep#000000
Ink#1a1a1a
Charcoal#37352f
Slate#5d5b54
Steel#787671
Stone#a4a097
Muted#bbb8b1
Semantic
Success#1aae39
Warning#dd5b00
Error#e03131
02 / Typography

Notion Sans scale with compact UI weights.

Hero Display

Meet the night shift.

80 / 600 / 1.05 / -2px
Display LG

Keep work moving 24/7

56 / 600 / 1.10 / -1px
Heading 1

Try for free

48 / 600 / 1.15 / -0.5px
Heading 2

Bring all your work together

36 / 600 / 1.20 / -0.5px
Heading 3

Card titles

28 / 600 / 1.25
Heading 4

Feature tile titles

22 / 600 / 1.30
Heading 5

FAQ questions

18 / 600 / 1.40
Subtitle

Hero subtitle with generous line height.

18 / 400 / 1.50
Body MD

Primary body text uses a comfortable line height for documentation readability across all surfaces.

16 / 400 / 1.55
Body SM

Secondary body for dense product interfaces and compact supporting copy.

14 / 400 / 1.50
Caption

Caption labels for metadata and helper text.

13 / 400 / 1.40
Micro

Micro labels for compact UI hints.

12 / 500 / 1.40
Micro Uppercase

Status labels

11 / 600 / 1.40 / 1px
03 / Buttons

Every variant as a real button.

04 / Cards

Light and dark operational surfaces.

Light panel

Revenue recognition

White surface, fine divider, 12px radius, and a purposeful tile shadow.

MRR$18,420
Invoices428
Dark band

Authorization flow

Dense navy surface for product internals with localized status color.

RiskClear
RouteEU-WEST
Bold

Ask your on-demand assistants

High-emphasis banner card for feature callouts.

Feature

Pastel feature card

Lavender tint echoing live product database properties.

05 / Forms

Inputs with visible focus and error states.

Add a valid workspace name before continuing.
06 / Spacing

4px base unit with generous section rhythm.

--space-xxs
4px
--space-xs
8px
--space-sm
12px
--space-md
16px
--space-lg
20px
--space-xl
24px
--space-xxl
32px
--space-xxxl
40px
--space-section-sm
48px
--space-section
64px
--space-section-lg
96px
--space-hero
120px
07 / Radius

Sober editorial geometry — rectangles, not pills.

4px tag chips
6px type badges
8px buttons & inputs
12px cards
16px panels
20px showcases
24px large cards
9999px pill tabs
08 / Elevation

Layered diffuse shadows.

0 Flat

Border only

1 Subtle

Hover-elevated tiles

2 Card

Feature cards

3 Mockup

Hero workspace card

4 Modal

Modals, dropdowns

Source: www.designmd-store.com