{
  "name": "Notion style",
  "slug": "notion",
  "number": 2,
  "words": { "en": "Monochrome, Blocks, Tidy", "ko": "모노톤, 블록, 단정함" },
  "source": ["https://www.notion.com", "https://notion.site"],
  "sample": { "url": "https://styles.vizney.com/notion/", "data": "sales.csv", "topic": "Monthly store operations report of Vizney Coffee, a fictional US coffee chain (nine stores in California, Texas and Washington), built from the blocks of a Notion page (icon, title, properties, callout, toggle headings) and its database views (chart, table and board, calendar, tags and status pills, number bars) in one card and chart grammar" },

  "colors": {
    "canvas":     { "hex": "#ffffff", "role": "page background (notion.com background-base)" },
    "card":       { "hex": "#ffffff", "role": "every figure, table and number widget: white with a 1px hair border and a 12px radius" },
    "surface":    { "hex": "#f6f5f4", "role": "segmented-control track, period pill, hover band behind a bar or a row (gray-200, surface-neutral)" },
    "surface-2":  { "hex": "#f9f9f8", "role": "workbench side panel, calendar days outside the month (gray-100)" },
    "callout":    { "hex": "#f9f8f7", "role": "the callout block that carries the lede (the product's callout background)" },
    "tab":        { "hex": "#f4f4f3", "role": "the selected view tab: rgba(33,27,23,.05) on white" },
    "ink":        { "hex": "#191918", "role": "titles, key figures, table values, the current month tick, the target line, the toast (gray-900)" },
    "body":       { "hex": "#31302e", "role": "running text, callout text, code (gray-800)" },
    "text-2":     { "hex": "#615d59", "role": "subtitles, notes, figure labels, values beside end labels (gray-600, 6.5:1 on white)" },
    "muted":      { "hex": "#78736f", "role": "property names, table headers, axis ticks, unselected tabs (gray-500, 4.7:1 on white: the lightest gray allowed for small text, and only on white; use text-2 on gray or tinted surfaces)" },
    "mark":       { "hex": "#a39e98", "role": "gray marks that are not text: the comparison line, other regions' lines (gray-400)" },
    "rule":       { "hex": "#dfdcd9", "role": "crosshair (gray-300)" },
    "hair":       { "hex": "#e6e5e3", "role": "card borders, dividers, dotted gridlines, chart baselines (the product's border-primary)" },
    "hair-2":     { "hex": "#f0efed", "role": "table row and column rules, empty bar tracks: rgba(42,28,0,.07) on white" },
    "accent":     { "hex": "#0075de", "role": "the UI blue of notion.com: primary button, links, focus. Data takes its own blue step, #2783de" },
    "accent-hover": { "hex": "#005bab", "role": "primary button hover; secondary button text" },
    "accent-soft": { "hex": "#e6f3fe", "role": "secondary button background" },
    "good":       { "hex": "#14832b", "role": "favourable change, text only (notion.com text-success, 4.9:1 on white)" },
    "bad":        { "hex": "#b01601", "role": "unfavourable change and a missed target, text only (red-700, 7.1:1 on white; text-error #f64932 is only 3.6:1)" },
    "focus":      { "hex": "#0075de", "role": "focus ring, 2px with a 2px offset (interaction-focus-ring)" }
  },

  "data": {
    "surface": "#ffffff",
    "categorical": [
      { "name": "blue · the subject", "hex": "#2783de", "text": "#1f6fc5" },
      { "name": "orange",               "hex": "#dd5b00", "text": "#ab4a00" },
      { "name": "green",                "hex": "#46a171", "text": "#14832b" }
    ],
    "other": "#c7c6c4",
    "comparison": "#a39e98",
    "marks": { "grid": "#e6e5e3", "baseline": "#e6e5e3", "target": "#191918", "track": "#f0efed", "hover": "#f6f5f4" },
    "sequential": ["#7db1ea", "#5196e2", "#2271c4", "#1c5aa3", "#1d4677"],
    "diverging": ["#ab4a00", "#dd5b00", "#ff8a33", "#dfdcd9", "#7db1ea", "#2271c4", "#1d4677"],
    "status": { "good": "#14832b", "bad": "#b01601", "neutral": "#a39e98" },
    "validation": {
      "tool": "dataviz validate_palette.js (OKLab), on the white card #ffffff where every chart sits",
      "categorical": "blue #2783de (the product palette's blue accent, the colour Notion's chart view and its dashboard illustrations lead with), orange #dd5b00 (notion.com orange-600) and green #46a171 (the product's green accent) pass every check, all pairs: worst CVD ΔE 9.8 (deutan, green↔orange), blue against the others 20.1 or more; normal vision 20.8 or more. Contrast 3.90, 3.77 and 3.18:1, so every mark clears 3:1. The data blue is one step apart from the UI blue #0075de, which stays on buttons, links and focus",
      "other": "#c7c6c4 is the gray the product's chart view gives a gray category; neutral by design (lightness band and chroma floor do not apply). Against the three hues: CVD 19.6 or more, normal vision 21.8 or more. At 1.71:1 it always has a second cue: a 2px white gap between segments, value labels and a table",
      "comparison": "#a39e98 against blue: CVD 16.5 (protan), normal 19.8; 2.66:1, so it is always dashed (6 4) and labeled at its end",
      "sequential": "one blue hue around the subject (#7db1ea, near the chart view's blue #5e9fe8, to #1d4677): monotone lightness, every gap ≥ 0.06, light end 2.25:1, hue spread 4°. Cell text is ink on the two light steps (7.8 and 5.7:1) and white on the three dark steps (5.0, 6.9 and 9.6:1)",
      "diverging": "arms #ff8a33→#ab4a00 and #7db1ea→#1d4677 each pass the ordinal checks (light ends 2.35 and 2.25:1, hue spread 8° and 3°); poles CVD 18.8 (protan), normal 27.0; the midpoint #dfdcd9 is neutral",
      "status": "good #14832b 4.87:1 and bad #b01601 7.09:1 as text on white, but they do not separate for deutan vision (ΔE 4.3): status is never color alone — a change keeps its sign and comparison words, and status pills keep their labels",
      "tags": "status-pill dots #46a171 · #d8a32f · #e56458 come straight from the product (CVD 6.2, legal only with the label beside them, which pills always carry); tag text on its tag background is 5.8:1 or more"
    }
  },

  "tags": {
    "gray":   { "bg": "#e6e5e3", "text": "#494846", "dot": "#8e8b86" },
    "orange": { "bg": "#f3ddcb", "text": "#6a4222", "dot": "#d5803b" },
    "green":  { "bg": "#d7e6dd", "text": "#2a533c", "dot": "#46a171" },
    "yellow": { "bg": "#f2e3b7", "text": "#655121", "dot": "#d8a32f" },
    "red":    { "bg": "#f7d9d5", "text": "#6d3531", "dot": "#e56458" },
    "purple": { "bg": "#e8dbf2", "text": "#553b69", "dot": "#b577d6" },
    "blue":   { "bg": "#cee3f7", "text": "#264a72", "dot": "#2783de" }
  },

  "code": {
    "comment": "#78736f", "string": "#14832b", "number": "#b01601", "keyword": "#005bab", "function": "#b01601",
    "property": "#31302e", "line-number": "#a39e98", "highlight": "#f2f7fd", "inline-text": "#b01601", "inline-bg": "#edeceb",
    "note": "notion.com's code tokens (keyword blue, string green, function and number red) stepped down to ≥ 4.5:1 on white; inline code is red on a gray chip, as in a Notion page"
  },

  "typography": {
    "sans":  { "en": "Inter", "ko": "Pretendard", "weights": [400, 500, 600, 700], "role": "everything: Inter stands in for NotionInter; notion.com's Korean pages load no Korean webfont, so Korean uses Pretendard" },
    "mono":  { "family": "IBM Plex Mono", "weights": [400, 500], "role": "code only (notion.com's iA Writer Mono is built on IBM Plex Mono)" },
    "links": {
      "google": "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap",
      "pretendard": "https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
    },
    "scale": {
      "headline":     { "size": "clamp(30px, 2.95vw, 42px)", "weight": 700, "lineHeight": 1.14, "letterSpacing": "-0.035em", "family": "sans" },
      "kpi":          { "size": "38px", "weight": 700, "lineHeight": 1.05, "letterSpacing": "-0.035em", "family": "sans" },
      "sectionTitle": { "size": "26px", "weight": 700, "lineHeight": "32px", "letterSpacing": "-0.024em", "family": "sans" },
      "cardTitle":    { "size": "20px", "weight": 700, "lineHeight": "28px", "letterSpacing": "-0.012em", "family": "sans" },
      "lede":         { "size": "16px", "weight": 400, "lineHeight": "24px", "family": "sans" },
      "sectionIntro": { "size": "16px", "weight": 400, "lineHeight": "24px", "family": "sans" },
      "body":         { "size": "14px", "weight": 400, "lineHeight": 1.5, "family": "sans" },
      "table":        { "size": "14px", "weight": 400, "lineHeight": "20px", "family": "sans" },
      "tableHeader":  { "size": "14px", "weight": 400, "lineHeight": "20px", "family": "sans" },
      "cardSubtitle": { "size": "14px", "weight": 400, "lineHeight": "20px", "family": "sans" },
      "figureLabel":  { "size": "13px", "weight": 500, "family": "sans" },
      "note":         { "size": "13px", "weight": 400, "lineHeight": "20px", "family": "sans" },
      "key":          { "size": "13px", "weight": 500, "family": "sans" },
      "axis":         { "size": "12px", "weight": 400, "family": "sans" },
      "valueLabel":   { "size": "12px", "weight": 600, "family": "sans" },
      "tag":          { "size": "14px", "weight": 400, "lineHeight": "20px", "family": "sans" },
      "calc":         { "size": "11px", "weight": 500, "letterSpacing": "0.06em", "transform": "uppercase", "family": "sans" },
      "segment":      { "size": "14px", "weight": 700, "family": "sans" },
      "button":       { "size": "16px", "weight": 500, "family": "sans" },
      "buttonSmall":  { "size": "14px", "weight": 500, "family": "sans" },
      "code":         { "size": "12.5px", "weight": 400, "lineHeight": 1.62, "family": "mono" }
    }
  },

  "radius": { "card": "12px", "callout": "10px", "board": "10px", "tooltip": "10px", "button": "8px", "button-lg": "10px", "tag": "4px", "status": "10px", "view-tab": "20px", "segment": "24px", "chip": "4px", "bar": "2px" },
  "spacing": { "page": "32px", "gap": "24px", "section": "64px", "card": "20px 24px 18px", "card-head": "0 0 16px", "card-foot": "14px 0 0", "cell": "8px 10px", "callout": "14px 16px", "footer": "28px 32px 32px" },
  "layout": {
    "maxWidth": "1400px", "columns": 12, "header": "64px", "maxViewsPerScreen": 7,
    "breakpoints": { "wide": 1360, "split": 1200, "mid": 1024, "narrow": 900, "phone": 640 },
    "rows": ["header 64px", "filter row: segmented control", "page head: icon, finding title and properties 7 · number widgets 2 × 2 5; callout 12; contents", "Sales: Figure 1 (7) · Figure 2 (5); Table 1 (12) with Table and Board views", "Operations: Figure 3 calendar (7) · Figure 4 (5); Figure 5 (7) · Figure 6 (5)", "How it's built: three steps, then the window (package 240px · figure and checks · code)", "notes 7 · linked pages 5", "white footer"]
  },
  "motion": { "ease": "cubic-bezier(0,0,.58,1)", "move": "cubic-bezier(.86,0,.07,1)", "button": "0.2s", "draw": "0.7s", "grow": "0.45s", "fade": "0.3s", "typing": "55ms per line, 380ms between steps" },

  "tools": {
    "tableau": { "palettes": "notion.tps", "fonts": "Tableau Book for text; Inter only if it is installed on every viewing machine and the server" },
    "powerbi": { "theme": "powerbi-theme.json", "fontFamily": "Inter", "fallback": "Segoe UI", "visual": { "background": "card", "plot": "card", "border": "hair", "radius": 12 } },
    "web": { "css": "tokens.css" }
  }
}