Google

# Google — Style Reference
> anthracite quietude with luminous blue

**Theme:** dark

Google's dark-mode visual system emphasizes clarity and quiet efficiency. It features a deep anthracite canvas, with softened, rounded search surfaces and interaction elements that appear subtly elevated. Typography is direct and legible, maintaining a balanced hierarchy. The system primarily uses monochromatic tones, punctuated by a soft, luminous blue for active states and critical information, adding a gentle glow rather than stark contrast.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Twilight Canvas | `#16171a` | `--color-twilight-canvas` | Page backgrounds, base surface for content sections |
| Charcoal Surface | `#303134` | `--color-charcoal-surface` | Primary UI element backgrounds like search bars and default buttons — a slightly lighter surface against the canvas |
| Stone Accent | `#4d5156` | `--color-stone-accent` | Secondary background surfaces and borders, creating subtle depth transitions |
| Ghost Gray | `#5f6368` | `--color-ghost-gray` | Hover states for interactive elements and subtle distinctions between UI layers |
| Platinum Text | `#e8e8e8` | `--color-platinum-text` | Primary text, headers, and essential iconography for maximum legibility on dark surfaces |
| Silver Muted | `#bfbfbf` | `--color-silver-muted` | Muted text, helper text, and subtle borders, providing hierarchical contrast without distraction |
| Azure Glow | `#99c3ff` | `--color-azure-glow` | Interactive link text, outlined button borders, and active states—a soft, luminous blue to signify interactivity |
| Winter Sky | `#c2e7ff` | `--color-winter-sky` | Subtle background highlight for active navigation elements, indicating selection with a gentle wash of color |
| Deep Midnight | `#001d35` | `--color-deep-midnight` | Blue outline accent for tags, dividers, and focused UI edges. Do not promote it to the primary CTA color |
| Pewter Border | `#444746` | `--color-pewter-border` | Dividers for footer sections and other structural separations |

## Tokens — Typography

### Google Sans — Main branding text, prominent call-to-actions, and UI labels that require a clean, modern feel. · `--font-google-sans`
- **Substitute:** Product Sans
- **Weights:** 400, 500
- **Sizes:** 14px, 16px
- **Line height:** 1.20, 1.38, 1.43
- **Role:** Main branding text, prominent call-to-actions, and UI labels that require a clean, modern feel.

### Google Sans Text — Navigation links and secondary UI elements, providing a consistent, legible voice. · `--font-google-sans-text`
- **Substitute:** Roboto
- **Weights:** 500
- **Sizes:** 14px
- **Line height:** 1.29
- **Role:** Navigation links and secondary UI elements, providing a consistent, legible voice.

### Arial — Standard body text, helper text, and small print details, prioritizing universal readability. · `--font-arial`
- **Substitute:** sans-serif
- **Weights:** 400
- **Sizes:** 13px, 14px
- **Line height:** 1.20, 1.85, 2.15
- **Role:** Standard body text, helper text, and small print details, prioritizing universal readability.

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

### Border Radius

| Element | Value |
|---------|-------|
| inputs | 26px |
| buttons | 8px |
| pillForms | 9999px |
| roundElements | 100px |

### Layout

- **Card padding:** 16px
- **Element gap:** 15px

## Components

### Search Input Bar
**Role:** Primary interactive element for search functionality

A prominent, rounded input field with '#303134' background and '#e8e8e8' text. It features a 26px border-radius, 14px internal padding, and subtle icons to the right.

### Default Action Button
**Role:** Standard calls to action and form submissions

Utilizes a '#303134' background with an 8px border-radius and '#e8e8e8' text. Padding is 0px top/bottom and 16px left/right, giving it a compact, wide appearance.

### Ghost Header Link
**Role:** Top navigation and utility links

Text in '#e8e8e8', with zero background or border. Interactivity is subtle, just a text color change on hover. Padding is 0px, with 8px horizontal spacing from neighboring links.

### Outlined CTA Button
**Role:** Secondary or alternative calls to action

Transparent background with a '#99c3ff' border and '#99c3ff' text, conveying a softer, yet still interactive, feel. It has a pill-shaped 9999px radius and 8px padding.

### AI Mode Tag
**Role:** Special feature indicator or interactive tag

A pill-shaped element with a 100px border-radius and '#c2e7ff' as its background, indicating an active or highlighted state. Text is in '#001d35'.

### Footer Text Link
**Role:** Informational links in the footer section

Plain text in '#e8e8e8' with no background. Underlines appear on hover. Uses 15px internal horizontal spacing.

### Sign In Button
**Role:** Primary login or account access call to action

A distinct background color of '#c2e7ff' for emphasis, with text in '#001d35', and a 100px border-radius for a rounded, approachable feel. Padding is 8px all around.

## Do's and Don'ts

### Do
- Maintain a predominantly dark theme using 'Twilight Canvas' (#16171a) for page backgrounds and 'Charcoal Surface' (#303134) for interactive elements.
- Use '#e8e8e8' (Platinum Text) for primary text and headings to ensure high contrast and readability.
- Apply 'Azure Glow' (#99c3ff) exclusively for interactive elements like links and outlined button borders to signify interactivity.
- Prioritize smooth, organic shapes with 26px or 100px border-radii for containers like search inputs, and 8px for standard buttons.
- Ensure generous but comfortable spacing, with an approximate 15px element gap to maintain visual breathing room.
- Use Google Sans for prominent UI labels and Google Sans Text for navigation, reserving Arial for body copy and detailed text.
- Elevate interactive states subtly; use 'Ghost Gray' (#5f6368) on hover for a gentle visual feedback.

### Don't
- Avoid using harsh, saturated primary colors for large background areas; color should primarily be used for accents and states.
- Do not introduce sharp, angular corners; maintain the softened, rounded aesthetic across all components.
- Refrain from heavy drop shadows or strong borders; components should feel integrated and subtly layered.
- Do not deviate from the established typefaces; Arial is for body text, not headlines.
- Avoid dense, information-packed layouts without sufficient padding and element spacing.
- Do not use 'Platinum Text' (#e8e8e8) for unclickable, decorative elements; reserve it for essential information and primary interactions.
- Never use the browser default link color #0000ee; all links should use 'Azure Glow' (#99c3ff).

## Surfaces

| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Twilight Canvas | `#16171a` | Base page background |
| 1 | Charcoal Surface | `#303134` | Primary interactive containers like search bars and buttons |
| 2 | Stone Accent | `#4d5156` | Secondary background distinctions and subtle dividers |

## Imagery

The site primarily features a text and UI-dominant style with minimal decorative imagery. Where present, icons are outlined or simple solid fills, using the system's 'Platinum Text' (#e8e8e8) or 'Azure Glow' (#99c3ff) to maintain a cohesive, clean aesthetic. The visual style is functional and illustrative, not photographic or abstract. Imagery serves to augment UI rather than create atmosphere, appearing as small, contained visual cues.

## Agent Prompt Guide

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

Example Component Prompts:
1. Create a search bar: background #303134, text #e8e8e8, border-radius 26px, padding 14px vertical, with a subtle microphone icon and a magnifying glass icon.
2. Create a default button labeled 'Buscar con Google': background #303134, text #e8e8e8, border-radius 8px, padding 0px vertical, 16px horizontal.
3. Create a header navigation link labeled 'Gmail': text #e8e8e8, no background, 0px padding, 8px right margin.
4. Create a 'Modo IA' tag: background #c2e7ff, text #001d35, border-radius 100px (pill-shaped), subtle icon on the left.
5. Create a 'Iniciar sesión' button: background #c2e7ff, text #001d35, border-radius 100px, 8px padding all sides.

## Similar Brands

- **DuckDuckGo** — Similar dark mode with a central search bar and minimal, functional UI elements.
- **Dark-themed Stack Overflow** — Monochromatic interface with a single, soft chromatic accent for interactives and a focus on content hierarchy.
- **Notion (dark mode)** — Uses a dark, neutral palette with subtle surface differentiation and a premium, clean typographic approach.
- **GitHub (dark mode)** — Relies on a spectrum of dark grays for hierarchy and uses a distinct, subtle blue for interactive links and accents.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-twilight-canvas: #16171a;
  --color-charcoal-surface: #303134;
  --color-stone-accent: #4d5156;
  --color-ghost-gray: #5f6368;
  --color-platinum-text: #e8e8e8;
  --color-silver-muted: #bfbfbf;
  --color-azure-glow: #99c3ff;
  --color-winter-sky: #c2e7ff;
  --color-deep-midnight: #001d35;
  --color-pewter-border: #444746;

  /* 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-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;
  --spacing-24: 24px;

  /* Layout */
  --card-padding: 16px;
  --element-gap: 15px;

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

  /* Named Radii */
  --radius-inputs: 26px;
  --radius-buttons: 8px;
  --radius-pillforms: 9999px;
  --radius-roundelements: 100px;

  /* Surfaces */
  --surface-twilight-canvas: #16171a;
  --surface-charcoal-surface: #303134;
  --surface-stone-accent: #4d5156;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-twilight-canvas: #16171a;
  --color-charcoal-surface: #303134;
  --color-stone-accent: #4d5156;
  --color-ghost-gray: #5f6368;
  --color-platinum-text: #e8e8e8;
  --color-silver-muted: #bfbfbf;
  --color-azure-glow: #99c3ff;
  --color-winter-sky: #c2e7ff;
  --color-deep-midnight: #001d35;
  --color-pewter-border: #444746;

  /* 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-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;
  --spacing-24: 24px;

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