Changelog

Changelog

Preview image. Unlock full-res

Midnight command center behind frosted glass.

Industrydevtools
Palette
#08090a
#141516
#34343a
#1c1c1f
#23252a
#2d2e31
#f7f8f8
#d0d6e0
#8a8f98
#e4e5e9
#3e3e44

This design system evokes a 'midnight command center behind frosted glass,' achieving a focused, high-tech atmosphere through a dark achromatic palette and precise typographic choices. A subtly layered grayscale background creates depth without relying on heavy shadows, while crisp text and restrained accenting maintain readability. Signature anti-conventional headlines use weight 500 at larger sizes, conveying authority through subtle refinement rather than bold weight. The system relies on precise border treatments and a dominant 9999px radius for interactive elements, contrasting with 8px radius for cards, to define interaction points within the otherwise serious interface. Prioritize Inter Variable font for all UI text, ensuring readability and consistency. Use Text Primary #f7f8f8 for all main text elements and headings on dark backgrounds to maintain strong contrast. Apply Canvas Black #08090a as the dominant background color across all pages. Use 9999px border radius for all actionable buttons and interactive pill components. Employ a 1px solid border using Line Graphite #34343a for subtle visual separation of components and containers, especially on hover. Leverage Berkeley Mono for all code snippets, timestamps, or technical text, keeping its distinct letter-spacing. Apply Surface Dark #141516 for subtle elevation for backgrounds of interactive components or hover states. Avoid using multiple vibrant colors; restrict accent colors to functional elements if not present in the palette. Do not use heavy shadows for visual depth; rely on background color layering and subtle borders instead. Do not introduce new typefaces; the system is built on Inter Variable and Berkeley Mono. Avoid large hero imagery; prefer UI-focused elements or subtle graphic overlays. Do not use generic square corners; apply 8px radius to cards and containers for a softer, integrated feel. Do not use standard, bold font weights for large headlines; leverage Inter Variable weight 500-590 for a refined, modern approach. Avoid overly bright or pure white backgrounds; the system is designed for a dark interface.

More like this