Google AI

Overview

Google AI is a comprehensive platform for exploring, building, and deploying artificial intelligence responsibly. The design system embodies 'Purposeful Minimalism'—a philosophy that prioritizes clarity, accessibility, and user agency through restrained visual language and precise interaction patterns. The aesthetic is deliberately light-first, with a clean white canvas (rgb(255, 255, 255)) punctuated by a signature Google Blue primary accent (rgb(26, 115, 232)) that guides users toward key actions and discoveries. The interface evokes trust and transparency: every element earns its place, every color serves a function, and every interaction feels intentional rather than decorative.

The brand voice is informative yet approachable, technical yet human. Google AI speaks with authority grounded in research, but never talks down to its audience. Vocabulary is precise—'responsible AI', 'helpful tools', 'complex challenges'—avoiding hype or marketing flourish. The tone is calm and confident, as if explaining a complex idea to a peer. Example: 'Discover how AI can be helpful, from work to everyday life' conveys capability without overselling.

Colors

The color system is built on a light, neutral foundation with strategic accent deployment. Surface colors range from pure white (#ffffff) at the base to subtle grays (#f8f9fc, #eff2f7, #e1e6ec) for container hierarchy, creating visual depth through luminance rather than saturation. The on-surface text color is a near-black (#121317) that maintains 16:1 contrast ratio against white, ensuring accessibility across all text sizes. Primary (rgb(26, 115, 232)) is Google's signature blue, reserved exclusively for interactive elements: call-to-action buttons, links, focus states, and active indicators. It appears in two contexts: solid on white backgrounds (button-primary) and as a tinted container (primary-container: #dcf1ff) for secondary emphasis. Secondary (rgb(10, 10, 10)) is a true black use

Typography

The type system centers on Google Sans Flex, a variable font family that scales gracefully from 12px labels to 72px display headlines. The hierarchy is built on weight and size relationships: display (72px, weight 450) anchors hero sections with authority; headline-lg (48px, weight 500) introduces major sections; body-md (16px, weight 400) is the default reading size, set to 24px line-height for comfortable scanning. Letter-spacing is minimal and negative at large sizes (display: -0.02em) to tighten visual impact, while small labels receive positive tracking (label-sm: 0.02em) for clarity. Font weights are deliberately restrained: 400 for body text, 500 for labels and headlines, 450 for display (a mid-weight that avoids heaviness). All interactive text uses label-md (14px, weight 500, lett

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, allowing content to breathe on ultra-wide displays while maintaining focus on narrower viewports. The gutter spacing is 24px (md spacing token), applied consistently between grid columns and as the default margin around page edges. Section separation uses lg spacing (40px) for major content blocks, creating a clear rhythm that guides users through the page hierarchy. The hero section (featuring 'Explore Gemini') uses the full container width with centered content, while product cards below employ a responsive grid that collapses from 5 columns on desktop to 2 columns on tablet and 1 on mobile. White-space is treated as a design material: the surface-container backgrounds (#f8f9fc) provide subtle visual groupi

Elevation & Depth

Depth is conveyed through subtle shadow layering and background color shifts rather than dramatic drop-shadows. The elevation system defines three levels: Level 1 (Base) uses no shadow, relying on outline-variant borders (rgba(33, 34, 38, 0.06)) for definition. Level 2 (Standard Card) applies elevation.md: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft lift that separates cards from the surface-container background. Level 3 (Modals/Overlays) uses elevation.lg: 0 2px 3px 0 rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15), a two-layer shadow that conveys maximum prominence. Interacti

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften hard edges without introducing organic or playful qualities. Buttons and chips use full rounding (border-radius: 9999px), creating pill-shaped affordances that feel modern and touch-friendly. Cards and containers use lg rounding (24px), a moderate radius that balances approachability with formality. Input fields and smaller interactive elements use DEFAULT rounding (8px), a subtle curve that maintains visual hierarchy without competing with buttons. The 'NEW' badges use sm rounding (4px), a minimal r

Components

Action Elements Buttons are the primary call-to-action mechanism. button-primary uses a solid primary blue background (rgb(26, 115, 232)) with white text, full rounding (9999px), and padding of 12px vertical × 24px horizontal, resulting in a 48px minimum height for touch accessibility. On hover, the background darkens to #185abc and elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) is applied over a 200ms transition. On focus (keyboard navigation), a 2px primary-colored outline appears (box-shadow: 0 0 0 2px #1a73e8). button-secondary uses a transparent background with a 1px outline-variant border and primary text color, allowing secondary actions to coexist without visual competition. Disabled buttons use surface-container (#f8f9fc) background with 20% opacity text (rgba(33, 34, 38,

Do's and Don'ts

**Do**

• Do use primary blue (#1a73e8) exclusively for interactive elements—buttons, links, focus states—never for decorative backgrounds or non-interactive text.
• Do apply full rounding (9999px) to buttons and chips to signal high interactivity; reserve moderate rounding (24px) for cards and containers.
• Do maintain 16:1 contrast ratio between on-surface text (#121317) and surface backgrounds (#ffffff) for WCAG AAA compliance across all text sizes.
• Do use elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) on hover states to provide tactile feedback; transition over 200ms for smooth visual feedback.
• Do apply label-md typography (14px, weight 500, letter-spacing 0.01em) to all button and link text for consistent scanability.
• Do use surface-container backgrounds (#f8f9fc) and outline-variant borders (rgba(33, 34, 38, 0.06)) to create visual grouping without introducing new colors.

**Don't**

• Don't use secondary colors (black #0a0a0a or teal #005143) for primary CTAs; reserve primary blue for the most important interactive elements.
• Don't apply shadows darker than rgba(60, 64, 67, 0.15) or blur-radius greater than 10px; the aesthetic is refined and subtle, not dramatic.
• Don't use border-radius values between 25px and 50% (e.g., 30px, 40px, 50%); stick to the defined scale (4px, 8px, 16px, 24px, 36px, 9999px) for visual consistency.
• Don't set line-height below 1.33em for headlines or below 1.5em for body text; generous line-height supports reading comfort and accessibility.
• Don't apply text-shadow or text-stroke to body text; reserve these techniques for small labels over busy product imagery only.
• Don't use more than three font weights in a single view; stick to 400 (body), 500 (labels/headlines), and 450 (display) to maintain typographic restraint.