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. It is 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 rules by person, role, and policy: who can use which models, how much, and when. 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 are encrypted on your device before upload. Authorized clients decrypt locally using their own keys. CLI child-process injection and MCP tool results have different exposure: an agent can read a decrypted value returned to it.
- Client-side encryption · AES-256-GCM
- Project and principal access rules
- Local decryption by authorized clients
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, with 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”.
- Use periods, commas, and colons instead of em dashes.
- 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 governance over AI requests routed through AIRCTRL. 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 connected request flies through. 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. Connected calls are cleared, audited, and attributed. "One tower. Total control."
3. SECRETS: the vault. Record values are encrypted on the client before upload. AIRCTRL stores ciphertext and wrapped keys; authorized clients decrypt locally. CLI child-process injection is not the same as an MCP tool returning plaintext to an agent. "Secrets that travel with the task."
## Security boundaries
- Vault's zero-knowledge model applies to encrypted record values, not readable names, tags, and other record metadata.
- Gateway provider credentials use separate server-side encryption so the proxy can use them for upstream calls.
- Request and response retention depends on body-logging and caching settings and the connected provider's policies.
- Never claim an agent cannot see a secret that an authorized MCP tool returns to it.
- Describe audit logs as tamper-evident, not tamper-proof. Do not imply infrastructure-provider certifications certify AIRCTRL.
## 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.
- Use periods, commas, colons, or parentheses instead of em dashes.
- 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.