The AIRCTRL design system
A dark, developer-grade control surface with a clean grotesque, a mono terminal layer, and a violet radar accent. One design that transcends light and dark. Every token, snippet, and asset here is copy-and-go — toggle the theme to preview both.
AIRCTRL is three functions with one metaphor. Airspace is the gateway you control everything through, the Tower is the defense layer that governs it, and Secrets is the vault that feeds it.
Airspace is the gateway every request flies through — the one place you control everything. It takes a single team key and clears it to the right model, by person, task, or agent, with live spend caps and instant failover, so switching provider never means touching code.
- One key for the whole team
- 128 models behind one endpoint
- Zero rewrites to switch provider
The Control Tower is the defense layer. It sets and enforces the rules — who can use which models, how much, and when — by person, role, and policy. Every call is cleared, audited, and attributed from a single place.
- Controls by person, role, and rule
- Live clearance, caps, and rate limits
- Every call audited and attributed
Secrets is the vault. API keys, environment variables, database URLs, and OAuth tokens live encrypted in one place, scoped from team down to a single agent run. Values are injected at the edge at request time and never revealed to the agent, the repo, or your logs.
- One encrypted vault · AES-256
- Scoped team → project → task → agent
- Injected at the edge, never revealed
Click any swatch to copy its var(--token); click a chip to copy the dark or light value. Reference tokens, never raw hex, so light, dark, and on-dark regions stay correct.
Surfaces
Stack base → surface → elevated to build depth.
Text
Three levels of emphasis, top to bottom.
Brand · violet
The beacon is the accent — a runway light, not the runway.
Status
State and telemetry only — never decoration.
Lines
Hairline borders that tint with the violet.
- Use beacon for a single primary action or accent per view — it draws the eye like a runway light.
- Layer surfaces base → surface → elevated to build depth; keep borders on line / line-strong.
- Reserve success, warning, and error for live state and telemetry.
- Put on-beacon (not fg) on top of a beacon fill for correct contrast.
- Don't fill large areas with beacon or stack two primary buttons in one view.
- Don't hardcode hex — reference var(--token) so light, dark, and on-dark regions stay correct.
- Don't use status colors decoratively; they should always mean something.
- Don't place low-contrast text on saturated surfaces.
Three families: a display grotesque for headings, a humanist sans for body, and a mono for the terminal layer. Copy the font token or the utility class.
One key. Every model.
The quick brown fox clears the tower at 0600. AIRCTRL routes, clears, and governs every agent, key, and model your team flies.
❯ airctrl route set --model auto --cap 2000
The full pack, every variation on its correct background. Each downloads at 1024²+; copy the public path or grab everything at once.
- Give the mark clear space equal to the height of its routing arrows on every side.
- Use the reversed (white) lockup on dark or photographic backgrounds; monochrome (black) on light.
- Download the 1024²+ source and scale down — never up.
- Don't recolor the mark outside the violet range or add shadows and effects.
- Don't stretch, rotate, or crop the mark, or rebuild the wordmark in another typeface.
- Don't place the transparent mark on a low-contrast background.
A 24×24, 1.5-weight line set on currentColor. Click any icon to copy its JSX. Airspace leans on route & radar, the Tower on the tower mark, and Secrets on vault, key & shield.
Isometric line scenes for the marketing surface: agentic MCP control, dynamic routing, the secrets vault, and team governance.
Live examples beside the code that renders them. Copy the snippet, then follow the usage notes to pick the right variant.
beaconThe one primary action on a view — “Get a key”, “Take the tower”.outlineSecondary, sitting beside a primary — “See how it works”.ghostLow-emphasis and inline navigation — “Sign in”.monoTechnical or terminal actions — “mcp connect”.
import { Button } from "@/components/ui/button";
<Button>Get a key</Button>
<Button variant="outline">Read the docs</Button>
<Button variant="ghost">Sign in</Button>
<Button variant="mono">mcp connect</Button>
// sizes: sm · md (default) · lg
<Button size="lg">Take the tower</Button>import { Tag } from "@/components/ui/tag";
<Tag dot tone="beacon">routing</Tag>
<Tag dot tone="success">cleared</Tag>
<Tag tone="warning">rate limit</Tag>
<Tag>team</Tag>import { TerminalWindow } from "@/components/ui/terminal-window";
<TerminalWindow title="airctrl · clearance">
<div className="text-fg"><span className="text-beacon">❯</span> airctrl status</div>
<div className="text-muted">1 key · 128 models · 0 conflicts</div>
<div className="text-success">✓ routing live</div>
</TerminalWindow>// The core container: surface + hairline border + card radius.
<div className="panel p-5">…</div>
/* or, in CSS */
.panel {
background-color: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-card); /* 14px */
}- GPU-only transforms and opacity, easing cubic-bezier(0.16, 1, 0.3, 1).
- Scroll reveals at 85% viewport; radar & tower run on R3F with SVG fallbacks.
- Everything collapses gracefully under prefers-reduced-motion.
How AIRCTRL sounds — and a prompt that teaches any model to write in that voice.
Voice
- Speak like an air-traffic controller: calm, terse, precise. Short declaratives.
- Lead with control and clarity — confident, never hypey.
- Talk to developers: concrete and technical, no marketing filler.
- Prefer numbers to adjectives — “1 key · 128 models · 0 rewrites”.
- Keep the aviation metaphor coherent: tower, airspace, gate, runway, beacon, clearance.
Paste this into any LLM to generate on-brand marketing copy — it encodes the metaphor, the three primitives, the vocabulary, and the tone.
You are the AIRCTRL brand copywriter. Write every response in the AIRCTRL voice, using the vocabulary and product definitions below. Stay in character.
## What AIRCTRL is
AIRCTRL is the control tower for agentic AI — an AI gateway and secrets manager driven from Claude Code and other MCP clients. It gives a team one key for every model, dynamic routing, shared secrets, and full governance over how their agents use AI. Positioning line: "One key. Every model. Total control." AIRCTRL is a Theovex company.
## The core metaphor
Everything is framed as an air-traffic control tower clearing flights through controlled airspace. Requests are flights; models are gates/destinations; approval is "clearance"; going live is "cleared for takeoff". Use the metaphor consistently, but never let it obscure the literal technical meaning.
## The three primitives (name them precisely)
1. AIRSPACE — the gateway. The single entry point every request flies through and the one place you control everything. One team key is cleared to the right model by person, task, or agent, with live spend caps and instant failover. "One key in. Every model out."
2. TOWER (the Control Tower) — the defense and governance layer. Where you set up controls by person, role, and rule: who can use which models, how much, and when. Every call is cleared, audited, and attributed. "One tower. Total control."
3. SECRETS — the vault. Where secret keys, environment variables, database URLs, and OAuth tokens live, encrypted and scoped from team down to a single agent run. Injected at the edge at request time, never revealed to the agent, the repo, or your logs. "Secrets that travel with the task."
## Voice & tone
- Air-traffic controller: calm, terse, precise. Prefer short declarative sentences.
- Lead with control and clarity. Confident, not hypey.
- Write for developers. Be concrete and technical; drop adjectives like "revolutionary", "seamless", "cutting-edge".
- Prefer numbers to adjectives: "1 key · 128 models · 0 rewrites".
- Lowercase mono labels are common for system/terminal UI: "routing", "cleared", "mcp connect".
## Vocabulary
Use: tower, airspace, gate, runway, beacon, clearance, cleared, cleared for takeoff, departures, route, controls, governed, scoped, injected.
Avoid: generic SaaS filler, exclamation marks, emoji, hyperbole, "AI-powered" as the selling point.
## Formatting
- Headlines: 2–5 words, high contrast, often two-part ("One key in. / Every model out.").
- Body: one tight idea per sentence; explain the mechanism, not the hype.
- CTAs: imperative and short ("Get a key", "Take the tower", "See how it works").
## When you respond
Return only the requested copy, in this voice. If asked for options, give a short list. Keep the metaphor coherent and every technical claim accurate.