Run any Skill in Manus with one click

roman-cyber-garage

Stars1

Forks0

UpdatedMarch 21, 2026 at 19:54

Dark cyberpunk design system with complete theme reference — colors, typography, components, modals, tables, cards, badges, buttons, and layout patterns. Use this skill when building dark-themed dashboards, admin panels, trading UIs, or any cyberpunk-aesthetic web interface. Production-tested on real SaaS products.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

roman-rr

roman-rr/roman-cyber-garage

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

Run any Skill with one click

name	roman-cyber-garage
description	Dark cyberpunk design system with complete theme reference — colors, typography, components, modals, tables, cards, badges, buttons, and layout patterns. Use this skill when building dark-themed dashboards, admin panels, trading UIs, or any cyberpunk-aesthetic web interface. Production-tested on real SaaS products.
license	Complete terms in LICENSE.txt

Roman Cyber Garage

A production-tested dark cyberpunk design system extracted from a live SaaS trading platform. Provides exact design tokens, component CSS, and layout patterns for building visually consistent, professional dark-themed web UIs.

The user provides a frontend task — a page, component, modal, dashboard, or UI element to build. Apply the design system below to produce pixel-consistent output matching the cyberpunk aesthetic.

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
Nav brand	`JetBrains Mono`	700	16-18px
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
`--bg-body`	`#030710`	Page background
`--bg-nav`	`rgba(3,7,16,0.85)`	Nav (+ `backdrop-filter: blur(16px)`)
`--bg-card`	`rgba(127,200,255,0.02)`	Cards, sections
`--bg-card-hover`	`rgba(127,200,255,0.06)`	Card/row hover
`--bg-modal`	`#0d1117`	Modal body
`--bg-modal-alt`	`#0a0f1e`	Alt modal body
`--bg-input`	`#0a0e1a`	Inputs, selects
`--bg-panel`	`#161b22`	Inset panels
`--bg-overlay`	`rgba(0,0,0,0.75)`	Modal overlay (+ `backdrop-filter: blur(6px)`)

Text

Token	Value	Usage
`--text-primary`	`#e2e8f0`	Body text
`--text-secondary`	`#c8d6e5`	Table cells
`--text-muted`	`#6b8299`	Labels, subtitles
`--text-dim`	`#4a6278`	Hints, fine print
`--text-dimmer`	`#3d4f63`	Footer notes

Accents

Token	Value	Usage
`--accent-blue`	`#7fc8ff`	Primary — links, values, brand
`--accent-gold`	`#facc15`	Admin — titles, active states

Semantic / Status Colors

Token	Value	Usage
`--color-success`	`#4ade80`	Green — success, bullish, profit, ON
`--color-warning`	`#facc15`	Yellow — partial, caution
`--color-warning-amber`	`#f59e0b`	Amber — alerts
`--color-danger`	`#f87171`	Red — failed, bearish, loss, OFF
`--color-info`	`#7fc8ff`	Blue — pending
`--color-purple`	`#c084fc`	Purple — features
`--color-cyan`	`#06b6d4`	Cyan — secondary features
`--color-sky`	`#38bdf8`	Sky blue — tertiary
`--color-teal`	`#34d399`	Teal — accents
`--color-emerald`	`#10b981`	Emerald — positive accents
`--color-rose`	`#f43f5e`	Rose — alerts
`--color-indigo`	`#6366f1`	Indigo — gradients

Border Opacity Scale

Level	Value	Usage
subtle	`rgba(127,200,255,0.06)`	Cards, sections
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 a fixed 2px neon gradient:

.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);
}

Components

Nav Bar

.nav {
  position: fixed; top: 2px; left: 0; right: 0; z-index: 100;
  backdrop-filter: blur(16px); background: rgba(3,7,16,0.85);
  border-bottom: 1px solid rgba(127,200,255,0.06);
  padding: 0 24px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-brand {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 18px; color: #7fc8ff; letter-spacing: 2px; text-decoration: none;
}
.nav-links { display: flex; gap: 16px; }
.nav-links a { font-size: 14px; color: #6b8299; text-decoration: none; transition: color 0.2s; }
.nav-links a:hover, .nav-links a.active { color: #7fc8ff; }

Page Layout

.container { max-width: 1200px; margin: 0 auto; padding: 80px 20px 40px; }
.page-title {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(24px, 4vw, 36px);
  font-weight: 700; margin-bottom: 8px;
  background: linear-gradient(135deg, #7fc8ff, #a78bfa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.page-subtitle { color: #6b8299; font-size: 14px; margin-bottom: 24px; }

Summary Card

.summary-card {
  background: rgba(127,200,255,0.02); border: 1px solid rgba(127,200,255,0.06);
  border-radius: 12px; padding: 20px; transition: border-color 0.3s;
}
.summary-card:hover { border-color: rgba(127,200,255,0.15); }
.summary-label {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em; color: #6b8299; margin-bottom: 8px;
}
.summary-value {
  font-family: 'JetBrains Mono', monospace; font-size: 32px; font-weight: 700;
  color: #7fc8ff; text-shadow: 0 0 30px rgba(127,200,255,0.15);
}
.summary-value.green { color: #4ade80; text-shadow: 0 0 30px rgba(74,222,128,0.15); }
.summary-value.red { color: #f87171; }

Content Card / Chart Section

.chart-section {
  background: rgba(127,200,255,0.02); border: 1px solid rgba(127,200,255,0.06);
  border-radius: 12px; padding: 24px; margin-bottom: 32px;
}
.section-title {
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.1em; color: #7fc8ff; margin-bottom: 16px;
}

Data Table

.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.05em; color: #6b8299;
  padding: 12px 8px; text-align: left; border-bottom: 1px solid rgba(127,200,255,0.08);
}
.data-table td {
  font-family: 'JetBrains Mono', monospace; font-size: 13px;
  padding: 12px 8px; color: #c8d6e5; border-bottom: 1px solid rgba(127,200,255,0.04);
}
.data-table tr:hover td { background: rgba(127,200,255,0.02); }

Badges

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 6px;
  font-size: 11px; font-weight: 600; font-family: 'JetBrains Mono', monospace;
}
.badge-success { background: rgba(34,197,94,0.15);  color: #4ade80; }
.badge-danger  { background: rgba(239,68,68,0.15);  color: #f87171; }
.badge-warning { background: rgba(234,179,8,0.15);  color: #facc15; }
.badge-info    { background: rgba(127,200,255,0.1);  color: #7fc8ff; }
.badge-muted   { background: rgba(107,130,153,0.15); color: #6b8299; }

Buttons — Tab Switcher

.tab-btn {
  background: rgba(127,200,255,0.04); border: 1px solid rgba(127,200,255,0.08);
  color: #6b8299; padding: 7px 16px; border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  cursor: pointer; transition: all 0.2s;
}
.tab-btn:hover { border-color: rgba(127,200,255,0.2); color: #e2e8f0; }
.tab-btn.active { background: rgba(127,200,255,0.1); border-color: #7fc8ff; color: #7fc8ff; }

Buttons — Color-Coded Action

Replace COLOR_RGB and COLOR_HEX with any semantic color:

.action-btn {
  background: rgba(COLOR_RGB, 0.1); border: 1px solid rgba(COLOR_RGB, 0.25);
  color: COLOR_HEX; padding: 6px 16px; border-radius: 6px;
  font-size: 12px; font-family: 'JetBrains Mono', monospace;
  cursor: pointer; transition: all 0.15s;
}
.action-btn:hover { background: rgba(COLOR_RGB, 0.2); }

Buttons — Toggle (ON/OFF)

.toggle-btn {
  padding: 4px 14px; border-radius: 6px; font-size: 11px; font-weight: 700;
  font-family: 'JetBrains Mono', monospace; border: 1px solid rgba(127,200,255,0.15);
  cursor: pointer; transition: all 0.15s; min-width: 50px; text-align: center;
}
.toggle-btn.on  { background: rgba(74,222,128,0.15); color: #4ade80; border-color: rgba(74,222,128,0.3); }
.toggle-btn.off { background: rgba(248,113,113,0.1);  color: #f87171; border-color: rgba(248,113,113,0.2); }

Buttons — CTA

.btn-cta {
  padding: 10px 24px; border-radius: 10px; border: none;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  color: #fff; font-size: 14px; font-weight: 500; cursor: pointer;
}
.btn-outline {
  padding: 10px 24px; border-radius: 10px;
  background: rgba(127,200,255,0.08); color: #7fc8ff;
  border: 1px solid rgba(127,200,255,0.15);
  font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
}
.btn-outline:hover { background: rgba(127,200,255,0.15); }

Modal

.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,0.75); backdrop-filter: blur(6px);
  align-items: flex-start; justify-content: center;
  padding: 40px 20px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal-body {
  background: #0d1117; border: 1px solid rgba(ACCENT_RGB, 0.15);
  border-radius: 14px; max-width: 640px; width: 100%;
  padding: 24px; position: relative;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.modal-close {
  position: absolute; top: 14px; right: 14px;
  background: none; border: none; color: #6b8299;
  font-size: 22px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.modal-title {
  font-family: 'JetBrains Mono', monospace; font-size: 16px;
  font-weight: 700; color: ACCENT_HEX;
}

Form Inputs

.form-input {
  background: rgba(ACCENT_RGB, 0.06); border: 1px solid rgba(ACCENT_RGB, 0.15);
  color: #e2e8f0; padding: 6px 10px; border-radius: 8px;
  font-size: 12px; font-family: 'JetBrains Mono', monospace; outline: none;
}
.form-select {
  background: #0a0e1a; color: #e2e8f0;
  border: 1px solid rgba(127,200,255,0.15); border-radius: 8px;
  padding: 6px 12px; font-family: 'JetBrains Mono', monospace; font-size: 12px;
}

Status Dots

.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.status-dot.ok   { background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.5); }
.status-dot.fail { background: #f87171; }

Alert Banners

.banner-error {
  padding: 14px 18px; border-radius: 10px;
  background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.4);
  color: #f87171;
}
.banner-warn {
  padding: 14px 18px; border-radius: 12px;
  background: rgba(255,152,0,0.1); border: 1px solid rgba(255,152,0,0.25);
  color: #ffb74d;
}

Glow Effects

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

Layout Grids

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 (max-width: 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; }
}

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>

Rules

JetBrains Mono for ALL data, numbers, labels, section titles, badges, buttons, code
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/sections: border-radius: 12px, 1px border
Modals: border-radius: 14px, accent-colored border
Buttons: border-radius: 6-8px
Background opacity: 0.02 rest, 0.04-0.06 hover, 0.1-0.15 active
Border opacity: 0.06 subtle, 0.08-0.12 normal, 0.15-0.3 prominent, 0.5 active
Each feature gets a unique accent color from the semantic palette
Modals close on overlay click
backdrop-filter: blur() — nav 16-20px, modal overlays 4-8px
Always include the neon-line at top of every page
Transition speeds: 0.15s buttons, 0.2s links, 0.3s cards

name	roman-cyber-garage
description	Dark cyberpunk design system with complete theme reference — colors, typography, components, modals, tables, cards, badges, buttons, and layout patterns. Use this skill when building dark-themed dashboards, admin panels, trading UIs, or any cyberpunk-aesthetic web interface. Production-tested on real SaaS products.
license	Complete terms in LICENSE.txt