// cloudflare · central majors · v1.0
HUD Design System
A reusable design language for building dark, heads-up-display style web apps. Frosted glass widgets. Cloudflare Orange accents. Orbitron for readouts. Drop these tokens into any project.
CSS Variables
Tailwind v3
React / JSX
Vanilla HTML
No Dependencies
Foundation · 01
Design Tokens
CSS custom properties that drive every component. Define once in :root , use everywhere.
/* ── Paste this :root block into any stylesheet ── */
:root {
/* Backgrounds */
--color-void : #050300 ;
--color-obsidian : #0A0805 ;
--color-surface : rgba(255,255,255,0.04) ;
--color-border : rgba(255,255,255,0.08) ;
--color-border-active : rgba(244,129,32,0.25) ;
/* Brand */
--cf-orange : #F48120 ;
--cf-orange-dim : rgba(244,129,32,0.12) ;
--cf-gold : #FFD700 ;
--cf-ember : #FF6B35 ;
/* Status */
--color-success : #10B981 ;
--color-warning : #F59E0B ;
--color-danger : #EF4444 ;
--color-info : #00D1FF ;
/* Text */
--text-primary : rgba(255,255,255,1.0) ;
--text-secondary : rgba(255,255,255,0.60) ;
--text-muted : rgba(255,255,255,0.30) ;
/* Fonts */
--font-display : 'Orbitron' , sans-serif;
--font-body : 'Inter' , system-ui, sans-serif;
--font-mono : 'Fira Code' , monospace;
/* Glass */
--glass-blur : blur(20px) saturate(180%) ;
--glass-bg : linear-gradient(135deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0.02) 100%) ;
}
Foundation · 02
Color Palette
Two palettes: Cloudflare Brand (orange/ember) and the HUD accent layer (gold/info/status). Never use solid white backgrounds.
— Brand Core
Obsidian
#0A0805
--color-obsidian
— Semantic Status
Success
#10B981
--color-success
Warning
#F59E0B
--color-warning
Danger
#EF4444
--color-danger
Foundation · 03
Typography
Three typefaces with distinct roles. Never mix Orbitron with small body text — it loses legibility below 14px.
Components · 02
Stat Cards
Use Orbitron for the number, Inter for the label, Fira Code for the delta. Numbers are the hero.
Components · 03
Badges
Small semantic labels. Use sparingly — one badge per card maximum unless showing a tag cloud.
Cloudflare
VIP Serial
Tour Confirmed
Sold Out
Live Data
Locked
<span class="badge badge-orange">Cloudflare</span>
<span class="badge badge-green">Tour Confirmed</span>
<span class="badge badge-ghost">Locked</span>
Components · 06
Tabs
Use to switch between views within a widget. Max 5 tabs before switching to a dropdown.
Overview
Trending
Cities
Sentiment
Components · 07
Alert Banners
Status-driven inline feedback. Avoid modals — always prefer inline banners in this design system.
Info
Stevie Nicks tour dates confirmed for DFW — 3 available venue slots.
Success
VIP invite sent to Michael Tarsha. Serial No. 001/100 reserved.
Warning
Sentiment score dropped 12 points for Houston market this week.
Action Required
Coin run limit reached. 100/100 coins serialized. Start a new run?
Components · 08
Data Rows
Repeating list items inside a widget. Hover reveals background. Always include a rank, label, and one data point.
Components · 09
Progress Bars
For showing capacity, sentiment, completion. Match color to semantic meaning.
HUD Effects · 01
Glow & Shimmer
Subtle light effects that reinforce the HUD feel. Keep them subtle — glow is a supporting actor, not the hero.
HUD Effects · 02
Scan Line
Adds motion to otherwise static surfaces. Apply to full-screen backgrounds or hero sections — not individual cards.
<div class="scan-surface">
<div class="scan-line"></div>
... your content ...
</div>
/* CSS */
.scan-surface { position: relative; overflow: hidden; }
.scan-line {
position: absolute; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, transparent, rgba(244,129,32,0.55) , transparent);
animation: scan-down 4s linear infinite;
}
@keyframes scan-down { 0% { top: -4px; } 100% { top: 100%; } }
HUD Effects · 03
Corner Brackets
Telegraphs "this is a targeting reticle / sensor display." Use on hero stat cards and key callout boxes. Not every card.
Starter Kit · 01
Tailwind Config
Drop this into any Tailwind v3 project. Extends the default theme — nothing is overridden.
// tailwind.config.js
export default {
content: ["./index.html" , "./src/**/*.{js,jsx,ts,tsx}" ],
theme: {
extend: {
colors: {
void: '#050300' ,
obsidian: '#0A0805' ,
amber: '#F48120' , // Cloudflare orange
ember: '#FF6B35' ,
gold: '#FFD700' ,
brass: '#B8860B' ,
},
fontFamily: {
display: ['"Orbitron"' , 'sans-serif' ],
body: ['Inter' , 'system-ui' , 'sans-serif' ],
mono: ['"Fira Code"' , 'monospace' ],
},
animation: {
'scan' : 'scan 4s linear infinite' ,
'float' : 'float 6s ease-in-out infinite' ,
'glow-pulse' : 'glow 2s ease-in-out infinite alternate' ,
},
},
},
}
Starter Kit · 02
Copy & Paste CSS
The three core component classes. These work standalone — no Tailwind required. Add to any stylesheet.
/* ── Widget Glass — the core card ── */
.widget {
background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%);
backdrop-filter: blur(20px) saturate(180%);
border: 1px solid rgba(255,255,255,0.08) ;
border-radius: 24px;
box-shadow: 0 4px 24px rgba(0,0,0,0.3) ;
padding: 24px;
transition: all 0.2s ease;
}
.widget:hover {
border-color: rgba(244,129,32,0.25) ;
box-shadow: 0 8px 32px rgba(0,0,0,0.4) , 0 0 20px rgba(244,129,32,0.08) ;
}
/* ── Badge ── */
.badge {
display: inline-flex; align-items: center;
padding: 3px 10px; border-radius: 999px;
font-size: 10px; font-weight: 700;
letter-spacing: 0.07em; text-transform: uppercase;
}
.badge-orange { background: rgba(244,129,32,0.12) ; color: #F48120 ; border: 1px solid rgba(244,129,32,0.2) ; }
.badge-green { background: rgba(16,185,129,0.10) ; color: #10B981 ; border: 1px solid rgba(16,185,129,0.2) ; }
/* ── Button Primary ── */
.btn-primary {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 20px; border-radius: 16px; border: none;
background: linear-gradient(135deg, #F48120 0%, #FF6B35 100%);
color: #050300 ;
font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
cursor: pointer; box-shadow: 0 4px 16px rgba(244,129,32,0.3) ;
transition: all 0.15s ease;
}
.btn-primary:hover { box-shadow: 0 4px 24px rgba(244,129,32,0.5) ; transform: translateY(-1px); }