Fey

This design system evokes a sense of focused intelligence, like a deep-space observatory on a moonless night. Its near-black backgrounds provide a canvas for crisp white text and subtle, precise data visualizations. The deliberate restraint in chromatic color, limited to a single vivid blue for interaction and a warm orange for highlighting, creates a high-contrast experience where functionality takes aesthetic precedence. Fine typographical details and varying shades of dark gray give depth to the UI elements, preventing visual fatigue inherent in purely flat dark interfaces. Use Midnight Ink (#0b0b0b) for primary page backgrounds to establish the dark theme. Apply Calibre font family with weight 400 for body text and 600 for prominent subheadings. Employ Cosmic Blue (#479ffa) exclusively for interactive elements and active states. Utilize Solar Flare (#ffa16c) for decorative headings and key value highlights. Maintain a clear visual hierarchy by differentiating surfaces with Obsidian Deep (#131313) for elevated elements on Midnight Ink (#0b0b0b) backgrounds. Apply 99px border radius for all primary calls-to-action buttons for a distinct pill shape. Space elements using multiples of 4px and 8px, reserving larger increments for section gaps (900-1100px) and card padding (18px vertical, 20px horizontal). Do not use chromatic colors other than Cosmic Blue (#479ffa) or Solar Flare (#ffa16c) for branding or interactive elements. Avoid using drop shadows on elements that are not meant to signify elevation, like primary page backgrounds. Do not use border radii smaller than 6px for interactive elements; for cards and larger containers, use 16px. Never lighten text color for emphasis in a dark theme; rely on Pure White (#ffffff) for primary text and Light Smoke (#e6e6e6) or Slate Text (#868f97) for secondary/tertiary. Avoid dense information blocks without sufficient elementGap (min 4px, avg 8-20px) to maintain legibility.