Gate: APPROVED by Ben (Creative Director), 2026-06-13, with one required fix applied
(display face Space Grotesk → IBM Plex Sans, to avoid overlap with ben-portfolio). Owner:
brand agent. Upstream: vision/vision.md. Downstream: SPEC. Executable (P3): if the
implementation's look/feel differs from this brand, the implementation is wrong.
Inherits memory:brand-tokens-as-code,brand-isolation,quiet-not-flat,
aa-on-brand-color,aa-proof-kinetics.
A warm signal in a cold machine. A graphite instrument panel, near-silent, until the one
thing that is alive glows amber. Calm because it is monochrome — the amber is meaning.
This serves the Vision's calm command: density without flooding, one drama per scene.
Monochrome graphite + one living accent. No pure black or white (brand-isolation). Amber
is rationed to ≤1 use per viewport — it always means signal / alive / needs you.
Running/healthy is shown by amber presence + motion, never green. Idle is just graphite.
Red ember surfaces only on genuine failure — so an alert is truly rare and truly loud
(Vision law: "nothing on fire silently").
/* === Orion Studio tokens — tokens-as-code (single source of truth) === */
/* ground & surfaces — cold graphite, layered not flat (quiet-not-flat) */
--ground: #0A0B0D; /* near-black panel, never #000 */
--surface-1: #121419;
--surface-2: #181B21;
--surface-3: #1F232B; /* raised cards */
--hairline: #2A2F38; /* 1px instrument rules */
/* text — never pure white */
--ink: #E6E8EC; /* primary — AA ~13:1 on --ground */
--ink-dim: #9AA0AA; /* labels — AA ~6.5:1 on --ground */
--ink-faint: #5E6470; /* tertiary — large / non-body text only */
/* THE signal — phosphor amber (the only accent) */
--amber: #FFB000; /* live / signal — AA ~9:1 on --ground */
--amber-glow: #FFB00033; /* breathe halo, low alpha */
/* rare states — surface ONLY when true */
--ember: #E5484D; /* genuine failure, used sparingly */
--idle: #5E6470; /* neutral = the graphite grays themselves */
AA note (aa-on-brand-color): body text uses --ink/--ink-dim (both ≥4.5:1). --amber
is used for signals, numerals, and large/non-body marks (≥9:1 on ground); amber is never set as
small body text on an amber-tinted surface. --ink-faint is large/non-essential only.
readout. All numbers align in columns.
instrument-grade, and free of the Inter/Geist dev-tool cliché.
`sidebar (nav: Orion ⟂ PRISM) · center (live instruments) · workspace (trace detail / VPS
terminal). Dense but ruled: hairline dividers (--hairline`), tabular alignment, and
generous vertical rhythm so density never becomes noise. Resting state is quiet; only the
live-hero element earns emphasis (one drama per scene).
No springs, no overshoot. Three motions only:
--amber-glow.:focus-visible outline on the focused control (accessible, standard;supersedes the originally-sketched "sliding rule" — reconciled at REVIEW for a11y + P3 honesty).
All gated on prefers-reduced-motion (aa-proof-kinetics): reduced-motion users get the same
states, statically. The breathe is the one signature act (quiet-not-flat) — the cockpit
breathes where it is alive, and only the single top-most live element breathes (≤1 moving
accent per viewport).
Instrument labels, never marketing. UPPERCASE tracked micro-labels (ORION · 3 LIVE), sentence
case for content, numbers leading. Gates speak plainly: GATE — needs you. Failures:
klaus.repair failed · step 4/6. The UI states what is (it reads Orion's truth) — it never
persuades.
Hairline 1.5px geometric glyphs; no filled or cartoon icons. Status as minimal marks:
● live · ▸ step · ◇ idle · ▲ alert. Texture against flatness (quiet-not-flat): a
near-invisible graphite gradient field + ~2% grain/scanline — atmosphere you feel, not see.
Orion Studio. Wordmark set in IBM Plex Sans; the **"O" carries a single amber phosphor
dot** — the signal, at rest. The whole brand in one glyph: a cold ring with one warm point of
light.
brand-isolation) — corrected & fact-checkedFonts verified against each product's shipped brand.md (2026-06-13).
| Dimension | ben-portfolio | foodflow | orion-studio |
|---|---|---|---|
| Hue | dark indigo / blue | warm teal + orange | graphite + amber (opposite both on the wheel) |
| Type | Space Grotesk display + Inter | Rubik (variable, he+en) | IBM Plex Sans + IBM Plex Mono |
| Motion | cinematic scroll-film | gentle | breathe / tick (instrument) |
| Genre | film / portfolio | friendly editorial | cold tool / instrument |
Zero shared aesthetic; zero font overlap. Amber (#FFB000) chosen specifically to be
unmistakable against portfolio-blue and foodflow-teal. Display face moved off Space Grotesk
(portfolio's display) per Ben's gate fix — IBM Plex Sans pairs with Plex Mono as one coherent
instrument family.
#FFB000 amber, all dimensions as proposed. Grotesk is ben-portfolio's display font; would violate brand-isolation).
serif"; portfolio's shipped display is Space Grotesk. Table now fact-checked.
SPEC inherits these as hard constraints (P3), and decides the technical (non-gated):
panels/components, the read-only data contract over Orion Postgres + Directus, the ttyd terminal
embed, security layers, and measurable acceptance criteria — all consistent with the Vision's
v1 scope (Observe tier-1 + Terminal) and these brand tokens.