Name: Dembrandt
Author: Dembrandt

Notion

All-in-one workspace for notes and docs

Dynamic theming

Stripe Linear Notion OpenAI Tesla Airbnb Figma Slack Uber Apple Raycast Krea AI Family Oura Nike Duolingo Arc Perplexity AI Anthropic Vercel Cursor

Observed with Dembrandt. Showing a simplified version — the full output includes button states, gradients, animations, and more. Try the CLI for complete results.

Design tokens observed from publicly visible CSS. Dembrandt does not host, copy, or redistribute any brand assets.

Colors

#000000

#37352f

#2eaadc

#eb5757

#f7f6f3

#ffffff

Typography

Inter, -apple-system, sans-serif

hero:40px / 700

body:16px / 400

button:14px / 500

Shadows

Spacing

2px4px8px12px16px24px

Border Radius

3px

4px

8px

Button States

React

Default

#000000

Hover

#37352f

Active

#1a1a1a

radius: 3pxpadding: 8px 14px

output.json

{
  "url": "notion.so",
  "colors": [
    "#000000",
    "#37352f",
    "#2eaadc",
    "#eb5757",
    "#f7f6f3",
    "#ffffff"
  ],
  "typography": {
    "fontFamily": "Inter, -apple-system, sans-serif",
    "hero": "40px / 700",
    "body": "16px / 400",
    "button": "14px / 500"
  },
  "shadows": [
    "0 1px 0 rgba(55,53,47,0.09)",
    "0 4px 12px rgba(0,0,0,0.08)",
    "0 12px 32px rgba(0,0,0,0.12)"
  ],
  "spacing": [
    "2px",
    "4px",
    "8px",
    "12px",
    "16px",
    "24px"
  ],
  "borderRadius": [
    "3px",
    "4px",
    "8px"
  ],
  "buttons": {
    "default": {
      "bg": "#000000",
      "text": "#ffffff"
    },
    "hover": {
      "bg": "#37352f",
      "text": "#ffffff"
    },
    "active": {
      "bg": "#1a1a1a",
      "text": "#ffffff"
    },
    "radius": "3px",
    "padding": "8px 14px",
    "framework": "React"
  }
}

$npx dembrandt notion.so