The dark UI running
every Nebula panel.
One neutral, near-black system — flat surfaces, restrained color, a light-on-dark primary action — built for proxies, dashboards and anything that needs to stay legible at 3am. No theme picker, no light mode: dark is the product.
Color
Everything sits on near-black. Color is spent almost entirely on state — success, warning, error — never on decoration. Click any swatch to copy its hex.
Typography
Inter for every weight of interface text, JetBrains Mono for anything that's a value — hostnames, hex codes, latencies, ports.
Buttons
Primary is the odd one out on purpose — a light gradient chip on a dark page reads as the one thing you're meant to press.
<button class="btn btn-primary">Create proxy</button> <button class="btn btn-secondary">Cancel</button> <button class="btn btn-outline">Outline</button> <button class="btn btn-ghost">Ghost</button> <button class="btn btn-destructive">Delete domain</button> <button class="btn btn-link">Link action</button> <button class="btn btn-primary btn-sm">Small</button> <button class="btn btn-primary">Default</button> <button class="btn btn-primary btn-lg">Large</button> <button class="btn btn-primary" disabled>Disabled</button>
Badges
Status only. Translucent fill, a matching border, never a solid block of color.
<span class="badge badge-success">● Healthy</span> <span class="badge badge-warning">● Degraded</span> <span class="badge badge-error">● Down</span> <span class="badge badge-info">Info</span> <span class="badge badge-outline">Outline</span> <span class="badge badge-success badge-pill">Pill</span>
Cards
Three surface treatments depending on how much a card needs to separate from the page: flat, bordered, and the shadcn-derived variant used in the older admin views.
card-standard
Flat surface, transparent border until hover. Used for list rows and stat tiles.
card-elevated
Same surface, permanent border. Used for grouped settings panels.
Card / shadcn
Radix-based primitive, kept for legacy admin screens.
<div class="demo-card standard">
<h4>card-standard</h4>
<p>Flat surface, transparent border until hover.</p>
</div>
<div class="demo-card elevated">
<h4>card-elevated</h4>
<p>Same surface, permanent border.</p>
</div>
<div class="demo-card shadcn">
<h4>Card / shadcn</h4>
<p>Radix-based primitive, kept for legacy admin screens.</p>
<div class="card-foot">
<button class="btn btn-secondary btn-sm">Manage</button>
<button class="btn btn-ghost btn-sm">Dismiss</button>
</div>
</div>
Forms
Inputs sit a shade lighter than the page, with a soft glow ring on focus instead of a hard outline.
<div class="field"> <label for="domain">Domain</label> <input class="input" id="domain" placeholder="app.example.com" /> </div> <textarea class="input" placeholder="Optional description"></textarea> <span class="toggle on" role="switch" aria-checked="true"> <i></i> </span> <span class="checkbox checked" role="checkbox" aria-checked="true"> <svg viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></svg> </span>
Feedback
Alerts reuse the exact same three semantic colors as badges — one vocabulary for state, everywhere in the product.
<div class="alert success">
<svg><path d="M20 6 9 17l-5-5"/></svg>
<div>
<div class="alert-title">Certificate renewed</div>
app.paxcia.net is valid for 90 more days.
</div>
</div>
<div class="progress"><i style="width:64%;"></i></div>
<div class="skeleton" style="height:14px; width:80%;"></div>
Get the code
The two files that carry the whole system. Drop the tokens into a Tailwind config and the component classes into your global stylesheet.
colors: { void: '#09090b', surface: '#111113', 'surface-2': '#18181b', border: { DEFAULT: '#27272a', strong: '#3f3f46' }, ink: { DEFAULT: '#fafafa', muted: '#a1a1aa', subtle: '#71717a' }, success: '#3ecf8e', warning: '#f7b955', error: '#ef6a6a', }, borderRadius: { sm: '4px', DEFAULT: '8px', lg: '12px', xl: '16px' }, fontFamily: { sans: ['Inter', '-apple-system', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, keyframes: { 'fade-in': { from: { opacity: '0', transform: 'translateY(8px)' }, to: { opacity: '1', transform: 'translateY(0)' } }, 'scale-in': { from: { opacity: '0', transform: 'scale(0.98)' }, to: { opacity: '1', transform: 'scale(1)' } }, }, // primary action is a light gradient, never a hue — // it's the only element allowed to break the dark palette.