Preview image. Unlock full-res
Midnight Command Console. Deep, dark surfaces punctuated by precise, glowing UI elements.
This design system evokes a 'digital void' aesthetic, combining deep, dark backgrounds with subtle luminous elements. The sparsity of color and reliance on grayscale with minimal violet accents creates an atmosphere of focused, almost melancholic, precision. Custom typography and specific rounded forms (500px pill buttons contrasting with 5px or 12px radii elsewhere) carve out a unique identity, suggesting advanced technology with a touch of crafted elegance.
Prioritize Void Black (#000000) for all main backgrounds to maintain the dark, immersive aesthetic.
Use Pure White (#ffffff) for primary text and controls, ensuring high contrast (AAA) against dark backgrounds.
Apply nbarchitekt font at weight 400 for general UI text and 700 for headings, leveraging its unique character.
Utilize 500px border radius for key interactive buttons (like 'Accept Cookies') to create a distinct pill shape.
Employ the 5px border radius for Standard Ghost Buttons to subtly differentiate their interaction level from pill buttons.
Allow a top border as a subtle interactive indicator for buttons, using rgba(255, 255, 255, 0.6) or rgba(255, 255, 255, 0.5).
Maintain minimal padding variations (e.g., 1px vertical/6px horizontal and 4px vertical/18px horizontal) across button types for a controlled, compact feel.
Avoid using bright, saturated colors extensively; limit chromatic accents to Subtle Violet (#343755) and Highlight Violet (rgba(156, 165, 255, 0.333)).
Do not introduce new font families beyond nbarchitekt, Arial, and Times to maintain typographic consistency.
Refrain from using strong shadows or heavy gradients; focus on subtle luminescence and flat design elements.
Do not deviate from the specified border radii (5px, 12px, 500px); these define the component's perceived softness or sharpness.
Avoid large, uncontained images; instead, use abstract or technical visuals that blend into dark backgrounds.
Do not overuse Pure White; reserve it for essential text and active states to preserve its visual impact.
Do not use generic system default styling for interactive elements; custom button styles are critical to the brand identity.
