{
  "$generatedBy": "BrandSweets tokens.json — notion v2",
  "brand": {
    "slug": "notion",
    "name": "Notion",
    "version": 2,
    "schemaVersion": "1"
  },
  "identity": {
    "name": "Notion",
    "tagline": "The connected workspace where better, faster work happens.",
    "sector": "productivity software"
  },
  "colors": {
    "primary": {
      "hex": "#191919",
      "name": "Black",
      "usage": "The brand's core color — the black wordmark and 'N' mark; primary UI chrome.",
      "scale": {
        "50": "#f7f7f7",
        "100": "#ededed",
        "200": "#d9d9d9",
        "300": "#bdbdbd",
        "400": "#8f8f8f",
        "500": "#6b6b6b",
        "600": "#4f4f4f",
        "700": "#3d3d3d",
        "800": "#2b2b2b",
        "900": "#1f1f1f",
        "950": "#191919"
      }
    },
    "accent": {
      "hex": "#2383e2",
      "name": "Notion Blue",
      "usage": "Product accent — links, primary buttons, selection. Notion blue.",
      "scale": {
        "50": "#e9f3fc",
        "100": "#d1e6f9",
        "200": "#a3ccf3",
        "300": "#6fb0ec",
        "400": "#4098e6",
        "500": "#2383e2",
        "600": "#1a68b8",
        "700": "#155291",
        "800": "#123f6f",
        "900": "#0f3358",
        "950": "#081d33"
      }
    },
    "surface": {
      "hex": "#ffffff",
      "usage": "Background — pure white and the signature warm off-white (100).",
      "scale": {
        "50": "#ffffff",
        "100": "#f7f6f3",
        "200": "#efede8",
        "300": "#e3e0d8",
        "400": "#cbc7bb",
        "500": "#a5a094",
        "600": "#7d7869",
        "700": "#5c584d",
        "800": "#3d3a32",
        "900": "#26241f",
        "950": "#161410"
      }
    },
    "text": {
      "hex": "#37352f",
      "usage": "The real brand color: warm near-black ink. Body + headings.",
      "scale": {
        "50": "#f5f4f2",
        "100": "#e9e7e3",
        "200": "#d3cfc8",
        "300": "#b3ada3",
        "400": "#8a8378",
        "500": "#6b6459",
        "600": "#524c43",
        "700": "#403b34",
        "800": "#37352f",
        "900": "#252420",
        "950": "#151410"
      }
    },
    "danger": {
      "hex": "#d44c47",
      "name": "Red",
      "usage": "Highlight red / destructive actions — Notion red.",
      "scale": {
        "50": "#fbecec",
        "100": "#f7d6d5",
        "200": "#eeabaa",
        "300": "#e28380",
        "400": "#db625e",
        "500": "#d44c47",
        "600": "#b13a36",
        "700": "#8c2d2a",
        "800": "#6f2624",
        "900": "#5b2120",
        "950": "#331110"
      }
    },
    "brown": {
      "hex": "#9f6b53",
      "name": "Brown",
      "usage": "Highlight text/background — Notion brown.",
      "scale": {
        "50": "#f8f1ec",
        "100": "#efe0d6",
        "200": "#dcc0ad",
        "300": "#c69d81",
        "400": "#b08067",
        "500": "#9f6b53",
        "600": "#845443",
        "700": "#684235",
        "800": "#4f332a",
        "900": "#3f2a23",
        "950": "#241713"
      }
    },
    "gray": {
      "hex": "#787774",
      "name": "Gray",
      "usage": "Highlight/secondary text — Notion gray.",
      "scale": {
        "50": "#f3f3f2",
        "100": "#e6e5e3",
        "200": "#cbcac6",
        "300": "#a9a8a2",
        "400": "#8e8d86",
        "500": "#787774",
        "600": "#605f5c",
        "700": "#4b4a48",
        "800": "#383735",
        "900": "#282726",
        "950": "#161514"
      }
    }
  },
  "typography": {
    "families": {
      "inter": {
        "family": "Inter",
        "source": "google",
        "stack": "Inter, ui-sans-serif, -apple-system, system-ui, sans-serif",
        "weights": [
          400,
          500,
          600
        ],
        "foundry": "Rasmus Andersson",
        "licensingNote": "Inter (SIL OFL) — safe to self-host. Product UI also falls back to the native system sans stack."
      },
      "lyon-display": {
        "family": "Lyon Display",
        "source": "licensed",
        "stack": "\"Lyon Display\", Georgia, \"Times New Roman\", serif",
        "weights": [
          400,
          600
        ],
        "foundry": "Commercial Type",
        "licensingNote": "Lyon by Commercial Type — licensed serif used for large marketing display/quotes. Reference by name only; never rehosted."
      },
      "sf-mono": {
        "family": "SFMono-Regular",
        "source": "system",
        "stack": "SFMono-Regular, Menlo, Consolas, monospace",
        "weights": [
          400,
          600
        ],
        "licensingNote": "System monospace used for code blocks; not a distributed brand font."
      }
    },
    "roles": {
      "display": {
        "familyRef": "lyon-display",
        "stack": "\"Lyon Display\", Georgia, \"Times New Roman\", serif",
        "weights": [
          400,
          600
        ]
      },
      "heading": {
        "familyRef": "inter",
        "stack": "Inter, ui-sans-serif, -apple-system, system-ui, sans-serif",
        "weights": [
          500,
          600
        ]
      },
      "body": {
        "familyRef": "inter",
        "stack": "Inter, ui-sans-serif, -apple-system, system-ui, sans-serif",
        "weights": [
          400,
          500
        ]
      },
      "mono": {
        "familyRef": "sf-mono",
        "stack": "SFMono-Regular, Menlo, Consolas, monospace"
      }
    },
    "scale": [
      {
        "name": "xs",
        "sizeRem": 0.75,
        "lineHeight": 1.5
      },
      {
        "name": "sm",
        "sizeRem": 0.875,
        "lineHeight": 1.5
      },
      {
        "name": "base",
        "sizeRem": 1,
        "lineHeight": 1.6
      },
      {
        "name": "lg",
        "sizeRem": 1.25,
        "lineHeight": 1.4
      },
      {
        "name": "xl",
        "sizeRem": 1.75,
        "lineHeight": 1.3
      },
      {
        "name": "2xl",
        "sizeRem": 2.5,
        "lineHeight": 1.15,
        "letterSpacingEm": -0.01
      },
      {
        "name": "display",
        "sizeRem": 3.5,
        "lineHeight": 1.05,
        "letterSpacingEm": -0.02
      }
    ]
  },
  "spacing": {
    "1": 0.25,
    "2": 0.5,
    "3": 0.75,
    "4": 1,
    "6": 1.5,
    "8": 2
  },
  "radius": {
    "full": 9999,
    "lg": 0.625,
    "md": 0.375,
    "sm": 0.1875
  },
  "shadows": {
    "md": "0 8px 24px rgba(15,15,15,0.14)",
    "sm": "0 1px 2px rgba(15,15,15,0.1)"
  }
}