Google

Overview

Google's consent and privacy interface exemplifies Corporate Minimalism—a design philosophy that prioritizes regulatory clarity, accessibility, and user trust through restrained typography, ample whitespace, and a single accent color reserved exclusively for critical actions. The brand serves users navigating privacy choices with confidence, employing a calm, authoritative tone that respects the gravity of data governance. Every visual element—from the 28px headline to the 14px body text—is calibrated for legibility and comprehension, never decoration. The emotional response is one of transparency: users feel informed, not manipulated. Voice: precise, neutral, never marketing-speak. Example sentence: 'We use cookies and data, including IP addresses, to deliver and maintain Google services.'

Colors

The color system is anchored by a single, purposeful primary blue (#0b57d0) deployed exclusively on high-stakes CTAs ('Accept all', 'Reject all') and critical links. This restraint signals importance and guides user attention without visual noise. The surface stack ranges from pure white (#ffffff) for the main container to subtle grays (#f8f9fa, #f3f5f6, #ececec) for layered containers and hover states, creating depth through luminosity rather than color. On-surface text is a warm dark gray (#1f1f1f), never pure black, reducing eye strain across long-form privacy text. Secondary blues (#a3c9ff, #c2e7ff, #d3e3fd) provide container backgrounds and focus states, maintaining visual hierarchy without competing with primary. Outline tokens (#d2d2d2, #dadce0) define subtle borders around input fi

Typography

The type system employs Google Sans (weights 400, 500, 600, 700) for headlines and labels, paired with system sans-serif for body text, creating a hierarchy that balances brand identity with universal readability. The 28px headline ('Before you continue to Google') uses 600-weight at -0.02em letter-spacing to command attention without aggression; body text sits at 14px with 400-weight and 20px line-height, providing ample breathing room for dense privacy disclosures. Labels on buttons are 14px, 500-weight, 0.01em tracking, ensuring they remain scannable at small sizes. The 18px body-lg variant (used in longer explanatory paragraphs) steps up to 28px line-height, preventing cognitive overload. Apply text-shadow: none across all text to maintain clarity on white backgrounds; on dark overlays

Layout

The page uses a centered, fixed-width container (max-width: 1280px) with 24px horizontal gutters on mobile, expanding to 40px on desktop, creating a calm, focused reading experience. The grid is 12-column, with the main consent card occupying 8 columns centered (2-column margins on desktop, full-width on mobile <640px). Section spacing follows a 40px rhythm (lg token) between major blocks: header → headline → body copy → button group → footer. The card itself uses 24px internal padding (md token), with 12px (sm token) between list items and icons. Whitespace is treated as a design material: the 40px gap between the headline and first body paragraph prevents cognitive cramping, while 24px margins around buttons create breathing room. Container max-width of 1280px ensures text lines never ex

Elevation & Depth

Depth is conveyed through subtle shadows and luminosity shifts, never through color darkening. The main card uses box-shadow: 0 2px 10px rgba(0,0,0,0.2), creating a soft, barely-perceptible lift from the page background. Hover states on buttons and list items shift the background color up one step in the surface stack (e.g., surface-container → surface-container-high) rather than adding shadow, maintaining visual consistency. Focus states use a 3px inset box-shadow: 0 0 0 3px rgba(11,87,208,0.12) around interactive elements, providing clear keyboard navigation feedback without jarring visual d

Shapes

The shape system follows Geometric Precision: buttons use full-radius (9999px) for primary actions, creating a pill shape that feels approachable and modern, while secondary buttons and inputs use 8px (DEFAULT) for a more structured, form-like appearance. Cards use 8px radius, balancing softness with clarity. Dividers and subtle UI elements use 4px (sm) for micro-interactions. The rationale: full-radius buttons (40px height, 9999px radius) become visual magnets—they're the only curved elements on the page, drawing the eye to critical decisions. Input fields at 8px feel like traditional form co

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (Accept all, Reject all) use 40px height, 10px vertical / 24px horizontal padding, full-radius (9999px), and the primary blue (#0b57d0) background with white text at 14px, 500-weight. Hover state darkens to #0a45b0 (8% darker), with a 200ms transition. Focus state adds a 3px ring at rgba(11,87,208,0.12). Secondary buttons (More options) use transparent background, primary-blue text, 8px radius, and a 1px outline at #d2d2d2; on hover, the background shifts to #f3f5f6. Ghost buttons (language selector) use transparent background, primary-blue text, and no border; hover applies #f8f9fa background. All buttons use font-family: 'Google Sans', sans-serif; font-weight: 500; font-size: 14px; line-height: 18px; letter-

Do's and Don'ts

**Do**

• Do use the primary blue (#0b57d0) exclusively on high-stakes CTAs and critical links; reserve it as a visual anchor, not a decorative accent.
• Do maintain 24px (md) padding inside cards and 40px (lg) spacing between major sections to prevent cognitive overload in privacy-heavy interfaces.
• Do apply full-radius (9999px) to primary action buttons to create a visual magnet that guides user attention to critical decisions.
• Do use 14px body text with 20px line-height for privacy disclosures to ensure readability and reduce eye strain during long-form reading.
• Do implement 3px focus rings at rgba(11,87,208,0.12) on all interactive elements to meet WCAG AAA keyboard navigation standards.
• Do shift background colors on hover (e.g., surface → surface-container-high) rather than adding shadows to maintain visual consistency and clarity.

**Don't**

• Don't use multiple accent colors or gradients; the minimalist aesthetic depends on restraint—every color must earn its place through function, not decoration.
• Don't apply border-radius to text or inline elements; reserve rounded corners for buttons, cards, and input fields to maintain legibility and visual hierarchy.
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #1f1f1f (on-surface) for text and #ffffff for backgrounds to reduce eye strain.
• Don't exceed 80 characters per line in body text; use max-width: 1280px and appropriate padding to maintain optimal reading speed and comprehension.
• Don't animate non-interactive elements; transitions should be reserved for state changes (hover, focus, active) and should complete within 200ms to feel responsive.
• Don't mix font families within a single component; use 'Google Sans' for headlines/labels and system sans-serif for body text to maintain visual coherence.