№ notion-com

Notion

Deep indigo expanse, crisp sans-serif clarity, airy negative space—a focused, modern feel.

Feature Stackminimalism dark mode saasdark

The page uses a clean, dark interface with a prominent hero section and a well-organized layout of features. The overall feeling is efficient and focused on functionality, prioritizing clarity over ornamentation. · dark saas, developer tools, notion homepage, minimalist saas, productivity tools, dark interface, feature showcase

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#348ce1
OKLCHoklch(62.9% 0.153 251)
RoleDominant
find sites →
Hex#040c3c
OKLCHoklch(19.0% 0.092 267)
RoleSurface
find sites →
Hex#f48fbe
OKLCHoklch(77.0% 0.133 351)
RoleInk
find sites →
Hex#a6599f
OKLCHoklch(57.9% 0.135 331)
RoleAccent
find sites →
Hex#a5a3c9
OKLCHoklch(73.0% 0.055 287)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	NotionInter	96px	600	1.04	-4.6px	Aa Bb Cc
h2	NotionInter	54px	700	1.04	-1.875px	Aa Bb Cc
h3	NotionInter	22px	700	1.27	-0.25px	Aa Bb Cc
body	NotionInter	16px	400	1.5	0	Aa Bb Cc
button	NotionInter	16px	400	1.5	0	Aa Bb Cc

Spacing scale

8px

14px

16px

24px

32px

64px

80px

Radius scale

0px

4px

5px

8px

12px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #348ce1;
  --color-surface: #040c3c;
  --color-ink: #f48fbe;
  --color-accent: #a6599f;
  --color-detail: #a5a3c9;
}

/* CSS variables exposed by source */
:root {
  --color-purple-300: #d6b6f6;
  --color-brown-900: #523410;
  --font-letter-spacing-sans-1100-semibold: -0.2875rem;
  --color-pink-500: #ff64c8;
  --color-orange-600: #dd5b00;
  --color-button-tertiary-text: #000000f2;
  --color-teal-400: #2a9d99;
  --color-button-primary-background-active: #005bab;
  --color-blue-700: #005bab;
  --color-alpha-black-100: #0000000d;
  --color-orange-800: #793400;
  --color-button-primary-border: #ffffff00;
  --color-purple-800: #391c57;
  --color-alpha-white-400: #ffffff4d;
  --font-line-height-600: 2.5rem;
  --font-line-height-700: 3rem;
  --color-action-button-primary-background-focus: #f6f5f4;
  --spacing-card-padding-inline-block: 2rem;
  --color-background-surface-neutral-focus: #dfdcd9;
  --color-background-surface-accent-muted: #f2f9ff;
  --color-code-comment: #0000008a;
  --color-terminal-text: #000000f2;
  --spacing-gutter-md: 1.5rem;
  --color-gray-300: #dfdcd9;
  --font-line-height-900: 4rem;
  --color-icon-button-active: #615d59;
  --color-gray-500: #78736f;
  --color-campaigns-dev-platform-dos-white: #ffffff;
  --color-green-500: #1aae39;
  --color-white: #ffffff;
  --color-action-button-primary-icon: #000000f2;
  --color-gray-400: #a39e98;
  --color-blue-400: #62aef0;
  --border-radius-800: 0.875rem;
  --font-family-fallback-mono: Nitti,Menlo,Courier,monospace;
  --color-interaction-control-icon-checked: #ffffff;
  --color-link-secondary-text-focus: #000000bf;
  --color-gray-100: #f9f9f8;
  --color-purple-600: #7237ae;
  --color-background-surface-accent-soft: #e6f3fe;
  --color-alpha-black-700: #000000bf;
  --border-radius-400: 0.375rem;
  --font-family-primary-serif-japanese: "Lyon Text";
  --color-alpha-black-600: #00000096;
  --spacing-page-inset-xl: 4rem;
  --font-size-1100: 6rem;
  --color-green-900: #05210b;
  --border-radius-300: 0.3125rem;
  --color-pink-100: #fff5fc;
  --color-campaigns-dev-platform-dos-lavender: #cbcbef;
  --color-badge-outline-background: #ffffff00;
  --color-button-ghost-background: #ffffff00;
  --font-letter-spacing-mono-50: -0.00669375rem;
  --color-border-base: #0000001a;
  --font-letter-spacing-sans-150: 0;
  --spacing-control-group-gap: 0.75rem;
  --font-family-primary-serif: "Lyon Text";
  --color-link-secondary-text: #00000096;
  --text-color-extra-light: rgb(0 0 0/20%);
  --font-family-serif-font-feature-settings: "lnum" 1,"locl" 0,"liga" 1;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Notion.
Reference design system (extracted from the live site):
- Palette: #348ce1, #040c3c, #f48fbe, #a6599f, #a5a3c9
- Typefaces: NotionInter
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/notion-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

NotionInter

96px

600

1.04

-4.6px

Aa Bb Cc

NotionInter

54px

700

1.04

-1.875px

Aa Bb Cc

NotionInter

22px

700

1.27

-0.25px

Aa Bb Cc

body

NotionInter

16px

400

1.5

Aa Bb Cc

button

NotionInter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #348ce1; --color-surface: #040c3c; --color-ink: #f48fbe; --color-accent: #a6599f; --color-detail: #a5a3c9; } /* CSS variables exposed by source */ :root { --color-purple-300: #d6b6f6; --color-brown-900: #523410; --font-letter-spacing-sans-1100-semibold: -0.2875rem; --color-pink-500: #ff64c8; --color-orange-600: #dd5b00; --color-button-tertiary-text: #000000f2; --color-teal-400: #2a9d99; --color-button-primary-background-active: #005bab; --color-blue-700: #005bab; --color-alpha-black-100: #0000000d; --color-orange-800: #793400; --color-button-primary-border: #ffffff00; --color-purple-800: #391c57; --color-alpha-white-400: #ffffff4d; --font-line-height-600: 2.5rem; --font-line-height-700: 3rem; --color-action-button-primary-background-focus: #f6f5f4; --spacing-card-padding-inline-block: 2rem; --color-background-surface-neutral-focus: #dfdcd9; --color-background-surface-accent-muted: #f2f9ff; --color-code-comment: #0000008a; --color-terminal-text: #000000f2; --spacing-gutter-md: 1.5rem; --color-gray-300: #dfdcd9; --font-line-height-900: 4rem; --color-icon-button-active: #615d59; --color-gray-500: #78736f; --color-campaigns-dev-platform-dos-white: #ffffff; --color-green-500: #1aae39; --color-white: #ffffff; --color-action-button-primary-icon: #000000f2; --color-gray-400: #a39e98; --color-blue-400: #62aef0; --border-radius-800: 0.875rem; --font-family-fallback-mono: Nitti,Menlo,Courier,monospace; --color-interaction-control-icon-checked: #ffffff; --color-link-secondary-text-focus: #000000bf; --color-gray-100: #f9f9f8; --color-purple-600: #7237ae; --color-background-surface-accent-soft: #e6f3fe; --color-alpha-black-700: #000000bf; --border-radius-400: 0.375rem; --font-family-primary-serif-japanese: "Lyon Text"; --color-alpha-black-600: #00000096; --spacing-page-inset-xl: 4rem; --font-size-1100: 6rem; --color-green-900: #05210b; --border-radius-300: 0.3125rem; --color-pink-100: #fff5fc; --color-campaigns-dev-platform-dos-lavender: #cbcbef; --color-badge-outline-background: #ffffff00; --color-button-ghost-background: #ffffff00; --font-letter-spacing-mono-50: -0.00669375rem; --color-border-base: #0000001a; --font-letter-spacing-sans-150: 0; --spacing-control-group-gap: 0.75rem; --font-family-primary-serif: "Lyon Text"; --color-link-secondary-text: #00000096; --text-color-extra-light: rgb(0 0 0/20%); --font-family-serif-font-feature-settings: "lnum" 1,"locl" 0,"liga" 1; }

Build a landing page in the visual style of Notion. Reference design system (extracted from the live site): - Palette: #348ce1, #040c3c, #f48fbe, #a6599f, #a5a3c9 - Typefaces: NotionInter - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/notion-com