Airframe
Tokens¶
Every value Airframe uses, generated from airframe/tokens.json. In CSS each token is var(--af-<name>). The swatches are live: switch the site's theme and they follow. Use a token for what its note says, not for the color it happens to be today.
Color¶
Text tokens meet 4.5:1 on canvas, surface and raised in both themes; line-strong, focus and the status colors meet 3:1. The tests in tests/test_airframe.py hold every release to that.
Ground¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-canvas |
#000000 |
#F4F4F2 |
Page background. Night is true black: the screen is dark until something needs a person. | |
--af-surface |
#0A0A0A |
#EDEDEB |
Recessed areas: inputs, switches, the terminal bar and segmented controls. | |
--af-raised |
#141414 |
#FFFFFF |
Cards and panels (tonal: separated by tone, no border). A lit card stays raised; its status is the edge, the mark and the word. | |
--af-overlay |
#1C1C1C |
#FFFFFF |
Menus, popovers and hover rows. | |
--af-lifted |
#1C1C1C |
#FFFFFF |
The one step above raised: an opened row or card, the top card of a decision deck, a sheet. Night is a lighter grey; Day has no third white, so lifted carries shadow-1 (and shadow-2 when open) instead. | |
--af-selected |
#1F1F1F |
#E6E6E3 |
Selected row, tile, tab or lane: the fill. Selection is neutral: tiles add a 1px fg ring, rows a 2px fg leading edge; never a brand wash. |
Lines¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-edge-hi |
rgba(255,255,255,0.045) |
#FFFFFF |
The 1px machined highlight along the top edge of a lifted surface (inset 0 1px 0). Decorative; never a divider. | |
--af-line-subtle |
#1F1F1F |
#E6E6E3 |
Row dividers inside cards and tables. | |
--af-line |
#2A2A2A |
#DCDCD9 |
Default hairline: card footers, table header rule, chips. | |
--af-line-strong |
#6B6B6B |
#858583 |
Control borders (inputs, secondary buttons, switches); meets 3:1 on surface. | |
--af-rule |
#424242 |
#BDBDBA |
Section rules and chart axes where a card has no box. Decorative; never the only cue. |
Text¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-fg |
#FFFFFF |
#0A0A0A |
Primary text and data values on canvas, surface and raised. | |
--af-fg-muted |
#A6A6A6 |
#474746 |
Secondary text: descriptions, values in inline data. | |
--af-fg-subtle |
#8A8A8A |
#666664 |
Labels, keys, timestamps and captions on any surface (4.9:1 or better). | |
--af-fg-dim |
#5C5C5C |
#9C9C99 |
Separators and disabled marks only. Never body text. |
Brand¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-brand |
#FFC400 |
#FFC400 |
Signal yellow. Primary action fill, focus, the active route. Never a status. | |
--af-brand-hover |
#FFD23F |
#FFD23F |
Primary button hover. | |
--af-brand-wash |
rgba(255,196,0,0.10) |
rgba(255,196,0,0.18) |
Deprecated since theme-v12: no Airframe rule uses it. Selection is selected with a fg ring or edge; never tint a surface with brand. Kept so older product CSS still resolves. |
|
--af-on-brand |
#111213 |
#111213 |
Text and icons on a brand fill (11.7:1). | |
--af-brand-text |
#FFC400 |
#7A5F00 |
Brand as text or 1px line: the critical path, the now line, links. Day uses dark gold for contrast. | |
--af-brand-line |
#FFC400 |
#7A5F00 |
Brand-colored strokes on the page: link underlines, the hub outline in diagrams, the eyebrow rule. Day darkens it so a 1px line still reads. | |
--af-focus |
#FFC400 |
#7A5F00 |
2px focus ring, offset 2px, on every interactive element. |
Status¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-status-running |
#C7C7C7 |
#3A3A3A |
Running: quiet by design (dark cockpit). Filled circle. | |
--af-status-queued |
#8A8A8A |
#666664 |
Queued: hollow ring. | |
--af-status-approval |
#FF8A3D |
#B04E00 |
Needs a human: the diamond, the word, and the 3px edge on the leading side of a lit card, row or tile. Never a fill or a tint. Orange so it never reads as the yellow brand. | |
--af-status-failed |
#FF4D4D |
#C42B2B |
Failed: the triangle, the word, and the 3px edge of a stopped row or tile. Never a fill. | |
--af-status-denied |
#D93036 |
#C42B2B |
Policy denied: placard fill with white text. | |
--af-on-status-denied |
#FFFFFF |
#FFFFFF |
Text on the denied placard (4.6:1 or better). | |
--af-status-off |
#6B6B6B |
#858583 |
Spun down or expired: small dot. | |
--af-lamp-caution |
#FF8A3D |
#FF8A3D |
Master caution lamp fill (black text). The only large color block in the UI. | |
--af-lamp-warning |
#FF4D4D |
#FF4D4D |
Master warning lamp fill (black text). | |
--af-on-lamp |
#000000 |
#000000 |
Text on lamp fills. |
Terminal and code¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-terminal-bg |
#0A0A0A |
#0A0A0A |
Terminal and code blocks stay dark in both themes. | |
--af-terminal-fg |
#E6E7E3 |
#E6E7E3 |
Terminal text. | |
--af-terminal-dim |
#8E9297 |
#8E9297 |
Terminal prompts, comments and the window bar. | |
--af-terminal-ok |
#C7C7C7 |
#C7C7C7 |
Terminal success lines (quiet). | |
--af-terminal-err |
#FF4D4D |
#FF4D4D |
Terminal failure lines. | |
--af-code-keyword |
#FFFFFF |
#FFFFFF |
Code: keywords and flags. | |
--af-code-function |
#D9D9D9 |
#D9D9D9 |
Code: functions and commands. | |
--af-code-string |
#A6A6A6 |
#A6A6A6 |
Code: strings. | |
--af-code-number |
#CCCCCC |
#CCCCCC |
Code: numbers and digests. | |
--af-code-comment |
#808080 |
#808080 |
Code: comments. |
Traces, lanes, rails and readouts¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-span-model |
#C7C7C7 |
#383838 |
Trace: model-call spans (solid). | |
--af-span-tool |
#999999 |
#666664 |
Trace: tool-call spans (1px outline, faint fill). | |
--af-span-sandbox |
#616161 |
#9E9E9E |
Trace: sandbox command spans (solid, mid grey). | |
--af-stage-plan |
#383838 |
#C7C7C7 |
Lanes and fleet board: plan stage. | |
--af-stage-edit |
#6B6B6B |
#949494 |
Lanes and fleet board: edit stage. | |
--af-stage-test |
#A3A3A3 |
#5C5C5C |
Lanes and fleet board: test stage. PR is drawn as an outline in fg-muted. | |
--af-rail |
#2A2A2A |
#E3E3E0 |
Stage rail, ring and capsule track: the part not yet travelled. | |
--af-rail-done |
#D6D6D6 |
#2A2A2A |
Stage rail, ring and capsule fill: the part done, and the rail head. A lit agent's head and current segment take its status color instead. | |
--af-rail-glow |
rgba(255,255,255,0.25) |
rgba(0,0,0,0.12) |
The soft glow around a live rail head and the latest timeline dot (0 0 12px). The one glow in the system; it says 'moving', never a status. | |
--af-readout-cell |
#161616 |
#EBEBEA |
Unlit cell behind each digit of a readout. | |
--af-display-window |
#0A0A0A |
#FAFAF9 |
Recessed window that holds readouts. | |
--af-dot-field |
#262626 |
#DCDCD9 |
Optional dot field texture (8px pitch) behind hero data. |
Product hues¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-product-hangar |
#24C1C9 |
#00787D |
hangar mark and nav marker only. | |
--af-product-flightdeck |
#D98CD2 |
#914A8C |
flightdeck mark and nav marker only. | |
--af-product-tower |
#67B0F9 |
#1F6CB0 |
Tower (the governed workspace) mark and nav marker only. | |
--af-product-aidlc |
#69C27E |
#1D7D3E |
ai-dlc mark and nav marker only. | |
--af-product-spaceport |
#B199F4 |
#6F57AB |
Spaceport mark and nav marker only. |
Charts¶
| Token | Night | Day | Use | |
|---|---|---|---|---|
--af-chart-1 |
#FFFFFF |
#000000 |
Chart series 1 (primary). Charts are greyscale plus one attention series. | |
--af-chart-2 |
#BFBFBF |
#4D4D4D |
Chart series 2. | |
--af-chart-3 |
#8C8C8C |
#737373 |
Chart series 3. | |
--af-chart-4 |
#666666 |
#8A8A8A |
Chart series 4. | |
--af-chart-5 |
#FF8A3D |
#B04E00 |
Attention series (shares the caution color on purpose). | |
--af-chart-6 |
#333333 |
#D6D6D3 |
Chart series 6 / grid emphasis. |
Type¶
| Style | Family | Size / line | Weight | Use |
|---|---|---|---|---|
Forty agents. One needs you..af-type-display-xl |
display | 64px / 1 | 700 | Hero headline, sentence case. |
Fleet, us-east4.af-type-display-l |
display | 48px / 1.02 | 700 | Page headline. |
Planner prompt v4.af-type-display-m |
display | 36px / 1.05 | 700 | Section headline. |
Environment cards.af-type-title-l |
display | 22px / 1.15 | 600 | Card and panel titles that need the brand face. |
title-m.af-type-title-m |
sans | 20px / 1.3 | 600 | Dialog and drawer titles. |
title-s.af-type-title-s |
sans | 16px / 1.35 | 600 | Card titles in body face. |
body-l.af-type-body-l |
sans | 16px / 1.55 | 400 | Lead paragraphs. |
body.af-type-body |
sans | 14px / 1.5 | 400 | Default UI text. |
body-s.af-type-body-s |
sans | 13px / 1.45 | 400 | Dense UI, table cells, captions. |
Fleet ยท us-east4.af-type-label |
sans | 12px / 1.2 | 500 | Labels, keys, buttons and section names, in sentence case. Mono capitals were retired in theme-v12; mono stays for IDs, numbers and commands. |
Policy.af-type-label-s |
sans | 11px / 1.2 | 500 | Inline data keys, table headers and stage words, in sentence case. |
HGR-7Q2K.af-type-mono |
mono | 13px / 1.5 | 400 | IDs (tail numbers), commands, digests. |
gpt-5.1.af-type-mono-s |
mono | 12px / 1.45 | 400 | Inline data values, durations. |
00:41:07 $1.18.af-type-data |
mono | 13px / 1.3 | 500 | Numbers in tables and readouts (tabular figures). |
| Family token | Stack |
|---|---|
--af-font-display |
"Archivo", "Helvetica Neue", Arial, sans-serif |
--af-font-sans |
"Red Hat Text", "Helvetica Neue", Arial, sans-serif |
--af-font-mono |
"DM Mono", ui-monospace, Menlo, Consolas, monospace |
| Token | Value | Use |
|---|---|---|
--af-display-stretch |
125% |
Archivo's width axis at 125% gives Archivo Expanded. Set font-stretch with the display family. |
--af-display-weight |
700 |
Display weight: headlines and product names. |
--af-display-track |
-0.01em |
Display letter-spacing. |
--af-label-track |
0.08em |
Tracking for the mono capitals that remain: the denied placard, the lamp legend and the terminal bar. Labels are sentence-case sans since theme-v12. |
Space, shape and layout¶
| Token | Value | Use |
|---|---|---|
--af-space-2 |
2px |
Hairline gaps, pip spacing. |
--af-space-4 |
4px |
Tile gaps on the fleet board, icon-to-text in chips. |
--af-space-8 |
8px |
Icon-to-label, button gaps. |
--af-space-12 |
12px |
Card grid gap, inline gaps. |
--af-space-16 |
16px |
Card padding (regular), page gutter on phones. |
--af-space-20 |
20px |
Section inner spacing. |
--af-space-24 |
24px |
Card padding (airy), panel gaps. |
--af-space-28 |
28px |
Gap between blocks. |
--af-space-32 |
32px |
Page gutter on desktop. |
--af-space-40 |
40px |
Large section gap. |
--af-space-48 |
48px |
Section padding (compact). |
--af-space-64 |
64px |
Section padding. |
--af-space-104 |
104px |
Marketing section padding. |
--af-space-160 |
160px |
Hero top spacing. |
--af-radius-none |
0px |
Tables, lanes, trace bars. |
--af-radius-control |
8px |
Buttons, inputs, chips, tags, segments, fleet tiles, the denied placard. Was 2px before theme-v12. |
--af-radius-card |
12px |
Cards, panels, agent rows and board cards. Was 4px before theme-v12. |
--af-radius-sheet |
18px |
The opened sheet: an agent's console, the top card of the decision deck, a dialog. |
--af-radius-round |
50% |
Status dots, heartbeat dots and avatars. |
--af-container-max |
1280px |
Max content width. |
--af-header-h |
56px |
App header height. |
--af-row-h |
32px |
Table and list row height. |
--af-row-h-compact |
28px |
Dense tables. |
--af-lane-h |
30px |
Session lane row height. |
--af-span-h |
28px |
Trace span row height. |
--af-rail-h |
2px |
Stage rail and capsule thickness. |
--af-icon-stroke |
1.5 |
Stroke width on the 20 px icon grid (scales with size). |
--af-icon-size |
16px |
Default icon size in UI; 20 px in nav and headers. |
--af-dur-fast |
120ms |
A press, a hover tint, a heartbeat tick. |
--af-dur |
200ms |
Color, background, border and opacity transitions. |
--af-dur-open |
300ms |
Something opening or closing in place: a row's console, a deck card leaving, a drawer. |
--af-ease |
cubic-bezier(.2,0,0,1) |
The default deceleration curve. |
--af-ease-open |
cubic-bezier(.32,.72,0,1) |
Open and close in place: decelerates, never overshoots. No springs. |
--af-shadow-1 |
0 1px 2px rgba(0,0,0,0.5) (Night) |
Resting lift under a lifted surface (with the edge-hi top highlight). Night barely shows it; Day needs it, having no third white. |
--af-shadow-2 |
0 20px 60px rgba(0,0,0,0.6) (Night) |
An opened sheet or the top card of a deck: the one deep shadow. Never on a resting card. |
--af-shadow-overlay |
0 12px 32px rgba(0,0,0,0.6) (Night) |
Menus, popovers and toasts. |