Preview image. Unlock full-res
Deep space operations center: dark, high-contrast UI with a single vibrant accent for critical actions, like indicator lights on a mission control panel.
Apollo's design system evokes a 'deep space operations center' feel, using a dark, desaturated palette with a single vibrant accent. The dominant near-black background and off-white text establish a high-contrast, technical atmosphere. Subtle use of a vivid orange for primary calls to action creates focused points of visual energy, preventing the dark interface from feeling monotonous. Sharp edges combined with deep, pill-shaped buttons introduce a tension between precision and approachability, reinforcing an infrastructure brand that is both powerful and user-friendly. Prioritize Midnight Ink (#15252d) for prominent dark sections and Comet Dust (#f8f8f8) for text, ensuring high contrast (14.8:1) for readability. Use Fusion Orange (#e75e15) exclusively for primary calls-to-action and active states to maintain strong visual hierarchy and guide user attention. Apply a 999px border-radius to all buttons for a distinctive pill shape, contrasting with the 24px radius used for content cards. Maintain a clear content hierarchy using the Inter typeface, reserving weight 700 for display headlines and weight 400 for body text. Utilize 48px vertical spacing between major sections and 16px for internal card padding to establish comfortable density. Employ the Nebula Gray (#e2e8f0) color for all border elements to imply structure without strong visual interruption. Do not introduce additional vibrant colors; restrict accent colors to Fusion Orange (#e75e15) to preserve visual focus. Avoid using harsh shadows for elevation; rely on background color changes for surface differentiation if needed, or subtle borders. Do not deviate from the 999px border-radius for buttons or 24px for cards; these are signature shape identifiers. Refrain from using monospace fonts for general body text; Fira Code (500, 18px, 0.0800em letter spacing) is strictly for code examples. Do not use generic gray values; always refer to defined neutrals like Midnight Ink (#15252d), Nebula Gray (#e2e8f0), or Crater Gray (#9fb2bc). Avoid excessive use of text treatments like underlines or italics for emphasis; hierarchy is primarily managed through font size and weight.
