Stellar

Stellar

Preview image. Unlock full-res

Midnight canvas, violet beacon.

Industrydesign
Palette
#000000
#171718
#2c2c2e
#6a48f2
#f3f3f3
#888888
#ffffff
#e9e9e9
#dddddd
#333333

Stellar uses a high-contrast dark mode design with near-black backgrounds serving as a deep canvas for bright white typography. A single, vivid violet acts as a primary brand accent, used sparingly to highlight interactive elements and create a sense of direct action. Surfaces are typically flat and minimal, avoiding heavy shadows or decorative elements to maintain a streamlined, focused experience. Typography is utilitarian yet impactful, employing precise letter-spacing and varying weights to establish clear hierarchy against the dark backdrop. Prioritize Absolute Zero (#000000) as the primary page background for all sections to maintain a consistent dark theme. Use Ultraviolet (#6a48f2) exclusively for primary calls to action, interactive highlights, and brand elements requiring high visual impact. Apply a 6px border-radius to inputs, most cards, and some buttons for a consistent soft-edged feel. Ensure all primary headings use Spectral White (#f3f3f3) with Neue Montreal, weight 400-500, and precise letter-spacing from the type scale to stand out against the dark backgrounds. Maintain high contrast text with a minimum ratio of 17:1 for Spectral White / Lunar White text on Absolute Zero or Stellar Black backgrounds. Confine visual flair to the single Ultraviolet accent color; avoid introducing additional chromatic colors for UI elements. Utilize 'Element gap: 20px' to consistently separate major UI components horizontally and vertically, including cards and buttons. Avoid using multiple vibrant accent colors; the brand relies on a single defined Ultraviolet (#6a48f2) as its color statement. Refrain from using strong box shadows on general UI elements; surfaces are largely flat with minimal elevation. Do not deviate from the pill-shaped 50px border-radius for primary action buttons. Do not use generic system fonts; always specify 'Neue Montreal' or its substitute 'Inter' for all text elements. Avoid decorative gradients on standard UI components; save the gradient for specific atmospheric or background sections. Do not reduce the letter-spacing for body text (14-16px) as it requires positive tracking for readability on dark backgrounds. Never use dark text colors on Stellar Black (#171718) or Absolute Zero (#000000) backgrounds; rely on white and light gray tones for legibility.

More like this