Navy + gold

The apps in this portfolio use three distinct visual registers. The contrast is deliberate — it's an error-prevention affordance, not aesthetics.

The three registers

| Register | Audience | Examples | | ---------- | ---------------------- | --------------------------------- | | Dark | Individual / IDE | Agicore Foundry, Agicore Studio | | Light | Team / social | BabyAI Playground | | Navy + gold | Business / ERP | Accelerando (this app) |

The rule: when you open one of these apps, you should know at a peripheral glance — before reading anything — what context you're in. The visual register does that work pre-attentively, so the operator isn't trusting themselves to remember.

The Playground is a team chat product. The cost of pasting a private prompt there because you thought it was a notebook is "could be embarrassing." The IDE is for working at depth alone. The cost of confusing it with a public surface is similar. The ERP touches accounts receivable. The cost of clicking the wrong button there is money.

The third register exists because the third cost is different in kind.

Why yellow on blue

Other names for the same palette: navy + gold, IBM blue + warm amber, Tron, vintage finance.

Why this combination specifically:

• Deep blue reads as serious. Banking, insurance, and enterprise software have used it for decades. The semiotics are pre-loaded.
• Warm gold reads as money. Not yellow-as-caution, gold-as-value. The cool blue base lets the gold read as precious rather than alarming.
• The contrast is high without being harsh. Off-white text on navy (not pure white) is the comfortable reading layer. Gold is reserved for emphasis — headings, active states, primary actions, key numbers.

It's not "yellow on blue" the way warning labels are. It's "off-white prose on navy, gold for the parts you should look at first."

The palette

--bg:           #0a1929;   /* deep navy base */
--bg-elev:      #102a43;   /* elevated cards, header, nav */
--bg-sunken:    #061220;   /* table headers, input fields */
--fg:           #f1f5f9;   /* off-white primary text */
--fg-dim:       #94a3b8;   /* secondary text */
--fg-dimmer:    #64748b;   /* tertiary, captions */
--border:       #1e3a5f;   /* subtle on navy */
--border-strong:#2d4f7a;
--accent:       #fbbf24;   /* warm gold */
--accent-bg:    #fbbf241a; /* gold tint behind active nav */
--ok:           #34d399;   /* mint, reads well on navy */
--bad:          #f87171;   /* soft red */

Gold is used for: the punctuation in the brand mark (accelerando.), active nav state, primary buttons, the key numeric value in each dashboard card, pill highlights for "open" / "high priority" / "synced" states. It's a finite resource — overusing it makes the gold stop reading as emphasis.

Off-white text on navy is the workhorse reading layer. Pure white over navy is harsher than you'd think; #f1f5f9 (Tailwind's slate-100) is the comfortable point.

What this enables across the portfolio

Operators who have all three apps open in their browser at once should be able to glance at the tab bar and know which is which without reading the title. The favicon helps, but the dominant color of the first paint helps more.

When a fourth register is needed — NovaSyn (spatial desktop), Bender's Killer App (creator OS), Reality.AI (deadpan narrative) — it gets its own palette. The contrast is doing work; ambiguous overlap defeats the purpose.

The implementation

The whole UI is one HTML string in src/ui.ts. The CSS variables live in :root. The wiki you're reading reuses the same palette via src/wiki/render.ts. Forking a new business app means copying the palette block.

There's no Tailwind, no design tokens system, no Storybook. The system is small enough that a single CSS variable block is the source of truth, and small enough that consistency is a code review concern rather than a tooling one.