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.

Each rule has a live example next to it, drawn with the site's own stylesheet (/styles/brand.css). The same values are in 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
• Files
• Logo
• Color
• Type
• Layout
• Components
• Voice
• Motion
• For video and image agents

Summary

Files

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

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

In HTML, set it like this. Load IBM Plex Sans 600 first (see 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

On white or #fafafa: wordmark-on-light.svg

On #0a0a0a: 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

Clear space: the cursor's height (0.78em) on every side of the ink box

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

app-icon.svg, 512, 1024

The site's favicon and web app icon are this mark

Do not

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

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.

• 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

Type

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

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.

• 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.

Layout

Width and gutters

Grids

Section spacing

Breakpoints

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

• 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

Dark sections

• 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

Cards

Underline tabs

Code blocks

Four kinds, each for one job.

npx @context-mode/cli

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

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.

Tags and pills

• 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

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. The free start is word for word: Start free: 1,000 requests, every feature, no card.

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.

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 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

• 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.