Midnight Ink
#02093aHero canvas, top-of-page surface, and the brand's defining dark stage — deep navy reads as serious, focused, almost like an editor's darkroom before the content lights up
Notion
notion.comWebsite preview
The design language
Notion operates as a midnight workspace that hands you the keys to a clean editorial room. The first screen is a deep navy stage (#02093a) where a single bold headline commands attention, surrounded by subtle violet glows and product screenshots that float like objects under glass. Below the fold, the page lightens into a warm white editorial canvas (#f6f5f4) where product cards, testimonials, and feature blocks read like a well-designed magazine spread. Typography carries the personality: NotionInter does the utilitarian work at compact confident sizes, while Lyon Text appears as occasional editorial accent — a serif whisper that signals 'this is thoughtful, not just functional.' The color system is mostly cool blue and violet for the dark surfaces, with the brand's identity expressed through the midnight canvas itself rather than a single bright accent — a deliberate inversion of the typical SaaS color hierarchy.
Color palette
brand
Signal Blue
#0075dePrimary action buttons, filled CTA backgrounds, active link emphasis — the one bright blue that makes actions feel switched on against the midnight canvas
Sky Tint
#62aef0Decorative gradient stops, illustrated icon accents, soft highlight washes around headlines and product mockups — light blue provides the air around the heavy midnight
Royal Violet
#2537b1Decorative gradient accent, illustrated aura around product screenshots, secondary brand surface in dark mode navigation
Periwinkle
#455dd3Secondary action variant, outlined button fill, dark mode card surface elevation — sits between the midnight and signal blue as a bridge tone
neutral
Paper White
#f6f5f4Light section canvas, card surface on light backgrounds, the warm off-white that gives below-the-fold sections a printed-page quality
Pure White
#ffffffElevated card surface above Paper White, input field background, reversed text on dark buttons — only used where maximum contrast or stacking is needed
Onyx
#000000Primary text on light surfaces, hairline borders, icon strokes — the default ink for everything that needs to be read
Graphite
#0b0b0bSecondary text on light surfaces, high-contrast borders, card edges — slightly softer than pure black for visual comfort in long-form copy
Warm Gray
#615d59Muted helper text, secondary metadata, inactive icon strokes — warm undertone distinguishes it from cold grays in other SaaS systems
Stone
#a39e98Muted icon strokes, separators, and secondary graphic details. Do not promote it to the primary CTA color
Smoke
#c6c6c5Divider lines, subtle separators between content blocks on light surfaces
Faint Line
#ddddddInput field borders, form element outlines, the lightest structural divider
Charcoal
#31302eDark mode nav borders, text on dark surfaces, low-contrast dividers in the midnight stage
semantic
Cerulean
#097fe8Info badges, new-feature tags, inline highlight labels — cooler than Signal Blue, reserved for status and informational context
Typography
Type scale
Minor Third (1.2) · 16px basedisplay
64px · 700 · 1 · -2.3px trackingThe quick brown fox jumps
heading-lg
54px · 700 · 1.04 · -1.89px trackingThe quick brown fox jumps
text-42
42px · 700 · 1.14The quick brown fox jumps
heading
40px · 400 · 1.2 · -0.88px trackingThe quick brown fox jumps
text-32
32px · 400 · 1.25The quick brown fox jumps
text-26
26px · 700 · 1.23The quick brown fox jumps
heading-sm
24px · 500 · 1.33 · -0.264px trackingThe quick brown fox jumps
text-22
22px · 700 · 1.27The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
NotionInter
- Weights
- 400, 500, 600, 700
- Sizes
- 12, 14, 15, 16, 20, 22, 24, 26, 40, 42, 54, 64
- Line height
- 1.20–1.50 for body, 1.00–1.14 for display
- Letter spacing
- -0.036em at 64px scaling to 0.01em at 12px; display sizes tighten aggressively, body sizes stay near zero or slightly open
- Fallback
- Inter
- Features
- "lnum", "locl" 0
The workhorse — covers all body copy, UI labels, navigation, and most headings from 12px captions up to 64px display. Weight 500 dominates body and UI, weight 600 for emphasized headlines, weight 700 reserved for the hero display. Tight negative tracking at large sizes (-0.036em at 64px) prevents the large forms from feeling airy; at 14px the tracking opens slightly positive. The 'lnum' and 'locl' features lock tabular numerals and locale forms — critical for product UI numbers and dates
Additional typeface
Lyon Text
- Weights
- 400
- Sizes
- 32
- Line height
- 1.25
- Fallback
- Source Serif Pro
Editorial accent — a serif heading that appears sparingly on feature section titles. The 32px size and 1.25 line-height give it a magazine-pull-quote quality. Its presence signals a shift from product UI to narrative content. Only weight 400, used as a moment of visual pause in an otherwise sans-serif system
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 80px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
9999pxcards
12pxsmall
5pxbadges
9999pxinputs
8pxbuttons
8pxSpacing scale
2px3px4px5px6px7px8px10px12px14px15px16px20px24px28px32px34px36px40px64px80px92px106px121px125px180px186px316pxGuidelines
Do
- Use 12px border-radius for all cards, images, and product mockup containers
- Use 8px border-radius for buttons, inputs, and interactive controls
- Use 9999px border-radius exclusively for pill-shaped badges and tags
- Use Signal Blue (#0075de) as the single filled CTA color — never introduce a second chromatic button color
- Set hero headlines at 64px NotionInter weight 700 with -2.3px letter-spacing
- Use 80px vertical gaps between major page sections to create the dark-to-light stage transition
- Use NotionInter weight 500 (not 600 or 700) for all UI labels, nav links, and button text
- Use Pure White (#ffffff) only for elevated surfaces or reversed text — default to Paper White (#f6f5f4) for light page backgrounds
- Use Lyon Text sparingly — at most once per page, at 32px, for editorial accent headings
Don’t
- Do not use Lyon Text for product UI labels, navigation, or anything below 24px — it's an editorial signal, not a utility font
- Do not use pure black (#000000) as a background — Midnight Ink (#02093a) is the dark surface; pure black appears only as text and borders
- Do not use 5px or smaller border-radius on cards or images — reserve 5px for small chips and inline elements only
- Do not place chromatic buttons on chromatic backgrounds — Signal Blue CTAs require midnight or paper-white surfaces to maintain contrast
- Do not set body text below 14px or above 20px — the 12px size is for captions and metadata only
- Do not mix the dark and light surface treatments within a single card — a card is either midnight-stage or paper-stage, never both
- Do not use multiple heading weights in the same section — pick 600 for editorial headings, 700 for hero, never both
- Do not add gradients to text, borders, or small UI elements — gradients appear only as large decorative auras around product mockups
Components
Filled CTA Button
Primary action — the 'Get Notion free' button in the hero and navSignal Blue (#0075de) background, Pure White text, 8px border-radius, 16px horizontal × 6-10px vertical padding, NotionInter weight 500 at 14-15px. Used for the single most important action on each page. On dark backgrounds it pops; on light backgrounds it remains the only chromatic element that demands attention.
Ghost/Text Button
Secondary action — 'Request a demo', 'Log in'No background fill, white or dark text matching the surface, 8px border-radius, 14-15px NotionInter weight 500. Sits beside the filled CTA at equal weight in the hero. On dark surfaces, text is white; on light surfaces, text is Onyx (#000000).
Hero Display Headline
Page-opening headlineNotionInter weight 700 at 64px, Pure White on midnight canvas, line-height 1.00, letter-spacing -2.3px. Centered. The tight tracking and single weight create a single decisive visual moment that anchors the entire page.
Editorial Section Heading
Below-the-fold section title — 'Keep work moving 24/7'NotionInter weight 600 at 40-54px, Onyx (#000000) on Paper White, left-aligned, letter-spacing -0.88 to -1.89px. Sits at the top of light sections with generous bottom margin before content.
Product Screenshot Card
Hero and feature section visual centerpieceLarge rounded-rectangle screenshot of Notion UI, 12px border-radius, floating on midnight or paper surface. The hero version uses the deep multi-layer shadow stack to lift it off the navy background. Feature-section versions sit on white cards with no shadow, relying on the border-radius for definition.
Testimonial Quote Card
Customer proof — 'Trusted by teams that ship'Pure White background, 1px Onyx (#000000) hairline border or 12px radius, 24px padding. Company name in weight 600 at 16px, quote text in NotionInter 400 at 20px line-height 1.4, 'Read the full story →' link in Signal Blue weight 500. The featured card spans full width with a video thumbnail; smaller cards stack in 3-column grid.
Logo Grid
Social proof band — 'Trusted by 98% of the Forbes Cloud 100'Company logos arranged in a single horizontal row on midnight canvas, Pure White or light gray fill at consistent height (~24px), generous 40-60px horizontal spacing. No card backgrounds, no borders — logos float directly on the dark surface.
Feature Block Card
Product feature showcase — Custom Agents, Office Q&ATwo-column layout: left side has heading + description on white, right side has a product UI screenshot on a subtly tinted card (peach/blue tint). 12px radius on the screenshot container, no shadow, 24px padding inside the card. Creates a split visual rhythm down the page.
Pill Badge / Tag
Status labels — 'New' badge, category tags9999px border-radius (full pill), small horizontal padding (10-12px), 4-5px vertical padding. NotionInter weight 500 at 12px. Faint blue background (#f2f9ff) with Cerulean (#097fe8) text for 'New' labels. Used sparingly as visual punctuation.
Navigation Bar
Top-level site navigationTransparent or midnight background, fixed/sticky at top. Logo (Notion 'N' mark) far left, nav links center (Product, AI, Solutions, Resources, Enterprise, Pricing, Request a demo) in NotionInter 500 at 14px, filled Signal Blue CTA + ghost Log in far right. Charcoal (#31302e) 1px bottom border for separation.
Cookie Consent Banner
GDPR/privacy notice overlayFixed bottom-center on white, 1px Onyx border, 8px radius, 16px padding. Body text in NotionInter 400 at 14px, 'Accept all' as filled blue button, 'Reject all' as outlined blue button, 'More options' as text link.
Surfaces & elevation
Level 0
Midnight Canvas
#02093aHero and top-of-page dark stage
Level 1
Periwinkle Surface
#455dd3Dark mode card surface, secondary nav background
Level 2
Royal Violet
#2537b1Illustrated aura and decorative accent layer
Level 3
Paper White
#f6f5f4Below-the-fold light section canvas
Level 4
Pure White
#ffffffElevated cards and input fields on Paper White
Hero product mockup
rgba(0, 0, 0, 0.01) 0px 1px 3px 0px, rgba(0, 0, 0, 0.02) 0px 3px 7px 0px, rgba(0, 0, 0, 0.02) 0px 7px 15px 0px, rgba(0, 0, 0, 0.04) 0px 14px 28px 0px, rgba(0, 0, 0, 0.05) 0px 23px 52px 0px
Layout & imagery
Layout
The page follows a max-width 1200px centered column with full-bleed dark and light bands that extend edge to edge. The hero is a full-viewport-height midnight navy section with centered headline, subtext, and dual CTA buttons (filled + ghost), with a large product screenshot overlapping the bottom edge of the hero. Below: a dark band of company logos in a grid, then a sharp transition to a white section with a large left-aligned heading and product cards in a 2-column layout. Further down: a testimonial section on white with a featured large card spanning the top row and smaller quote cards in a 3-column grid below. Navigation is a minimal top bar with logo left, links center, and two buttons right (filled blue 'Get Notion free' + ghost 'Log in'). The section rhythm alternates dark → light with generous 80px vertical gaps, creating a distinct stage-to-paper transition that defines the page's reading flow.
Imagery
The site mixes real product screenshots with minimal illustrated accents. The hero displays a large Notion workspace UI screenshot floating on the midnight canvas, surrounded by small illustrated mascot characters (cat, fox, robot) in circular badge frames. Below the fold, product UI cards show actual Notion interface screens cropped to feature specific workflows (kanban boards, databases, AI features). There is no lifestyle photography — the product IS the hero imagery. The editorial sections use no decorative illustrations, only typography and clean card layouts. Icons are minimal and line-style, appearing only in navigation and feature labels. The visual density is moderate: large typographic moments with product screenshots occupying generous space, never crowded with decorative graphics.
Design notes
Agent Guide
Quick Color Reference: - text (primary): #000000 - text (on dark): #ffffff - background (hero/dark): #02093a - background (light sections): #f6f5f4 - border: #000000 (hairline) - accent (Signal Blue): #0075de - primary action: #ffffff (filled action) Example Component Prompts: 1. Hero headline block: Midnight Ink (#02093a) background, 64px NotionInter weight 700, Pure White text, letter-spacing -2.3px, line-height 1.00, centered. Subtext below at 20px NotionInter weight 400, Pure White, max-width 560px, centered. Filled Signal Blue (#0075de) button 'Get Notion free' — 8px radius, Pure White text weight 500 at 15px, 16px × 10px padding. Ghost 'Request a demo' button beside it — no fill, Pure White text, same sizing. 2. Feature section card: Paper White (#f6f5f4) background, left-aligned heading at 54px NotionInter weight 600, Onyx (#000000) text, letter-spacing -1.89px. Right-side product screenshot container — Pure White (#ffffff) background, 12px border-radius, 24px padding inside, no shadow. 3. Testimonial card: Pure White (#ffffff) background, 1px Onyx (#000000) border, 12px border-radius, 24px padding. Company name at 16px NotionInter weight 600. Quote at 20px NotionInter weight 400, line-height 1.4. 'Read full story →' link in Signal Blue (#0075de) weight 500 at 15px. 4. Create a Primary Action Button: #ffffff background, #000000 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. 5. Pill badge: Faint blue (#f2f9ff) background, Cerulean (#097fe8) text, 9999px radius, 12px horizontal × 4px vertical padding, NotionInter weight 500 at 12px.
Surface Philosophy
The design operates on a two-stage metaphor: the midnight stage and the paper page. The midnight stage (#02093a) is for hero moments, navigation, and the first impression — it signals 'we are serious, focused, and this is product software, not a toy.' The paper page (#f6f5f4) is for everything below the fold — features, testimonials, product details — it signals 'now sit down and read.' The warm off-white tone of Paper White is deliberate: pure white would feel clinical and generic; the slight warmth makes long-form sections feel like a well-designed editorial spread rather than a dashboard. Never blend the two stages within a single component — a card is either midnight-stage or paper-stage. The transition between them is always sharp (no gradient bridges) and accompanied by 80px of vertical breathing room.
Similar brands
Linear
Same midnight-canvas-to-light-content transition with blue accent CTAs and compact confident Inter-style typography
Vercel
Dark hero stage with centered typographic headline, minimal decoration, and a single vivid blue for primary action
Loom
Warm off-white light sections contrasting with a dark hero, editorial heading scale, and product screenshot as the hero visual
Stripe
Gradient auras around product mockups, multi-layer soft shadows on floating UI screenshots, and blue-violet accent palette in dark mode
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
