BlackRoad Brand System
Color · Typography · Surface · Gradient · Tokens
Spectrum
6 accent colors — gradient only, never solid, never text
Ember
#FF6B2B
--br-ember
Flare
#FF2255
--br-flare
Magenta
#CC00AA
--br-magenta
Orchid
#8844FF
--br-orchid
Arc
#4488FF
--br-arc
Cyan
#00D4FF
--br-cyan
Gradients
5 preset combinations
Full Spectrum
#FF6B2B → #FF2255 → #CC00AA → #8844FF → #4488FF → #00D4FF
Warm → Cool
#FF6B2B → #FF2255 → #8844FF → #00D4FF
Pulse
#CC00AA → #8844FF → #4488FF
Fire
#FF6B2B → #FF2255 → #CC00AA
Ice
#8844FF → #4488FF → #00D4FF
Surfaces
8 neutral tones — black & white only
Base
#000000
Card
#0d0d0d
Elevated
#111111
Hover
#181818
Border
#222222
Muted
#444444
Secondary
#737373
Primary
#f5f5f5
Typography
Space Grotesk · JetBrains Mono
Display
BlackRoad OS
Space Grotesk 700 · 48–80px
Heading
Agent Infrastructure
Space Grotesk 600 · 24–40px
Body
A distributed AI operating system built for the next generation.
Space Grotesk 400 · 14–16px
Label
System Status · Active
Space Grotesk 600 · 12–13px
Code
Z := yx − w → equilibrium reached
JetBrains Mono 400 · 11–13px
Micro
RC:0x4200 · PS-SHA∞ · QBFT-4200
JetBrains Mono 500 · 9–10px
Components
Cards, buttons, status indicators
Agent Status
5 nodes · 3 online
Alice
192.168.4.49
Cecilia
192.168.4.96
Octavia
offline
Actions
Button styles
Deploy Agent
View Logs
Stop Process
Connect
$ blackroad deploy --fleet all
Propagating to 5 nodes...
CSS Tokens
Copy-paste ready :root variables
/* BlackRoad Design Tokens */
:root {
/* Backgrounds */
--br-bg
:
#000000
;
--br-card
:
#0d0d0d
;
--br-elevated
:
#111111
;
--br-hover
:
#181818
;
/* Text */
--br-text
:
#f5f5f5
;
--br-sub
:
#737373
;
--br-muted
:
#444444
;
/* Borders */
--br-border
:
#222222
;
/* Gradient — the only color expression */
--br-gradient
:
linear-gradient(90deg, #FF6B2B, #FF2255, #CC00AA, #8844FF, #4488FF, #00D4FF)
; }
Animations
Motion patterns for the brand system
Gradient Sweep
Continuous gradient scroll for loading bars, borders, progress
Pulse Ring
Expanding gradient rings for status, notifications, focus states
Spectrum Bars
Audio-visualizer wave for activity, processing, live data
Orbit
Dual-orbit system for agents, connections, network activity
Loading Line
Sliding gradient bar for progress, page transitions, async ops
Morph Shape
Organic shape-shifting for hero sections, backgrounds, identity
Typewriter
Terminal-style text reveal for commands, status messages
blackroad deploy --all
Particle Float
Drifting gradient particles for ambient backgrounds, hero areas