FlutterFlow

This design system evokes a 'deep space command center' atmosphere, achieved through a predominantly dark mode with complex, subtle gradients creating depth and energy. The primary visual tension arises from the interplay of smooth, expansive dark surfaces and bursts of vivid, luminous violet. Type is restrained, leveraging specific letter-spacing for refined legibility, while rounded corners on interactive elements provide a friendly counterpoint to the overall high-tech mood. Use Midnight Ink (#060311) for primary dark backgrounds and Slate Deep (#161320) for secondary elevated dark surfaces to create depth. Apply White Star (#ffffff) consistently for primary text and critical UI elements against dark backgrounds. Reserve Deep Violet (#5800fd) for interactive elements, links, and active states to highlight interaction points. Ensure large headlines (display-xl and display-lg) use Urbanist with the specified negative letter-spacing values to maintain a refined visual impact. Use a max-width on content areas to prevent stretching, maintaining readability and aesthetic balance. Round all interactive button elements with a 1440px border-radius to achieve a consistent pill shape and friendly interaction target. Do not use generic gray tones for interactive elements; all actionable items should leverage Deep Violet (#5800fd) or White Star (#ffffff) for strong visual cues. Avoid using box-shadows on cards unless explicitly for the 'Shadowed Card' variant; rely on background color changes for surface distinction. Do not deviate from the specified type scale and letter-spacing for headlines; these choices define the distinctive typographic voice. Do not introduce highly saturated colors outside the brand's violet palette, as they will clash with the established atmosphere. Avoid small, square button shapes; instead, use either the Text Only Button or the Pill Button variants for consistency.