Notion

---
version: alpha
name: Notion landing-page reference
description: A spacious AI-workspace landing page combining oversized black type,
  hand-drawn character badges, blue calls to action, a large product demo, quiet bento
  feature cards and colorful customer portraits.
colors:
  primary: '#0075DE'
  surface: '#FFFFFF'
  on-surface: '#000000'
  secondary: '#F9F9F8'
  accent: '#FFC95E'
typography:
  headline-display:
    fontFamily: NotionInter
    fontSize: 96px
    fontWeight: 600
    lineHeight: 100px
    letterSpacing: -4.6px
  headline-md:
    fontFamily: NotionInter
    fontSize: 54px
    fontWeight: 700
    lineHeight: 56px
    letterSpacing: -1.87501px
  headline-mobile:
    fontFamily: NotionInter
    fontSize: 42px
    fontWeight: 600
    lineHeight: 48px
    letterSpacing: -1.5px
  body-md:
    fontFamily: NotionInter
    fontSize: 20px
    fontWeight: 400
    lineHeight: 28px
    letterSpacing: -0.125px
---

# Notion landing-page reference

## Overview

Observed at https://www.notion.com/ on 2026-09-18 at 1440px desktop and 390px mobile widths. A spacious AI-workspace landing page combining oversized black type, hand-drawn character badges, blue calls to action, a large product demo, quiet bento feature cards and colorful customer portraits. This is an independent visual reference, not an official brand specification.

## Colors

The palette above records key sampled CSS colors, with approximate neutral conversions explicitly noted where relevant. Use the primary color for the observed emphasis and acquisition hierarchy; keep surface and text roles distinct. Artwork, photography and gradients add colors beyond these tokens. Keep blue reserved for important interactions and let drawings provide personality.

## Typography

The visible display sample uses NotionInter, 96px size, 100px line height and weight 600. Tracking is -4.6px. The frontmatter records measured display, secondary-heading and mobile-heading samples, not an exhaustive scale. Body tokens, when present, are one observed paragraph sample rather than a universal paragraph rule. Preserve supplied font assets when licensed; fallback font metrics will differ.

## Layout

Center the character row, oversized two-line hero, supporting copy and paired actions. Follow with a wide workspace demonstration and logo strip. Shift into left-aligned bento feature chapters, smaller use-case tiles, three customer portraits, a quiet closing action and multi-column footer. The sampled hero region is 1252px wide at x=94 on the 1440px viewport.

At 390px the header keeps the wordmark, a blue acquisition action and menu icon. Hero text wraps into more lines at 42px/48px. Actions stack, body gutters shrink to 16px, and the desktop hero demo is not visible in the inspected mobile hero; feature cards become a vertical sequence. Both inspected widths measured no horizontal document overflow. Intermediate breakpoints and the full mobile scroll sequence were not inspected. Desktop section spacing and card arrangement are visual observations; no complete spacing scale was inferred.

## Elevation & Depth

The page is predominantly flat white. Product windows gain restrained soft shadows, while nested interface cards create detail without heavy page-level elevation. Exact shadow settings were not measured.

## Shapes

Use clean rounded-rectangle controls and soft feature cards. Contrast these restrained surfaces with circular hand-drawn characters and a large rounded highlight around the changing hero verb. Radius descriptions are visual estimates unless explicitly measured elsewhere.

## Components

Reuse blue primary and pale-blue secondary actions. Product demonstrations sit inside browser-like chrome. Tiny agent illustrations frame the hero, feature tiles pair short labels with interface imagery, and portrait testimonials introduce large colored blocks. The changing hero verb is captured in one state.

## Do's and Don'ts

Keep blue reserved for important interactions and let drawings provide personality. Preserve black headline contrast and roomy white space. Do not replace the native illustrations with unrelated stock art or assume that a sampled animated verb is permanent copy.

- Do retain the reference-specific layout and responsive hierarchy, not only its palette.
- Do verify readable content when substituting your own assets and copy.
- Don't infer hover, keyboard focus, validation or open-menu states: those were not exercised.
- Don't treat the static screenshot as a complete animation or carousel specification.