UI design, HUD layout, CSS variables, themes, cyber-noir, animation, glassmorphism, Orbitron font, color palette, DRIS//CORE interface
Cyber-noir — dark backgrounds, neon cyan/magenta/green accents, monospace fonts, glitch effects, glass morphism panels.
DRIS//CORE grid + absolute positioning must remain intact:root {
--accent-cyan: #00f5ff;
--accent-magenta: #ff00ff;
--accent-green: #00ff88;
--bg-primary: #0a0a0f;
--bg-secondary: #111118;
--glass-bg: rgba(10, 10, 20, 0.7);
--glass-border: rgba(0, 245, 255, 0.15);
}
cyber_core (default)broadcast_pronightgoldSwitch theme by swapping CSS variable values on :root.
| Use | Font |
|---|---|
| Headers / HUD labels | Orbitron, Bebas Neue, Russo One |
| Terminal / code | JetBrains Mono, Share Tech Mono, Space Mono |
| Body / UI | Inter |
.hud-panel {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: 4px;
}
repeating-linear-gradient overlay, low opacity@keyframes opacity oscillation on accent elementsclip-path + translate offsets on ::before/::afterbox-shadow keyframe cycling through accent colors| Do | Don't |
|---|---|
| Use CSS variables for all colors | Hardcode hex values inline |
| Add new panels as absolute/grid children | Change the outer grid structure |
Use backdrop-filter for glass panels | Use opacity on the whole HUD |
Animate with transform/opacity | Animate width/height/top/left (causes layout) |