Design Systems

Dark theme with rainbow border-beam accents powered by the official border-beam npm package — animated conic-gradient strokes and bloom layers

Dark DS with dark slate canvas, silver frosted-glass card and primary CTA pills (24px backdrop blur), chunky 24px radius. Photo-as-content automotive vibe, no chromatic accent.

Dark command palette: near-black stage, deep steel-blue accent on selected rows, monospace voice, precise 8px radii

Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Azure primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.

Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Copper bronze primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.

Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Crimson primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.

Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Emerald primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.

Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Gilded gold primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.

Dark DS with a near-black canvas and skeuomorphic brushed-chrome controls: a beveled metal rim frames a glossy specular track, and raised chrome knobs carry an inset top highlight with a soft drop shadow. Brushed-silver primary alloy; checkboxes, switches, radios and sliders fill with the same metal as the primary button. 12px radius.

Cinematic dark theme with deep navy background, high contrast white text, and dramatic visual weight

Dark analytics: carved inset panels paired with soft outer lift, blue and cyan accents, medium radii, engineered depth

Dark glass workspace: translucent charcoal panels, warm amber glow primary, soft material depth

Dark analytics: deep forest-green canvas, vivid emerald primary, flat-clean depth, single-hue confidence

Dark folder skeuomorphism: charcoal surfaces with crisp top-edge rim highlights, deep soft shadows, fractal grain, and a warm paper-amber accent

Frosted glass with a violet accent: heavy backdrop blur, specular rim highlights, chromatic edge fringe, soft glow, large rounded pills

Transparent glass panels with blur, frosted surfaces on dark backgrounds for layered depth

Soft recessed dark: warm monochrome greys, gentle inset wells, sliding gradient pills, hairline white highlights, system sans typography

Translucent dark panels with a soft halo glow, bright-blue raised controls and a warm amber signature accent for a polished, depth-lit feel

Dark theme: cool iron-charcoal canvas with a brushed-steel primary, 8px radius, layered inset-highlight and ambient shadows. Every interactive primitive fires a Web Vibration API tap via web-haptics, so each press lands with a physical detent on supported mobile devices.

Tactile dark — recessed tracks, gradient pills with hairline borders, monochrome, SF Pro typography

Dark metrics console: nested-panel shadow hierarchy, machined gold controls, dense technical data feel

Skeuomorphic premium fintech: stitched leather surfaces and glass overlays, warm tobacco palette, deep drop shadows with inset top highlights

Clean, minimal design for developer tools with dark theme and purple accents

Precision-crafted dark UI — purple accents, multi-layer shadows, engineering aesthetic

Dark theme built on depth & surfaces principle — three-tier layered shadows, inset highlights, warm amber accent

Dark liquid-metal DS with near-black slate background, polished silver primary, pill buttons wrapped in an animated WebGL chromatic iridescent rim from the metal-fx package. 10px radius, Geist sans.

Dark liquid-metal DS with near-black slate background and silver pill surfaces, wrapped in an animated WebGL warm-gold rim from the metal-fx package. 10px radius, identical token base to silver and chromatic siblings.

Dark liquid-metal DS with near-black slate background and silver pill surfaces, wrapped in an animated WebGL cool-steel rim from the metal-fx package. 10px radius, shared neutral palette across the three metal-fx variants.

Midnight blue glass — prismatic gradient borders, dual indigo-teal accents, frosted pills

Monochrome industrial — OLED black, dot-matrix Doto font, signal-light red accent, sharp corners

Dark futuristic AI: near-black ground, neon-green primary and charts, modern grotesk

Premium dark billing SaaS: deep purple gradient backdrop, layered soft shadows for depth, raised cyan controls with a gold signature accent, sharp-ish radii

Brushed-metal control panel on near-black: a silver gradient pill (inset highlights, a 1px rim, soft drop shadow) as the active material, recessed dark tracks, raised neutral bezels, fully-rounded pills, spring-driven indicators

Dark analytics: deep cool-charcoal ground, electric-violet glow primary, vivid data surfaces

Dark landing-page style with orange (#F05023) accents, 10px radius, and precise layered shadows

Dark theme: deep blue-leaning canvas with saturated electric-blue primary, 10px radius, multi-layer color-bloom shadows. Interactive primitives play sound via the wired sound provider.

Dark theme: indigo canvas with translucent card and popover surfaces, cyan-leaning primary, 12px radius, inset-highlight shadows with cool glow. Sound provider wired into buttons.

Dark theme: warm sepia-tinted canvas with muted tan primary, tight 8px radius, flat drop shadows with no inset highlights. Sound provider wired into buttons.

Dark theme: cool charcoal canvas with high-lightness silver-steel primary, 8px radius, layered inset-highlight and ambient shadows that simulate brushed metal. Sound provider wired into buttons.

Dark near-black canvas with electric red-orange primary, sharp 6px radius, layered inset highlight shadows. Presses snap with a square-wave click.

Dark CRT-style canvas with amber-yellow text and primary, sharp 4px radius, hard offset shadows mimicking pixel drop. 8-bit square-wave beeps with detune jitter on every interaction.

Modern dark theme for developer platforms with green accents

Dark crypto wallet: deep surfaces with soft elevation, hot magenta primary, modern fintech confidence

Split-flap terminal board, flat dark tiles, Helvetica uppercase, amber primary, mechanical seam motif

Industrial monitoring console: near-black panels, neon green, amber and red signal accents, glow-based elevation, monospace data type

1987 CRT phosphor terminal: cyan text on a deep-blue screen, hairline scanlines with a corner vignette, monospace type, sharp 2px corners, and a glowing primary that reads like live phosphor.

Luxury dark UI: opaque velvet gradient surfaces, champagne-ivory accents, inset highlights with deep ambient drops

Dark fintech: near-black navy ground, high-contrast electric-yellow primary, bold money-forward cards