RECEIVED COPY — authored cross-fence (RTOpacks side, RTOpacks Claude), relayed by Tim 2026-07-05. Original of record lives in the RTOpacks repo. Per FENCE-PROTOCOL-01 §4 this copy is never edited and never promoted into home canon; local force comes from UCCA-DESIGN-FOUNDATION-01, which cites it as structural input. sha256 of the crossed body (everything below the rule): 41e0e9b9fa5d58796b3245a4c31dc9218b4857193079455591a57a3593bc7e4e.

RTOP-UCCA-STYLE-MANUAL-SKELETON-01¶

House of origin: RTOpacks (authored by RTOpacks Claude, relayed by Tim) Crossing under: FENCE-PROTOCOL-01 — authorship stays home; UCCA adapts, does not attribute back Status: Skeleton — a structure to fill, not a canon to obey. Values marked ⟨STARTER⟩ are working defaults UCCA may adopt as-is; values marked ⟨UCCA TO DECIDE⟩ are identity decisions only UCCA can make. Companion: RTOP-UMS-001-APPLICATION-NOTE-01 (the Mode System — read separately, different audience)

0. Why this document exists¶

A design foundation is not a mood board. It contains actual values. When a build instruction says "follow the foundation," this is the document that phrase refers to. Every visual decision either comes from this document or amends it — there is no third path. That single rule is what stops drift.

The current UCCA Admin surface is honest (nothing renders that a live read didn't return — keep that, it's the best thing about it) but visually undifferentiated: grey text on black, uniform borders, no accent doing wayfinding work. Honesty and drabness are not the same property. The fix is not decoration — it's a small number of deliberate decisions, held everywhere.

The governing test: no surface should look like it was generated by an AI tool or a terminal. If it does, something is wrong. The default AI palette is dark grey + teal/green; a foundation exists precisely to depart from defaults on purpose.

1. Colour¶

1.1 The three decisions that kill drabness¶

A background stack with a hue. Not pure black, not neutral grey. Pick a direction (blue-black, warm-black) and derive four levels from it. A hueless stack is what reads as "terminal."
One accent that earns meaning. The accent marks interactive and identity — buttons, active nav, focus rings. It is never used for status. One colour, everywhere, consistently, is worth more than a palette.
Status colours that mean one thing each. Green = healthy/live. Amber = waiting/caveat/attention. Red = failed/blocked. Never reassign; never use the accent for status or a status colour for identity.

1.2 Token architecture ⟨STARTER — adopt the structure verbatim⟩¶

Declare as CSS custom properties at :root, top of the global stylesheet, outside any framework @layer. Components consume tokens only — no raw hex in components, ever. This is the single highest-leverage rule in the document.

:root {
  /* Backgrounds — four levels, derived from one hue */
  --bg-base:      ⟨UCCA TO DECIDE⟩;  /* page. STARTER: #0b0d12 (blue-black, not #000) */
  --bg-elevated:  ⟨derive⟩;           /* sidebar, top bar. STARTER: #11141b */
  --bg-card:      ⟨derive⟩;           /* tiles, panels. STARTER: #151923 */
  --bg-hover:     rgba(255,255,255,0.04);

  /* Text — a "paper" scale, four levels */
  --text-primary:   #f2f3f5;   /* headings, metric values */
  --text-secondary: #9aa1ad;   /* body, descriptions */
  --text-muted:     #6b7280;   /* labels, captions, timestamps */
  --text-ghost:     rgba(255,255,255,0.18);

  /* Accent — identity + interactive. ONE colour. */
  --accent:        ⟨UCCA TO DECIDE⟩;  /* not teal-green (AI default), not RTOpacks teal #0e7490, not RTOpacks blue #2563eb */
  --accent-hover:  ⟨derive — darker⟩;
  --accent-dim:    ⟨accent at 12% alpha⟩;  /* active-nav backgrounds, tints */
  --accent-tint:   ⟨accent at 6% alpha⟩;   /* section header tints */

  /* Status — never reassigned, never decorative */
  --status-green:  #10b981;
  --status-amber:  #d97706;
  --status-red:    #dc2626;
  --status-green-bg: rgba(16,185,129,0.10);
  --status-amber-bg: rgba(217,119,6,0.10);
  --status-red-bg:   rgba(220,38,38,0.10);

  /* Borders — three weights */
  --border:        rgba(255,255,255,0.08);
  --border-mid:    rgba(255,255,255,0.14);
  --border-strong: rgba(255,255,255,0.22);
}

1.3 Reservations¶

Some colours are reserved — they carry one meaning and may never be used for anything else. UCCA's starter reservations:

Amber on data tiles = caveat/proxy/waiting (already in use for "not a live read" notes — good; formalise it).
Mode System badge colours (see the companion note) belong to UMS-001 and are cross-product: the same badge colour means the same thing on any UCCA-engine product. Do not restyle them locally.
Pick one colour reserved for emergency chrome (e.g. an impersonation or degraded-mode banner) and never use it elsewhere. RTOpacks reserves amber-500 #f59e0b for this.

2. Typography¶

2.1 Stack¶

One UI face, self-hosted, applied at body level (not per-component — that's how serif fallbacks leak in). ⟨STARTER: Inter variable⟩. One monospace face for structural text. ⟨STARTER: IBM Plex Mono⟩.

Monospace is structural, not decorative. It marks: section labels, stat-card labels, status badges, query provenance lines, timestamps, the mode switcher. The current UCCA surface already does this for query labels — extend the discipline, don't dilute it.

2.2 Type scale — six roles, nothing outside the table¶

Role	Size	Weight	Tracking	Usage
title	1.2rem	700	-0.01em	Page titles
subhead	0.95rem	600	0	Section headings, tile titles
label	0.65rem	600	0.08em	ALL-CAPS labels (mono)
body	0.875rem	400	0	Prose, descriptions
caption	0.8rem	400	0	Supporting notes
meta	0.75rem	400	0	Provenance, timestamps (mono; italic permitted here only)

Rules: rem units only, no hardcoded px. Minimum rendered size 0.75rem — nothing smaller, no exceptions. No two adjacent levels share both size and weight; if the size step is small the weight step must be decisive. Line height ≥1.5 for body.

3. Layout & components¶

Flat cards, no shadows on data surfaces: --bg-card, 1px --border, radius 8px, padding 20–24px. Depth on an ops console comes from the background stack, not drop shadows.
Stat cards: label (label role, mono, --text-muted) → value (28px/600, --text-primary) → sub-label (meta role). A metric that isn't live renders — (em dash) at 60% opacity — never a fake 0.
Section headers get an --accent-tint background bar. This is the cheapest way to put the accent to work as wayfinding.
Sidebar nav: active item = --accent-dim background + --accent text + weight 500. Status dots (6px) before items that have runtime status: green = live, amber = planned/waiting.
Tables: no max-width on content wrappers (ops consoles are used on wide monitors); white-space: nowrap on fixed-vocabulary columns and every status badge; wrap free-text columns only.

4. Motion¶

Minimal and meaningful. ⟨STARTER⟩: 150ms fade+4px slide for appearing elements; no looping animation except a status-bearing signal that communicates live state and stops when the state clears. Navigation never animates in loops. Honour prefers-reduced-motion by disabling all of it.

5. Voice¶

The surface speaks plainly and never overclaims. UCCA's existing lines ("Nothing is rendered here that a live read didn't return"; "not a live read, not a third-party attestation") are exactly right — canonise this register:

A read that fails says so at the tile, with the read timestamp.
Proxies are labelled proxies. Bundled/hand-maintained data is dated and labelled.
Empty ≠ error ≠ not-built: three different states, three different sentences.
No marketing adjectives on operator surfaces.

6. Hard rules (the shortlist)¶

Tokens only — no raw hex in components.
One accent; status colours never reassigned; reservations honoured.
Type scale is closed — six roles, rem only, 0.75rem floor.
Monospace = structural.
Dead metrics render —, never fake zeros.
Every amendment to this document gets a changelog line. The document is the single source of truth; when in doubt it wins over prior instructions, personal preference, and AI defaults.

Changelog¶

Date	Version	Change
2026-07-05	0.1	Skeleton crossed from RTOpacks. UCCA to fill ⟨UCCA TO DECIDE⟩ slots and take ownership.