Google

Google

Preview image. Unlock full-res

Midnight command center

Industryother
Palette
#16171a
#4d5156
#303134
#444746
#e8e8e8
#bfbfbf
#c2e7ff
#99c3ff
#001d35

The Google Dark theme embraces a deep, muted aesthetic, creating a 'command center' feel. Primary text is bright white, contrasted against dark charcoal and slate backgrounds, minimizing eye strain for extended use. Interaction elements are clearly defined through shape and subtle elevation, with a focused accent blue for clickable states and status indicators. The typography is direct and functional, supporting a dense yet organized information display. Prioritize Deep Midnight (#16171a) as the dominant background color for all primary canvas areas. Use Light Ghost (#e8e8e8) for all primary body text and main iconography. Apply Primary Blue (#99c3ff) for all links, active states, and interactive accents to denote functionality. Style buttons with a Dark Cement (#303134) background, Light Ghost (#e8e8e8) text, and 8px border-radius. Separate distinct content sections using a minimum vertical gap of 20px. Maintain a border-radius of 100px for large interactive elements like the search bar and primary account buttons. Use Google Sans for all prominent headings and calls to action, ensuring a weight of 400 or 500. Avoid using bright, saturated colors for backgrounds; maintain a dark, muted palette for surfaces. Do not introduce unnecessary borders or shadows; keep surfaces relatively flat with subtle elevation. Refrain from drastically changing font families or weights unless specifically outlined for a component or role. Do not deviate from the established spacing unit base of 4px; avoid arbitrary pixel values. Never use Primary Blue (#99c3ff) as a solid background fill for primary content areas. Do not use square corners on interactive elements (buttons, search bars); apply a minimum of 8px radius. Avoid making text too small or too low contrast; ensure all text is at least 13px Arial with Light Ghost (#e8e8e8) on dark backgrounds.

More like this