Aerospace UI Kit · V1.0

Industrial
Design System.

Amber on black. Geist Mono throughout.
30 components. One file. No dependencies.

View Components → GitHub ↗
scroll
30 Components
BUTTONS
METRICS
Chemistry
8.0
▲ 0.4
TAGS
Accent Success Error Default
ALERTS
OK — Analysis complete.
ERR — Upload failed.
FORM INPUTS
PROGRESS
72%
Complete
Loading
STATUS
Online Away Busy Offline
KEY-VALUE
VERSION1.0
THEMEAEROSPACE
FONTGEIST MONO
LICENSEPERSONAL
CODE
const board = await readJSON(
  'boards/aerospace.json'
);
// top 5 reviewed refs
const refs = board
  .slice(0, 5);
SKELETON
Design Principles
DATA FIRST
Numbers before bars. Content before chrome. Visualizations reinforce information — never replace it.
NO DECORATION
Every element earns its place. Form follows function, always. If it doesn't carry meaning, it doesn't exist.
BORDERS NOT SHADOWS
1px alpha-channel amber borders over box-shadow illusions. Honest structure, visible edges, no atmospheric faking.
MONO THROUGHOUT
Geist Mono for labels, values, code, and prose alike. One typeface. Total consistency. Zero font-switching.
One File. No Deps.
30
components
1
stylesheet
No framework
No build step
No JS required
Copy. Paste. Ship.
<!-- 1. Include the stylesheet -->
<link rel="stylesheet"
      href="style.css">

<!-- 2. Use any component -->
<button class="btn btn-primary">
  Launch
</button>

<div class="metric">
  <div class="metric-label">Chemistry</div>
  <div class="metric-value green">8.0</div>
</div>

<!-- 3. Done. -->
Start Building
View All 30 Components → GitHub ↗