Preview image. Unlock full-res
Shadowless Dark Operations Grid. The visual style is a dark, grid-based interface, where information is displayed with stark clarity against a deep, textured background.
This design system evokes a clandestine operations center, precise and controlled. Its strength is in the relentless darkness of its background, which provides a stark, high-contrast canvas for sparse, focused information. The near-achromatic type, primarily in off-white, and a single vibrant orange accent, guide the eye with surgical precision. The absence of traditional shadows, replaced by subtle changes in background lightness and bordering, helps maintain the crisp, flat, and technically-oriented aesthetic.
Use ABC Monument Grotesk Unlicensed Trial for all text and UI elements, prioritizing weights 300-500. Substitute with Inter if custom font is unavailable.
Maintain a predominantly dark theme with #000000 (Midnight Grid) and #0e0c0c (Slate Night) as primary background and text colors respectively.
Apply #f6511d (Blaze Orange) strictly as the accent color for interactive states, key calls to action, and critical indicators, and avoid mixing it with other chromatic colors.
Enforce 0px border-radius for all primary UI elements like buttons, cards, and input fields to maintain a sharp, technical aesthetic.
Structure content using subtle borders like rgba(250, 250, 249, 0.15) and #e5e7eb, rather than drop shadows, for visual separation.
Utilize letter-spacing of -0.0350em for large display text (e.g., 42px) to create a denser, more integrated headline appearance.
Use ui-monospace for small, technical text at 10px with 0.0500em letter-spacing for specific data or label displays.
Do not introduce drop shadows for elevation; use background color changes or subtle borders instead.
Avoid using a vibrant color palette beyond #f6511d (Blaze Orange) to maintain the focused and precise visual identity.
Do not use rounded corners larger than 3px; prefer 0px or small radii for specific components like the header button.
Do not center-align body text; maintain left-alignment for readability in extended content blocks.
Avoid using bright, saturated background colors; stick to the dark neutral palette.
Do not deviate from the established typography for headlines and body text; maintain the strict hierarchy and letter spacing.
Do not apply padding less than 7px for interactive elements; ensure sufficient touch/click targets.
