PUBLIC REFERENCE
Scale
Midnight Command Center: An expanse of polished dark surfaces, illuminated by precise white text and the occasional shimmer of an iridescent, almost holographic, light.
Colors
#000000 Primary page background, card backgrounds, creating a high-contrast canvas.
#ffffff Primary text color for headlines and body text, accentuating information against the dark background. Also used for borders on interactive elements.
#a1a1a1 Secondary text for less prominent information, active navigation links, and subtle borders.
#f4f0ff Subtle, near-white text for secondary links and body text in less prominent sections. This provides a very soft contrast against black.
#020202 Subtle shadows and background for elements that need a touch more depth than pure black.
#e5e5e5 Text and icon color, for details that require slightly less prominence than Ghost White.
#bbdef2 Backgrounds of geometric abstract shapes, providing a luminous, futuristic visual accent.
#d1aad7 Used for the lighter parts of the iridescent gradient, giving it a soft, ethereal quality.
#ff6467 Indicator or accent background, used sparingly to draw attention.
#ffd600 Indicator or accent background, used sparingly for specific highlight.
#72ce7b Indicator or accent background, used sparingly for specific highlight.
#9a9a9a Used for highly stylized, abstract background elements, providing a subtle shimmer that hints at dimension and data flow.
Do
- Prioritize Deep Space (#000000) for backgrounds and Ghost White (#ffffff) for primary text to maintain high contrast and sophistication.
- Use aeonik font with weight 300 for all large headlines (48px and above) to achieve an understated, authoritative tone.
- Apply Iron Slate (#a1a1a1) for secondary text and active navigation items to provide subtle differentiation without losing readability.
- Employ the Iridescent Glow (#bbdef2) and Spectrum Flare (#d1aad7) gradient only for abstract geometric elements or distinctive brand accents, not for interactive components.
- Maintain generous vertical spacing between sections, using multiples of 32px to provide breathing room on the dark canvas.
- Use 8px border radius as the default for most containers and images, with 16px for larger interactive links, and 4px for smaller list items.
Don't
- Do not introduce highly saturated colors for general UI elements; reserve them for specific accent indicators if truly necessary.
- Avoid heavy drop shadows; the design relies on subtle background variations and text contrast for depth, with minimal inset shadows.
- Do not use aeonik font for body text; reserve it for headlines and maintain its distinctive impact.
- Avoid excessive use of Halo Pale (#f4f0ff) for primary content; its low contrast is intended for secondary or subtle elements.
- Do not use generic system borders; interactive elements should feature white or subtle gray borders for consistency.
- Avoid dense information blocks; use ample White Space, especially on dark backgrounds, to enhance clarity and visual weight.