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, buttonsInter 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
Copyright (c) 2025-2026 Roman Antonov — romwtb@gmail.com — github.com/roman-rr — roman-rr.github.io
1---2name: cyber-garage3description: Builds dark cyberpunk web interfaces with a production-tested design system. Provides exact colors, typography, component CSS, layout grids, and page templates. Use when the user asks to build dashboards, admin panels, dark-themed pages, trading UIs, or any web interface with a cyberpunk aesthetic.4---56# Cyber Garage — Dark Cyberpunk Design System78Production-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.910- Full component CSS: [references/COMPONENTS.md](references/COMPONENTS.md)1112## Fonts1314```html15<link rel="preconnect" href="https://fonts.googleapis.com">16<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">17```1819| Usage | Font | Weight | Size |20|-------|------|--------|------|21| Body text | `Inter` | 400 | 14px |22| Headings | `Inter` | 600-700 | 18-36px |23| Code / Data / Labels | `JetBrains Mono` | 400-700 | 11-13px |24| Section titles | `JetBrains Mono` | 600 | 12px `uppercase` `letter-spacing: 0.1em` |25| Badges / Buttons | `JetBrains Mono` | 500-700 | 11-12px |26| Big metric values | `JetBrains Mono` | 700 | 24-32px |2728## Color Palette2930### Backgrounds3132| Token | Value | Usage |33|-------|-------|-------|34| body | `#030710` | Page background |35| nav | `rgba(3,7,16,0.85)` | Nav (+ `backdrop-filter: blur(16px)`) |36| card | `rgba(127,200,255,0.02)` | Cards, sections |37| card-hover | `rgba(127,200,255,0.06)` | Hover states |38| modal | `#0d1117` | Modal body |39| input | `#0a0e1a` | Form inputs |40| panel | `#161b22` | Inset panels |41| overlay | `rgba(0,0,0,0.75)` | Modal overlay (+ `backdrop-filter: blur(6px)`) |4243### Text4445| Token | Value | Usage |46|-------|-------|-------|47| primary | `#e2e8f0` | Body text (never use pure `#fff`) |48| secondary | `#c8d6e5` | Table cells |49| muted | `#6b8299` | Labels, subtitles |50| dim | `#4a6278` | Hints |51| dimmer | `#3d4f63` | Footer notes |5253### Accents5455| Token | Value | Usage |56|-------|-------|-------|57| blue | `#7fc8ff` | Primary — links, values, brand (user pages) |58| gold | `#facc15` | Admin — titles, active states |5960### Semantic Colors6162| Token | Value |63|-------|-------|64| success | `#4ade80` |65| warning | `#facc15` |66| amber | `#f59e0b` |67| danger | `#f87171` |68| info | `#7fc8ff` |69| purple | `#c084fc` |70| cyan | `#06b6d4` |71| sky | `#38bdf8` |72| teal | `#34d399` |73| emerald | `#10b981` |74| rose | `#f43f5e` |75| indigo | `#6366f1` |7677### Border Opacity Scale7879| Level | Value | Usage |80|-------|-------|-------|81| subtle | `rgba(127,200,255,0.06)` | Cards |82| light | `rgba(127,200,255,0.08)` | Table headers |83| medium | `rgba(127,200,255,0.12)` | Modals |84| strong | `rgba(127,200,255,0.15)` | Buttons, inputs |85| glow | `rgba(127,200,255,0.3)` | Hover states |8687## Neon Top Line8889Every page starts with:90```html91<div class="neon-line"></div>92```93```css94.neon-line {95 position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 101;96 background: linear-gradient(90deg, transparent, #1E88E5 20%, #42A5F5 80%, transparent);97}98/* Admin variant: transparent, #eab308 20%, #facc15 80%, transparent */99```100101## Layout102103```css104.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px 40px; }105```106107| Pattern | CSS |108|---------|-----|109| Summary cards | `grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px` |110| 2-column | `grid-template-columns: 1fr 1fr; gap: 16px` |111| 3-column | `grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px` |112| Button row | `display: flex; gap: 6-8px; flex-wrap: wrap` |113114### Mobile (768px)115116```css117@media (max-width: 768px) {118 .container { padding: 72px 12px 24px; }119 .summary-grid { grid-template-columns: repeat(2, 1fr); }120 .summary-value { font-size: 24px; }121 .chart-container { height: 220px; }122 .hide-mobile { display: none; }123}124```125126## Glow Effects127128```css129text-shadow: 0 0 30px rgba(127,200,255,0.15); /* text glow */130box-shadow: 0 0 20px rgba(127,200,255,0.06); /* box hover */131box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(127,200,255,0.05); /* modal */132```133134## Page Skeleton135136```html137<!DOCTYPE html>138<html lang="en">139<head>140 <meta charset="utf-8">141 <meta name="viewport" content="width=device-width, initial-scale=1">142 <title>PAGE_TITLE</title>143 <link rel="preconnect" href="https://fonts.googleapis.com">144 <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">145 <style>146 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }147 body { background: #030710; color: #e2e8f0; font-family: 'Inter', sans-serif; min-height: 100vh; }148 a { color: #7fc8ff; text-decoration: none; }149 </style>150</head>151<body>152 <div class="neon-line"></div>153 <nav class="nav">154 <a href="/" class="nav-brand">brand_</a>155 <div class="nav-links"><a href="/" class="active">PAGE_TITLE</a></div>156 </nav>157 <div class="container">158 <h1 class="page-title">PAGE_TITLE</h1>159 <p class="page-subtitle">Description</p>160 </div>161</body>162</html>163```164165## Component Library166167Full CSS for all components: **[references/COMPONENTS.md](references/COMPONENTS.md)**168169Quick 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.170171## Rules1721731. `JetBrains Mono` for ALL data, numbers, labels, section titles, badges, buttons1742. `Inter` for body text, paragraphs, descriptions1753. NEVER use pure white `#fff` — max is `#e2e8f0`1764. NEVER use solid black borders — always `rgba(127,200,255,...)` with low opacity1775. Cards: `border-radius: 12px`, modals: `14px`, buttons: `6-8px`1786. Background opacity: `0.02` rest → `0.04-0.06` hover → `0.1-0.15` active1797. Border opacity: `0.06` subtle → `0.12` normal → `0.15-0.3` prominent1808. Admin pages = gold `#facc15`; user pages = blue `#7fc8ff`1819. Modals close on overlay click18210. `backdrop-filter: blur()` — nav 16-20px, overlays 4-8px18311. Always include the neon-line at top of every page18412. Transitions: `0.15s` buttons, `0.2s` links, `0.3s` cards185186---187188Copyright (c) 2025-2026 Roman Antonov — [romwtb@gmail.com](mailto:romwtb@gmail.com) — [github.com/roman-rr](https://github.com/roman-rr) — [roman-rr.github.io](https://roman-rr.github.io/)
roman-rr