---
site: "The AI workspace that works for you. | Notion"
url: "https://notion.so"
generated_at: "2026-05-14T22:15:56.762Z"
generator: "designlang@12.11.0"
intent: landing
material: material-you
tokens:
  colors:
    primary: "#455dd3"
    secondary: "#0075de"
    accent: "#213183"
    background: "#ffffff"
    foreground: "#000000"
  typography:
    sans: NotionInter
    base: 14
  spacing:
    base: 2
    scale: "[2, 20, 24, 28, 32, 40, 44, 48, 56, 60]"
  radii:
    sm: 4
    md: 8
    lg: 16
    full: 100
  shadows:
    xs: "rgba(0, 0, 0, 0.016) 0px 0.7px 1.462px 0px, rgba(0, 0, 0, 0.03) 0px 3px 9px 0px"
    sm: "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"
---

# Overview

A **landing** page (heuristic confidence 0.61), dressed in **material-you** material (0.45).

> "Meet the night shift."

The author writes in a **friendly** voice; headings tend to be **Sentence case** case and **balanced**.

Reading order detected on the source: `cta → nav → nav → steps → testimonial → bento → bento → bento → content → bento → bento → bento → bento → bento → bento → bento → bento → hero → testimonial → footer → nav`.

Source: <https://notion.so>.

# Colors

| role | hex | usage |
|---|---|---|
| primary | `#455dd3` | 2 |
| secondary | `#0075de` | 31 |
| accent | `#213183` | 1 |
| background | `#ffffff` | — |
| foreground | `#000000` | — |

**Neutrals:** `#000000` · `#f6f5f4` · `#a39e98` · `#ffffff` · `#615d59`

**Total unique colors detected:** 30.

# Typography

**Families**
- `NotionInter` · 1557 uses
- `Times` · 5 uses
- `Lyon Text` · 2 uses

**Body size:** `14px` / line-height `20px`.

**Heading scale**
| level | size | weight | line-height |
|---|---|---|---|
| h1 | `64px` | `700` | `64px` |
| h2 | `54px` | `700` | `56px` |
| h3 | `26px` | `700` | `32px` |
| h4 | `22px` | `700` | `28px` |

# Layout

**Spacing base:** `2px` increments.
**Scale:** `2px` · `20px` · `24px` · `28px` · `32px` · `40px` · `44px` · `48px` · `56px` · `60px`

**Layout primitives:** 121 grid containers · 257 flex containers.

**Breakpoints:** `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px` · `[object Object]px`

# Elevation and Depth

**Shadow scale**
- `xs` — `rgba(0, 0, 0, 0) 0px 1px 0px 0px`
- `xs` — `rgba(0, 0, 0, 0.01) 0px 0.175px 1.041px 0px, rgba(0, 0, 0, 0.02) 0px 0.8px 2.925px 0px, rgba(0, 0, 0, 0.027) 0px 2.025px 7.847px 0px, rgba(0, 0, 0, 0.04) 0px 4px 18px 0px`
- `xs` — `rgba(0, 0, 0, 0.016) 0px 0.7px 1.462px 0px, rgba(0, 0, 0, 0.03) 0px 3px 9px 0px`
- `sm` — `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`
- `sm` — `rgba(0, 0, 0, 0.01) 0px 0.667px 3.502px 0px, rgba(0, 0, 0, 0.016) 0px 2.933px 7.252px 0px, rgba(0, 0, 0, 0.02) 0px 7.2px 14.462px 0px, rgba(0, 0, 0, 0.024) 0px 13.867px 28.348px 0px, rgba(0, 0, 0, 0.03) 0px 23.333px 52.123px 0px, rgba(0, 0, 0, 0.04) 0px 36px 89px 0px`
- `lg` — `rgba(255, 255, 255, 0.2) 0px 0px 20px 5px`

**Z-index layers:** 9 · ⚠ 1 issue(s)

# Shapes

**Radius scale**
- `sm` — `4px`
- `md` — `8px`
- `lg` — `12px`
- `lg` — `16px`
- `full` — `50px`
- `full` — `100px`

# Components

**Detected patterns:** `buttons` · `cards` · `inputs` · `links` · `navigation` · `footer` · `modals` · `dropdowns` · `badges` · `tabs` · `accordions` · `progressBars` · `switches`

**Anatomy**
| kind | variants | sizes | instances |
|---|---|---|---|
| button | — | — | 39 |
| card | — | lg | 15 |
| link | — | — | 5 |

# Do's and Don'ts

**Do's**
- Use `download`, `get`, `english` as the primary verbs in CTAs — these dominate the source.
- Write headings in **Sentence case** case, **balanced** length.
- Address the reader with the pronoun posture **you-only**.
- Stay inside the **material-you** material — match shadow and radius habits.

**Don'ts**
- Don't ship copy on the colors flagged in accessibility — 1 contrast pair(s) fail WCAG AA on the source itself.
- Don't 1 wcag contrast failures.
- Don't 9 !important rules — prefer specificity over overrides.
- Don't 8256 duplicate css declarations.

---
_Generated by [designlang](https://github.com/Manavarya09/design-extract) v12.11.0 from <https://notion.so>._
_Compatible with the DESIGN.md convention pioneered by [design-extractor.com](https://www.design-extractor.com) — extended with intent, material, voice, anatomy, and library detection._