← Gallery

extracted · 29 artefacts

notion.so

Live extraction of https://notion.so — tokens, emitters, anatomy, icons, voice, motion, MCP server, AGENTS.md, prompt pack and a 13-chapter brand book. Generated with one command.

Open brand book ↗Browse tokensAll 29 files
18colors
Aaf0
vs design-extractor.com

They surface 4 sections per brand (DESIGN.md · Tailwind · CSS · Tokens). designlang ships 29 artefacts for notion.so and renders 12+ sections below.

See full comparison ↗
4,929 charsbrand book ↗
---
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._

Typography

NotionInter
The quick brown fox jumps
display · 56px / 600
The quick brown fox jumps
headline · 36px / 500
The quick brown fox jumps
subhead · 22px / 400
The quick brown fox jumps
body · 16px / 400
The quick brown fox jumps
caption · 12px / 500 · uppercase

Voice

Tone, CTA verbs, headlines and pronoun stance — pulled from the live page.

tone · friendly · you-only

top CTA verbs

download×3get×2english×2product×1ai×1solutions×1resources×1request×1

Motion

Durations and easing curves captured from real CSS transitions.

durations

instant75ms
xs100ms
sm200ms

easings

  • ease-in-outease
  • linearlinear
  • custom-9cubic-bezier(0.45, 0, 0.55, 1)
  • custom-313cubic-bezier(0.645, 0.045, 0.355, 1)

Component anatomy

Typed React stubs — variants, slots and props detected from clustered DOM patterns.

1,029 chars · TypeScript
// Auto-generated by designlang — component anatomy v2.
// Scaffolds. Wire into your token system; not a runtime library.

import * as React from 'react';

export interface ButtonProps {
  variant?: 'default';
  size?: 'md';
  leadingIcon?: React.ReactNode;
  children?: React.ReactNode;
}

export function Button({ variant = 'default', size = 'md', ...rest }: ButtonProps) {
  return React.createElement('button', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface CardProps {
  variant?: 'default';
  size?: 'lg';
  children?: React.ReactNode;
}

export function Card({ variant = 'default', size = 'md', ...rest }: CardProps) {
  return React.createElement('div', { 'data-variant': variant, 'data-size': size, ...rest });
}

export interface LinkProps {
  variant?: 'default';
  size?: 'md';
  children?: React.ReactNode;
}

export function Link({ variant = 'default', size = 'md', ...rest }: LinkProps) {
  return React.createElement('a', { 'data-variant': variant, 'data-size': size, ...rest });
}

Icon system

SVG icon census — count, style mix, grid and stroke profile.

69
total icons
0
stroke-only
63
fill-only
2.67
avg stroke
—
library

MCP / Agent rules

The same payload the stdio MCP server hands to Claude Code, Cursor and Windsurf. Wire it into your editor and the agent answers brand-system questions with the actual extraction — not a guess.

How to wire MCP →npx designlang mcp --url https://notion.so
{
  "colors": {
    "all": [
      {
        "hex": "#000000",
        "rgb": {
          "r": 0,
          "g": 0,
          "b": 0,
          "a": 0.95
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 0
        },
        "count": 2131,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#f6f5f4",
        "rgb": {
          "r": 246,
          "g": 245,
          "b": 244,
          "a": 1
        },
        "hsl": {
          "h": 30,
          "s": 10,
          "l": 96
        },
        "count": 384,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#a39e98",
        "rgb": {
          "r": 163,
          "g": 158,
          "b": 152,
          "a": 1
        },
        "hsl": {
          "h": 33,
          "s": 6,
          "l": 62
        },
        "count": 202,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#ffffff",
        "rgb": {
          "r": 255,
          "g": 255,
          "b": 255,
          "a": 1
        },
        "hsl": {
          "h": 0,
          "s": 0,
          "l": 100
        },
        "count": 170,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },
      {
        "hex": "#615d59",
        "rgb": {
          "r": 97,
          "g": 93,
          "b": 89,
          "a": 1
        },
        "hsl": {
          "h": 30,
          "s": 4,
          "l": 36
        },
        "count": 48,
        "contexts": [
          "text",
          "border"
        ]
      },
      {
        "hex": "#0075de",
        "rgb": {
          "r": 0,
          "g": 117,
          "b": 222,
          "a": 1
        },
        "hsl": {
          "h": 208,
          "s": 100,
          "l": 44
        },
        "count": 31,
        "contexts": [
          "text",
          "border",
          "background"
        ]
      },
      {
        "hex": "#097fe8",
        "rgb": {
          "r": 9,
          "g": 127,
          "b": 232,
          "a": 1
        },
        "hsl": {
          "h": 208,
          "s": 93,
          "l": 47
        },
        "count": 25,
        "contexts": [
          "background",
          "text",
          "border"
        ]
      },

Prompt pack

Paste-ready prompts pre-loaded with the notion.so system, for v0, Lovable, Cursor and Claude Artifacts.

v01,708 chars
Build a landing page with this exact visual language.
COLORS:
  #000000
  #f6f5f4
  #a39e98
  #ffffff
  #615d59
  #0075de
  #097fe8
  #62aef0
  #f64932
  #9c7054
  #ff6d00
  #78736f
  #9849e8
  #ffb110
FONTS: [object Object], [object Object], [object Object]
SPACING: 2, 20, 24, 28, 32, 40, 44, 48
RADIUS: 4, 8, 12, 16, 50, 100
SHADOWS: rgba(0, 0, 0, 0) 0px 1px 0px 0px | 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 | rgba(0, 0, 0, 0.016) 0px 0.7px 1.462px 0px, rgba(0, 0, …
Lovable1,544 chars
Clone the design language of this landing page and build a fresh equivalent.
Visual feel: material-you. Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object]
Primary palette: #000000, #f6f5f4, #a39e98, #ffffff, #615d59.
Typography: [object Object], [object Object], [object Object].
Corner radius vocabulary: 4, 8, 12, 16, 50, 100.
Shadow vocabulary: rgba(0, 0, 0, 0) 0px 1px 0px 0px | 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 …
Cursor1,671 chars
# Design brief
Page type: **landing**.
Material language: **material-you**.
Voice: Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
## Tokens
```ts
export const tokens = {
  colors: ['#000000', '#f6f5f4', '#a39e98', '#ffffff', '#615d59', '#0075de', '#097fe8', '#62aef0', '#f64932', '#9c7054', '#ff6d00', '#78736f', '#9849e8', '#ffb110'],
  fonts: ['[object Object]', '[object Object]', '[object Object]'],
  radii: ['4', '8', '12', '16', '50', '100'],
  shadows: ['rgba(0, 0, 0, 0) 0px 1px 0px…
Claude Artifacts1,493 chars
Create a React artifact that reproduces this brand's design language.
Page intent: landing.
Material language: material-you.
Voice: Tone: friendly · Headings: Sentence case · CTA verbs: [object Object], [object Object], [object Object], [object Object], [object Object], [object Object].
Colors to use: #000000, #f6f5f4, #a39e98, #ffffff, #615d59, #0075de, #097fe8, #62aef0, #f64932, #9c7054, #ff6d00, #78736f, #9849e8, #ffb110.
Fonts: [object Object], [object Object], [object Object].
Radius vocabulary: 4, 8, 12, 16, 50, 100.
Sections:
- cta
- steps — heading: "Meet the night shift."
- testimonia…

All artefacts

Every file designlang produced for notion.so — 29 in total. Download anything.

Brand book1 file
Spec3 files
Tokens & emitters7 files
Anatomy1 file
Voice1 file
Motion1 file
Icons1 file
Form states1 file
MCP / Agent rules1 file
Page intel5 files
Prompt pack7 files

Run designlang on your own URL.

Same 29-artefact depth as the notion.so extraction above. No signup, no API key.

npx designlang yoursite.comTry it live