Google

# Google — Style Reference
> Portal to infinity. A singular, perfectly centered input field suspended in a vast white void.

**Theme:** light

A paradigm of hyper-functional utility where the interface exists solely to disappear, leaving the content in focus. The design utilizes a high-contrast neutral palette anchored by #1f1f1f text on a pure #ffffff canvas, establishing a clinical, high-clarity environment. Signature pill-shaped interactive containers (100px radius) create a sense of singular, precise intent, while the lack of harsh shadows emphasizes a flat, multi-layered information architecture. Visual hierarchy is achieved through monochromatic weight changes and targeted use of 14px and 16px font sizes, creating a system that feels weightless and instantaneous.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Carbon Text | `#1f1f1f` | `--color-carbon-text` | Primary text, iconography, and high-emphasis borders |
| Canvas White | `#ffffff` | `--color-canvas-white` | Main page background and interface containers |
| Stone Gray | `#f8f9fa` | `--color-stone-gray` | Secondary surface background for nested UI elements |
| Ink Stroke | `#000000` | `--color-ink-stroke` | High-contrast input borders and status indicators |
| Steel Border | `#dadce0` | `--color-steel-border` | Soft dividers and inactive field outlines |
| Classic Blue | `#0b57d0` | `--color-classic-blue` | Primary branded interactive states and active links |
| Link Violet | `#1a0dab` | `--color-link-violet` | Legacy interaction and text-based link states |

## Tokens — Typography

### Roboto — Roboto — detected in extracted data but not described by AI · `--font-roboto`
- **Weights:** 400
- **Sizes:** 14px
- **Line height:** 1.2
- **Role:** Roboto — detected in extracted data but not described by AI

### Google Sans / Roboto — Body, navigation, and input text; these system fonts provide a predictable, utilitarian reading experience. · `--font-google-sans-roboto`
- **Substitute:** Arial, Helvetica, sans-serif
- **Weights:** 400, 500
- **Sizes:** 14px, 16px
- **Line height:** 1.20, 1.38, 1.43
- **Role:** Body, navigation, and input text; these system fonts provide a predictable, utilitarian reading experience.

### arial — arial — detected in extracted data but not described by AI · `--font-arial`
- **Weights:** 400
- **Sizes:** 13px
- **Line height:** 1.85
- **Role:** arial — detected in extracted data but not described by AI

### Google Sans Text — Google Sans Text — detected in extracted data but not described by AI · `--font-google-sans-text`
- **Weights:** 500
- **Sizes:** 14px
- **Line height:** 1.29
- **Role:** Google Sans Text — detected in extracted data but not described by AI

### Type Scale

| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 13px | 1.85 | — | `--text-caption` |

## 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` |
| 36 | 36px | `--spacing-36` |

### Border Radius

| Element | Value |
|---------|-------|
| cards | 8px |
| buttons | 100px |
| navigation | 100px |

### Layout

- **Page max-width:** 1200px
- **Section gap:** 36px
- **Card padding:** 16px
- **Element gap:** 15px

## Components

### Main Search Input
**Role:** Central user entry point

Full-width or centered search bar with 0px radius, 14px top padding. Border #000000, color #1f1f1f. Focus on a flat, non-elevated appearance.

### Pill Button
**Role:** Primary action button

Background #0b57d0 (or transparent for ghost variants), 100px border-radius, 16px padding on left/right for a soft, communicative shape.

### Navigation Tab
**Role:** Section links

14px font size, 400 weight, #1f1f1f color. 4px padding for a compact, non-intrusive footprint.

## Do's and Don'ts

### Do
- Use 100px border-radius for all interactive buttons to maintain the signature pill aesthetic.
- Prioritize #1f1f1f text over pure #000000 for body content to reduce visual fatigue.
- Maintain a maximum of 4px-8px for internal component margins to ensure a compact, responsive feel.
- Use centered layout structures for main utility areas to focus user gaze.
- Ensure all primary actions use the #0b57d0 blue for color-consistency across interaction states.

### Don't
- Do not use drop shadows; rely on border color shifts (#dadce0) to define containers.
- Do not exceed two weight variants of the primary font (400 and 500) within a single view.
- Do not use saturated brand colors for decorative elements; brand color is for function only.
- Do not use font sizes smaller than 13px.
- Do not use gradients; maintain a flat, monochromatic aesthetic.

## Imagery

Usage is strictly limited. Imagery is only employed for functional content representation (icons, logos). Visuals appear in contained, flat formats without shadows or complex masks. Icons are monochrome (#1f1f1f) and low-fidelity to ensure they remain secondary to text-based inputs.

## Layout

Centered, max-width contained layout. Primary focus is a 'hero' central stack in the middle of the viewport. Sections are organized with minimal vertical spacing (36px gaps), creating a 'vertical stream' experience. Navigation is pinned to extreme corners of the viewport.

## Agent Prompt Guide

Quick Color Reference: Text(#1f1f1f), Background(#ffffff), PrimaryAction(#0b57d0), Border(#dadce0). Example 1: 'Create a search input: 0px border-radius, 1px solid #1f1f1f border, 14px top/bottom padding, #1f1f1f text color.' Example 2: 'Create a rounded button: 100px radius, 16px padding horizontal, background #0b57d0, white text, 14px Google Sans font.'

## Similar Brands

- **DuckDuckGo** — Focuses on a singular center-aligned search input with a clean, light-theme interface.
- **Bing** — Uses a pill-shaped search input architecture and minimal, high-contrast typography.
- **Startpage** — Employs an identical minimalist white-canvas, centrist-input approach.

## Quick Start

### CSS Custom Properties

```css
:root {
  /* Colors */
  --color-carbon-text: #1f1f1f;
  --color-canvas-white: #ffffff;
  --color-stone-gray: #f8f9fa;
  --color-ink-stroke: #000000;
  --color-steel-border: #dadce0;
  --color-classic-blue: #0b57d0;
  --color-link-violet: #1a0dab;

  /* Typography — Font Families */
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-roboto: 'Google Sans / Roboto', 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;
  --font-google-sans-text: 'Google Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.85;

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

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 36px;
  --card-padding: 16px;
  --element-gap: 15px;

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

  /* Named Radii */
  --radius-cards: 8px;
  --radius-buttons: 100px;
  --radius-navigation: 100px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-carbon-text: #1f1f1f;
  --color-canvas-white: #ffffff;
  --color-stone-gray: #f8f9fa;
  --color-ink-stroke: #000000;
  --color-steel-border: #dadce0;
  --color-classic-blue: #0b57d0;
  --color-link-violet: #1a0dab;

  /* Typography */
  --font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-google-sans-roboto: 'Google Sans / Roboto', 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;
  --font-google-sans-text: 'Google Sans Text', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography — Scale */
  --text-caption: 13px;
  --leading-caption: 1.85;

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

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