cyber-garage

Cyber Garage — Dark Cyberpunk Design System

Production-tested design system extracted from a live SaaS platform. Provides exact design tokens and copy-paste CSS for building pixel-consistent dark-themed web UIs.

Full component CSS: references/COMPONENTS.md

Fonts

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">

Usage	Font	Weight	Size
Body text	`Inter`	400	14px
Headings	`Inter`	600-700	18-36px
Code / Data / Labels	`JetBrains Mono`	400-700	11-13px
Section titles	`JetBrains Mono`	600	12px `uppercase` `letter-spacing: 0.1em`
Badges / Buttons	`JetBrains Mono`	500-700	11-12px
Big metric values	`JetBrains Mono`	700	24-32px

Color Palette

Backgrounds

Token	Value	Usage
body	`#030710`	Page background
nav	`rgba(3,7,16,0.85)`	Nav (+ `backdrop-filter: blur(16px)`)
card	`rgba(127,200,255,0.02)`	Cards, sections
card-hover	`rgba(127,200,255,0.06)`	Hover states
modal	`#0d1117`	Modal body
input	`#0a0e1a`	Form inputs
panel	`#161b22`	Inset panels
overlay	`rgba(0,0,0,0.75)`	Modal overlay (+ `backdrop-filter: blur(6px)`)

Text

Token	Value	Usage
primary	`#e2e8f0`	Body text (never use pure `#fff`)
secondary	`#c8d6e5`	Table cells
muted	`#6b8299`	Labels, subtitles
dim	`#4a6278`	Hints
dimmer	`#3d4f63`	Footer notes

Accents

Token	Value	Usage
blue	`#7fc8ff`	Primary — links, values, brand (user pages)
gold	`#facc15`	Admin — titles, active states

Semantic Colors

Token	Value
success	`#4ade80`
warning	`#facc15`
amber	`#f59e0b`
danger	`#f87171`
info	`#7fc8ff`
purple	`#c084fc`
cyan	`#06b6d4`
sky	`#38bdf8`
teal	`#34d399`
emerald	`#10b981`
rose	`#f43f5e`
indigo	`#6366f1`

Border Opacity Scale

Level	Value	Usage
subtle	`rgba(127,200,255,0.06)`	Cards
light	`rgba(127,200,255,0.08)`	Table headers
medium	`rgba(127,200,255,0.12)`	Modals
strong	`rgba(127,200,255,0.15)`	Buttons, inputs
glow	`rgba(127,200,255,0.3)`	Hover states

Neon Top Line

Every page starts with:

<div class="neon-line"></div>

.neon-line {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;
  background: linear-gradient(90deg, transparent, #1E88E5 20%, #42A5F5 80%, transparent);
}
/* Admin variant: transparent, #eab308 20%, #facc15 80%, transparent */

Layout

.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px 40px; }

Pattern	CSS
Summary cards	`grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px`
2-column	`grid-template-columns: 1fr 1fr; gap: 16px`
3-column	`grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px`
Button row	`display: flex; gap: 6-8px; flex-wrap: wrap`

Mobile (768px)

@media (max-width: 768px) {
  .container { padding: 72px 12px 24px; }
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .summary-value { font-size: 24px; }
  .chart-container { height: 220px; }
  .hide-mobile { display: none; }
}

Glow Effects

text-shadow: 0 0 30px rgba(127,200,255,0.15);   /* text glow */
box-shadow: 0 0 20px rgba(127,200,255,0.06);     /* box hover */
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(127,200,255,0.05); /* modal */

Page Skeleton

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>PAGE_TITLE</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body { background: #030710; color: #e2e8f0; font-family: 'Inter', sans-serif; min-height: 100vh; }
    a { color: #7fc8ff; text-decoration: none; }
  </style>
</head>
<body>
  <div class="neon-line"></div>
  <nav class="nav">
    <a href="/" class="nav-brand">brand_</a>
    <div class="nav-links"><a href="/" class="active">PAGE_TITLE</a></div>
  </nav>
  <div class="container">
    <h1 class="page-title">PAGE_TITLE</h1>
    <p class="page-subtitle">Description</p>
  </div>
</body>
</html>

Component Library

Full CSS for all components: references/COMPONENTS.md

Quick list: Nav bar, page titles (gradient), summary cards, chart sections, data tables, badges (6 types), tab buttons, color-coded action buttons, toggle buttons, CTA buttons, config buttons, modals, form inputs, auth bar, status dots, alert banners, icon containers.

Rules

JetBrains Mono for ALL data, numbers, labels, section titles, badges, buttons
Inter for body text, paragraphs, descriptions
NEVER use pure white #fff — max is #e2e8f0
NEVER use solid black borders — always rgba(127,200,255,...) with low opacity
Cards: border-radius: 12px, modals: 14px, buttons: 6-8px
Background opacity: 0.02 rest → 0.04-0.06 hover → 0.1-0.15 active
Border opacity: 0.06 subtle → 0.12 normal → 0.15-0.3 prominent
Admin pages = gold #facc15; user pages = blue #7fc8ff
Modals close on overlay click
backdrop-filter: blur() — nav 16-20px, overlays 4-8px
Always include the neon-line at top of every page
Transitions: 0.15s buttons, 0.2s links, 0.3s cards