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

# Google — Holiday 100 · Design System

> A quiet editorial frame for the season’s most-searched gifts.

**Theme:** light · **Industry:** ecommerce · **Source:** https://www.google.com/shopping/holiday100/?udm=28 · **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._

A Google Shopping gift guide pairs a restrained editorial headline with a long, image-led sequence of curated product categories. Soft seasonal card colours and compact shopping controls keep the experience approachable without competing with product imagery.

## North star

Keep the canvas quiet and let editorial typography, curated product imagery and selective trend-colour cards guide the shopping journey.

## Overview

The page uses Gallery White (#ffffff) as a nearly continuous canvas, giving the oversized, high-contrast Crimson Pro title and vivid gift photography room to lead. Google Sans handles category headings, card copy and shopping controls in a clean, approachable voice; the display serif adds an editorial note without making the catalog feel formal. Product sections repeat a clear rhythm: a large lifestyle image, small product tiles and occasional trend cards in muted blue, green, cream or red. Those coloured surfaces are accents rather than broad page bands. The layout stays centered and generously spaced, with rounded media and cards softening the otherwise flat presentation. Product photography supplies most of the page’s visual variety, so the brand palette remains restrained and the shopping interface stays legible.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas and header background; keeps the long shopping guide bright and open. |
| Graphite Ink | `#16171a` | `--color-graphite-ink` | neutral | Main heading and body text, including the dark editorial title and navigation labels. |
| Soft Divider | `#d6d6d6` | `--color-soft-divider` | semantic | Thin navigation and interface hairlines; not a prominent section outline. |
| Powder Blue | `#d2e3fc` | `--color-powder-blue` | surface | Trend-card background in home and style sections, paired with deep blue copy. |
| Midnight Blue | `#113979` | `--color-midnight-blue` | accent | Inverse trend-card surface with pale blue text; a strong, selective editorial block. |
| Holiday Red | `#980b0b` | `--color-holiday-red` | accent | Trend-card surface in gift categories, paired with light serif copy. |
| Forest Text | `#073618` | `--color-forest-text` | semantic | Muted text treatment associated with green trend-card content. |
| Soft Sage | `#a8dab5` | `--color-soft-sage` | surface | Green trend-card background, notably in travel and fitness category storytelling. |
| Cloud Gray | `#f4f6f7` | `--color-cloud-gray` | surface | Pale neutral card surface, including the AI shopping inspiration feature. |
| Google Blue | `#0b57d0` | `--color-google-blue` | brand | Sign-in button background in the Google Shopping header. |
| Charcoal Copy | `#333333` | `--color-charcoal-copy` | neutral | Secondary dark heading and text tone, distinct from the primary near-black ink. |
| Ice Tint | `#e8f0fe` | `--color-ice-tint` | surface | Pale blue supporting card tone; use as a limited in-card accent. |
| Gift Cream | `#ffedb8` | `--color-gift-cream` | surface | Warm yellow trend-card surface for seasonal gift messaging. |
| Interface Gray | `#dadce0` | `--color-interface-gray` | semantic | Minor interface border colour; less visible than the measured navigation hairline. |
| Focus Violet | `#681da8` | `--color-focus-violet` | semantic | Skip-to-content navigation focus treatment, not a general page accent. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f6f7` (Cloud Gray) · `--color-surface-2` → `#d2e3fc` (Powder Blue) · `--color-surface-3` → `#113979` (Midnight Blue) · `--color-surface-4` → `#a8dab5` (Soft Sage) · `--color-text` → `#16171a` (Graphite Ink) · `--color-text-muted` → `#d2e3fc` (Powder Blue) · `--color-text-subtle` → `#073618` (Forest Text) · `--color-border` → `#d6d6d6` (Soft Divider) · `--color-accent` → `#113979` (Midnight Blue) · `--color-accent-2` → `#980b0b` (Holiday Red) · `--color-accent-3` → `#a8dab5` (Soft Sage)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#16171a` | `#ffffff` | 17.92:1 | AAA |
| `#16171a` | `#f4f6f7` | 16.53:1 | AAA |
| `#16171a` | `#d2e3fc` | 13.77:1 | AAA |
| `#16171a` | `#113979` | 1.61:1 | fail |
| `#d2e3fc` | `#ffffff` | 1.3:1 | fail |
| `#d2e3fc` | `#f4f6f7` | 1.2:1 | fail |
| `#d2e3fc` | `#113979` | 8.56:1 | AAA |
| `#073618` | `#ffffff` | 13.55:1 | AAA |
| `#073618` | `#f4f6f7` | 12.5:1 | AAA |
| `#073618` | `#d2e3fc` | 10.41:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Google Sans | `--font-body` | webfont | 500, 400, 200 | Category headings, card copy, body text, controls and shopping UI. | Google Sans |
| Crimson Pro | `--font-display` | webfont | 200, 400 | Oversized Holiday 100 title and editorial section headings. | Cormorant Garamond |
| Roboto | `--font-roboto` | webfont | 400, 700 | Header navigation and utility labels. | Roboto |

- **Google Sans:** Use measured weights from light to medium; keep interface copy compact, sentence case and easy to scan.
- **Crimson Pro:** Light serif display styling, tight negative tracking and natural mixed-case phrasing; italicize select words in category headings.
- **Roboto:** Regular-weight, compact navigation text; reserve for utility UI rather than editorial headings.

### Type scale — Custom (ratio ≈ 1.735, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 220px | 400 | 0.91 | -0.04em | — | Crimson Pro | Oversized Holiday 100 campaign title. |
| h1 | 80px | 200 | 1 | -0.04em | — | Crimson Pro | Primary editorial page heading. |
| h2 | 48px | 200 | 1 | -0.02em | — | Crimson Pro | Gift-category section headings. |
| h3 | 30px | 200 | 1.2 | 0 | — | Google Sans | Feature and supporting section headings. |
| h4 | 24px | 400 | 1.25 | 0 | — | Google Sans | Card or component subheadings. |
| body | 14px | 500 | 1.14 | 0 | — | Google Sans | Product descriptions and trend-card copy. |
| nav | 14px | 400 | 1.43 | 0 | — | Roboto | Header utilities and navigation labels. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 1, 4, 6, 8, 12, 14, 16, 20, 24, 38, 40, 60 px.
- Section rhythm 60px · element gap 8px · card padding 24px · max content width 1096px.

A centered content column sits within the measured 1096px maximum width, beginning with a compact Google Shopping header and a spacious campaign hero. Category sections follow in a consistent vertical sequence, mixing a large lead image, smaller product tiles and paired trend cards. Use the measured comfortable density and generous section gaps to distinguish categories; align headings and product grids to the same content edge. The catalog is image-heavy but organized into repeatable modules, not a dense marketplace grid.

## Shape & elevation

- Radius: button `20px` · card `20px` · media `20px` · nav `2px` · xs `2px` · sm `20px` · pill `9999px`
- Shadow `sm` (nav): `rgba(60, 64, 67, 0.25) 0px 2px 8px 0px`
- Shadow `sm-2` (other): `rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 4px 8px 0px`
- Motion: standard transition `0.5s ease` on interactive elements.

The page is predominantly flat: white canvas, open spacing and minimal visible borders. Rounded cards and media create grouping without heavy shadows. Keep elevation subtle and limited to the header search/navigation treatment; use thin hairlines for utility separation rather than outlining every product tile.

## Imagery

Lifestyle product photography anchors the hero and each category, with smaller isolated product images and concise captions filling out the selection. Images are framed in rounded media blocks and retain their natural photographic colour; avoid imposing a heavy tint or decorative overlay. A visual AI shopping feature appears as a distinct promotional panel, while product visuals remain the main source of seasonal colour.

## Components

### Shopping header

Compact Google Shopping navigation with menu and brand at left, rounded search field across the center, and app grid plus blue Sign in control at right.

### Campaign hero

Centered oversized Crimson Pro title, short Google Trends subtitle and a broad rounded lifestyle photograph.

### Category navigation

Horizontal row of image-led gift categories with concise labels and a subtle next control.

### AI inspiration panel

Pale neutral promotional surface combining serif heading, short supporting copy, a Try it now CTA and product-preview imagery.

### Gift category section

Editorial category heading and description followed by a large lead product image, smaller product tiles and captions.

### Trend card

Rounded coloured card with a small TRENDING label and short serif insight; use the measured blue, red, sage or cream surfaces.

### Collection CTA

Compact dark rounded button aligned with category headings to open the full collection.

### Measured component styles

- **Primary button** (“Sign in”): background #0b57d0 · text #ffffff · radius 100px · padding 10px 12px · 500 14px Google Sans Text
- **Secondary button** (“Try it now”): background #1f1f1f · text #ffffff · radius 20px · padding 14px 20px · 500 14px Google Sans
- **Link** (“Apparel”): transparent background · text #1a0dab · radius 0px · padding 0px · 400 14px Google Sans
- **Input**: transparent background · text #16171a · radius 0px · padding 11px 0px 3px 0px · 400 16px Google Sans
- **Card** (“TRENDING The next level of play is here.”): background #d2e3fc · text #113979 · radius 20px · padding 24px · 400 14px Google Sans
- **Navigation item** (“Sign in”): transparent background · text #16171a · radius 0px · padding 0px · 400 14px Roboto

## Do

- Use white as the dominant page canvas.
- Set campaign and category headlines in an editorial serif.
- Repeat a clear image-and-product rhythm for each category.
- Keep coloured trend cards selective and category-specific.
- Give product photography room to carry the visual story.
- Use compact sans-serif controls and readable captions.

## Don't

- Do not turn the page into a dense marketplace grid.
- Do not use trend colours as full-page background bands.
- Do not add heavy shadows or outlines to every tile.
- Do not let utility navigation compete with the campaign title.
- Do not apply decorative filters over product photography.
- Do not replace editorial serif headings with generic bold sans.

## Agent prompt

Build a new Google Shopping-style editorial guide on a Gallery White (#ffffff) canvas. Keep the header compact and functional, then center a large Crimson Pro-style campaign headline above a short Google Sans subtitle and a broad rounded lifestyle image. Organize content into repeatable gift-category sections with serif headings, concise descriptions, one prominent product image, smaller captioned product tiles and occasional trend cards. Use Powder Blue (#d2e3fc), Midnight Blue (#113979), Holiday Red (#980b0b), or Soft Sage (#a8dab5) sparingly for those cards, with legible contrasting text. Use Graphite Ink (#16171a) for primary text and Google Blue (#0b57d0) only for sign-in. Preserve generous whitespace, aligned content edges, rounded media and restrained elevation; prioritize authentic product photography over decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | product-grid | A centered hero and lead image flow into category navigation, an AI inspiration panel and repeated editorial product grids with trend cards. | browse by category, shop full collection, AI shopping inspiration | oversized serif hero, rounded lifestyle media, captioned product tiles, coloured trend cards |

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