System · Design OS

FixBroken OS.

The global visual and UX operating layer for fixbroken.ai and every tenant subsite. Terminal discipline. Command-center clarity. Black canvas, controlled neon.

v0.1 tokens · components · effects active
§ 01 · Principles

The six rules.

01 · Signal over spectacle

Every visual element must help the user understand state, hierarchy, command, risk, or next action. If it doesn't carry signal, cut it.

02 · Terminal clarity

Monospace, command-line structure, compact labels, data panels, prompts, scan rows, subtle system messages.

03 · MacOS restraint

Spacing, alignment, radius, shadows, typography feel deliberate. No chaotic hacker clutter. No gamer chrome.

04 · MCP Cone foundation

Central command metaphors — cone, beam, vertical stack, signal tower, grid gate, control node, command aperture.

05 · Black canvas, controlled neon

Near-black base. Neon indicates signal, action, state, emphasis, intelligence. Never flood the UI with it.

06 · Human-readable intelligence

Not just dev tooling. Must stay approachable to executives, founders, product people, operators, and customers.

§ 02 · Colors

Tokens.

Surfaces
--fb-black#05070a
--fb-ink#0a0e14
--fb-panel#0f151c
--fb-surface#141b24
--fb-rail#1a2330
--fb-hairline#2a3442
Signal
--fb-signal#00d4ff
--fb-signal-dim#0099bb
--fb-signal-bright#6de8ff
Pink · flagship signature (fixbroken.ai only)
--fb-pink#ff3ec9
--fb-pink-bright#ff6bd8
--fb-pink-dim#c4309a

Pink is the operator's mark. Use it on fixbroken.ai for hero accents, signature CTAs, and key human moments. Tenant sites (VUMO, future clients) do NOT use pink — it's what makes the flagship feel different.

Matrix · Coral · State
--fb-matrix#00ff88
--fb-coral#ff7a5a
--fb-amber#ffb64a
--fb-red#ff4a5a
Text
--fb-text-loud#ffffff
--fb-text#e4eaf2
--fb-text-dim#8a97a8
--fb-text-mute#556070
§ 03 · Typography

Two families. No compromise.

Inter · human copy

Fix broken AI.

Lede copy. This is what reads to executives and humans. Inter, sans-serif, line-height 1.7.

JetBrains Mono · system copy
system labels use monospace
output and trace rows use monospace too, slightly dimmer
.fb-label · kickers · chips · statuses
§ 04 · Spacing

4px base. No magic numbers.

--fb-s-14px
--fb-s-28px
--fb-s-312px
--fb-s-416px
--fb-s-624px
--fb-s-832px
--fb-s-1040px
--fb-s-1664px · default section
--fb-s-2496px · hero
§ 05 · Layout

Shells, containers, sections.

Every page is wrapped in a .fb-shell. Content inside .fb-container (max 1200px) or .fb-container--narrow (max 720px). Vertical rhythm via .fb-section.

<div class="fb-shell"> <nav class="fb-nav">...</nav> <main> <section class="fb-section"> <div class="fb-container">...</div> </section> </main> <footer class="fb-footer">...</footer> </div>
§ 06 · Panels

Content lives in panels.

.fb-panel · default

The default container. Subtle border, slight lift shadow.

.fb-panel--lifted

Lifted variant — more prominent, for CTAs or featured content.

.fb-panel--signal

Signal-tinted border for emphasis.

.fb-panel--matrix

Matrix-tinted border — use for "alive" or "runtime" content.

§ 07 · Terminal

The .fb-terminal block.

demo / system / console
npm run signal
booting fixbroken-os...
signal · online
ready
§ 08 · Commands (CTA)

CTAs feel like commands.

Open the console Run the signal Send the signal Enter the room Trace the pattern Soft human CTA Read more
<a class="fb-cta fb-cta--solid">Open the console</a> <a class="fb-cta">Run the signal</a> <a class="fb-cta fb-cta--ghost">Read more</a>
§ 09 · Chips · Status

State, labels, statuses.

default signal pink · flagship matrix · alive coral · human amber · warn
system online ready pending failure
§ 10 · Signal cards

Clickable feature / service cards.

Demo · 01

First operation.

Body copy explains the operation in one to two short sentences. No marketing fluff.

Enter
Demo · 02

Second operation.

Hover to see the sweep effect + lift. Entire card is the link surface.

Enter
§ 11 · Forms

Inputs feel like terminal fields.

§ 12 · Effects

MCP Cone, beam, cursor, grid.

Background grid + scanlines are applied at the shell level. The MCP Cone is used behind hero sections. Cursor is a text-inline element.

MCP · cone

Signal in. Clarity out.

<div class="fb-mcp-cone" style="--cone-h: 400px;"></div> <span class="fb-cursor"></span> <span class="fb-beam" style="--beam-h: 64px;"></span>
§ 13 · Voice

How the system talks.

USE
  • Run the signal
  • Open the console
  • Trace the pattern
  • Send the signal
  • Enter the room
  • See what broke
AVOID
  • Get started today
  • Learn more
  • Supercharge your workflow
  • Unlock AI-powered insights
  • Revolutionize your [anything]
  • Next-gen / cutting-edge
§ 14 · Override rules

When a project diverges.

FixBroken OS is default for every page in the stack. A project may override when it has a distinct brand (VUMO, future clients). Overrides follow these rules:

  1. Load order. Project stylesheet loads AFTER /design/fixbroken-os.css. Never instead of.
  2. Token overrides. Override CSS custom properties in :root or inside a project wrapper class like .vumo-scope.
  3. Component overrides. Target .fb-* classes inside the project wrapper. Never redefine .fb-* globally.
  4. New components. Project-specific components use a project prefix (e.g. .vumo-walkaround). Never add a new .fb-* class in a project.
  5. VUMO exception. VUMO is allowed a more approachable / human interface layer. It still inherits typography and spacing, but may soften the color palette.
<!-- On vumo.fixbroken.ai --> <link rel="stylesheet" href="https://fixbroken.ai/design/fixbroken-os.css"> <link rel="stylesheet" href="/vumo-overrides.css"> <!-- loads AFTER -->