{
  "name": "Context Mode brand tokens",
  "updated": "2026-10-08",
  "reference": "https://context-mode.com/brand",
  "markdown": "https://context-mode.com/brand.md",
  "stylesheet": "https://context-mode.com/styles/brand.css",
  "note": "The values the live site uses (the Brand 2026-10 and v4 layers of its stylesheet). Where an older brand file disagrees (IBM Plex Sans for body text, serif italic accents, a blue or green cursor), these values win. 1rem = 16px.",
  "color": {
    "ink": { "hex": "#0a0a0a", "css": "--ink", "role": "Headlines, the wordmark on light, primary buttons, dark sections" },
    "text-2": { "hex": "#3f3f46", "css": "--text-2", "role": "Body text" },
    "text-3": { "hex": "#6b6b74", "css": "--text-3", "role": "Secondary text, the grey half of a headline, eyebrows, the end of the light cursor gradient" },
    "text-4": { "hex": "#a1a1aa", "css": "--text-4", "role": "Captions, hints, small mono labels, URLs on share cards" },
    "border": { "hex": "#e4e4e7", "css": "--border", "role": "Card, button and table borders" },
    "border-light": { "hex": "#efeff1", "css": "--border-light", "role": "Hairlines inside cards, row dividers, the top nav's bottom line" },
    "border-hover": { "hex": "#d4d4d8", "css": null, "role": "Border of a ghost button or card link on hover" },
    "bg": { "hex": "#ffffff", "css": "--bg", "role": "Page background" },
    "bg-alt": { "hex": "#fafafa", "css": "--bg-alt", "role": "Alternate sections, the footer, hover fill" },
    "bg-code": { "hex": "#f4f4f5", "css": "--bg-code", "role": "Inline code, demo surfaces, the request path frame" },
    "accent": { "hex": "#1a56db", "css": "--accent", "role": "Links, the focus ring, the Remember pillar" },
    "accent-light": { "hex": "#e8effc", "css": "--accent-light", "role": "Remember tint" },
    "accent-dark": { "hex": "#143faa", "css": "--accent-dark", "role": "Text on accent-light" },
    "save": { "hex": "#0e9f6e", "css": "--save", "alias": "--accent-dev", "role": "Saved, success, the Save pillar" },
    "save-bg": { "hex": "#ecfdf5", "css": "--accent-dev-bg", "role": "Save tint (badges)" },
    "save-2": { "hex": "#31c48d", "css": "--accent-dev-2", "role": "Lighter green" },
    "block": { "hex": "#e5484d", "css": "--block", "role": "Blocked, the Protect pillar" },
    "block-bg": { "hex": "#fef2f2", "css": null, "role": "Protect tint (tags)" },
    "block-border": { "hex": "#fecaca", "css": null, "role": "Border of a blocked result card" },
    "save-border": { "hex": "#bbf7d0", "css": null, "role": "Border of an allowed result card" },
    "selection": { "hex": "#dbe7ff", "css": null, "role": "Text selection background (text stays ink)" },
    "night": { "hex": "#0a0a0a", "css": "--night", "role": "Dark sections, the app icon tile" },
    "night-2": { "hex": "#141416", "css": "--night-2", "role": "Raised surface on dark" },
    "night-3": { "hex": "#27272a", "css": "--night-3", "role": "Borders and rules on dark" }
  },
  "onDark": {
    "background": "#0a0a0a",
    "text": "#fafafa",
    "body": "#a1a1aa",
    "headlineGrey": "#8b8b93",
    "headlineGreyClosing": "#71717a",
    "card": "#111113",
    "cardBorder": "#232326",
    "row": "#18181b",
    "rowBorder": "#26262a",
    "buttonBorder": "#3f3f46",
    "dots": "rgb(255 255 255 / .07)"
  },
  "pillars": [
    { "name": "Save", "color": "#0e9f6e", "token": "save", "tint": "#e7f5f1", "onDark": "#0b251c", "covers": ["Context Saving", "Thinking in Code", "Active Context"], "words": ["saved", "folded", "in code"] },
    { "name": "Remember", "color": "#1a56db", "token": "accent", "tint": "#e8eefb", "onDark": "#0e1b38", "covers": ["Recall", "Memory", "Skills", "Search", "Session resume"], "words": ["recalled", "remembered", "skill"] },
    { "name": "Protect", "color": "#e5484d", "token": "block", "tint": "#fceded", "onDark": "#361617", "covers": ["Protect"], "words": ["blocked"] }
  ],
  "pillarNote": "The nav groups features as Save, Remember and Control. Control holds Protect and Instructions; only Protect takes the red. Instructions, the gateway itself, Engine and Insight are ink and grey.",
  "tintRule": "Tag background: color-mix(in srgb, <pillar> 10%, #fff). Active box on dark: color-mix(in srgb, <pillar> 18 to 22%, #0a0a0a) with a 1px border in the pillar color.",
  "terminal": {
    "background": "#0b0b0c", "bar": "#111113", "border": "#232326", "text": "#d4d4d8", "muted": "#71717a", "dim": "#8b8b93",
    "ok": "#4ade80", "bad": "#f87171", "highlight": "#93c5fd", "amber": "#fbbf24",
    "chipSave": "#6ee7b7", "chipRemember": "#93c5fd", "chipProtect": "#fca5a5", "claudeCode": "#d77757"
  },
  "font": {
    "sans": { "family": "Geist", "stack": "'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif", "weights": [400, 500, 600, 700], "use": "Everything: headlines, body, buttons, numbers in stats" },
    "mono": { "family": "Geist Mono", "stack": "'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace", "weights": [400, 500], "use": "Code, commands, file names, numbers in data, eyebrows, small labels, URLs" },
    "wordmark": { "family": "IBM Plex Sans", "stack": "'IBM Plex Sans',sans-serif", "weights": [600], "use": "The wordmark and the app icon only" },
    "load": "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&family=IBM+Plex+Sans:wght@600&display=swap",
    "body": { "featureSettings": "\"ss01\",\"cv11\"", "letterSpacing": "-0.003em", "lineHeight": 1.6, "color": "#3f3f46" }
  },
  "type": {
    "heroH1": { "selector": ".hero .hm-h1", "size": "clamp(2.3rem,4vw,3.3rem)", "px": [36.8, 52.8], "weight": 600, "lineHeight": 1.02, "letterSpacing": "-0.045em" },
    "productH1": { "selector": ".p-h1", "size": "clamp(2.4rem,4.6vw,3.6rem)", "px": [38.4, 57.6], "weight": 600, "lineHeight": 1.02, "letterSpacing": "-0.045em" },
    "sectionHeadline": { "selector": ".x-split .h2", "size": "clamp(2rem,4.2vw,3.25rem)", "px": [32, 52], "weight": 600, "lineHeight": 1.04, "letterSpacing": "-0.035em" },
    "h2": { "selector": ".h2", "size": "clamp(1.8rem,4.5vw,2.8rem)", "px": [28.8, 44.8], "weight": 600, "lineHeight": 1.1, "letterSpacing": "-0.035em" },
    "closingHeadline": { "selector": ".x-final h2", "size": "clamp(2rem,4.5vw,3.25rem)", "px": [32, 52], "weight": 600, "lineHeight": 1.05, "letterSpacing": "-0.045em", "color": "#ffffff", "grey": "#71717a" },
    "docsH1": { "selector": ".doc h1", "size": "clamp(2rem,4vw,2.6rem)", "px": [32, 41.6], "weight": 600, "lineHeight": 1.1, "letterSpacing": "-0.025em" },
    "docsH2": { "selector": ".doc h2", "size": "1.45rem", "px": [23.2, 23.2], "weight": 600, "lineHeight": 1.25, "letterSpacing": "-0.015em" },
    "cardTitle": { "selector": ".bn b", "size": "1.05rem", "px": [16.8, 16.8], "weight": 600, "letterSpacing": "-0.01em" },
    "lead": { "selector": ".hero .hero-sub", "size": "clamp(1.05rem,1.6vw,1.2rem)", "px": [16.8, 19.2], "weight": 400, "lineHeight": 1.55, "color": "#6b6b74" },
    "sectionLead": { "selector": ".x-split p", "size": "1.05rem", "px": [16.8, 16.8], "weight": 400, "lineHeight": 1.6, "color": "#6b6b74" },
    "body": { "selector": ".doc p", "size": "16px", "px": [16, 16], "weight": 400, "lineHeight": 1.75, "color": "#3f3f46" },
    "small": { "selector": ".bn p", "size": "14px", "px": [14, 14], "weight": 400, "lineHeight": 1.55, "color": "#6b6b74" },
    "caption": { "size": "12.5px to 13px", "px": [12.5, 13], "weight": 400, "color": "#6b6b74 or #a1a1aa" },
    "eyebrow": { "selector": ".x-eyebrow", "family": "Geist Mono", "size": "12px", "px": [12, 12], "weight": 400, "letterSpacing": "0.04em", "color": "#6b6b74" },
    "monoLabel": { "selector": ".hx-k, .p-card-h", "family": "Geist Mono", "size": "10.5px to 11px", "px": [10.5, 11], "transform": "uppercase", "letterSpacing": "0.05em to 0.06em", "color": "#a1a1aa" },
    "button": { "selector": ".btn", "size": "14px", "px": [14, 14], "weight": 500, "letterSpacing": "-0.005em" },
    "codeBlock": { "selector": ".doc pre", "family": "Geist Mono", "size": "13px", "px": [13, 13], "lineHeight": 1.7, "color": "#0a0a0a", "background": "#fafafa", "border": "1px #e4e4e7", "radius": "10px", "padding": "18px 20px" },
    "bigNumber": { "selector": ".p-stats b", "size": "clamp(2.4rem,4.5vw,3.4rem)", "px": [38.4, 54.4], "weight": 600, "lineHeight": 1, "letterSpacing": "-0.05em" },
    "statTile": { "selector": ".hm-tile .hm-v", "size": "1.9rem", "px": [30.4, 30.4], "weight": 600, "letterSpacing": "-0.04em" },
    "liveCounter": { "selector": ".lv-kpis b", "size": "1.35rem", "px": [21.6, 21.6], "weight": 600, "letterSpacing": "-0.03em", "numeric": "tabular-nums" }
  },
  "headline": {
    "twoTone": "First part ink, second part grey. In HTML the grey part is an <em> styled font-style:normal; color:var(--text-3). Same font, weight, size and tracking. Never italic, never serif, never a third color.",
    "greyOnLight": "#6b6b74",
    "greyOnDark": "#8b8b93",
    "greyOnClosing": "#71717a"
  },
  "radius": {
    "tag": "4px to 5px",
    "chip": "6px to 7px",
    "button": "8px",
    "input": "8px",
    "card": "10px",
    "node": "12px",
    "demo": "14px",
    "frame": "16px",
    "pill": "999px",
    "cursor": "1px (CSS); 0.05em in the SVG files",
    "appIcon": "14 of 64 (21.875%)"
  },
  "border": { "width": "1px", "color": "#e4e4e7", "inner": "#efeff1", "emphasis": "1.5px #0a0a0a (the gateway node in a diagram)" },
  "shadow": {
    "default": "none (cards and demos are flat)",
    "node": "0 1px 2px rgb(0 0 0 / .04)",
    "gatewayNode": "0 10px 30px -12px rgb(0 0 0 / .25)",
    "menu": "0 24px 48px -12px rgb(0 0 0 / .14), 0 2px 6px rgb(0 0 0 / .04)"
  },
  "focus": "outline: 2px solid #1a56db; outline-offset: 2px",
  "layout": {
    "wrap": { "maxWidth": "1280px", "paddingX": "32px", "content": "1216px" },
    "wrapNarrow": { "maxWidth": "880px", "paddingX": "32px" },
    "docs": { "columns": "232px minmax(0,1fr) 200px", "gap": "48px", "maxWidth": "1360px", "article": "760px to 780px" },
    "sectionHead": { "selector": ".x-split", "columns": "minmax(0,1.25fr) minmax(0,1fr)", "gap": "2rem 4rem", "align": "end", "stacksBelow": "900px" },
    "hero": { "selector": ".x-hero-grid", "columns": "minmax(0,1fr) minmax(0,1.08fr)", "gap": "56px", "stacksBelow": "1000px" },
    "productHero": { "selector": ".p-hero-grid", "columns": "minmax(0,1fr) minmax(0,1.05fr)", "gap": "56px", "stacksBelow": "1000px" },
    "bento": { "selector": ".bento", "columns": 3, "gap": "12px", "below900": 2, "below640": 1 },
    "featureGrid": { "selector": ".p-grid", "columns": "repeat(auto-fit,minmax(240px,1fr))", "gap": "1px hairlines" },
    "steps": { "selector": ".p-steps", "columns": "repeat(auto-fit,minmax(200px,1fr))" },
    "headToContent": "36px to 48px"
  },
  "spacing": {
    "chapter": "112px 0",
    "chapterTight": "56px 0",
    "productSection": "96px 0 (64px below 700px)",
    "hero": "88px 0 96px (56px 0 72px below 1000px)",
    "productHero": "64px 0 88px",
    "try": "72px 0",
    "faq": "56px 0",
    "closing": "96px 0",
    "footer": "72px 0 40px",
    "cardPadding": "1.4rem to 1.5rem",
    "demoPadding": ".9rem",
    "cardGap": "12px"
  },
  "breakpoints": [
    { "maxWidth": 1060, "change": "Products menu: 2 columns" },
    { "maxWidth": 1000, "change": "Hero and product hero stack to one column" },
    { "maxWidth": 980, "change": "Plans: 2 columns" },
    { "maxWidth": 900, "change": "Section heads stack; bento 2 columns; docs one column" },
    { "maxWidth": 860, "change": "Top nav becomes a menu button; footer 2 columns" },
    { "maxWidth": 720, "change": "Request path diagrams turn vertical" },
    { "maxWidth": 700, "change": "Product sections 64px" },
    { "maxWidth": 640, "change": "Bento, plans and features one column; compact request path" },
    { "maxWidth": 560, "change": "Proof tiles one column" }
  ],
  "pattern": {
    "hero": "radial-gradient(circle at 1px 1px, rgb(10 10 10 / .07) 1px, transparent 0) 0 0 / 22px 22px; mask: radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 75%)",
    "productHero": "radial-gradient(circle at 1px 1px, rgb(10 10 10 / .07) 1px, transparent 0) 0 0 / 22px 22px",
    "diagram": "radial-gradient(circle at 1px 1px, rgb(10 10 10 / .09) 1px, transparent 0) 0 0 / 18px 18px on #fafafa",
    "requestPath": "radial-gradient(#e4e4e7 1px, transparent 1px) 0 0 / 14px 14px on #fff",
    "dark": "radial-gradient(circle at 1px 1px, rgb(255 255 255 / .07) 1px, transparent 0) 0 0 / 22px 22px on #0a0a0a",
    "shareCard": "radial-gradient(#e4e4e7 1.4px, transparent 1.4px) 0 0 / 22px 22px; mask: linear-gradient(115deg, transparent 40%, #000 100%)"
  },
  "motion": {
    "easeOut": { "value": "cubic-bezier(.23,1,.32,1)", "css": "--ease-out", "use": "Hovers, menus, reveals, bars, panel changes" },
    "easeInOut": { "value": "cubic-bezier(.77,0,.175,1)", "css": "--ease-in-out", "use": "Defined; not used on the site today" },
    "durations": {
      "press": "120ms, scale(.97)",
      "hover": "150ms (color, background, border)",
      "menu": "150ms, from translateY(-4px) scale(.98)",
      "cardHover": "200ms, translateY(-1px)",
      "panel": "300ms fade in from translateY(4px)",
      "eventRow": "350ms opacity and translateY(4px)",
      "terminalLine": "380ms, 190ms stagger",
      "reveal": "500ms to 550ms from translateY(14px)",
      "bars": "700ms to 900ms scaleX from 0, from the left",
      "requestDot": "900ms ease-in-out per wire, second wire at 1100ms; a blocked dot goes back in 1600ms, red",
      "dashedWire": "1s linear, repeats",
      "livePulse": "2s, repeats",
      "demoAutoplay": "next tab every 4200ms while 30% on screen; stops at the first click or key",
      "heroDiagram": "next request every 3200ms while on screen"
    },
    "reducedMotion": "No smooth scroll, no reveal, no press scale, bars drawn full, no pulse, no moving dots, no autoplay."
  },
  "logo": {
    "wordmark": {
      "text": "Context Mode",
      "font": "IBM Plex Sans", "weight": 600, "letterSpacing": "-0.02em", "lineHeight": 1,
      "textColor": { "onLight": "#0a0a0a", "onDark": "#fafafa" },
      "cursor": {
        "width": "0.28em", "height": "0.78em", "marginLeft": "0.12em", "align": "centre of the 1em line box (align-items:center)",
        "radius": "1px (CSS); 0.05em in the SVG files",
        "gradient": { "direction": "180deg (top to bottom)", "onLight": ["#0a0a0a", "#6b6b74"], "onDark": ["#fafafa", "#8b8b93"] }
      },
      "at100px": { "lineBox": [655.8, 100], "text": 615.8, "cursorX": 627.8, "ink": [650.6, 78], "baselineFromLineBoxTop": 87.5 },
      "inkWidthPerEm": 6.506,
      "clearSpace": "0.78em (the cursor's height) on every side of the ink box",
      "minimum": { "screenFontSize": "16px (about 104px wide)", "belowThat": "use the app icon" },
      "css": ".cm-wordmark{display:inline-flex;align-items:center;font-family:'IBM Plex Sans',sans-serif;font-weight:600;letter-spacing:-.02em;line-height:1;color:#0a0a0a;white-space:nowrap}.cm-wordmark .cursor{display:inline-block;width:.28em;height:.78em;margin-left:.12em;border-radius:1px;background:linear-gradient(180deg,#0a0a0a,#6b6b74)}"
    },
    "appIcon": {
      "viewBox": "0 0 64 64", "tile": "#0a0a0a", "radius": 14,
      "text": { "value": "CM", "font": "IBM Plex Sans", "weight": 600, "size": 32, "letterSpacing": -1.5, "x": 9, "baseline": 43, "color": "#ffffff" },
      "cursor": { "x": 49, "y": 20, "width": 6, "height": 24, "radius": 1, "gradient": ["#ffffff", "#8b8b93"] }
    },
    "files": {
      "wordmarkOnLight": { "svg": "/brand/wordmark-on-light.svg", "png2x": "/brand/wordmark-on-light@2x.png", "pngSize": [1301, 156] },
      "wordmarkOnDark": { "svg": "/brand/wordmark-on-dark.svg", "png2x": "/brand/wordmark-on-dark@2x.png", "pngSize": [1301, 156] },
      "appIcon": { "svg": "/brand/app-icon.svg", "png512": "/brand/app-icon-512.png", "png1024": "/brand/app-icon-1024.png" },
      "svgNote": "Text is outlines: the files need no font. The SVG wordmark is drawn at a 100px font size (650.6 x 78). PNGs have a transparent background."
    }
  },
  "canvas": [
    { "name": "16:9 video and slides", "width": 1920, "height": 1080, "safe": { "top": 104, "right": 150, "bottom": 104, "left": 150 }, "wordmark": { "fontSize": 48, "width": 312, "place": "top left of the safe area" }, "headline": 90, "hook": 108, "lead": 36, "bigNumber": 112 },
    { "name": "4:5 LinkedIn video", "width": 1080, "height": 1350, "safe": { "top": 96, "right": 84, "bottom": 96, "left": 84 }, "wordmark": { "fontSize": 40, "width": 260, "place": "top left of the safe area" }, "headline": 72, "hook": 84, "lead": 31, "bigNumber": 96 },
    { "name": "1:1 square", "width": 1080, "height": 1080, "safe": { "top": 96, "right": 84, "bottom": 96, "left": 84 }, "wordmark": { "fontSize": 40, "width": 260, "place": "top left of the safe area" }, "headline": 72, "hook": 84, "lead": 31, "bigNumber": 96 },
    { "name": "9:16 vertical", "width": 1080, "height": 1920, "safe": { "top": 250, "right": 84, "bottom": 380, "left": 84 }, "wordmark": { "fontSize": 40, "width": 260, "place": "top left of the safe area" }, "headline": 72, "hook": 84, "lead": 31, "bigNumber": 96 },
    { "name": "OG share card", "width": 1200, "height": 630, "safe": { "top": 60, "right": 76, "bottom": 54, "left": 76 }, "wordmark": { "fontSize": 30, "width": 195, "place": "top left; the kicker pill top right" }, "headline": "92, 80, 68 or 60 by length (30, 48, 64 characters)", "footer": "stat in Geist 24px; URL in Geist Mono 19px #a1a1aa" }
  ],
  "endCard": "Wordmark centred: 96px font size on 16:9, 72px on 1080-wide formats. context-mode.com under it in Geist Mono at 0.3 of the wordmark size, #6b6b74, one cursor height below.",
  "voice": {
    "names": {
      "Context Mode": "The product and the company: the control plane between coding agents and models. Two words, both capitalized.",
      "Context Mode Engine": "The free context-mode plugin (Elastic License 2.0). Never Context Mode Local.",
      "Context Mode Insight": "Analytics for how a team works with AI coding agents.",
      "Save / Remember / Protect": "The three pillars, in this order. Protect is the only name, in copy and in URLs (/protect, /docs/protect).",
      "context-mode": "Lowercase only for the npm package, commands and the repository."
    },
    "rules": [
      "Short, plain sentences. One idea per sentence.",
      "Every number comes from a published page and names its source.",
      "Before and after with an arrow: $7.20 → $2.49. Percent with no space: 65.5%.",
      "Ranges in words: 10 to 64%. No dashes.",
      "No em dashes. Use a colon, a comma or a full stop.",
      "No exclamation marks, no emoji, no hype words.",
      "No 'up to', no multipliers with a times sign; give the percent and the two values.",
      "Lead with what was proven; never write FAIL or failed.",
      "No plan prices outside the home page and /pricing.",
      "Do not compare with a named competitor in a headline."
    ],
    "avoid": ["up to", "leverage", "seamless", "robust", "cutting-edge", "supercharge", "empower", "unlock", "revolution", "game changer", "delve", "effortless", "blazing", "world-class", "next-generation", "best-in-class", "state-of-the-art", "FAIL", "failed", "Context Mode Local", "the open-source plugin", "ContextMode", "Context-Mode", "—", "×"]
  }
}