Aerospace industrial design system. Amber on black. Geist Mono throughout. All-caps labels with generous letter-spacing. Data first, decoration after. No rounded corners. Borders over shadows. Left-aligned everything. Generous padding. This file is both documentation and live reference — open in a browser or read as source.
01

Typography

Scale
Hero — 56px 700
Display — 40px 700
Heading — 32px 700
Subheading — 20px 500
Body — 16px 400 regular text for content
Small — 14px label text, metadata, captions
Overline — 11px uppercase · 0.15em tracking
Overline Accent — 11px uppercase · 0.5em tracking
Classes
.type-hero
.type-display
.type-heading
.type-subheading
.type-body
.type-small
.type-overline
.type-overline.bright
02

Colors

Core Palette
bg#0a0a0a
bg-raised#111111
bg-surface#0d0d0d
bg-hover#141414
accent#f59e0b
accent-hover#fbbf24
Text
bright#ffffff
text#e8e8e8
label#888888
dim#666666
muted#444444
Semantic
green#22c55e
red#ef4444
blue#3b82f6
yellow#f59e0b
03

Spacing

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
24px
--space-xl
32px
--space-2xl
48px
--space-3xl
64px
Spacing in Context
Panel Title
space-md gap between items, space-lg between rows, space-xl panel padding
04

Buttons

Matrix — Every Variant × Size × State
Class Default Hover Active Disabled Loading
.btn-primary .sm
Small filled
.btn-primary
Default filled
.btn-primary .lg
Large filled
.btn-secondary .sm
Small outline
.btn-secondary
Default outline
.btn-secondary .lg
Large outline
.btn-ghost .sm
Small muted
.btn-ghost
Default muted
.btn-ghost .lg
Large muted
.btn-danger .sm
Small destructive
.btn-danger
Default destructive
.btn-danger .lg
Large destructive
Class Reference
.btn
.btn-primary
.btn-secondary
.btn-ghost
.btn-danger
.btn-sm
.btn-lg
.btn-icon
05

Form Inputs

Lowercase, no spaces
Board name already exists
Board name available
06

Toggles & Checks

Toggle Switches
Checkboxes
Radio Buttons
07

Tabs

Underline
Overview panel — this tab is active with amber underline indicator.
Sessions panel — review past interaction sessions and their metrics.
Tools panel — manage connected integrations and API endpoints.
Archived panel — inactive projects and read-only historical data.
Segmented
Daily metrics panel content.
Weekly metrics panel content.
Monthly metrics panel content.
08

Interactive Steppers

Phased Operations (Horizontal)
Ignition
T-minus 10s
Lift-off
Ascent active
Stage 1 Sep
Pending altitude
Orbit Entry
Target Met
Checklist (Vertical)
Pre-flight check
All systems nominal
Fueling
45% Complete
Crew Ingress
Awaiting confirmation
09

Range Sliders

85%
92%
12%
10

Metric Cards

Chemistry
8.0
▲ 0.4
Prompts / Session
6.2
▼ 1.1
Total Events
2,814
across all sessions
Parallel Rate
40%
8/20 used subagents
Entries
19/30
principles encoded
11

Tables

Session History
Date Prompts Tools Duration Status
2026-02-14 15:29 35 123 40m Complete
2026-02-09 01:34 19 335 120m Complete
2026-02-08 01:40 15 106 92m Reviewed
With Tabs & Filter
Filtered Results
Date Prompts Tools Duration Status
2026-02-14 15:29 35 123 40m Complete
2026-02-08 01:40 15 106 92m Reviewed
12

Bars

Standard (value → bar)
250
159
63
050100150200250
Semantic colors
92%
18%
67%
Thick / Thin variants
Thick
Thin
13

Progress

Default — 72%
Thick — 72%
Thin — Complete
Indeterminate
14

Adherence Timeline

Mission Schedule vs Actual
Telemetry Sync
OK
Core Stability
LATE
Uplink Heartbeat
FAIL
15

Panels & Cards

Panel Header 8
Panel body content. Used for grouped data like tables, tool distributions, comprehension signals.
Card
Lighter variant with muted border. Elevates on hover. Use for individual items in grids.
Card Accent
Amber border variant for featured items.
16

Tags & Badges

Tags
Default Accent Success Error Info Removable ×
Badges — Alert Semantics
i ! ! 8 7 0
17

Alerts

INFO — Board manifest updated. 12 images indexed across 3 boards.
COMPLETE — Analysis finished. All tags extracted successfully.
ATTENTION — Gemini API rate limit approaching. 8/10 calls used this minute.
FAILURE — Image analysis failed for 2 uploads. Retry available.
18

Status Indicators

Status Dots
Online Away Busy Offline
RAG Status Tags (REQ-MON-02)
SG — NOMINAL SA — WARNING SR — CRITICAL SD — INACTIVE
19

Lists

Bullets
  • Monospace grid
  • Amber on black
  • Data-first hierarchy
  • Generous padding
Numbered
  • Upload image
  • AI analysis runs
  • Tags appear
  • User reviews
Dashed
  • Fork, don't queue
  • Data-first hierarchy
  • Close every loop
  • One scan direction
Triangle
  • Build for today
  • Boring infra, novel value
  • Generous sizing
  • Propose, don't ask
Triple Dash
  • First principles always
  • Evidence-based pushback
  • Corrections are data
  • Each session more aligned
20

Code

Inline
Run GEMINI_API_KEY=xxx node server.js to start the moodboard.
Block
import { readJSON, writeJSON } from './fs';
import { extractTags, validateSchema } from './pipeline';

// ── Load source board ─────────────────────────────────────
const board   = await readJSON('boards/aerospace.json');
const images  = board.images.filter(i => i.reviewed);
const refs    = images.slice(0, 5);

// ── Run extraction & validation ───────────────────────────
const tags    = await extractTags(refs);
const report  = validateSchema(tags, 'v2');

await writeJSON('output/tags.json',       tags);
await writeJSON('output/report.json',     report);
await writeJSON('output/manifest.json',   { count: tags.length });

console.log(`Tagged ${tags.length} refs in ${Date.now() - t0}ms`);
21

Summary / Quote

L — var(--text-2xl)
Build for today. Three similar lines beat premature abstraction. No speculative flexibility. Ship what you need now.
M — var(--text-xl)
Boring infra, novel value. Proven tools for plumbing. Innovate only where it creates differentiated value.
S — var(--text-lg)
Close every loop. Every tool opened gets closed. Every resource freed. No orphans left behind.
Hero — clamp(2rem, 4.5vw, 6.5rem)
Across 20 sessions, chemistry scores 8.0/10. Parallel execution active in 40% — fork-don't-queue applied.
22

Key-Value Grid

REPORT GENERATED2026-02-14 16:09
EVENT SOURCEVIBECRAFT JSONL
SESSIONS ANALYZED20
CLASSIFICATIONUNCLASSIFIED
OPERATORCMDR. SHEPARD
SECTORALPHA-9
STATUSNOMINAL
UPTIME47h 12m
23

File Upload

No files
Drag images here
PNG, JPG, WEBP
Uploading…
3 of 12 files
34%
Uploaded
12 files ready
100%
24

Command Palette

Press ⌘K to open
Suggestions
Calendar ⌘ C
Search Emoji ⌘ E
Launch Calculator
Settings
Profile ⌘ P
Billing ⌘ B
Settings ⌘ S
25

Popover

26

Toast

Brief
Scheduled: Catch up
Friday, February 10, 2023 at 5:57 PM
In-Depth
Profile Updated
Your changes have been saved successfully and synced across all devices.
Mini Success
Saved
Brief Destructive
Uh oh! Something went wrong.
There was a problem with your request.
In-Depth Destructive
Upload Failed — ERR_UPLOAD_412
Payload exceeds 25MB limit. Compress or split into multiple uploads. Learn more →
Mini Updating
Saving...
28

Stepper Control

Bullets
6.0
With Bounds
60
29

Hover Card

@nextjs
V
Vercel
@vercel
The React Framework – created and maintained by @vercel.
270k Followers
112 Following
33

Dividers

Section Break
Content above

Content below
List Separator
Item one

Item two

Item three
34

Skeleton Loading

35

Tooltip

Hover me (Text) Hover me (Tag)