Aerospace UI Kit
Component
Reference
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 Usage
Scale
Hero — 56px 700
Display — 44px 700
Heading — 28px 700
Subheading — 20px 500
Body — 15px 400 regular text for content
Small — 12px label text, metadata, captions
Overline — 11px uppercase · spaced
Overline Accent — 11px uppercase · wide
Classes
.type-hero · .type-display · .type-heading · .type-subheading
.type-body · .type-small · .type-overline · .type-overline.bright
02
Colors Usage
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
04
Buttons
Variants
Sizes
States
05
Form Inputs
Lowercase, no spaces
Board name already exists
Board name available
06
Toggles & Checks
07
Tabs
Tab content goes here. Active tab has amber underline.
08
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
09
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 |
10
Bars
Standard (value → bar)
Semantic colors
Thick / Thin variants
11
Progress
Determinate — 72%
Complete
Indeterminate
12
Panels & Cards
Panel Header 3
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.
13
Tags & Badges
Tags
Default
Accent
Success
Error
Info
Removable ×
Badges
3
42
7
0
14
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.✕
15
Status Indicators
Status Dots
Online
Away
Busy
Offline
RAG Status Tags (REQ-MON-02)
SG — NOMINAL
SA — WARNING
SR — CRITICAL
SD — INACTIVE
16
Lists
Default
- Monospace grid
- Amber on black
- Data-first hierarchy
- Generous padding
Numbered
- Upload image
- AI analysis runs
- Tags appear
- User reviews
17
Code
Inline
Run GEMINI_API_KEY=xxx node server.js to start the moodboard.
Block
const board = await readJSON('boards/aerospace.json'); const images = board.images.filter(i => i.reviewed); const refs = images.slice(0, 5); // top 5 reviewed refs
18
Summary / Quote
Across 20 sessions, chemistry scores 8.0/10. Parallel execution active in 40% — fork-don't-queue applied.
19
Key-Value Grid
REPORT GENERATED2026-02-14 16:09
EVENT SOURCEVIBECRAFT JSONL
SESSIONS ANALYZED20
CLASSIFICATIONUNCLASSIFIED
20
Empty State
No images in this board
Drag and drop images here, or paste from clipboard
Supports PNG, JPG, WEBP
Supports PNG, JPG, WEBP
21
Page Header
System Name
Page
Title
Title
META KEYMETA VALUE
ANOTHER KEYANOTHER VALUE
23
Modal
Confirm Action
Remove 3 images from the Aerospace board?
This action cannot be undone.
24
Dividers
Solid
Dashed
Dotted
25
Skeleton Loading
26
Tooltip
Hover me (Text)
Hover me (Tag)
27
Command Palette
Press ⌘K to open
Suggestions
Calendar
⌘ C
Search Emoji
⌘ E
Launch Calculator
Settings
Profile
⌘ P
Billing
⌘ B
Settings
⌘ S
28
Popover
29
Toast
30b
Mini Toast (Centered)
Success State
Saved
Updating State
Saving...
.mini-toast-container { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); }
.mini-toast { background: var(--green); color: var(--bg); }
.mini-toast.show { transform: translateY(0) scale(1); opacity: 1; }
30c
Stepper Control
Default
6.0
With Bounds
60
.stepper-control { display: inline-flex; align-items: center; border: 1px solid var(--border-dim); }
.stepper-btn { min-width: 36px; padding: 8px 12px; }
.stepper-val { padding: 8px 16px; border-left: 1px solid var(--border-dim); border-right: 1px solid var(--border-dim); }
Interactive Steppers Usage
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
32
Range Sliders Usage
85%
92%
12%
33
Adherence Timeline Usage
Mission Schedule vs Actual
Telemetry Sync
OK
Core Stability
LATE
Uplink Heartbeat
FAIL
30
Hover Card
@nextjs
V
Vercel
@vercel
The React Framework – created and maintained by @vercel.
270k Followers
112 Following