Superwhisper

Superwhisper

Preview image. Unlock full-res

Celestial Command Center: A dark, gradient-infused UI where sharp, functional elements glow with purpose against an expansive, cosmic void.

Industryai
Palette
#000000
#030719
#1C1D1F
#E5E7EB
#001B33
#FFFFFF
#333333
#666666
#70757C
#999999
#CCCCCC
#0088FF

This design system evokes a 'celestial command center' feel, achieved through deep, gradient-rich dark backgrounds and high-contrast white typography. Vivid, almost neon-like accent colors emerge sparingly against the darkness, providing critical points of focus and interactivity. The primary visual tension arises from the interplay of vast, ethereal gradients and sharp, contained UI elements with precise 9px rounded corners and optional pill shapes for actions. Prioritize Midnight Eclipse (#000000) for all page backgrounds when not using gradients, to maintain the dark theme. Use Frost (#FFFFFF) for all primary text on dark backgrounds and Ghostly Gray (#E5E7EB) for secondary text and borders. Apply 9px border-radius as the default for most UI elements, especially interactive components and containers, and 9999px for all pill-shaped buttons and tags. Utilize Electric Blue (#0088FF) as the primary accent color for all interactive states, active indicators, and prominent CTAs. Maintain 16px as the default elementGap between closely related UI components and 32px for sectionGap between distinct content blocks. Employ the Inter font family for all textual content, leveraging its range of weights from 300 to 700 to establish clear typographic hierarchy. When incorporating vivid gradients like Nebula Horizon, ensure text overlay is Frost (#FFFFFF) for optimal contrast and readability. Avoid using Electric Blue (#0088FF) as a primary background color; reserve it strictly for accents and interactive elements. Do not introduce sharp corners on interactive elements; maintain 9px or 9999px radius for consistency. Refrain from using light backgrounds or Frost (#FFFFFF) as the default page canvas; it should only appear on purposefully elevated cards or specific content sections. Do not deviate from the Inter font family for headings and body text, unless for decorative elements using 'Flow Circular' as specified. Avoid generic, full-bleed images without context; imagery must be contained or integrate seamlessly into the gradient backgrounds. Do not use subtle shadows on dark backgrounds; if elevation needs a shadow, ensure it's a prominent, dark rgba(0, 0, 0, 0.25) or an inset white shadow to define edges.

More like this