| name | cyber-garage |
| description | 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. |
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.
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);
}
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);
box-shadow: 0 0 20px rgba(127,200,255,0.06);
box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(127,200,255,0.05);
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
