Design System · v0.3

usb.plan.ai
Style Guide

The phosphor-terminal system behind the landing page: green-on-black, CRT-flavored, built for an offline-first, open-source AI council. Everything below is live, rendered from the same tokens the product ships with.

tokens · tokens.css  ·  page styles · page.css  ·  v0.3 adds brand · elevation · motion · voice  ·  ← home

§00 BRAND MARK · WORDMARK · GLYPHS

Brand

One wordmark, built from monospace and a single quadrant glyph standing in for a USB connector. It should always read like something silkscreened onto the side of the stick.

▚usb.plan.ai
Wordmark variants
▚usb.plan.ai
Primary — phosphor mark + ink wordmark on carbon
▚usb.plan.ai
Mono — all-ink, for dense or low-emphasis placements
▚usb.plan.ai
On light — deep-green mark, near-black wordmark
Clear space & minimum size
▚usb.plan.ai
Keep clear space of at least the mark's width on every side. Minimum legible size is 16px cap-height on screen. Never recolor the mark outside the phosphor scale.
Glyph vocabulary
▚
Brand mark
USB connector
⬡
Council trace
trace header
⬢
Chairman
synthesis
Status dot
online / offline
›
Solver
seat marker
!
Skeptic / sec
caution marker
→
Flow / verdict
arrow
$
Shell prompt
code blocks
§01 COLOR PHOSPHOR ON CARBON

Color

Near-black carbon surfaces let a single bright phosphor green do the talking. Signal colors stay sparse and semantic: cyan = online/network, amber = caution/skeptic, red = block/security, violet = chairman.

Surfaces
Background
--bg
#06090A
Panel
--panel
#0B1011
Panel raised
--panel-2
#0F1517
Line
--line
#1B2422
Line bright
--line-bright
#27332F
Phosphor (primary)
primary
Green
--green
#33FF00
highlight
Green hot
--green-hi
#86FF63
Green dim
--green-dim
#2F9C1F
Green deep
--green-deep
#134D08
Signal accents (semantic — use sparingly)
Cyan · online
--cyan
#38D6FF
Amber · skeptic
--amber
#FFC24B
Red · block
--red
#FF5D5D
Violet · chairman
--violet
#B794FF
Text / ink
Ink
--ink
#D6E4DC
Ink soft
--ink-soft
#93A89C
Muted
--muted
#5E7269
Faint
--faint
#38463F
§02 TYPE MONO MEETS GROTESK

Typography

Two families. Space Grotesk carries display headlines: tight, confident, human. JetBrains Mono carries everything that should feel like a terminal: body, labels, code, kickers. The product can flip headlines to mono for a fully-TTY look.

Ag
Space Grotesk
--display · weights 400 / 500 / 600 / 700
A B C D E a b c d e 0 1 2 3 4 5 6 7 8 9
Ag
JetBrains Mono
--mono · weights 400 / 500 / 700 / 800 + italic
A B C D E a b c d e 0 1 2 3 4 5 6 7 8 9
Display XLGrotesk 700 · 60px
A council's verdict.
HeadingGrotesk 700 · 30–42px
Not one model's opinion.
KickerMono · 12px · 0.18em up
§01 — Deliberate · Mode
BodyMono 400 · 15–17px
Offline-first AI on a USB stick: voice, vision, chat, and an auditable council.
Code / shellMono · 13–14px
$ ./preflight-check # recommends a tier
§03 COMPONENTS THE KIT

Components

The building blocks, in their live states. Hover the buttons to see the phosphor glow respond.

Buttons & nav controls
Build your own — freeHow it works →★ Star GitHub
Pills, council seats & status tags
Concept · Spec v0.3solverskepticsecuritychairmanon-deviceonline
Section kicker — numbered + mode badge
§02 OFFLINE GUARD · GRID-DOWN
Council trace — the signature component
⬡ council trace offline · verified
solver›run it with sudo to skip errors.
skeptic!sudo + unverified = exposure.
security!no checksum. block as-is.
⬢ chairman · synthesis
Don't sudo it. Dry-run in a sandbox, verify the checksum.
Terminal block
[email protected]
$ ./preflight-check
[ ok ] USB 3.2 · RAM 64 GB · GPU detected
[ ok ] recommended → Lab
$ ./start-linux.sh
§04 SPACE & SURFACE RHYTHM · RADIUS · ELEVATION

Spacing, radius, elevation & texture

A restrained spacing rhythm, small radii (this system stays crisp. Nothing gets very round), a shallow elevation scale, and four signature CRT textures that give the whole thing its terminal feel.

Spacing rhythm
tight · 8
gap · 14
inset · 24
block · 40
section · 64–104
Corner radius
3
Chips / seats
3px
4
Buttons
4px
8
Cards
8px
10
Panels
10px
∞
Pills
999px
Elevation
Flatborder only
Card0 30 70 −40 #000
Panel+ green hairline
Glow · hover0 0 50 −22 green
Signature textures
Scanlines — 2px CRT line overlay, multiply blend
Phosphor glow — radial green bloom · --green-glow
Code rain — binary, masked, ~6% opacity behind headers
Vignette — top-lit radial darkening to frame content
§05 MOTION QUICK · MECHANICAL

Motion

Motion is short and mechanical. Things snap and settle like hardware; they don't float. Hover the tiles to feel the timing.

hover me
Hover lift
translateY −4px · 180ms ease
Cards and tiers rise a few pixels and pick up a phosphor edge-glow on hover.
Status pulse
box-shadow · 1.9s loop
The only looping motion allowed: a slow phosphor pulse on live status.
root@usb
Cursor blink
steps(1) · 1.1s
Hard on/off blink, never a smooth fade. Terminals don't ease.
Duration & easing
150
Fast
hovers · color
180
Base
lifts · surfaces
250
Slow
glow · shadow
600
Reveal
scroll-in
ease
Easing
standard ease
§06 VOICE & TONE HONEST · TERSE

Voice & tone

Write like a competent engineer who respects the reader: short, specific, and honest about what isn't built yet. No hype, no rounded-corner friendliness.

Lowercase the machine

UI labels, code, kickers and seat names stay lowercase mono. Reserve sentence case for human-facing headlines.

✓council trace · offline · verified
✕Council Trace (Offline & Verified!)

Honest over hype

Name the stage of reality. "Concept & spec." "Minimal-trace, honestly." Saying what isn't built is the credibility.

✓the engine and evals aren't built yet
✕the world's most powerful offline AI

Terse & declarative

Short sentences. Commas and periods, not em dashes. Cut adjectives. Let the trace and terminal do the talking.

✓Your council. Your machine. No cloud.
✕The ultimate AI assistant for everyone

Show the dissent

Surface tradeoffs and disagreement instead of burying them. The skeptic and security seats are features, not footnotes.

✓verdict · blocked → safe path
✕everything looks great, ship it!
§07 USAGE KEEP IT HONEST

Do & don't

The aesthetic is "authentic terminal," not "neon arcade." A little restraint keeps it credible.

✓ Do

  • ›Let one phosphor green lead; keep surfaces near-black.
  • ›Use signal colors only for their meaning (cyan online, red block…).
  • ›Reserve glow for primary actions and the active phosphor.
  • ›Set labels, code & kickers in mono; headlines in Grotesk.
  • ›Keep corners small. Crisp panels, not pillowy cards.

✕ Don't

  • ×Stack multiple bright accents in one view. It turns to soup.
  • ×Apply glow to body text or large fills.
  • ×Introduce gradients beyond the subtle panel/vignette ones.
  • ×Add emoji or rounded "friendly" UI. It breaks the terminal voice.
  • ×Use pure #000 or pure #fff; stay within the tinted scale.