notion.json

Notion Brand Identity

A complete profile of Notion's visual system — colors, typography, components, and personality — extracted from https://notion.com. Built for designers, agents, and AI tools.

Page: https://characterquilt.com/branding/notion
Machine-readable JSON: https://characterquilt.com/branding/notion.json
Per-page llms.txt: https://characterquilt.com/branding/notion/llms.txt

Quick Facts

Field	Value
Primary	#02093A
Accent	#455DD3
Body Font	Inter
Heading Font	Inter

Color Palette

primary: #02093A
secondary: #0075DE
accent: #455DD3
background: #FFFFFF
textPrimary: #0D0D0D
link: #455DD3

Typography

primary: Inter — https://fonts.google.com/specimen/Inter
heading: Inter — https://fonts.google.com/specimen/Inter

Visual Assets

UI Components

input: background=#FFFFFF, textColor=#191919, borderColor=#DDDDDD, borderRadius=4px, shadow=none
buttonPrimary: background=#455DD3, textColor=#FFFFFF, borderRadius=8px, shadow=none
buttonSecondary: background=#0075DE, textColor=#FFFFFF, borderRadius=8px, shadow=none

Brand Personality

Tone: modern · Energy: medium · Audience: tech-savvy professionals and teams

Notion Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

ドキュメント | Notion
- Image: https://images.ctfassets.net/spoqsaf9291f/27ciTNb0QnYo4LFc8Jk4wg/f6d655421b75e00386e95f9bbd14859d/collaborate.png
- Source: https://www.notion.com/ja/product/docs
Top 10 Free Blogging Templates | Notion Template Marketplace
- Image: https://www.notion.com/_next/image?url=https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fpublic.notion-static.com%2Ftemplate%2F2b223742-2bde-484d-bd11-f1d7f100cbf2-1707877032824%2Fdesktop.png&w=3840&q=75
- Source: https://www.notion.com/templates/collections/top-10-free-blogging-templates-in-notion?srsltid=AfmBOopaalHAnSaK_GvHke5JZbqD1E4IXXBVwSJIW-I9nf_Xk29jbM47
เลือกจากเทมเพลต Notion กว่า 30,000 แบบ | มาร์เก็ตเพลส Notion
- Image: https://s3-us-west-2.amazonaws.com/public.notion-static.com/e1272a97-2839-4e8e-8cd4-453128888e23/c0b4685c-f51d-4853-bf8c-fc9d430797d2.png
- Source: https://www.notion.com/th/templates
Blogger Template by Pikt | Notion Marketplace
- Image: https://www.notion.com/_next/image?url=https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fpublic.notion-static.com%2Ftemplate%2F00a059b9-0588-485f-b108-fb0f4d9c7df1%2F1739012940828%2Fdesktop.jpg&w=3840&q=75
- Source: https://www.notion.com/templates/blogger?srsltid=AfmBOopMUR4djWHvqczo2toiXMeGMVCGRmxGo4sjQJoGXtGUJFLyWFky
Notion Calendar settings – Notion Help Center
- Image: https://images.ctfassets.net/spoqsaf9291f/3YlG8rC5bev3bSWBH84iX/8e0c1ea633425569c627136d8fefd160/Reference_Visuals_Group_162.png
- Source: https://www.notion.com/help/notion-calendar-settings
Your Personal Blog Template by Ivy Saskia | Notion Marketplace
- Image: https://www.notion.com/_next/image?url=https%3A%2F%2Fs3.us-west-2.amazonaws.com%2Fpublic.notion-static.com%2Ftemplate%2F12721925-58d7-4013-8704-8eebd387bacb%2Fdesktop.png&w=3840&q=75
- Source: https://www.notion.com/templates/your-personal-blog?srsltid=AfmBOook8Ro3KDL27MVryz2bfgpnBninte2Q62jgRXoN4gzG7cXLlHBG

Working with these fonts

Not found on Google Fonts? Agent Instructions that you can follow if you have permission to use the fonts:

CharacterQuilt.com suggests this flow that can help:

Open the company's homepage in a browser with DevTools open.
In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
For each captured font URL: right-click → Save As to download the file locally.
View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Programmatic alternative: load the URL with Playwright or Puppeteer, listen for response events whose Content-Type starts with font/, and write the body to disk. The CSS extraction step is the same.

Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable.

Machine-Readable Profile

{
  "colorScheme": "dark",
  "fonts": [
    {
      "family": "Inter",
      "role": "body"
    }
  ],
  "colors": {
    "primary": "#02093A",
    "secondary": "#0075DE",
    "accent": "#455DD3",
    "background": "#FFFFFF",
    "textPrimary": "#0D0D0D",
    "link": "#455DD3"
  },
  "typography": {
    "fontFamilies": {
      "primary": "Inter",
      "heading": "Inter"
    },
    "fontStacks": {
      "heading": [
        "Inter",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica",
        "Apple Color Emoji",
        "Arial",
        "sans-serif",
        "Segoe UI Emoji",
        "Segoe UI Symbol"
      ],
      "body": [
        "Inter",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica",
        "Apple Color Emoji",
        "Arial",
        "sans-serif",
        "Segoe UI Emoji",
        "Segoe UI Symbol"
      ],
      "paragraph": [
        "Inter",
        "-apple-system",
        "BlinkMacSystemFont",
        "Segoe UI",
        "Helvetica",
        "Apple Color Emoji",
        "Arial",
        "sans-serif",
        "Segoe UI Emoji",
        "Segoe UI Symbol"
      ]
    },
    "fontSizes": {
      "h1": "64px",
      "h2": "12px",
      "body": "16px"
    }
  },
  "spacing": {
    "baseUnit": 4,
    "borderRadius": "8px"
  },
  "components": {
    "input": {
      "background": "#FFFFFF",
      "textColor": "#191919",
      "borderColor": "#DDDDDD",
      "borderRadius": "4px",
      "borderRadiusCorners": {
        "topLeft": "4px",
        "topRight": "4px",
        "bottomRight": "4px",
        "bottomLeft": "4px"
      },
      "shadow": "none"
    },
    "buttonPrimary": {
      "background": "#455DD3",
      "textColor": "#FFFFFF",
      "borderRadius": "8px",
      "borderRadiusCorners": {
        "topLeft": "8px",
        "topRight": "8px",
        "bottomRight": "8px",
        "bottomLeft": "8px"
      },
      "shadow": "none"
    },
    "buttonSecondary": {
      "background": "#0075DE",
      "textColor": "#FFFFFF",
      "borderRadius": "8px",
      "borderRadiusCorners": {
        "topLeft": "8px",
        "topRight": "8px",
        "bottomRight": "8px",
        "bottomLeft": "8px"
      },
      "shadow": "none"
    }
  },
  "images": {
    "logo": "data:image/svg+xml;utf8,%3Csvg%20width%3D%2233%22%20height%3D%22334%22%20viewBox%3D%220%200%2033%2034%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22globalNavigation_logoStickerized__aqGkF%22%20data-fc-idx%3D%220%22%3E%3Cpath%20d%3D%22M3.8051%203.26755L20.5301%202.04319C22.5839%201.86808%2023.1124%201.98538%2024.4032%202.91756L29.7421%206.64773C30.623%207.28917%2030.9165%207.46381%2030.9165%208.16307V28.6217C30.9165%2029.9038%2030.4468%2030.6622%2028.804%2030.7782L9.38138%2031.9442C8.14825%2032.0027%207.56135%2031.8279%206.91556%2031.0114L2.98395%2025.9405C2.27947%2025.0072%201.98651%2024.3088%201.98651%2023.4918V5.3068C1.98651%204.25826%202.45649%203.38366%203.8051%203.26755Z%22%20fill%3D%22%23fff%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.64643%201.29903L20.3723%200.0746037C21.3849%20-0.0114809%2022.3097%20-0.0595444%2023.1918%200.139197C24.141%200.353054%2024.86%200.807308%2025.5578%201.31054L30.9002%205.04319L30.9158%205.05461C30.9547%205.08281%2030.9968%205.11312%2031.0417%205.14536C31.3674%205.37943%2031.8354%205.71564%2032.1631%206.09295C32.7252%206.73997%2032.9031%207.45237%2032.9031%208.16303V28.6217C32.9031%2029.4467%2032.763%2030.5442%2031.967%2031.4425C31.1549%2032.3592%2030.0175%2032.6721%2028.9448%2032.7479L28.9343%2032.7486L9.48857%2033.916L9.47602%2033.9165C8.79263%2033.949%208.01197%2033.9383%207.24718%2033.6609C6.41395%2033.3586%205.82508%2032.8277%205.35391%2032.2318L5.34799%2032.2243L1.40271%2027.1359L1.39499%2027.1257C0.55231%2026.0092%200%2024.8994%200%2023.4918V5.30675C0%204.51862%200.17342%203.55089%200.82429%202.72219C1.51537%201.84231%202.52546%201.39554%203.6337%201.30013L3.64643%201.29903ZM20.5301%202.04315L3.80509%203.26752C2.45647%203.38361%201.9865%204.25823%201.9865%205.30675V23.4918C1.9865%2024.3088%202.27946%2025.0072%202.98394%2025.9405L6.91553%2031.0114C7.56133%2031.8279%208.14822%2032.0025%209.38137%2031.944L28.804%2030.7782C30.4468%2030.6622%2030.9165%2029.9039%2030.9165%2028.6217V8.16303C30.9165%207.50025%2030.6529%207.30878%2029.8751%206.74438C29.8323%206.71333%2029.788%206.68115%2029.7421%206.6477L24.4032%202.91752C23.1124%201.98534%2022.5839%201.86805%2020.5301%202.04315Z%22%20fill%3D%22%23fff%22%20style%3D%22fill%3A%20rgb(255%2C%20255%2C%20255)%20!important%3B%22%2F%3E%3Cpath%20d%3D%22M20.5301%202.04318C22.5838%201.86808%2023.1124%201.98541%2024.4031%202.91757L29.7421%206.64778C30.623%207.28918%2030.9167%207.46383%2030.9167%208.16301V28.6217C30.9167%2029.9039%2030.4468%2030.6622%2028.804%2030.7782L9.38127%2031.944C8.14822%2032.0025%207.56137%2031.8279%206.9156%2031.0114L2.98396%2025.9405C2.27951%2025.0072%201.98647%2024.3088%201.98645%2023.492V5.30687C1.98645%204.25835%202.45646%203.38365%203.80508%203.26754L20.5301%202.04318ZM28.9214%209.91165C28.9214%209.15462%2028.6285%208.74625%2027.9818%208.80449L8.91064%209.91165C8.20688%209.97045%207.9722%2010.3204%207.9722%2011.0779V28.4466C7.97222%2029.3801%208.44147%2029.7293%209.49759%2029.6715L27.7471%2028.6217C28.8037%2028.5641%2028.9214%2027.922%2028.9214%2027.1636V9.91165ZM25.988%2012.0096C26.1051%2012.5347%2025.988%2013.0592%2025.4588%2013.1182L24.5795%2013.2926V26.1151C23.816%2026.5231%2023.1122%2026.7563%2022.5256%2026.7563C21.5863%2026.7563%2021.351%2026.4646%2020.6475%2025.5908L14.8959%2016.6149V25.2992L16.7158%2025.7076C16.7158%2025.7076%2016.7159%2026.7563%2015.2475%2026.7563L11.1994%2026.9897C11.0818%2026.7563%2011.1995%2026.1739%2011.6101%2026.0571L12.6664%2025.7662V14.2837L11.1997%2014.1668C11.0822%2013.6417%2011.3751%2012.8847%2012.1972%2012.8259L16.5398%2012.5349L22.5256%2021.6277V13.5839L20.9993%2013.4098C20.8821%2012.7679%2021.351%2012.3018%2021.9379%2012.244L25.988%2012.0096ZM23.816%204.43331C23.2877%204.02552%2022.5835%203.55846%2021.2343%203.67528L5.15507%204.84121C4.56875%204.89903%204.45158%205.19046%204.68509%205.42409L6.97519%207.23083C7.91323%207.98837%208.26511%207.93069%2010.0265%207.81388L26.632%206.82259C26.9842%206.82259%2026.6915%206.47348%2026.5739%206.41536L23.816%204.43331Z%22%20style%3D%22fill%3A%20rgb(2%2C%209%2C%2058)%20!important%3B%22%2F%3E%3C%2Fsvg%3E",
    "favicon": "https://www.notion.com/front-static/favicon.ico",
    "ogImage": "https://www.notion.com/front-static/meta/custom-agents-og.png",
    "logoHref": "/product"
  },
  "confidence": {
    "buttons": 0.95,
    "colors": 0.9,
    "overall": 0.925
  }
}