ctxfile

Design system

Chassis, screens, and dot-matrix truth.

The dashboard and this site render as one instrument. Two materials rule everything: controls and copy live on the chassis; data renders on dark LCD screens. This page is the design system, rendered.

Every swatch and specimen below is painted with the live CSS custom properties. Flip the theme switch: the chassis swaps between black and silver, and the screens stay dark, like real hardware.

Color

Tokens

Orange acts, brass sells, violet redacts, green/amber/red report. LED lamp colors stay vivid in both themes because a lamp is a light, not a print.

--face#151513 · #d7d6cfChassis: page and device body
--face-2#1c1b19 · #e2e1daRaised module faces
--well#10100e · #c8c7beRecessed wells: inputs, tags
--linergba(255,255,255,.09) · rgba(32,31,25,.16)Machining hairlines
--text#ece9e1 · #201f1aPrimary text
--text-2#a6a396 · #55534aSecondary text
--text-3#767263 · #676458Engraved labels, meta
--screen#0c0e0d · #0c0e0dLCD screens: constant, data lives here
--screen-text#dbe5d8 · #dbe5d8On-screen text
--screen-green#56df88 · #56df88Phosphor green: live signals
--accent#ff5714 · #e04a00International orange: actions, active
--ok#3fd77e · #12813fSuccess: connector ok
--warn#ffb02e · #94660aWarning: skipped, stale
--err#ff5c50 · #bf2f24Error: connector failed
--redact#b892ff · #6a3ecbRedaction violet
--pro#d9a23c · #8a6210Pro brass

Typography

Type scale

Archivo for everything printed on the chassis, IBM Plex Mono for anything that is data (paths, counts, commands, timings), and Doto, a dot-matrix face, for numbers that glow on screens.

Display · Archivo 800 · clamp(36–56px) · -0.035em

One context, every agent.

Heading · Archivo 750 · 30px · -0.028em

The context layer your agents were missing.

Body · Archivo 400 · 16px / 1.55

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

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

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

LED readout · Doto 700 · on screen

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
Channel strips · running / ok / skipped / locked
filewalking project…
gitmain · ↑2 · 3 recent commits512ms
notionnot configured (opt-in)2ms
sessionsclaude code · cursor PRO
Segmented LED token meter
token budget18,432 / 50,000 · 37%
Plates & keys
PRO⛨ 6 redactionsinstallPro: $12/month