System · Auto-Generated Reference

FixBroken OS.

Machine-generated from fixbroken-os.css and brand.md. 95 tokens. 29 components. 115 classes. Always current.

v0.1.0 auto-generated 2026-04-26
Tokens

95 design tokens.

Color Base Surfaces
--fb-black#05070abody background
--fb-ink#0a0e14default surface
--fb-panel#0f151clifted panel
--fb-surface#141b24more lifted
--fb-rail#1a2330rails, nav, sub-panels
--fb-hairline#2a3442borders, dividers
--fb-hairline-hot#3d4a5cemphasized border
Color Signal
--fb-signal#00d4ffelectric cyan - primary signal
--fb-signal-dim#0099bbdimmed variant for subtle emphasis
--fb-signal-bright#6de8ffhighlight / active state
--fb-signal-glowrgba(0, 212, 255, 0.35)
--fb-signal-washrgba(0, 212, 255, 0.06)
Color Matrix
--fb-matrix#00ff88Matrix green
--fb-matrix-dim#00b868
--fb-matrix-glowrgba(0, 255, 136, 0.30)
--fb-matrix-washrgba(0, 255, 136, 0.05)
Color Coral
--fb-coral#ff7a5a
--fb-coral-dim#e56b4f
--fb-coral-glowrgba(255, 122, 90, 0.30)
Color Pink
--fb-pink#ff3ec9
--fb-pink-bright#ff6bd8
--fb-pink-dim#c4309a
--fb-pink-glowrgba(255, 62, 201, 0.35)
--fb-pink-washrgba(255, 62, 201, 0.06)
Color State
--fb-amber#ffb64awarning
--fb-red#ff4a5aerror
--fb-red-dim#c4364a
Color Text
--fb-text#e4eaf2primary - soft white with blue hint
--fb-text-loud#ffffffextreme emphasis
--fb-text-dim#8a97a8secondary copy
--fb-text-mute#556070tertiary / labels
--fb-text-ghost#354050placeholder / disabled
Typography
--fb-font-mono"JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace
--fb-font-sans"Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif
--fb-fs-1010px
--fb-fs-1111px
--fb-fs-1212px
--fb-fs-1313px
--fb-fs-1414px
--fb-fs-1515px
--fb-fs-1616px
--fb-fs-1818px
--fb-fs-2020px
--fb-fs-2424px
--fb-fs-3232px
--fb-fs-4040px
--fb-fs-48clamp(36px, 5vw, 48px)
--fb-fs-64clamp(44px, 7vw, 64px)
--fb-fs-88clamp(52px, 9vw, 88px)
--fb-lh-tight1.1
--fb-lh-snug1.25
--fb-lh-normal1.5
--fb-lh-relaxed1.7
--fb-tracking-tight-0.02em
--fb-tracking-normal0
--fb-tracking-wide0.08em
--fb-tracking-extra0.16em
Spacing Scale
--fb-s-14px
--fb-s-28px
--fb-s-312px
--fb-s-416px
--fb-s-520px
--fb-s-624px
--fb-s-832px
--fb-s-1040px
--fb-s-1248px
--fb-s-1664px
--fb-s-2080px
--fb-s-2496px
--fb-s-32128px
Radius
--fb-r-00px
--fb-r-12px
--fb-r-24px
--fb-r-36px
--fb-r-410px
Shadows Glows
--fb-glow-signal0 0 24px var(--fb-signal-glow)
--fb-glow-matrix0 0 24px var(--fb-matrix-glow)
--fb-glow-coral0 0 24px var(--fb-coral-glow)
--fb-glow-soft0 0 64px rgba(0, 212, 255, 0.08)
--fb-lift0 1px 0 rgba(255,255,255,0.03) inset, 0 1px 2px rgba(0,0,0,0.4)
--fb-lift-strong0 1px 0 rgba(255,255,255,0.04) inset, 0 8px 24px rgba(0,0,0,0.6)
Motion
--fb-t-fast120ms cubic-bezier(.2,.6,.2,1)
--fb-t-normal220ms cubic-bezier(.2,.6,.2,1)
--fb-t-slow380ms cubic-bezier(.2,.6,.2,1)
Z Index Layers
--fb-z-grid0
--fb-z-base1
--fb-z-panel10
--fb-z-nav100
--fb-z-overlay500
--fb-z-modal1000
--fb-z-toast2000
Layout
--fb-max-w1200px
--fb-max-w-narrow720px
--fb-nav-h56px
--fb-pxclamp(20px, 4vw, 40px)
Components

29 documented components.

.fb-shell

the outermost wrapper for a full page. Think of it as the chassis of the console. Everything sits inside a shell.

.fb-container

centered content column with consistent max width

.fb-section

vertical rhythm block

.fb-stack

vertical spacing between children

.fb-row

horizontal layout

.fb-grid

auto-fit grid, great for command dashboards

.fb-display

oversized hero title

.fb-lede

hero subtitle

.fb-mono

force monospace

.fb-label

small uppercase tracking label

.fb-kicker

tag line above a title

.fb-nav

top command bar

.fb-panel

the core container for content. Dark, bordered, hair of glow.

.fb-terminal

stylized terminal window

.fb-command

a single command line (prompt + text + cursor)

.fb-cta

command-style CTA. Feels like a command, not a marketing button.

.fb-chip

small pill / badge. For statuses, categories, keywords.

.fb-status

live status row with colored dot

.fb-signal-card

a card for a service, feature, or project. Grid-ready.

.fb-context-rail

side rail with system context (stats, keys, status)

.fb-form

terminal-style form controls

.fb-footer

closing system bar

.fb-divider

horizontal signal line

.fb-grid-bg

subtle background grid (only on shells, not panels)

.fb-scanline

horizontal scan line overlay (subtle)

.fb-mcp-cone

the foundational metaphor. Beam from the top. Used as a hero decoration. Inherit width from parent; height from --cone-h.

.fb-beam

a vertical signal beam (small decorative element)

.fb-cursor

blinking terminal cursor

.fb-glow

apply a subtle glow to any element

All Classes

115 .fb-* classes.

.fb-beam .fb-chip .fb-chip--amber .fb-chip--coral .fb-chip--matrix .fb-chip--pink .fb-chip--signal .fb-command .fb-command--arrow .fb-command--matrix .fb-command--none .fb-container .fb-container--narrow .fb-context-rail .fb-context-rail__divider .fb-context-rail__key .fb-context-rail__row .fb-context-rail__val .fb-cta .fb-cta--coral .fb-cta--ghost .fb-cta--matrix .fb-cta--pink .fb-cta--pink-solid .fb-cta--solid .fb-cursor .fb-cursor--pink .fb-display .fb-display--pink .fb-divider .fb-divider--signal .fb-field .fb-field__label .fb-footer .fb-footer__row .fb-form .fb-glow .fb-glow--coral .fb-glow--matrix .fb-glow--pink .fb-grid .fb-grid--2 .fb-grid--tight .fb-grid-bg .fb-input .fb-kicker .fb-kicker--pink .fb-label .fb-label--amber .fb-label--coral .fb-label--matrix .fb-label--pink .fb-label--signal .fb-lede .fb-mcp-cone .fb-mcp-cone--coral .fb-mcp-cone--matrix .fb-mcp-cone--pink .fb-mono .fb-mono-label .fb-nav .fb-nav__brand .fb-nav__inner .fb-nav__link .fb-nav__link--active .fb-nav__links .fb-nav__links--fade .fb-output .fb-panel .fb-panel--coral .fb-panel--lifted .fb-panel--loose .fb-panel--matrix .fb-panel--pink .fb-panel--signal .fb-panel--tight .fb-rise .fb-rise--d1 .fb-rise--d2 .fb-rise--d3 .fb-rise--d4 .fb-row .fb-row--between .fb-row--wrap .fb-scanline .fb-section .fb-section--loose .fb-section--tight .fb-select .fb-shell .fb-signal-card .fb-signal-card__body .fb-signal-card__cta .fb-signal-card__label .fb-signal-card__title .fb-stack .fb-stack--loose .fb-stack--tight .fb-status .fb-status--amber .fb-status--pink .fb-status--red .fb-status--signal .fb-terminal .fb-terminal__bar .fb-terminal__body .fb-terminal__dot .fb-terminal__dot--amber .fb-terminal__dot--matrix .fb-terminal__dot--red .fb-terminal__dots .fb-text-dim .fb-text-loud .fb-text-mute .fb-textarea
Voice

How the system talks.

USE
  • Run the signal
  • Open the console
  • Trace the pattern
  • Send the signal
  • Enter the room
  • See what broke
  • Something broken?
  • System online
AVOID
  • Get started today
  • Learn more
  • Supercharge your workflow
  • Unlock AI-powered insights
  • Revolutionize / disrupt / next-gen
  • Cutting-edge / best-in-class
  • Any "AI for everyone" variant
Typography

2 families. No compromise.

Inter

human copy (lede, body, headings that need to breathe)

JetBrains Mono

system copy (labels, prompts, commands, chips, statuses)

No third family. No decorative fonts. No script.

Motion

4 keyframes.

fb-blink fb-pulse fb-sweep fb-rise
Responsive

3 breakpoints.

960px

tablet

640px

mobile

380px

narrow mobile

Rules

System constraints.

namespace

All public classes use .fb-* prefix

overridePattern

Load project stylesheet AFTER fixbroken-os.css. Override tokens via wrapper class.

bannedFonts

Any font besides Inter and JetBrains Mono

bannedColors

purple, glassmorphism

bannedEmoji

sparkles, rocket, fire, lightbulb, party, handshake

mobile

Every component must be reviewed at 375px before shipping

neon

Neon is a signal, not a decoration. If you add glow, it should mean something.