Google

The Google design system is a 'dark mode first' experience with a substantial canvas of deep charcoal and highly subtle surface differentiation. Interaction elements are clearly defined through achromatic outlines and fills, while a carefully restrained use of vibrant, multi-hued gradients and blue accents provides bursts of visual interest for key actions and branding. Typography is generally clean and monochromatic, appearing as crisp white against dark surfaces, relying on weight and size for hierarchy. The overall feel is one of understated functionality and quiet efficiency. Always use Carbon Canvas (#0e0e11) as the base background for pages and main sections. Layer content using Graphite Card (#22242a) for containers and interactive fields, contrasted with Button Gray (#303134) for filled neutral buttons. Reserve Google Blue (#99c3ff) for primary interactive outlines and active text links. Apply the AI Mode Gradient for any 'AI Mode' components to maintain brand recognition. Use Primary Text (#e8e8e8) for all main text elements to ensure high readability on dark backgrounds. Maintain a comfortable density with 15px element gaps for most inline content and 20px for section spacing. Ensure all buttons use an 8px border-radius, unless specifically intended for a pill shape (9999px). Do not introduce light backgrounds; the system is strictly dark mode. Avoid excessive use of color; only use accent colors for functional highlights or branded elements. Do not deviate from the specified typography families; use Google Sans for prominent text and Arial for utility. Do not create new shadow styles; limit elevation to the single defined card shadow. Avoid custom border-radii; adhere to the 8px, 16px, 26px, 100px, or 9999px values. Do not blend text colors; avoid shades between Primary Text (#e8e8e8) and Muted Text (#9e9e9e) unless defined.