Design system

Glass, signal, and ink.

The dashboard and this site share one material system. A deep canvas carries soft colour fields; translucent surfaces stack on it; floating chrome blurs what sits behind; small LED-grade signals report status; three steps of ink carry the words. This page is the system, rendered live from the CSS custom properties. Flip the theme switch and watch every token move together.

Tokens live in packages/ui-kit/src/tokens.css and are mirrored in this site's stylesheet. Components never hard-code a colour.

Canvas & surfaces

Layers, back to front

Surfaces are translucent, so the canvas glow shows through every panel and no two cards on a page are ever quite the same colour. A one-pixel inner highlight on the top edge is the only hint of physicality.

surface-0

surface-1

surface-2

surface-solid

--bg#09090b · #f6f5f1Canvas: the page itself

--surface-1white 4.5% · white 68%Default panel

--surface-2white 7.5% · white 90%Raised panel, hover

--surface-solid#131316 · #ffffffOpaque: code windows, demos

--glassrgba(16,16,20,.72) · rgba(250,249,245,.78)Floating chrome, blurred

--linewhite 8% · ink 9%Hairline borders

--line-strongwhite 16% · ink 18%Emphasised borders, hover

--wellblack 35% · ink 5%Recessed tracks and inputs

Ink

Three steps of emphasis

Headlines and values in the first step, body in the second, labels and metadata in the third.

--text#f2f1ed · #17171aPrimary text

--text-2#a5a49d · #5b5a55Secondary text, body copy

--text-3#6f6e68 · #8a8983Labels, meta, eyebrows

--code-text#e6e4dc · #23232aCode and data

Signals

Small, vivid, never a wall

Orange acts. Green, amber, and red report. Violet marks redactions, gold marks Pro, cyan marks Sync. Signals appear as glowing dots and tinted chips, never as large blocks of colour.

LED lamps

accent ok warn err pro sync off

Chips

ok · 512msskippederror6 redactionssyncedPRO

--accent#ff5714 · #e04a00Primary actions, active state

--ok#3fd77e · #12813fSuccess, connector ok

--warn#ffb02e · #94660aSkipped, stale, expiring

--err#ff5c50 · #bf2f24Errors, destructive

--info#7aa2ff · #2f5fd1Neutral information

--redact#b892ff · #6a3ecbRedaction counts

--pro#e3b25a · #8a6210Pro tier

--sync#4ec4e6 · #0d7fa6Sync tier, vault

Typography

Type scale

Archivo for everything spoken, with tight tracking on display sizes. IBM Plex Mono for anything that is data: paths, counts, commands, timings. Doto is reserved for a handful of large numerals.

Display · Archivo 800 · clamp(38–62px) · -0.035em

One context, every agent.

Heading · Archivo 750 · 32px · -0.03em

The context layer your agents were missing.

Body · Archivo 400 · 16.5px / 1.6

ctxfile snapshots your working state into one context object that any MCP agent loads instantly, and nothing leaves your machine.

Eyebrow · Plex Mono 600 · 11.5px · caps · 0.08em

Section label

Mono data · IBM Plex Mono · 13px · tabular-nums

file · 34 files · 6 redactions · 947ms · 18,432 / 50,000 tokens

Numeral · Doto 700 · 34px

18,432

Components

Live specimens

Built with the same CSS classes the real pages use. Not illustrations of components, the components.

Install command

npm install -g ctxfile

Buttons

Install Read the docs Pro: $12/month Install

Connector rows · running / ok / skipped / locked

filewalking project…

gitmain · ↑2 · 3 recent commits512ms

notionnot configured (opt-in)2ms

sessionsclaude code · cursor PRO

Token meter

token budget18,432 / 50,000 · 37%

Redaction chip6 redactions

Code window · JSON · line numbers

get_context(scope: full)json

1{2  "meta": { "tokensUsed": 18432, "tokenBudget": 50000 },3  "plan": "Ship checkout flow: webhook handler, then receipt emails.",4  "keyFiles": [5    { "path": "src/payments/webhook.ts", "tokens": 1284, "redactions": 2 }6  ],7  "gitState": { "branch": "feat/checkout", "ahead": 2, "behind": 0 }8}

Code window · shell

bash

# register once, serve every client on the machinenpm install -g ctxfileclaude mcp add ctxfile -- ctxfile --root .