BlackRoad OS, Inc. · Design System v1.0

Brand
Style Guide

The canonical reference for BlackRoad's visual language — colors, typography, components, and motion.

7
Accent Colors
2
Typefaces
17
Motion Primitives
1
Rule: text is #fff or #000
01 · Wordmark
BlackRoad
Space Grotesk 700 · on black · primary
BLACKROAD
JetBrains Mono 700 · mono/terminal variant
BlackRoad
Wordmark + gradient rule · marketing contexts
02 · Color Palette
#FF8400
orange
#FF4400
red-orange
#FF0066
hot pink
#CC00AA
magenta
#8800FF
purple
#0066FF
blue
#2233CC
deep navy
Full spectrum · 208→202→198→163→33 · shapes and surfaces only · never on text
Neutrals
#000
bg
#0a0a0a
surface
#111
elevated
#222
border
#444
muted
#fff
fg
03 · Typography
Display
Space Grotesk · 700
The road
is black.
Display48–72px700
H136–48px700
H224–32px600
UI · Body · Code
JetBrains Mono · 400–700
System Status · Online
BlackRoad OS runs a distributed network of autonomous agents coordinated via NATS event bus and K3s orchestration.
// agent bootstrap
const agent = await Agent.spawn({ id: 'cecilia' })
// → memory loaded
Labels0.52–0.6remuppercase + tracking
Body0.68–0.75remopacity 0.5
Code0.65–0.72rem400–500
UI heads0.8–1rem700
04 · Text Color Rules
DO
White on black
BlackRoad OS
#ffffff on any dark bg. The default.
DO
Black on white
BlackRoad OS
#000000 on white or light fills only.
DO
Opacity to dim
Full — opacity: 1 Dim — opacity: 0.5 Muted — opacity: 0.25
Always opacity to dim. Never a gray hex.
DON'T
Colored text
BlackRoad OS
Colors are for shapes. Never on words.
DON'T
Gray hex text
BlackRoad OS
No #888, #555, #ccc. Use white + opacity.
05 · Gradient System
Full Spectrum · 90°
rule bars · strips · loaders
7 stops · orange→navy
Diagonal Quad · 135°
large fills · titlebars
135deg · 4 stops
Vertical · 180°
side strips · tall indicators
180deg · 2 stops
Warm Pair
alerts · errors · warm states
orange → hot pink
Cool Pair
info · agents · links
purple → blue
Fade Out
decorative tapers · section ends
color → transparent
06 · Components
Buttons
text always #000 or #fff · no pill radius · sharp corners
Badges
ONLINE ACTIVE AGENT ALERT
#000 on color fills · #fff on transparent
Inputs
underline only · no box · focused = full white line
Status
cecilia · active
cadence · processing
eve · alert
olympia · offline
dot color = accent · offline = no color · alert = pulse
Dividers
white · dim · gradient · gradient fade
07 · Spacing Scale
4
xs
8
sm
12
16
md
20
24
lg
32
xl
40
2xl
48
3xl
64
4xl
80
5xl
Base: 4px · prefer multiples of 8 for layout · multiples of 4 for fine spacing
08 · Motion Primitives
01
fade
opacity 1→0→1
ease · 2s
02
slide-x
translateX −14→14
ease · 2s
03
slide-y
translateY −10→10
ease · 2s
04
pulse
scale 1→1.9→1
ease · 1.5s
05
spin
rotate 0→360°
linear · 2s
06
blink
opacity hard cut
step-end · 1s
07
bounce
translateY 0→−11→0
ease · 1s
08
grow
scaleX 0→1→0
ease · 2s
09
shake
translateX ±5px
ease · 1s
10
orbit
rotate + translateX
linear · 2s
11
br
cursor
blinking text cursor
step-end · 0.8s
12
wave
scaleY staggered bars
ease · 1s
13
flip
rotateY 0→360°
ease · 2s
14
color-cycle
orange→pink→purple→blue
linear · 3s
15
grad-shift
gradient position sweep
ease · 3s
16
border-pulse
border-color cycles palette
ease · 2s
17
—
text rule
white on black · black on white · no color text · ever
static
09 · Rules
DO
Text is #ffffff or #000000 only
Use opacity to dim — never a gray hex
Colors on shapes, fills, dots, borders only
JetBrains Mono for all UI, labels, code, data
Space Grotesk for display headings only
Gradient as structural accent — rules, strips
Sharp corners — 0 to 4px radius max
Lines over boxes wherever possible
1px white lines for section dividers
Animate shapes in color, not text
DON'T
Never color text — orange, pink, purple, blue
No gray hex values on text — #888, #555, #ccc
No gradient text (-webkit-text-fill-color)
No pill buttons (border-radius > 4px)
No system fonts — Arial, Helvetica, system-ui
No drop shadows on text
Never rotate, skew, or recolor the wordmark
No more than 2 accent colors per component
No color on disabled states — opacity only
No unnecessary containers — lines over boxes