# The Context Mode brand. *Every value, in one place.*

Logo, color, type, layout, components, voice and motion, as the site uses them on 8 October 2026. Use this page as the one reference for videos, social images, slides and every other visual.

[View as Markdown](https://context-mode.com/brand.md)[tokens.json](https://context-mode.com/brand/tokens.json)[llms.txt](https://context-mode.com/llms.txt)

Each rule has a live example next to it, drawn with the site's own stylesheet ([/styles/brand.css](https://context-mode.com/styles/brand.css)). The same values are in [tokens.json](https://context-mode.com/brand/tokens.json). Older brand files say IBM Plex Sans for body text, serif italic accents and a blue or green cursor. Those are retired: where they and this page disagree, this page wins.

- [Summary](#summary)
- [Files](#files)
- [Logo](#logo)
- [Color](#color)
- [Type](#type)
- [Layout](#layout)
- [Components](#components)
- [Voice](#voice)
- [Motion](#motion)
- [For video and image agents](#video)

## Summary

| Part | Rule |
| --- | --- |
| Logo | The words Context Mode in IBM Plex Sans 600, letter-spacing -0.02em, then a cursor block with an ink-to-grey gradient. Use the files below, or the CSS on this page with the font loaded. |
| Fonts | Geist for everything. Geist Mono for code, commands, numbers in data and labels. IBM Plex Sans 600 for the wordmark only. |
| Color | Ink `#0a0a0a` on white, grey `#6b6b74` for the second half of a headline. Color means something: green Save, blue Remember, red Protect. |
| Headlines | Geist 600, tight tracking, two tones: ink first, then grey. Never italic, never serif. |
| Shape | Flat, 1px borders `#e4e4e7` . Radius 8px buttons, 10px cards, 14px demo surfaces. |
| Layout | Content 1280px wide with 32px sides. Sections 112px apart. |
| Voice | Short, plain sentences. Every number with its source. No hype words. |
| Motion | Ease out `cubic-bezier(.23,1,.32,1)` , 150ms for hovers, nothing moves under reduced motion. |

## Files

The SVG files draw their text as outlines, so they need no font. The PNG files have a transparent background.

| File | What it is | Size |
| --- | --- | --- |
| [tokens.json](https://context-mode.com/brand/tokens.json) | Every color, font, type size, radius, spacing, layout, motion and canvas token on this page | JSON |
| [wordmark-on-light.svg](https://context-mode.com/brand/wordmark-on-light.svg) | Wordmark for light backgrounds: ink text, ink-to-grey cursor | 650.6 by 78, drawn at a 100px font size |
| [wordmark-on-dark.svg](https://context-mode.com/brand/wordmark-on-dark.svg) | Wordmark for dark backgrounds: `#fafafa` text, light-to-grey cursor | 650.6 by 78 |
| [wordmark-on-light@2x.png](https://context-mode.com/brand/wordmark-on-light@2x.png) | The light-background wordmark at 2x | 1301 by 156 px |
| [wordmark-on-dark@2x.png](https://context-mode.com/brand/wordmark-on-dark@2x.png) | The dark-background wordmark at 2x | 1301 by 156 px |
| [app-icon.svg](https://context-mode.com/brand/app-icon.svg) | App icon: CM and the cursor on an ink tile | 64 by 64 |
| [app-icon-512.png](https://context-mode.com/brand/app-icon-512.png) | App icon | 512 by 512 px |
| [app-icon-1024.png](https://context-mode.com/brand/app-icon-1024.png) | App icon | 1024 by 1024 px |
| [brand.md](https://context-mode.com/brand.md) | This page as Markdown, for agents | Text |

## Logo

The logo is a wordmark: the words Context Mode and a cursor block after them. The cursor is the mark of the brand. It stands for the place where your agent's next request is written.

### Construction

| Part | Value |
| --- | --- |
| Text | Context Mode: two words, capital C and M |
| Font | IBM Plex Sans, weight 600 (SemiBold) |
| Letter-spacing | -0.02em |
| Line height | 1 |
| Text color | `#0a0a0a` on light, `#fafafa` on dark |
| Cursor width | 0.28em |
| Cursor height | 0.78em |
| Gap before the cursor | 0.12em after the last letter (margin-left) |
| Cursor position | Centred on the 1em line box (align-items: center): its top is 0.11em below the line box top, 0.765em above the baseline |
| Cursor corners | 1px radius in CSS; 0.05em in the SVG files, so the shape holds at any size |
| Cursor gradient | Top to bottom. On light `#0a0a0a` to `#6b6b74` ; on dark `#fafafa` to `#8b8b93` |
| Size at a 100px font size | Line box 655.8 by 100 px; text 615.8 px; ink box 650.6 by 78 px |
| Height of the ink box | The cursor height: the cursor reaches above the d (0.740em) and below the round letters (0.012em under the baseline) |

In HTML, set it like this. Load IBM Plex Sans 600 first (see [Type](#type)); without the font, use the SVG file.

```
<a class="cm-wordmark" href="https://context-mode.com">Context Mode<span class="cursor"></span></a>

.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)}
/* on a dark background */
.on-dark .cm-wordmark{color:#fafafa}
.on-dark .cm-wordmark .cursor{background:linear-gradient(180deg,#fafafa,#8b8b93)}
```

### Light and dark

Context Mode wordmark for light backgrounds On white or #fafafa: [wordmark-on-light.svg](https://context-mode.com/brand/wordmark-on-light.svg)

Context Mode wordmark for dark backgrounds On #0a0a0a: [wordmark-on-dark.svg](https://context-mode.com/brand/wordmark-on-dark.svg)

Set in CSS, as in the site's top nav

Set in CSS, on dark

Use the light version on white, `#fafafa` and light photos. Use the dark version on `#0a0a0a`, `#111113` and dark photos. On a colored or busy background, place the logo on a white or ink panel instead.

### Clear space and minimum size

The wordmark inside its clear space Clear space: the cursor's height (0.78em) on every side of the ink box

The wordmark at its minimum sizeThe app icon at 16pxThe app icon at 32px

Minimum: a 16px font size (104px wide). Smaller than that, use the app icon, 16px or larger

- Keep text, edges and other marks out of the clear space. At a 48px font size, that is 37px on each side.
- The nav sets the wordmark at 16.8px (1.05rem), the share cards at 30px. On a 1920 by 1080 frame, use 48px or more.

### App icon

Context Mode app icon at 96pxContext Mode app icon at 48pxContext Mode app icon at 24px [app-icon.svg](https://context-mode.com/brand/app-icon.svg), [512](https://context-mode.com/brand/app-icon-512.png), [1024](https://context-mode.com/brand/app-icon-1024.png)

Context Mode app icon on a light grey background The site's favicon and web app icon are this mark

| Part | Value, on a 64 by 64 grid |
| --- | --- |
| Tile | 64 by 64, corner radius 14, `#0a0a0a` |
| Letters | CM in IBM Plex Sans 600, size 32, letter-spacing -1.5, `#ffffff` ; start x 9, baseline y 43 |
| Cursor | x 49, y 20, 6 by 24, radius 1, gradient top to bottom `#ffffff` to `#8b8b93` |
| Site files | [/favicon.svg](https://context-mode.com/favicon.svg) , [/favicon.ico](https://context-mode.com/favicon.ico) (16, 32, 48), [/apple-touch-icon.png](https://context-mode.com/apple-touch-icon.png) (180), [/icon-192.png](https://context-mode.com/icon-192.png) , [/icon-512.png](https://context-mode.com/icon-512.png) |

### Do not

Don't Recolor the cursor. No blue, green or red cursor

Don't Stretch, squash or slant it

Don't Set it in another font, even Geist

Don't Use a serif or italics

Don't Add a glow, shadow, outline or blink

## Color

The brand is ink on white. Three colors carry meaning and nothing else: green for saved, blue for remembered, red for blocked. Use them only for the pillar or state they stand for, never to decorate.

### Neutrals

| Token | Hex | Role |
| --- | --- | --- |
| --ink | #0a0a0a | Headlines, the wordmark on light, primary buttons, dark sections |
| --text-2 | #3f3f46 | Body text |
| --text-3 | #6b6b74 | Secondary text, the grey half of a headline, eyebrows, the end of the cursor gradient |
| --text-4 | #a1a1aa | Captions, hints, small mono labels, URLs on share cards |
| --border | #e4e4e7 | Card, button and table borders |
| --border-light | #efeff1 | Hairlines inside cards and between rows |
| hover border | #d4d4d8 | Border of a ghost button or card link on hover |
| --bg | #ffffff | Page background |
| --bg-alt | #fafafa | Alternate sections, the footer, hover fill |
| --bg-code | #f4f4f5 | Inline code, demo surfaces, the request path frame |
| selection | #dbe7ff | Selected text background; the text stays ink |

### Dark

| Token | Hex | Role |
| --- | --- | --- |
| --night | #0a0a0a | Dark sections and the app icon tile |
| card on dark | #111113 | Cards and panels on a dark section |
| --night-2 | #141416 | Raised surface on dark |
| row on dark | #18181b | Rows inside a dark card |
| border on dark | #232326 | Card borders on dark |
| --night-3 | #27272a | Rules and dividers on dark |
| button border on dark | #3f3f46 | Ghost button border on dark |
| grey on dark | #8b8b93 | The grey half of a headline on a dark section; eyebrows on dark |
| body on dark | #a1a1aa | Body text on dark |
| text on dark | #fafafa | Headlines and the wordmark on dark |

### The three pillars

Save, Remember and Protect are the three things Context Mode does on each request. Each has one color. Keep this order.

| Pillar | Color | Token | Tag tint | Covers | Words on tags |
| --- | --- | --- | --- | --- | --- |
| **Save** | #0e9f6e | --save | #e7f5f1 | Context Saving, Thinking in Code, Active Context | saved, folded, in code |
| **Remember** | #1a56db | --accent | #e8eefb | Recall, Memory, Skills, Search, Session resume | recalled, remembered, skill |
| **Protect** | #e5484d | --block | #fceded | Protect | blocked |

SaveRememberProtect saved recalled blocked The home page's How it works tabs (a dot in each color) and the live view's tags

- The nav groups features as Save, Remember and Control. Control holds Protect and Instructions; only Protect takes the red.
- Context Mode itself, Instructions, Context Mode Engine and Context Mode Insight have no pillar color: they are ink and grey.
- Blue is also the link and focus color. On a page with Remember content, links stay blue; do not add a second blue.

### Tints and states

| Use | Rule | Hex |
| --- | --- | --- |
| Tag background | `color-mix(in srgb, pillar 10%, #fff)` | #e7f5f1 · #e8eefb · #fceded |
| Live view tag | Text in the pillar color, background 7% of it on white, border 30% of it | #eef8f5 · #eff3fc · #fdf2f3 |
| Active box on dark | Pillar 18% (Save), 22% (Remember) or 20% (Protect) on `#0a0a0a` , 1px border in the pillar color | #0b251c · #0e1b38 · #361617 |
| Allowed result card | White, border `#bbf7d0` , label in green | #bbf7d0 |
| Blocked result card | White, border `#fecaca` , label in red | #fecaca |
| Save badge | Green text on `--accent-dev-bg` | #ecfdf5 |
| Remember tint | `--accent-light` , text in `--accent-dark` | #e8effc · #143faa |
| Focus ring | `outline: 2px solid #1a56db; outline-offset: 2px` | #1a56db |

## Type

| Family | Weights | Use | CSS stack |
| --- | --- | --- | --- |
| **Geist** | 400, 500, 600, 700 | Everything: headlines, body, buttons, stats | 'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif |
| **Geist Mono** | 400, 500 | Code, commands, file names, numbers in data, eyebrows, small labels, URLs | 'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace |
| **IBM Plex Sans** | 600 | The wordmark and the app icon. Nothing else | 'IBM Plex Sans',sans-serif |

Load all three from Google Fonts with one link. The page body sets `font-feature-settings:"ss01","cv11"`, letter-spacing -0.003em and line-height 1.6.

```
<link href="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" rel="stylesheet">
```

### Scale

Home hero headline · 600 · clamp(2.3rem, 4vw, 3.3rem) · line-height 1.02 · -0.045em

Spend less on coding agents. Control what they do.

Section headline · 600 · clamp(2rem, 4.2vw, 3.25rem) · line-height 1.04 · -0.035em

Your agent asks. Your rules answer.

Docs headline · 600 · 1.45rem · line-height 1.25 · -0.015em How Active Context works

Card title · 600 · 1.05rem · -0.01em Checked before it runs

Lead · 400 · clamp(1.05rem, 1.6vw, 1.2rem) · line-height 1.55 · text-3

Context Mode sits between your coding agents and the model. Each request costs less, sessions carry what they learned, and your rules decide what runs.

Body · 400 · 16px · line-height 1.75 · text-2

Protect checks every command, file read, web fetch and tool-server call from Claude Code and Codex before it runs.

Eyebrow · Geist Mono 400 · 12px · 0.04em · text-3 How it works

Mono label · Geist Mono · 11px · uppercase · 0.06em · text-4 Your coding agent

Big number · 600 · clamp(2.4rem, 4.5vw, 3.4rem) · line-height 1 · -0.05em 65.5%

| Role | Selector | Size | px | Weight | Line height | Tracking | Color |
| --- | --- | --- | --- | --- | --- | --- | --- |
| Home hero headline | .hero .hm-h1 | clamp(2.3rem,4vw,3.3rem) | 36.8 to 52.8 | 600 | 1.02 | -0.045em | ink, then text-3 |
| Product page headline | .p-h1 | clamp(2.4rem,4.6vw,3.6rem) | 38.4 to 57.6 | 600 | 1.02 | -0.045em | ink, then text-3 |
| Section headline | .x-split .h2 | clamp(2rem,4.2vw,3.25rem) | 32 to 52 | 600 | 1.04 | -0.035em | ink, then text-3 |
| Headline, default | .h2 | clamp(1.8rem,4.5vw,2.8rem) | 28.8 to 44.8 | 600 | 1.1 | -0.035em | ink, then text-3 |
| Closing headline, dark | .x-final h2 | clamp(2rem,4.5vw,3.25rem) | 32 to 52 | 600 | 1.05 | -0.045em | #ffffff, then #71717a |
| Docs page title | .doc h1 | clamp(2rem,4vw,2.6rem) | 32 to 41.6 | 600 | 1.1 | -0.025em | ink, then text-3 |
| Docs section | .doc h2 | 1.45rem | 23.2 | 600 | 1.25 | -0.015em | ink |
| Card title | .bn b | 1.05rem | 16.8 | 600 | normal | -0.01em | ink |
| Hero lead | .hero .hero-sub | clamp(1.05rem,1.6vw,1.2rem) | 16.8 to 19.2 | 400 | 1.55 | body | text-3 |
| Section lead | .x-split p | 1.05rem | 16.8 | 400 | 1.6 | body | text-3 |
| Body | .doc p | 16px | 16 | 400 | 1.75 | body | text-2 |
| Small | .bn p | 14px | 14 | 400 | 1.55 | body | text-3 |
| Caption | .x-note, .hm-fine | 12.5px to 13px | 12.5 to 13 | 400 | 1.55 | body | text-3 or text-4 |
| Button | .btn | 14px (hero 15px) | 14 | 500 | 1 | -0.005em | per button |
| Eyebrow | .x-eyebrow | 12px Geist Mono | 12 | 400 | normal | 0.04em | text-3 |
| Mono label | .hx-k, .p-card-h | 10.5px to 11px Geist Mono, uppercase | 10.5 to 11 | 400 | normal | 0.05em to 0.06em | text-4 |
| Code block | .doc pre | 13px Geist Mono | 13 | 400 | 1.7 | 0 | Ink on #fafafa |
| Big number | .p-stats b | clamp(2.4rem,4.5vw,3.4rem) | 38.4 to 54.4 | 600 | 1 | -0.05em | ink |
| Stat tile | .hm-tile .hm-v | 1.9rem | 30.4 | 600 | normal | -0.04em | ink |

Sizes in rem assume 1rem = 16px. The middle value of a clamp follows the viewport width; the px column gives the smallest and largest size.

### Two-tone headlines

A headline is two parts. The first part says the thing in ink. The second part, in grey, finishes it. Both parts have the same font, weight, size and tracking. In HTML, the grey part is an `<em>` that the stylesheet sets to `font-style:normal` and `color:var(--text-3)`: it is never italic and never serif.

How it works

Spend less. Remember more. *Run only what you allow.*

Context Mode acts at three points on each request: before it goes out, before a tool runs, and when a result comes back.

| Background | First part | Second part |
| --- | --- | --- |
| White or `#fafafa` | #0a0a0a | #6b6b74 |
| Dark section ( `.x-dark` ) | #fafafa | #8b8b93 |
| Closing call to action ( `.x-final` ) | #ffffff | #71717a |

- Split at a sentence or a clause: "Spend less on coding agents. Control what they do." "Try it on your own agents."
- One grey part per headline, at the end. No third color, no colored word, no underline.
- Share cards follow the same rule: grey from the accent word to the end.

### Mono

- Use Geist Mono for commands (`npx @context-mode/cli`), code, file names, paths, model ids and URLs.
- Use it for numbers in data: costs, sizes and counts in tables, diagrams and terminal lines.
- Use it for eyebrows and small labels. Never for headlines or paragraphs.

### Numbers

- Big stats are Geist 600 with tight tracking (-0.035em to -0.05em). Live counters use `font-variant-numeric: tabular-nums`.
- Give before and after with an arrow and spaces: $7.20 → $2.49, 17.0 KB → 1.2 KB.
- Percent with no space (65.5%), a comma in thousands (1,000), a space before a unit (7 MB, 407 B), K and M for token windows (200K, 1M).
- Ranges in words: 10 to 64%. No dash.
- Every number comes from a published page, and the page or the post says which one. The 65.5% comes from [Benchmarks](https://context-mode.com/docs/benchmarks).

## Layout

### Width and gutters

| Container | Value |
| --- | --- |
| Page content ( `.wrap` ) | max-width 1280px, 32px padding left and right at every width: 1216px of content, 326px on a 390px phone |
| Narrow ( `.wrap-narrow` ) | max-width 880px, 32px padding |
| Docs | Menu 232px, article, "On this page" 200px; gap 48px; max-width 1360px; article 760px to 780px |
| Card gap | 12px (bento, stat rows) |
| Card padding | 1.4rem to 1.5rem (22px to 24px) |
| Demo panel padding | 0.9rem |
| Head to content | 36px to 48px from a section head to the grid under it |

### Grids

| Grid | Columns | Gap | Stacks |
| --- | --- | --- | --- |
| Section head ( `.x-split` ) | 1.25fr 1fr, bottom-aligned | 2rem 4rem | below 900px |
| Home hero ( `.x-hero-grid` ) | 1fr 1.08fr | 56px | below 1000px |
| Product hero ( `.p-hero-grid` ) | 1fr 1.05fr | 56px | below 1000px |
| Bento ( `.bento` ) | 3 columns; the wide card spans 2 by 2 | 12px | 2 below 900px, 1 below 640px |
| Feature grid ( `.p-grid` ) | auto-fit, min 240px | 1px hairlines | by width |
| Steps ( `.p-steps` ) | auto-fit, min 200px | hairlines | by width |
| Plans ( `.x-plans` ) | 4 columns | hairlines | 2 below 980px, 1 below 640px |

### Section spacing

| Section | Padding (top and bottom) |
| --- | --- |
| Chapter ( `.chapter` ), the default | 112px |
| Tight chapter | 56px |
| Product page section ( `.p-sec` ) | 96px; 64px below 700px |
| Home hero | 88px top, 96px bottom; 56px and 72px below 1000px |
| Product hero | 64px top, 88px bottom |
| Try it band | 72px |
| FAQ | 56px |
| Closing call to action | 96px |
| Footer | 72px top, 40px bottom |

### Breakpoints

| Max width | What changes |
| --- | --- |
| 1060px | The Products menu drops to 2 columns |
| 1000px | The home and product heroes stack to one column |
| 980px | Plans: 2 columns |
| 900px | Section heads stack; bento 2 columns; docs drop the side menu into a button |
| 860px | The top nav becomes a menu button; the footer is 2 columns |
| 720px | Request path diagrams turn vertical |
| 700px | Product sections 64px |
| 640px | Bento, plans and feature grids one column; a compact request path |
| 560px | Proof tiles one column |

Check every page at 390px wide. Nothing may scroll sideways except a code block or a wide table inside its own frame.

### Radius, borders and shadows

| Radius | Used on |
| --- | --- |
| 4px to 5px | Tags, inline code |
| 6px to 7px | Small chips, the Copy button, tab highlights |
| 8px | Buttons, the command line, output blocks, small nodes |
| 10px | Cards, stat tiles, stat rows, docs code blocks ( `--r` ) |
| 12px | Diagram nodes, hero stats |
| 14px | Demo surfaces: tab panels, bento cards, feature grids, plans, comparison tables, config cards, menus |
| 16px | Large frames: the request path, How it works, the closing block |
| 999px | Pills: the announcement pill, nav items, kicker pills |

- Borders are 1px `#e4e4e7`; hairlines inside a card are `#efeff1`. The gateway node in a diagram has a 1.5px ink border.
- Surfaces are flat. Shadows are rare: diagram nodes `0 1px 2px rgb(0 0 0 / .04)`, the gateway node `0 10px 30px -12px rgb(0 0 0 / .25)`, menus `0 24px 48px -12px rgb(0 0 0 / .14)`.

### Background patterns

Hero dots, 22px

Diagram canvas, 18px

Request path panel, 14px

Dark dots, 22px

| Pattern | CSS |
| --- | --- |
| Home hero | radial-gradient(circle at 1px 1px, rgb(10 10 10 / .07) 1px, transparent 0) / 22px 22px, masked by radial-gradient(ellipse 70% 60% at 70% 40%, #000 30%, transparent 75%) |
| Product hero | The hero dots with no mask |
| Diagram canvas | radial-gradient(circle at 1px 1px, rgb(10 10 10 / .09) 1px, transparent 0) / 18px 18px on #fafafa |
| Request path panel | radial-gradient(#e4e4e7 1px, transparent 1px) / 14px 14px on #fff |
| Dark sections | radial-gradient(circle at 1px 1px, rgb(255 255 255 / .07) 1px, transparent 0) / 22px 22px on #0a0a0a |
| Share cards | radial-gradient(#e4e4e7 1.4px, transparent 1.4px) / 22px 22px, masked by linear-gradient(115deg, transparent 40%, #000) |

### Dark sections

Protect

Your agent asks. *Your rules answer.*

A blocked call never reaches your shell.

[How Protect works](https://context-mode.com/protect)[Read the docs](https://context-mode.com/docs/protect)

- One dark band per page at most, for proof or for control: `#0a0a0a`, text `#fafafa`, body `#a1a1aa`, headline grey `#8b8b93`.
- Cards on dark are `#111113` with a `#232326` border. Buttons on dark: white (`.btn-inv`) and outline (`.btn-ghost-d`, border `#3f3f46`).
- The closing call to action is `#0a0a0a` with the dark dots, centred, 96px above and below.

## Components

### Buttons

[Start free](https://context-mode.com/docs/quick-start)[Pricing](https://context-mode.com/pricing) Primary and ghost, on light

[Start free](https://context-mode.com/docs/quick-start)[Read the docs](https://context-mode.com/docs) White and outline, on dark

| Part | Value |
| --- | --- |
| Size | Height 40px (2.5rem), padding 0.625rem 1rem, Geist 14px 500, letter-spacing -0.005em, radius 8px, 1px border |
| Nav size | Height 36px, padding 0 0.9rem, 13.5px |
| Hero size | Height 44px, padding 0 1.25rem, 15px |
| Primary | Ink fill, white text; hover `#2a2a2e` |
| Ghost | White fill, ink text, `#e4e4e7` border; hover fill `#fafafa` , border `#d4d4d8` |
| On dark | White: `#fafafa` fill, ink text, hover `#e4e4e7` . Outline: no fill, `#fafafa` text, `#3f3f46` border, hover border `#71717a` |
| Press and focus | Scales to 0.97 for 120ms; focus ring 2px `#1a56db` , 2px away |
| Labels | A verb or the place it goes: Start free, Pricing, Read the docs. One primary button per group, first |

### Cards

**Checked before it runs**

Protect checks every command, file read, web fetch and tool-server call before it runs.

**Every agent, one log**

Claude Code and Codex requests go through one gateway, so one log shows what each one did.

**Hairline grid**

Cells sit on a 1px `#e4e4e7` line, in one frame with a 14px radius.

**For feature lists**

Each cell holds a title and one or two short sentences.

| Part | Value |
| --- | --- |
| Card | White, 1px `#e4e4e7` border, radius 14px for feature cards ( `.bn` ) and 10px for small cards and tiles, padding 1.4rem, no shadow |
| Title | Geist 600, 1.05rem, -0.01em, ink |
| Text | 14px, line-height 1.55, text-3 |
| As a link | Border `#d4d4d8` or fill `#fafafa` on hover; no lift |
| Rows inside | 1px `#efeff1` border, radius 9px, fill `#fafafa` , 13px text, mono value on the right |

### Underline tabs

Tabs

SaveRememberProtect

$ bundle exec rake test 600 tests, 1 failing: 17.0 KB → 1.2 KB, the failing test in full

deploy target? Render, not Hetzner (remembered)

$ git push origin main blocked: protected branch

| Part | Value |
| --- | --- |
| Row | Text tabs on one line, padding 0 0.9rem, a 1px `#e4e4e7` hairline under the row; scrolls sideways on a phone with no scrollbar |
| Tab | Geist 13.5px, padding 0.85rem 0.55rem, text-3; ink on hover and when active |
| Active | A 2px ink line, radius 1px, under the label (0.55rem in from each side), on the hairline |
| Hover | A soft fill `rgb(0 0 0 / .05)` , radius 6px, behind the label |
| Panel | The frame is `#f4f4f5` with a 1px border and a 14px radius; content sits on white blocks; the panel fades in over 300ms |
| Autoplay | The next tab every 4.2 seconds while the demo is on screen; it stops at the first click or key, and never runs under reduced motion |
| On dark | Frame `#111113` , border `#232326` , labels `#8b8b93` , active and hover `#fafafa` , active line `#fafafa` |

### Code blocks

Four kinds, each for one job.

```
npx @context-mode/cli
```

~/.claude/settings.json

```
// what the CLI writes, under "env"
"ANTHROPIC_BASE_URL": "https://gateway.context-mode.com",
"ENABLE_TOOL_SEARCH": "true"
```

$`npx @context-mode/cli`

600 tests, 1 failing 599 passing tests folded into one line

| Kind | Where | Style |
| --- | --- | --- |
| Docs code block | Docs pages, this page | `#fafafa` fill, ink text, 1px `#e4e4e7` border, radius 10px, Geist Mono 13px, line-height 1.7, padding 18px 20px |
| Config card ( `.x-code` ) | A file the reader edits | White, 1px border, radius 14px; file name in Geist Mono 12px text-3; code 13px, line-height 1.7; keys `#7c3aed` , strings `#0e7a55` , comments text-4 |
| Command line ( `.x-cmd` ) | One command to copy | White, 1px border, radius 8px, Geist Mono 13.5px; a `$` in text-4; a Copy button on `#f4f4f5` , radius 6px, that turns green when done |
| Output block ( `.x-pre` ) | What a tool printed, inside a demo | `#fafafa` (white inside a tab panel), 1px `#efeff1` border, radius 8px, Geist Mono 12px, line-height 1.65; muted lines text-4, blocked in red |

### Request path diagram

The home hero's diagram: each coding agent goes through Context Mode to its own model, never across. One request lights up at a time.

Your coding agent Its model

Claude Code

Claude

Codex

GPT

Context Mode Save Context Saving Protect Remember

**Claude Code**`600 tests, 1 failing` 17.0 KB → 1.2 KB*folded* **Codex**`cat .env` never reaches the shell*blocked* **Claude Code**`2 h later` picked up, nothing compacted*recalled*

[Long session, Claude Opus 5.5**$7.20 → $2.49***65.5% lower*](https://context-mode.com/docs/benchmarks)

**Your coding agents** Any machine

*17.0 KB*

**Context Mode**

- Folds test, build and log output
- Trims tool schemas

*1.2 KB*

**Model API** Your Anthropic or OpenAI account

| Part | Value |
| --- | --- |
| Frame | `#f4f4f5` , 1px border, radius 16px, padding 1.2rem; the inner panel is white with 14px `#e4e4e7` dots and a 12px radius |
| Columns | Agents, a 36px wire, Context Mode, a 36px wire, models (1fr, 1.1fr, 0.8fr) |
| Agent and model boxes | White, 1px border, radius 8px, 12.5px; the active lane gets an ink border and a 1px ink ring |
| Context Mode core | Ink box, radius 12px, the wordmark in white with the dark cursor gradient, one box per pillar in Save, Protect, Remember order |
| Active pillar box | White text, a 1px border in the pillar color, the pillar color mixed into `#0a0a0a` |
| Wires | 2px dashes of `#d4d4d8` (4px on, 4px off); a dot of 8px travels each wire in 0.9s; a blocked request turns red and goes back |
| Event row | White, radius 10px: agent, the command in mono, what happened, and a tag in the pillar color |
| Foot | The proof line: the run, the two costs in mono, the result in ink, linked to its source |
| Flow diagram | Nodes white with radius 12px on the 18px dot canvas; the gateway node has a 1.5px ink border; edges are 8px dashes with an arrow, moving in the pillar color, labelled in mono |
| Phone | Below 720px the flow turns vertical; below 640px the request path drops the event detail |

### Tags and pills

folded remembered blocked New[**New**Recall: all-day sessions, no compaction →](https://context-mode.com/recall)

- Tags: Geist Mono 10.5px to 11px, 500, the pillar color on a 7% to 10% tint, radius 5px. One word, lowercase.
- The announcement pill: white, 1px border, radius 999px, 13px; a small ink pill with the label first.

## Voice

Write the way the site writes: short, plain sentences, the reader's problem first, then what Context Mode does about it, with a number from a published page.

### Names

| Write | For |
| --- | --- |
| **Context Mode** | The product and the company: the control plane between coding agents and models. Two words, both capitalized |
| **Save, Remember, Protect** | The three pillars, in this order |
| **Protect** | The rules for tool calls. |
| **Context Saving, Thinking in Code, Active Context, Recall, Memory, Skills, Search, Session resume, Instructions** | The features, capitalized as written here |
| **Context Mode Engine** | The free plugin that runs on your machine, under the Elastic License 2.0 |
| **Context Mode Insight** | How a team works with coding agents, from Engine events |
| `context-mode` | Lowercase and in mono only for the npm package, commands and the repository |
| **Claude Code, Codex** | The coding agents, by name. Claude and GPT for the models |

### Rules

- Short, plain sentences. One idea in each. Common words.
- Lead with the reader's problem, then the value: "Pay for the failing test, not the 599 that passed."
- Give every number with its source, and link the page or the evidence file.
- Lead with what was proven. Runs that did not help stay in the evidence files, not in headlines.
- No em dashes: use a colon, a comma or a full stop. No exclamation marks. No emoji.
- No hype words, no fake urgency, no put-downs of other tools.
- No multipliers with a times sign: give the percent and the two values.
- No plan prices except on the home page and [Pricing](https://context-mode.com/pricing). The free start is word for word: Start free: 1,000 requests, every feature, no card.

| Write | Not |
| --- | --- |
| 61% lower cost on a minitest fix loop, $0.157 to $0.061. | Huge savings on every session. |
| Protect checks every tool call before it runs. | Total peace of mind for your whole team. |
| All-day sessions. No compaction. | Never lose context again, ever. |
| Start free: 1,000 requests, every feature, no card. | Sign up today and get started for free! |
| 10 to 64% lower cost | 10–64% lower cost |

### Words the site never uses

The site's tests reject these in page text.

```
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 · — (em dash) · × (times sign) · !
Context Mode Local · the open-source plugin · ContextMode · Context-Mode
```

## Motion

Motion is short and quiet. Things ease out: fast at the start, soft at the end.

--ease-out · cubic-bezier(.23,1,.32,1)

--ease-in-out · cubic-bezier(.77,0,.175,1)

| Token | Value | Use |
| --- | --- | --- |
| --ease-out | cubic-bezier(.23,1,.32,1) | Hovers, menus, reveals, bars, panel changes |
| --ease-in-out | cubic-bezier(.77,0,.175,1) | Defined, not used on the site today |
| ease-in-out | CSS keyword | The dot that travels a request path wire |
| linear | CSS keyword | Moving dashes on a live edge |

| What moves | Duration | How |
| --- | --- | --- |
| Button press | 120ms | Scales to 0.97 |
| Hover: color, fill, border | 150ms | ease-out |
| Menu open | 150ms | From 4px up and 0.98 scale, fading in |
| Card hover | 200ms | 1px lift |
| Tab panel | 300ms | Fades in from 4px down |
| Event row in the request path | 350ms | Fades in from 4px down |
| Terminal lines | 380ms | One after another, 190ms apart |
| Reveal on scroll | 500ms to 550ms | Fades in from 14px down |
| Bars | 700ms to 900ms | Grow from the left |
| Request dot | 900ms | One wire, then the next at 1.1s; a blocked request goes back in 1.6s, red |
| Live edge dashes | 1s | linear, repeats |
| Live dot pulse | 2s | Repeats |
| Demo tabs | 4.2s | The next tab, while on screen, until the reader clicks |
| Hero diagram | 3.2s | The next request, while on screen |

### Reduced motion

When the reader asks for reduced motion (`prefers-reduced-motion: reduce`), nothing moves on its own:

- No smooth scroll; reveals show at once; buttons do not scale.
- Bars are drawn full; terminal lines show at once; live dots do not pulse.
- Request path dots are hidden and event rows change with no fade.
- Demo tabs and the hero diagram do not play by themselves. The reader still clicks through them.

## For video and image agents

Read [tokens.json](https://context-mode.com/brand/tokens.json) first. Then check every frame against this list.

1. White (`#ffffff`) or `#fafafa` background. At most one dark scene (`#0a0a0a`), for the proof.
2. Load Geist, Geist Mono and IBM Plex Sans 600 and wait for them before you render (`document.fonts.ready`).
3. Place the logo from the SVG or PNG files, or set it with the CSS above once IBM Plex Sans 600 has loaded. Never redraw it.
4. Headlines in Geist 600 with -0.045em tracking, ink then grey. No italics, no serif, no colored word.
5. Green, blue and red only for Save, Remember and Protect.
6. Commands, code, file names, URLs and data numbers in Geist Mono.
7. Every number from a published page; list the page next to the post. No plan prices.
8. Short lines. Leave each line on screen for 0.3 seconds per word or more.
9. Keep everything inside the safe area below.
10. End on the wordmark and context-mode.com.

### Canvas sizes

16:9 · 1920×1080

4:5 · 1080×1350

1:1 · 1080×1080

9:16 · 1080×1920

OG · 1200×630

| Format | Width | Height | Safe area: top, sides, bottom | Wordmark | Headline |
| --- | --- | --- | --- | --- | --- |
| 16:9 video and slides | 1920 | 1080 | 104, 150, 104 | 48px font size, 312px wide | 90px; opening line 108px; lead 36px; big number 112px |
| 4:5 LinkedIn video | 1080 | 1350 | 96, 84, 96 | 40px, 260px wide | 72px; opening line 84px; lead 31px; big number 96px |
| 1:1 square | 1080 | 1080 | 96, 84, 96 | 40px, 260px wide | As 4:5 |
| 9:16 vertical | 1080 | 1920 | 250, 84, 380 | 40px, 260px wide | As 4:5 |
| OG share card | 1200 | 630 | 60, 76, 54 | 30px, 195px wide | 92, 80, 68 or 60px by length; tracking -0.045em; line-height 1.04 |

- Logo: top left, on the corner of the safe area, as in the drawings above. Its clear space (0.78em) stays empty.
- 9:16: the platform's buttons and captions cover the top and the bottom of the frame, so the safe area starts 250px down and ends 380px from the bottom.
- OG cards: the page's name in a pill at the top right (Geist Mono 20px, text-3, 1.5px border); the headline at the bottom left, ink then grey; under a hairline, one number on the left and the URL in Geist Mono 19px, text-4, on the right. Dots fade in from the right.
- End card: the wordmark centred, 96px font size on 16:9 or 72px on the 1080-wide formats, with context-mode.com under it in Geist Mono at 0.3 of the wordmark size, text-3, one cursor height below.
- Pixel sizes for video follow the brand's video templates at 1920 and 1080 wide. For another size, scale every value by width.