/catalog · the entire design surface · 2026

The whole SageOx surface area — too much to hand-tune.

The answer to that scale is the harness, not more designers. Each catalog here is auto-exported from a live registry; the interactive copy lives on the surface itself — /internal/design-catalog for web, <cli> dev catalog for terminal, framebuffer screenshots via the test harness for embedded, the rendered template for email. Different surfaces, same contract: an agent in a ralph loop can reach the live components without out-of-band knowledge. Required for every surface — DESIGN.md §11 Rule 7.

Surfaces

7 live · 1 planned
Live

Console

apps/web · authenticated product

Every primitive in apps/web/src/components/ui/ + packages/ui/. The data-dense, logged-in product surface — buttons, forms, data display, status, overlays, layout.

68 components11 categories
Open catalog →
Live

MCP

ui:// cards · chatgpt · claude · vs code · goose

SageOx rendered inside other AI tools — host-painted ui:// App cards on the shared <MCPCardShell> pipeline, plus the console-side connect hub. Decision Ledger, Recording Insights, the Two-Rail Session Control Surface, the PiP pill. v0 — seeded from mockups; sageox-mono registry export replaces it.

6 cards6 shellsv0
Open catalog →
Live

Visual Cast

packages/cast-web · TV + join

Live meeting components — participant strips, decision pulse cards, room compositions, presence rows. The /cast destination experience and /join mobile flow.

25 components7 surfaces2 themes
Open catalog →
Live

Mobile app

React Native · Expo · sageox://

Native iOS + Android companion to the console — captured directly from sageox-app 1.0.0 via Playwright + expo export --platform web. 18 of 19 screen snapshots inlined; tokens + screen index rendered via react-dom/server. Deep-link scheme sageox://.

18 screensRN + Expo
Open catalog →
Live

Ox Dot

device · embedded · 360x360 round LCD

Living snapshot of the Ox Dot speaker UI — every shipping screen, every visual state variant, plus brand palette, recording-surface tints, and the safe-zone gesture model. Sourced from the April design pass (docs/screens/v2/); device-captured refreshes overlay automatically when make catalog-capture runs against a flashed dev board.

58 screens6 tokensLVGL
Open catalog →
Live

ox CLI

terminal · TUI

Command-line and TUI primitives — prompt, select, spinner, sparkline, timeline — plus full screens (login, doctor, dashboard, config). Dark and light freeze SVG snapshots inlined.

23 componentsfreeze SVG
Open catalog →
Planned

Marketing site

sageox.ai · public

The public-facing site at sageox.ai — hero sections, pricing tables, feature blocks, testimonials, blog templates, CTAs, footer. Different audience from the console; own catalog so marketing-only patterns don't leak into product code.

~40 sectionsmarketing
Live

Email

transactional · lifecycle · digest

Welcome, magic link, recording recaps, security receipts, team access, weekly recommendations, and the engagement nudges — every transactional and lifecycle template. Email is its own beast — table-based layouts, fragmented client support, restricted CSS, per-client dark-mode handling, inline styles required. Catalog embeds each one as the real rendered HTML via @react-email/render.

23 templates13 components
Open catalog →
how it works

One contract per surface.

Every surface ships a single publish-design-catalog.sh in its source repo. It reads from one registry file (no parallel hand-curated docs), runs a build to produce a self-contained index.html, and pushes it into catalog/<surface>/ here.

The same catalog is also served live on the running surface at a stable internal route — /internal/design-catalog for web, <cli> dev catalog for terminal, the LVGL headless render for embedded. That's the route an agent hits during a ralph loop while iterating on a component; the snapshot here is what humans and partners look at without auth.

Full contract details: catalog/README.md. The principle is codified in DESIGN.md §11 Rule 7.