Google

# Google — Style Reference
> Deep charcoal, subtle glow

**Theme:** dark

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.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Carbon Canvas | `#0e0e11` | `--color-carbon-canvas` | Primary page background, base surface for all content |
| Steel Surface | `#16171a` | `--color-steel-surface` | Slightly lighter surface for secondary components like cards or elevated sections, creating a subtle layer distinction |
| Graphite Card | `#22242a` | `--color-graphite-card` | Background for cards and interactive elements, providing a clear boundary against the darker canvas |
| Button Gray | `#303134` | `--color-button-gray` | Background for neutral filled buttons, offering a muted interactive element |
| Ghost Outline | `#4d5156` | `--color-ghost-outline` | Mid-tone panel surface for subdued dark UI layers and secondary containers. Do not promote it to the primary CTA color |
| Subtle Ash | `#444746` | `--color-subtle-ash` | Subtle borders and dividers, providing minimal separation without drawing attention |
| Primary Text | `#e8e8e8` | `--color-primary-text` | Main body text, headings, and icon fills, offering high contrast against dark backgrounds |
| Muted Text | `#9e9e9e` | `--color-muted-text` | Secondary text, descriptive labels, and inactive states, less prominent than primary text |
| Google Blue | `#99c3ff` | `--color-google-blue` | Outlined button borders, active link text, and highlights. This blue signifies interactive elements |
| AI Blue | `#a8c7fa` | `--color-ai-blue` | Borders for AI-related components, distinguishing specific features |
| AI Mode Gradient | `conic-gradient(rgba(49, 134, 255, 0) 0deg, rgb(52, 168, 83) 43deg, rgb(255, 211, 20) 65deg, rgb(255, 70, 65) 105deg, rgb(49, 134, 255) 144deg, rgb(49, 134, 255) 180deg, rgba(49, 134, 255, 0) 324deg, rgba(49, 134, 255, 0) 360deg)` | `--color-ai-mode-gradient` | Supporting palette color for small decorative accents when the core palette needs contrast. |
| Blue Header Accent | `#c2e7ff` | `--color-blue-header-accent` | Blue wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color |

## Tokens — Typography

### Google Sans — Used for main interactive elements like buttons, prominent body text, and some headings. Its clean aesthetic maintains readability on dark backgrounds. · `--font-google-sans`
- **Substitute:** Roboto, sans-serif
- **Weights:** 400, 500
- **Sizes:** 14px, 16px, 28px
- **Line height:** 1.20, 1.29, 1.38, 1.43
- **Letter spacing:** 0.0140em
- **Role:** Used for main interactive elements like buttons, prominent body text, and some headings. Its clean aesthetic maintains readability on dark backgrounds.

### Google Sans Text — Specifically used for navigation items, providing a distinct textual style for top-level interactions. · `--font-google-sans-text`
- **Substitute:** Roboto, sans-serif
- **Weights:** 500
- **Sizes:** 14px
- **Line height:** 1.29
- **Letter spacing:** normal
- **Role:** Specifically used for navigation items, providing a distinct textual style for top-level interactions.

### Arial — General purpose text for links, secondary information, and small body content. Its system-level availability ensures broad compatibility. · `--font-arial`
- **Substitute:** Helvetica Neue, sans-serif
- **Weights:** 400
- **Sizes:** 12px, 13px, 14px
- **Line height:** 1.20, 1.43, 1.85, 2.15
- **Letter spacing:** 0.0140em
- **Role:** General purpose text for links, secondary information, and small body content. Its system-level availability ensures broad compatibility.

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.43 | 0.014px | `--text-caption` |
| body-lg | 14px | 1.43 | 0.014px | `--text-body-lg` |
| heading | 28px | 1.2 | — | `--text-heading` |

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** comfortable

### Spacing Scale

| Name | Value | Token |
|------|-------|-------|
| 4 | 4px | `--spacing-4` |
| 8 | 8px | `--spacing-8` |
| 12 | 12px | `--spacing-12` |
| 16 | 16px | `--spacing-16` |
| 20 | 20px | `--spacing-20` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |

### Border Radius

| Element | Value |
|---------|-------|
| pill | 9999px |
| cards | 16px |
| buttons | 8px |
| searchBarMain | 26px |
| searchBarInner | 100px |

### Shadows

| Name | Value | Token |
|------|-------|-------|
| md | `rgba(0, 0, 0, 0.2) 0px 2px 10px 0px` | `--shadow-md` |

### Layout

- **Section gap:** 20px
- **Card padding:** 14px
- **Element gap:** 15px

## Components

### Neutral Ghost Button
**Role:** Standard interactive element for secondary actions.

Transparent background, Primary Text color (#e8e8e8) for text and border. No padding or border-radius specified globally, implies context-specific sizing or minimal inherent styling.

### Filled Action Button
**Role:** Primary or emphasized action. Default subtle fill.

Background Button Gray (#303134), text Primary Text (#e8e8e8), 8px border-radius, 16px horizontal padding.

### AI Mode Pill Button
**Role:** Distinctive button for AI-related features.

Transparent background, AI Blue (#99c3ff) text, 9999px border-radius making it a pill shape, no intrinsic padding beyond content.

### Circular Icon Button
**Role:** Small, interactive element for icons.

Transparent background, AI Blue (#99c3ff) for icon fill and border, 50% border-radius for a circular shape, 8px padding.

### Search Input Field
**Role:** Main interaction point for search queries.

Transparent background, Primary Text (#e8e8e8) for text and border, no border-radius. Padding of 14px top. Note: the actual search bar has a rounded card container around this.

### Large Search Container Card
**Role:** Container for the central search input and related elements.

Background Graphite Card (#22242a), 16px border-radius, soft elevation shadow rgba(0, 0, 0, 0.2) 0px 2px 10px 0px.

## Do's and Don'ts

### Do
- 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).

### Don't
- 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.

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Carbon Canvas | `#0e0e11` | Primary page background |
| 1 | Steel Surface | `#16171a` | Secondary background for larger sections or embedded components |
| 2 | Graphite Card | `#22242a` | Background for cards, search bars, and distinct interactive containers |
| 3 | Button Gray | `#303134` | Background for filled neutral buttons |

## Elevation

- **Card Container:** `rgba(0, 0, 0, 0.2) 0px 2px 10px 0px`

## Imagery

This design system uses a minimal visual language for imagery, primarily relying on small, functional icons rather than large graphics or photography. The icons are typically monochrome, matching the Primary Text color (#e8e8e8), creating a sense of clarity and utility. There's a notable exception in the 'Modo IA' button, which features a multi-colored gradient icon as a distinct brand element. Overall, visual density is low, with imagery serving as clear, concise functional indicators rather than decorative elements.

## Layout

The layout follows a contained, centered model, likely with a flexible max-width, though not explicitly defined. The hero section is dominated by the centered Google logo and search bar, occupying significant vertical space. Below the main search interaction, content appears to be stacked vertically, with consistent vertical spacing between distinct content blocks. The footer is a full-bleed dark strip, providing global navigation and legal information. There's an underlying grid for discrete elements like suggestion buttons, but the overall presentation is text-dominant with functional UI components guiding interaction rather than complex visual arrangements.

## Agent Prompt Guide

Quick Color Reference:
text: #e8e8e8
background: #0e0e11
border: #4d5156
accent: #99c3ff
primary action: #303134 (filled action)

Example Component Prompts:
1. Create a Primary Action Button: #303134 background, #e8e8e8 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
2. Create a filled button: Use a Filled Action Button with Button Gray (#303134) background, Primary Text (#e8e8e8) text, 8px border-radius, and 16px horizontal padding.
3. Create an AI Mode button: Use an AI Mode Pill Button with transparent background, AI Blue (#99c3ff) text, and conic-gradient(rgba(49, 134, 255, 0) 0deg, rgb(52, 168, 83) 43deg, rgb(255, 211, 20) 65deg, rgb(255, 70, 65) 105deg, rgb(49, 134, 255) 144deg, rgb(49, 134, 255) 180deg, rgba(49, 134, 255, 0) 324deg, rgba(49, 134, 255, 0) 360deg) for its gradient branding.

## Similar Brands

- **DuckDuckGo** — Shares a minimalistic dark-mode search interface with a focus on core functionality and subtle achromatic UI elements.
- **Bing (Dark Mode)** — Utilizes a dark, muted background with white text and hints of subtle color for interactive elements and accents.
- **Notion (Dark Mode)** — Features a deep, desaturated dark theme with strong reliance on contrast for typography and subtle background variations for layering.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-carbon-canvas: #0e0e11;
  --color-steel-surface: #16171a;
  --color-graphite-card: #22242a;
  --color-button-gray: #303134;
  --color-ghost-outline: #4d5156;
  --color-subtle-ash: #444746;
  --color-primary-text: #e8e8e8;
  --color-muted-text: #9e9e9e;
  --color-google-blue: #99c3ff;
  --color-ai-blue: #a8c7fa;
  --color-ai-mode-gradient: #34a853;
  --gradient-ai-mode-gradient: conic-gradient(rgba(49, 134, 255, 0) 0deg, rgb(52, 168, 83) 43deg, rgb(255, 211, 20) 65deg, rgb(255, 70, 65) 105deg, rgb(49, 134, 255) 144deg, rgb(49, 134, 255) 180deg, rgba(49, 134, 255, 0) 324deg, rgba(49, 134, 255, 0) 360deg);
  --color-blue-header-accent: #c2e7ff;

  /* Typography — Font Families */
  --font-google-sans: 'Google Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-text: 'Google Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.43;
  --tracking-caption: 0.014px;
  --text-body-lg: 14px;
  --leading-body-lg: 1.43;
  --tracking-body-lg: 0.014px;
  --text-heading: 28px;
  --leading-heading: 1.2;

  /* Typography — Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Spacing */
  --spacing-unit: 4px;
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;

  /* Layout */
  --section-gap: 20px;
  --card-padding: 14px;
  --element-gap: 15px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 26px;
  --radius-full: 100px;
  --radius-full-2: 9999px;
  --radius-full-3: 15984px;

  /* Named Radii */
  --radius-pill: 9999px;
  --radius-cards: 16px;
  --radius-buttons: 8px;
  --radius-searchbarmain: 26px;
  --radius-searchbarinner: 100px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;

  /* Surfaces */
  --surface-carbon-canvas: #0e0e11;
  --surface-steel-surface: #16171a;
  --surface-graphite-card: #22242a;
  --surface-button-gray: #303134;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-carbon-canvas: #0e0e11;
  --color-steel-surface: #16171a;
  --color-graphite-card: #22242a;
  --color-button-gray: #303134;
  --color-ghost-outline: #4d5156;
  --color-subtle-ash: #444746;
  --color-primary-text: #e8e8e8;
  --color-muted-text: #9e9e9e;
  --color-google-blue: #99c3ff;
  --color-ai-blue: #a8c7fa;
  --color-ai-mode-gradient: #34a853;
  --color-blue-header-accent: #c2e7ff;

  /* Typography */
  --font-google-sans: 'Google Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-text: 'Google Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 12px;
  --leading-caption: 1.43;
  --tracking-caption: 0.014px;
  --text-body-lg: 14px;
  --leading-body-lg: 1.43;
  --tracking-body-lg: 0.014px;
  --text-heading: 28px;
  --leading-heading: 1.2;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;

  /* Border Radius */
  --radius-lg: 8px;
  --radius-2xl: 16px;
  --radius-3xl: 26px;
  --radius-full: 100px;
  --radius-full-2: 9999px;
  --radius-full-3: 15984px;

  /* Shadows */
  --shadow-md: rgba(0, 0, 0, 0.2) 0px 2px 10px 0px;
}
```