Stats
Actions
Tags
From superpowers
Design premium dark interfaces with proper contrast, color palettes, and visual hierarchy. Provides Tailwind CSS patterns for backgrounds, text, borders, and status colors.
How this skill is triggered — by the user, by Claude, or both
Slash command
/superpowers:dark-mode-designThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Create sophisticated dark-themed interfaces with proper contrast and premium visual hierarchy.
Create sophisticated dark-themed interfaces with proper contrast and premium visual hierarchy.
/* Tailwind Dark Backgrounds */
bg-zinc-950 /* #09090b - Base/page */
bg-neutral-900 /* #171717 - Cards */
bg-zinc-800 /* #27272a - Elevated */
bg-neutral-900/50 /* Transparent cards */
| Purpose | Class | Use Case |
|---|---|---|
| Primary | text-white | Titles, headings |
| Secondary | text-white/70 | Body text |
| Tertiary | text-white/50 | Labels, captions |
| Muted | text-white/40 | Metadata |
<div class="border border-white/10">Subtle</div>
<div class="border border-white/20">Visible</div>
<div class="hover:border-white/20">Hover enhanced</div>
<!-- Standard dark card -->
<div class="rounded-2xl border border-white/10 bg-neutral-900/50 p-6">
<!-- Elevated glass card -->
<div class="rounded-2xl border border-white/10 bg-neutral-900/50 backdrop-blur-md
hover:bg-neutral-800/50 hover:shadow-2xl hover:shadow-brand-500/10">
<!-- Success -->
<span class="bg-emerald-500/15 border border-emerald-500/30 text-emerald-400">
<!-- Warning -->
<span class="bg-amber-500/15 border border-amber-500/30 text-amber-400">
<!-- Error -->
<span class="bg-rose-500/15 border border-rose-500/30 text-rose-400">
<div class="w-11 h-11 rounded-xl bg-violet-500/15 flex items-center justify-center
group-hover:bg-violet-500/25">
<svg class="text-violet-400"><!-- Icon --></svg>
</div>
<!-- Gradient blobs -->
<div class="absolute w-96 h-96 bg-brand-500/10 rounded-full blur-[120px] animate-pulse">
<!-- Dot pattern -->
<div style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0);
background-size: 40px 40px;" class="opacity-[0.03]">
zinc-950 for base, layer lighter surfaces on topborder-white/10)#000000)npx claudepluginhub lunartech-x/superpowers --plugin superpowersDesigns dark mode UIs using surface elevation, desaturated colors, contrast ratios (4.5:1 min), accessibility checks, and semantic tokens for smooth light/dark switching.
Guides dark theme color adaptation: inverted hierarchy, reduced saturation, elevation via lightness, surface layering, and brand identity preservation.
Generates accessible color palettes from brand hex: 11-shade scales (50-950), semantic tokens, dark mode variants, Tailwind v4 CSS, WCAG contrast checks. For design systems and themes.