Google

Google

Preview image. Unlock full-res

anthracite quietude with luminous blue

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

Google's dark-mode visual system emphasizes clarity and quiet efficiency. It features a deep anthracite canvas, with softened, rounded search surfaces and interaction elements that appear subtly elevated. Typography is direct and legible, maintaining a balanced hierarchy. The system primarily uses monochromatic tones, punctuated by a soft, luminous blue for active states and critical information, adding a gentle glow rather than stark contrast. Maintain a predominantly dark theme using 'Twilight Canvas' (#16171a) for page backgrounds and 'Charcoal Surface' (#303134) for interactive elements. Use '#e8e8e8' (Platinum Text) for primary text and headings to ensure high contrast and readability. Apply 'Azure Glow' (#99c3ff) exclusively for interactive elements like links and outlined button borders to signify interactivity. Prioritize smooth, organic shapes with 26px or 100px border-radii for containers like search inputs, and 8px for standard buttons. Ensure generous but comfortable spacing, with an approximate 15px element gap to maintain visual breathing room. Use Google Sans for prominent UI labels and Google Sans Text for navigation, reserving Arial for body copy and detailed text. Elevate interactive states subtly; use 'Ghost Gray' (#5f6368) on hover for a gentle visual feedback. Avoid using harsh, saturated primary colors for large background areas; color should primarily be used for accents and states. Do not introduce sharp, angular corners; maintain the softened, rounded aesthetic across all components. Refrain from heavy drop shadows or strong borders; components should feel integrated and subtly layered. Do not deviate from the established typefaces; Arial is for body text, not headlines. Avoid dense, information-packed layouts without sufficient padding and element spacing. Do not use 'Platinum Text' (#e8e8e8) for unclickable, decorative elements; reserve it for essential information and primary interactions. Never use the browser default link color #0000ee; all links should use 'Azure Glow' (#99c3ff).

More like this