Aerospace UI Kit
Component Reference
VERSION1.0
FONTGEIST MONO
THEMEDARK AEROSPACE
LICENSEPERSONAL USE
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-xs4px
--space-sm8px
--space-md16px
--space-lg24px
--space-xl32px
--space-2xl48px
--space-3xl64px
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)
Semantic colors
Thick / Thin variants
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
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
PNG, JPG, WEBP
Uploading…
3 of 12 files
34%
34%
Uploaded
12 files ready
100%
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
In-Depth
Mini Success
Brief Destructive
In-Depth Destructive
Mini Updating
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
30
Page Header
System Name
Flight Control Dashboard
META KEYMETA VALUE
ANOTHER KEYANOTHER VALUE
32
Modal
Confirm Action
Remove 3 images from the Aerospace board?
This action cannot be undone.
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)