
Preview image. Unlock full-res
Midnight canvas, violet beacon.
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.









