Google

# Google — Style Reference
> Midnight command center

**Theme:** dark

The Google Dark theme embraces a deep, muted aesthetic, creating a 'command center' feel. Primary text is bright white, contrasted against dark charcoal and slate backgrounds, minimizing eye strain for extended use. Interaction elements are clearly defined through shape and subtle elevation, with a focused accent blue for clickable states and status indicators. The typography is direct and functional, supporting a dense yet organized information display.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Deep Midnight | `#16171a` | `--color-deep-midnight` | Page background, primary canvas |
| Charcoal Slate | `#4d5156` | `--color-charcoal-slate` | Elevated surfaces, card backgrounds, muted interactive elements |
| Dark Cement | `#303134` | `--color-dark-cement` | Button backgrounds, input fields, secondary elevated surfaces |
| Ash Gray | `#444746` | `--color-ash-gray` | Subtle borders and dividers |
| Light Ghost | `#e8e8e8` | `--color-light-ghost` | Primary text, icon fill, outline button borders |
| Muted Silver | `#bfbfbf` | `--color-muted-silver` | Secondary text, subtle icon fill, decorative borders |
| Arctic Mist | `#c2e7ff` | `--color-arctic-mist` | Navigation backgrounds, subtle accent surfaces |
| Primary Blue | `#99c3ff` | `--color-primary-blue` | Link text, active button borders, interactive highlights |
| Deep Ocean Blue | `#001d35` | `--color-deep-ocean-blue` | Navigation item active state indicators, strong accent borders |

## Tokens — Typography

### Arial — Body text, navigation links, and button labels, prioritizing clarity and system-font ubiquity. · `--font-arial`
- **Substitute:** system-ui
- **Weights:** 400
- **Sizes:** 13px, 14px
- **Line height:** 1.20, 1.85, 2.15
- **Letter spacing:** normal
- **Role:** Body text, navigation links, and button labels, prioritizing clarity and system-font ubiquity.

### Google Sans — Primary headings, prominent labels, and call-to-action text, providing a distinctive brand voice through its slightly rounded, modern sans-serif form. · `--font-google-sans`
- **Substitute:** Roboto, sans-serif
- **Weights:** 400, 500
- **Sizes:** 14px, 16px
- **Line height:** 1.20, 1.38, 1.43
- **Letter spacing:** normal
- **Role:** Primary headings, prominent labels, and call-to-action text, providing a distinctive brand voice through its slightly rounded, modern sans-serif form.

### Google Sans Text — Specific navigation elements, offering a slightly more compact and functional feel than regular Google Sans. · `--font-google-sans-text`
- **Substitute:** Roboto, sans-serif
- **Weights:** 500
- **Sizes:** 14px
- **Line height:** 1.29
- **Letter spacing:** normal
- **Role:** Specific navigation elements, offering a slightly more compact and functional feel than regular Google Sans.

## Tokens — Spacing & Shapes

**Base unit:** 4px

**Density:** compact

### 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` |

### Border Radius

| Element | Value |
|---------|-------|
| input | 0px |
| buttons | 8px |
| searchBar | 100px |
| actionIcon | 9999px |

### Layout

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

## Components

### Navigation Link
**Role:** Top-level navigation and utility links.

Text uses Arial 400 at 14px, color Light Ghost (#e8e8e8), normal letter spacing.

### Primary Search Button
**Role:** Main search action buttons.

Background Dark Cement (#303134), text Light Ghost (#e8e8e8), Google Sans 400 at 14px. Padding 0px top/bottom, 16px left/right. Border radius 8px.

### Ghost Action Button
**Role:** Secondary and tertiary actions, such as 'I'm Feeling Lucky'.

Background transparent, text Light Ghost (#BFBFBF / #e8e8e8 as observed), Arial 400. Padding 0px top/bottom, 8px left/right.

### Circular Icon Button
**Role:** Icon-only interactive elements in the header.

Background transparent, icon color Primary Blue (#99c3ff) for active states. Padding 8px all around, border radius 9999px.

### Search Input Field
**Role:** The central search bar input element.

Background Dark Cement (#303134), text Light Ghost (#e8e8e8), Google Sans 400. Placeholder text is the same. Border radius 100px.

### AI Mode Tag
**Role:** Indicates special AI features.

Background transparent, text Primary Blue (#99c3ff). Border is 1px solid Primary Blue (#99c3ff). Border radius 9999px.

### Primary Account Button
**Role:** User account sign-in action.

Background Arctic Mist (#c2e7ff), text Deep Ocean Blue (#001d35). Google Sans Text 500 at 14px. Border radius 100px, 10px padding top/bottom, 15px left/right.

## Do's and Don'ts

### Do
- Prioritize Deep Midnight (#16171a) as the dominant background color for all primary canvas areas.
- Use Light Ghost (#e8e8e8) for all primary body text and main iconography.
- Apply Primary Blue (#99c3ff) for all links, active states, and interactive accents to denote functionality.
- Style buttons with a Dark Cement (#303134) background, Light Ghost (#e8e8e8) text, and 8px border-radius.
- Separate distinct content sections using a minimum vertical gap of 20px.
- Maintain a border-radius of 100px for large interactive elements like the search bar and primary account buttons.
- Use Google Sans for all prominent headings and calls to action, ensuring a weight of 400 or 500.

### Don't
- Avoid using bright, saturated colors for backgrounds; maintain a dark, muted palette for surfaces.
- Do not introduce unnecessary borders or shadows; keep surfaces relatively flat with subtle elevation.
- Refrain from drastically changing font families or weights unless specifically outlined for a component or role.
- Do not deviate from the established spacing unit base of 4px; avoid arbitrary pixel values.
- Never use Primary Blue (#99c3ff) as a solid background fill for primary content areas.
- Do not use square corners on interactive elements (buttons, search bars); apply a minimum of 8px radius.
- Avoid making text too small or too low contrast; ensure all text is at least 13px Arial with Light Ghost (#e8e8e8) on dark backgrounds.

## Imagery

The site primarily uses UI elements and iconography rather than rich imagery. Icons are generally outlined or filled in Light Ghost on dark backgrounds, with occasional Primary Blue accents for interactive states. The Google logo is prominent as a central graphic element. Imagery is used minimally and functionally, often as small, clear vector graphics within components, or in the case of the AI Mode button, an icon and text combination. Density is low, with more focus on typography and interaction elements.

## Layout

The page follows a classic centered, max-width layout, approximately 960px wide, despite no explicit max-width token. The hero section is dominated by the large, centered Google logo and the central search input field. Vertical rhythm is established through consistent spacing between the header, search area, and footer navigation. The header and footer are full-width dark bands, segmenting the page content. Components like search buttons and links are often horizontally centered stacks, with key navigation (Gmail, Images) aligned to the top right and utility links (About, Store) to the top left.

## Agent Prompt Guide

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

Example Component Prompts:
Create a primary button 'Buscar con Google': background Dark Cement #303134, text Light Ghost #e8e8e8, Google Sans 400 at 14px, 8px border-radius, 0px vertical padding, 16px horizontal padding.
Create a Primary Action Button: #303134 background, #e8e8e8 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
Generate a search input field: background Dark Cement #303134, text Light Ghost #e8e8e8, Google Sans 400, 100px border-radius, 14px top padding.
Construct a circular icon button for 'Iniciar sesión': background Arctic Mist #c2e7ff, text Deep Ocean Blue #001d35, Google Sans Text 500 at 14px, 100px border-radius, 10px vertical padding, 15px horizontal padding.

## Similar Brands

- **DuckDuckGo** — Similar dark-mode lean with focus on search input as central element and minimal UI chrome.
- **Bing** — Dark theme interface with a prominent search bar and system-like typography for core interactions.
- **Brave Search** — Employs a simple, functional dark UI with a strong emphasis on search and minimal decorative elements, using a specific accent color for links.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-deep-midnight: #16171a;
  --color-charcoal-slate: #4d5156;
  --color-dark-cement: #303134;
  --color-ash-gray: #444746;
  --color-light-ghost: #e8e8e8;
  --color-muted-silver: #bfbfbf;
  --color-arctic-mist: #c2e7ff;
  --color-primary-blue: #99c3ff;
  --color-deep-ocean-blue: #001d35;

  /* Typography — Font Families */
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --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;

  /* Typography — Scale */
  --text-sm: 13px;
  --leading-sm: 1.85;
  --text-sm-2: 14px;
  --leading-sm-2: 1.2;
  --text-base: 16px;
  --leading-base: 1.38;

  /* 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;

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

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

  /* Named Radii */
  --radius-input: 0px;
  --radius-buttons: 8px;
  --radius-searchbar: 100px;
  --radius-actionicon: 9999px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-deep-midnight: #16171a;
  --color-charcoal-slate: #4d5156;
  --color-dark-cement: #303134;
  --color-ash-gray: #444746;
  --color-light-ghost: #e8e8e8;
  --color-muted-silver: #bfbfbf;
  --color-arctic-mist: #c2e7ff;
  --color-primary-blue: #99c3ff;
  --color-deep-ocean-blue: #001d35;

  /* Typography */
  --font-arial: 'Arial', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --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;

  /* Typography — Scale */
  --text-sm: 13px;
  --leading-sm: 1.85;
  --text-sm-2: 14px;
  --leading-sm-2: 1.2;
  --text-base: 16px;
  --leading-base: 1.38;

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

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