34.0522, -118.2437FINAL APPROACH
MISSION/32BF04.05.2001
LOS ANGELES, CALIFORNIA
16:9ORIGINAL
INTERNALDESIGN SYSTEM / REV 03NOT INDEXED
Field manual
Every token, primitive and state in the product, rendered once so the team can audit it in one pass. The values on this page are measurements from reference/TOKENS.md, not preferences. If a screen needs a visual idea that is not here, it is added here first and consumed second.
- PRIMITIVES
- 24
- TYPE ROLES
- 06
- CONTAINER
- 1440 PX
- GUTTER
- 32 PX
- BAND VALUES
- 0 / 20 / 32 / 48 / 56
- ACCENT COLOURS
- 01
- CORNER RADIUS
- 2 PX
- SPINNERS
- NONE
01.
12 tokensPalette
Near-black ground, paper ink, one accent. The satellite image supplies all other colour, which is why the interface holds none. Signal orange marks status and live elements only — measured discipline is one accent, used once on a page. A signal-coloured element that is not reporting a state is a bug.
void#08090BPage ground. Every screen starts here.
deck#0D0F13Raised panel. Frames, cards, rails.
deck-2#14171CInset well and hover fill.
hairline#23262CThe 1px rule. The only divider.
hairline-soft#171A1FRule inside a panel, one step quieter.
hairline-strong#363B44Active or focused frame.
paper#EEEDE8Primary text and the credit rule.
paper-dim#9AA0A6Body copy, secondary labels.
paper-faint#5F656CMetadata, disabled, rule text.
signal#FF4D1CStatus and live only. Never decoration.
signal-dim#8C2C11Signal held back — pressed, resolved.
signal-faint#3A1409Signal wash behind an alert rule.
Use as Tailwind utilities — bg-void / border-hairline / text-paper-dim / text-signal. Never hard-code a hex outside app/globals.css.
02.
Inter / IBM Plex MonoType roles
Six roles and no seventh. Display and body are Inter; labels and data are IBM Plex Mono, uppercase and letterspaced. Note the two findings that are easy to get wrong: display is set at weight 400, not bold, and body line-height is 1.2, not 1.6. The scale compresses from both ends on a phone — display shrinks while label, body and action grow.
text-display40 PX @1440 → 32 PX @390 · W400 · −0.02EM · LH 1.25
A photograph of your home, taken from orbit.
text-heading24 PX @1440 → 20 PX @390 · W400 · −0.02EM · LH 1.25
The capture window opens for six days.
text-body15 PX @1440 → 16 PX @390 · LH 1.2 · SHORT BLOCKS ONLY
Give an address. A satellite is tasked. The frame is composed with its telemetry, printed in your region and shipped as a finished object.
text-prose15 PX · LH 1.55 · LONG-FORM READING ONLY — /LEGAL
A mission is a request to photograph a single address from orbit and to deliver that photograph as a finished print. The digital file is a by-product of producing it.
text-label12 PX @1440 → 13 PX @390 · W500 · +0.04EM · UPPERCASE
Capture window open
text-action14 PX @1440 → 15 PX @390 · LH 1.05 · SENTENCE CASE
Start mission
text-tele11 PX · +0.14EM · TELEMETRY LAYER
Mission 32BF / capture window open
text-tele-s10 PX · +0.16EM
34.0522, -118.2437 · 18:42 11.02.2026
text-tele-xs9 PX · +0.20EM · CROP RAIL AND CREDIT ONLY
Shot from Space / print credit
Shell UI is sentence case. Uppercase belongs to the label eyebrow and the monospace telemetry layer — nowhere else, and never to a sentence. Readouts carry data-telemetry for tabular figures.
03.
1440 / 32 / 12 colContainer and grid
One container, three widths, one grid. Wide carries every top-level band; narrow carries prose and forms; flush is for media that must reach the viewport edge. The 12-column grid holds at every width — the column count never drops to four on a phone, spans change instead, which is what keeps the layout reading as one system rather than three breakpoint designs.
CONTAINER SIZE="WIDE" — MAX 1440, GUTTER 32
CONTAINER SIZE="NARROW" — MAX 760, GUTTER 32
CONTAINER SIZE="FLUSH" — NO MAX, NO GUTTER
GRID12 — 12 COLUMNS, 20 PX COLUMN GAP, 18 PX ROW GAP
01
02
03
04
05
06
07
08
09
10
11
12
COL-SPAN-12 LG:COL-SPAN-7
LG:COL-SPAN-4 LG:COL-START-9
No screen sets its own max-width and no screen declares its own gutter. Both come from Container.
04.
0 / 20 / 32 / 48 / 56Band rhythm
The single most important measurement in the system. Section padding on the reference page is 0, 20, 32, 48 or 56 — never one repeated value. Sections are sized by their media; the rhythm comes from padded bands alternating with full-bleed plates that butt directly against their neighbours. A uniform py-12 on every section is the fastest way to make a page read as a template.
flushFull-bleed media. Butts against its neighbour.0 px
tightA band following a full-bleed one.20 px
snugClosing padding under a dense band.32 px
openThe standard padded content band.48 px
footerThe footer, and nothing else.56 px
Padded band — top and bottom at 48.
FLUSH PLATE — 0 / 0
Following band — 20 above, 32 below.
SPACER — BASE 32 / LG 48 / XXL 80—112, FOR GAPS INSIDE A BAND
Band takes top and bottom separately and they are rarely the same value. There is no uniform section spacer token and none is to be added.
05.
The heroImage plate
The most important component on the site. A hairline frame, registration marks, and one telemetry rail beneath the picture. The rail holds at most six values: coordinates, timestamp and up to four file tags. Extra tags are dropped, never wrapped into a second band.
34.0522, -118.243704.05.2001
16:9JPEGORIGINALDECLASSIFIED
EXHIBIT / A
SHOT FROM SPACE31.07.198652.5200, 13.4050
52.5200, 13.405031.07.1986
4:3PRINT PROOF
Props — src alt width height lat lon capturedAt tags caption aspect priority sizes credit label creditAlign className.
06.
Frame / crop / ruleSurfaces and marks
A dossier has no drop shadows and no rounded corners. Depth is a 1px hairline and a darker well. Corner marks are registration marks — they say the thing is a frame, not that it is clickable.
FRAMEDEFAULT
The base surface. A label bar appears only when the frame is holding a named block.
FRAMEACTIVE
Active tone plus registration marks. Used for the block a screen is currently acting on.
FRAMEALERT
Alert tone. Reserved for a block reporting a failed or blocked step.
CROPMARKS TONE=PAPER
CROPMARKS TONE=SIGNAL
RULE — DEFAULT
RULE — SOFT
07.
Row / grid / tagsData readouts
Label left, dotted lead, value right. The lead shrinks before the value does, so a long value wraps under its own label instead of forcing a horizontal scroll at 390px.
DATAROW — THREE TONES
SENSORLANDSAT + SRTM
GROUND SAMPLE30 M / PX
STATUSCAPTURE WINDOW OPEN
KEYVALUEGRID — COLUMNS=2
- MISSION
- 32BF
- REGION
- US / RENO, NV
- COORDINATES
- 34.0522° N / 118.2437° W
- CLOUD
- 2%
- OFF-NADIR
- 4.1°
- ALTITUDE
- 705 KM
MISSION/32BFMISSION/74KLMISSION/18QD
16:9JPEGORIGINALDECLASSIFIED
BRIGHTDIMFAINTSIGNALSIZE XS
08.
One diagram per viewportStatus and instruments
Chips report a stage; the orbit diagram reports a pass. The diagram is instrumentation — bearing ring, graticule, ground track, pass marker — and the rule is one per viewport. Two of them on a screen is the fastest way to make the page look like a toy.
FILEDCAPTURE WINDOW OPENPRINT QUEUEDPASS MISSED
ORBIT: //ELIPSE 33°INC: SSO 98.2°ALT: 705 KM
The tilt is read from the track string, so the drawing always agrees with its label. Strokes are non-scaling: hairlines stay 1px whether the diagram is drawn at 96px or 220px. Pass animated only when a pass is genuinely live.
Props — track inclination altitudeKm size phase animated.
09.
Loading / empty / error / disabledStates
There is no spinner in this product. A pending thing is a plate being scanned, an unavailable thing is hatched like a struck-out field, and a failure states what failed and what happens next, in mission voice.
SKELETON — ASPECT
ACQUIRING
ACQUIRING
SKELETON — LINES
RESOLVING
RESOLVING
SCANSWEEP — REPEATING
ACQUIRING FRAME
NO RECORD
NO MISSIONS ON FILE
This account has not filed a target yet. Start a mission and the record will appear here as soon as the address is resolved.
CAPTURE FAILED
Cloud cover exceeded the threshold on three consecutive passes. The window has been reopened at no cost. No action is required.
FORMAT F70 — UNAVAILABLE IN THIS REGION
10.
Three variantsActions
One control, everywhere: 3px radius, a self-coloured 1px border, 44/44/52px tall on 20/32/40px of inline padding, and a monospace uppercase label at 12px on positive tracking. Primary is ink on ground and recedes one step on hover; secondary is a 45% hairline; ghost is text. Every size clears a 44px tap target — small means narrower, never shorter. <Button>, <ActionButton> and <CommsButton> are three APIs over this one anatomy.
Loading keeps the label at full strength, dims the words and runs a sweep. Disabled withdraws the whole face to 35% rather than rebuilding it, so a disabled primary can never be mistaken for an enabled secondary. Neither uses a spinner.
11.
Gallery unitDossier card
A mission, filed: image plate on top, telemetry block beneath. The whole card is one link, so the tap target is the card, not the code.
12.
The spineNumbered procedure
Numbered sections are the spine of the site. Index in the accent, title in monospace, body in sans, hairline between every step.
TARGET FILED
An address is resolved to decimal coordinates and a capture area. The customer sees the area, not a street pin.
SATELLITE TASKED
The coordinates go to the imaging provider. A capture window opens; passes are attempted until the frame clears cloud.
FRAME COMPOSED
The capture is graded and composed with its telemetry: coordinates, timestamp, orbit, mission code, credit.
PRINTED LOCALLY
US orders print in the US, EU orders in the EU. The print ships from the facility nearest the address on file.
13.
Never a logoThe credit
The name is a print credit on a film frame — a small bordered box paired with telemetry. It is set in type in exactly one component, which caps itself at md and refuses anything larger. It is never centred as a hero, never coloured with the accent, never enlarged.
SIZE XS — FRAME CORNER
SHOT FROM SPACE04.05.200134.0522, -118.2437
SIZE SM — DEFAULT
SHOT FROM SPACE04.05.200134.0522, -118.2437
SIZE MD — CEILING
SHOT FROM SPACE04.05.2001
There is no larger size. A caller passing one gets sm. If a screen needs a big line of type, it needs a headline.
14.
0.035 opacityGrain
One fixed layer over the document, mounted once in the root layout. It sits below the header so it never films over navigation, it is pointer-events none, and it drops further on 2x displays. At this strength it reads as emulsion on the page, not as noise on the photograph. If you can see it on an image, it is too strong.
GrainOverlay is mounted in app/layout.tsx. Never mount a second one — two layers double the opacity.