Astro

Astro's design system evokes a digital cosmos, combining deep, expansive dark backgrounds with vibrant, carefully placed gradients and neon-like accents. The visual identity balances technical precision with a sense of wonder, achieved through high-contrast typography against dark surfaces and circular forms paired with sharp geometric edges. Gradient overlays create an illusion of depth and energy, while a consistent approach to spacing ensures legibility and a comfortable user experience even within information-dense segments. Use Deep Space (#060913) as the default page background to establish the dark theme. Apply Interstellar Gradient Alpha (linear-gradient(83.21deg, rgb(50, 69, 255), rgb(184, 69, 237))) to hero sections and primary CTAs for high visual impact. Render all primary body and heading text in Aurora (#f2f6fa) or White Dwarf (#ffffff) for optimal contrast on dark backgrounds. Utilize 9999px border-radius for all interactive buttons and badges, creating a soft, approachable pill shape. Employ Obviously font (weights 300, 400, 700) for all display headings to leverage its distinctive custom features. Maintain an elementGap of 8px for vertical and horizontal spacing between adjacent small elements like buttons or icons. Use MDIO font specifically for technical labels and small functional text, taking advantage of its 0.4px letter spacing. Avoid using bright, high-saturation colors for large background areas; reserve them strictly for accents and gradients. Do not deviate from the 9999px radius for buttons or the 16px radius for cards; these radii are key to the brand's aesthetic. Never use generic system monospace fonts when rendering code; always use ui-monospace (or Fira Code) for consistency. Do not introduce drop shadows for card elevation; rely on Cosmic Dust (#1f232e) background color difference to indicate layers. Do not use overly complex or multi-color iconography; stick to minimal, outline, or single-fill styles using accent colors like Cosmic Sparkle Vivid or White Dwarf. Avoid excessive text justification or wide line lengths; keep body text at 16px with a 1.5 line height (24px) for readability. Do not use letter spacing on Obviously font for headings; its inherent fontFeatureSettings define its character.