
Preview image. Unlock full-res
Midnight Grid Console — where precision meets a soft amber glow.
This design system evokes a sense of ordered complexity within a high-contrast dark environment, much like an advanced control panel. The muted black and deep charcoal surfaces provide a sophisticated backdrop, against which subtle geometric patterns and a restrained, precise typography establish a serious, tech-forward identity. Strategic use of a single amber accent color guides the eye to interactive elements, while the generous application of rounded corners on buttons softens the otherwise sharp, grid-like aesthetic, making the technical feel approachable.
Prioritize Background Charcoal (#0C0A09) for primary dark surfaces and Surface Dark Gray (#1C1917) for elevated content containers.
Use Amber Glow (#CAB16A) exclusively for primary calls to action, active states, and critical highlights to maintain its impact.
Employ Whyte or Whyte Inktrap for all display and large headlines, utilizing their tight letter spacing (-0.0560em, -0.0250em) for a condensed, impactful look.
Apply 9999px border-radius for all interactive buttons and pill-shaped elements to create a consistent soft touch amidst sharper elements.
Maintain generous vertical spacing between content sections, using 24px to 40px padding to provide breathing room on the dark canvas.
Layer cards atop Background Charcoal using Surface Dark Gray and the subtle shadow rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px.
Do not introduce new primary accent colors; Amber Glow (#CAB16A) is the singular visual indicator for key interactions.
Avoid standard rectangular shapes for buttons; either use 0px radius for a sharp, embedded look or 9999px for pill forms.
Do not apply strong, opaque shadows; leverage subtle, low-opacity dark shadows (rgba(0, 0, 0, 0.1)) to create depth without visual weight.
Refrain from using heavily saturated images or illustrations; opt for abstract, geometric shapes or desaturated imagery that complements the dark theme.
Do not use generic system fonts; always map to CircularXX for body text and Whyte for headlines to preserve brand distinctiveness.
Avoid highly expressive or decorative typography for body copy, stick to the clear and professional feel of CircularXX.









