---
title: "Google design system"
variant: extended
source: https://www.google.com/
captured_at: 2026-10-12
theme: light
industry: other
generator: Design DNA (https://four.wiralomi.com/style/ministryofsupply-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Google · Design System

> A quiet canvas for everyday search

**Theme:** light · **Industry:** other · **Source:** https://www.google.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Google’s homepage uses an expansive white canvas to keep attention on the centered search experience. Compact navigation and restrained controls frame the multicolor logo without competing with it.

## North star

Keep the white canvas quiet and spacious, concentrating visual attention on the centered search field and multicolor Google mark.

## Overview

The page is defined by a nearly uninterrupted white canvas, with dark text and subtle gray controls providing structure rather than decoration. Google’s multicolor logo is the central visual signature; the measured palette also includes bright hues used in small interface accents and gradient or illustrated elements, not as broad section backgrounds. Roboto carries most navigation and body copy, while Google Sans shapes the search input and logo-adjacent interface. The top navigation stays close to the edges, and the main search area is centered with generous open space above and below. A long, rounded search field anchors the hero, followed by a compact row of soft-gray suggestion buttons. The footer sits at the bottom in small, unobtrusive text. Thin borders and a faint shadow separate the search field from the page without making the interface feel layered or card-heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Dominant page background across the header, search area, and footer. |
| Interface Ink | `#16171a` | `--color-interface-ink` | neutral | Primary text and labels, including search suggestions and navigation. |
| Soft Divider | `#dadce0` | `--color-soft-divider` | neutral | Fine borders and outlines, most visibly around the search field. |
| Bright Search Blue | `#3186ff` | `--color-bright-search-blue` | accent | Bright blue accent appearing in gradient and section details, not broad page surfaces. |
| Action Blue | `#0b57d0` | `--color-action-blue` | brand | Solid blue background for the Sign in button. |
| Deep Charcoal | `#1f1f1f` | `--color-deep-charcoal` | neutral | Small dark navigation text and subtle shadow color. |
| Mist Gray | `#f3f5f6` | `--color-mist-gray` | surface | Soft-gray backgrounds for search suggestion buttons. |
| Signal Red | `#fc413d` | `--color-signal-red` | accent | Colorful gradient or section accent; not a dominant interface surface. |
| Leaf Green | `#0ebc5f` | `--color-leaf-green` | accent | Bright accent recorded in gradients or section details, not core UI surfaces. |
| Lavender Glow | `#9378ff` | `--color-lavender-glow` | accent | Gradient accent recorded outside the main search controls. |
| Candy Pink | `#f96bd6` | `--color-candy-pink` | accent | Gradient accent recorded outside the main search controls. |
| Tangerine Pop | `#ff6b2b` | `--color-tangerine-pop` | accent | Gradient accent recorded outside the main search controls. |
| Golden Spark | `#fec700` | `--color-golden-spark` | accent | Bright gradient or illustrative accent, not a large page background. |
| Sunny Yellow | `#ffdb0f` | `--color-sunny-yellow` | accent | Bright accent in gradient or decorative elements, not a core control color. |
| Fresh Lime | `#88de42` | `--color-fresh-lime` | accent | Gradient or decorative accent, not a dominant surface. |
| Teal Accent | `#2eaab2` | `--color-teal-accent` | accent | Accent recorded in gradient or section details, not a primary interface color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-surface` → `#f3f5f6` (Mist Gray) · `--color-text` → `#16171a` (Interface Ink) · `--color-border` → `#dadce0` (Soft Divider) · `--color-accent` → `#0b57d0` (Action Blue) · `--color-accent-2` → `#3186ff` (Bright Search Blue) · `--color-accent-3` → `#fc413d` (Signal Red) · `--color-on-accent` → `#ffffff` (Canvas White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#16171a` | `#ffffff` | 17.92:1 | AAA |
| `#16171a` | `#f3f5f6` | 16.39:1 | AAA |
| `#0b57d0` | `#ffffff` | 6.39:1 | AA |
| `#0b57d0` | `#f3f5f6` | 5.84:1 | AA |

### Gradients

- `conic-gradient(rgb(49, 134, 255) 34%, rgb(147, 120, 255) 37%, rgb(249, 107, 214) 39%, rgb(252, 65, 61) 41%, rgb(252, 65, 61) 48%, rgb(255, 107, 43) 50%, rgb(254, 199, 0) 52%, rgb(255, 219, 15) 56%, rgb(136, 222, 66) 58%,`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roboto | `--font-body` | webfont | 400 | Main navigation, body copy, footer links, and suggestion labels | Roboto |
| Google Sans | `--font-google-sans` | webfont | 400 | Search input text and Google-branded interface elements | Inter |
| arial | `--font-arial` | system | 400 | Small caption-style text | Arial |
| Google Sans Text | `--font-google-sans-text` | system | 500 | Sign in button label | Roboto |

- **Roboto:** Regular weight and sentence case; compact interface copy with no measured tracking.
- **Google Sans:** Regular weight; used for the primary search input, with a clean, neutral sans-serif appearance.
- **arial:** Regular weight with a measured 1.85 line height; used sparingly for caption text.
- **Google Sans Text:** Medium weight in the measured button style; sentence case and compact.

### Type scale — Major Third (ratio ≈ 1.286, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 18px | 400 | normal | 0 | — | Roboto | Small regular-weight heading style; no visible page headline. |
| body | 14px | 400 | normal | 0 | — | Roboto | Search suggestions and general interface copy. |
| caption | 13px | 400 | 1.85 | 0 | — | arial | Small footer or secondary informational text. |
| nav | 14px | 400 | normal | 0 | — | Roboto | Header links such as About, Store, Gmail, and Images. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 4, 5, 6, 8, 10, 12, 15, 16, 20, 96 px.
- Section rhythm 96px · element gap 8px · card padding — · max content width 688px.

The page uses a spacious, single-column composition rather than a visible content grid. A compact header aligns links to the left and account controls to the right. The search-focused hero sits centered in the available viewport, with a measured page max width of 688px and generous section spacing. Its input and suggestion row form a tight cluster amid extensive white space. Footer links align along the bottom edge, with secondary informational text centered. Density remains deliberately low.

## Shape & elevation

- Radius: button `9999px` · xs `24px` · pill `9999px`
- Shadow `md` (other): `rgba(31, 31, 31, 0.08) 0px 3px 10px 0px`
- Motion: standard transition `0.1s ease` on interactive elements.

The interface is mostly flat, with no prominent cards or stacked panels. A fine gray outline and faint shadow give the search field slight separation from the white canvas. Suggestion buttons use soft-gray fills and rounded pill silhouettes. Avoid adding strong shadows, heavy borders, or unnecessary layers.

## Imagery

The main graphic is the Google wordmark, centered above the search field and rendered in the familiar multicolor treatment. The measured page includes SVGs and small interface icons rather than photography, video, or large illustrations. Search controls use simple monochrome symbols, while a small emoji appears in one suggestion button. Keep imagery crisp, isolated, and secondary to the search interaction.

## Components

### Top navigation

Small dark links sit at opposite sides of the header; the right cluster includes Gmail, Images, an apps icon, and a blue Sign in pill.

### Google wordmark

Centered multicolor logo is the dominant brand graphic above the search interface.

### Search field

Wide rounded input with a thin gray border, subtle shadow, add control at left, and voice, visual search, and AI Mode actions at right.

### Suggestion buttons

Compact pill-shaped actions use #f3f5f6 backgrounds and dark labels, arranged in a centered row beneath search.

### Footer links

Small text links align to the bottom left and right, with a short AI tools message centered.

### Measured component styles

- **Primary button** (“Sign in”): background #0b57d0 · text #ffffff · radius 100px · padding 10px 12px · 500 14px Google Sans Text
- **Secondary button** (“🍌 Create images”): background #f3f5f6 · text #16171a · border 1px solid · radius 9999px · padding 10px 16px 10px 12px · 400 14px Roboto
- **Input**: transparent background · text #16171a · radius 0px · padding 14px 0px 0px 0px · 400 16px Google Sans
- **Navigation item** (“GmailImages Sign in”): transparent background · text #16171a · radius 0px · padding 0px · 400 14px Roboto

## Do

- Keep the page background white and visually quiet.
- Center the wordmark and search interface as the primary focal point.
- Use Roboto for most compact interface labels and navigation.
- Reserve solid blue for the Sign in action.
- Style secondary search actions as soft-gray pills.
- Keep footer content small and anchored near the bottom.

## Don't

- Do not fill the page with broad colored section bands.
- Do not add prominent cards or heavy elevation.
- Do not crowd the central search area with extra content.
- Do not use gradient colors as large interface backgrounds.
- Do not enlarge navigation until it competes with the search hero.
- Do not add unmeasured spacing, sizes, or radii.

## Agent prompt

Build a new page in Google’s restrained search-homepage style. Use Canvas White (#ffffff) as the dominant surface, Interface Ink (#16171a) for compact copy, and Soft Divider (#dadce0) for delicate outlines. Keep the header sparse, with links at the left and utility/account actions at the right. Center a clear primary interaction in a narrow, calm composition, surrounded by generous whitespace. Use Roboto for navigation and most labels, with a clean Google Sans-like face for prominent input text. Reserve Action Blue (#0b57d0) for the primary account action; use Mist Gray (#f3f5f6) for secondary pill controls. Make borders and shadows subtle, avoid card-heavy layouts, and treat bright palette hues as small brand accents rather than large backgrounds.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | navigation | Slim header with informational links left and account utilities right. | Direct site links, App launcher, Sign-in action | Compact text links, Blue pill button, Small icon control |
| 2 | hero | Centered wordmark, wide search field, then a row of suggestion actions. | Primary search input, Voice and visual search, Suggested actions | Multicolor logo, Outlined rounded input, Soft-gray pill buttons |
| 3 | footer | One horizontal footer row with left links, centered message, and right utility links. | Secondary navigation, Privacy and settings links | Small dark text, Edge-aligned groups |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ministryofsupply-com