Google

---
version: alpha
name: Google-design-analysis
description: Google's Material Design language is a layered, paper-inspired system built on the four brand primaries — blue, red, yellow, and green — over a clean white canvas. It pairs Google Sans for display with Roboto for reading, and relies on elevation, tonal surfaces, and state layers rather than borders. Components are soft, oversized, and tactile, with motion that follows realistic easing.

colors:
  primary: "#4285f4"
  red: "#ea4335"
  yellow: "#fbbc05"
  green: "#34a853"
  primary_dark: "#1a73e8"
  primary_light: "#aecbfa"
  canvas: "#ffffff"
  surface: "#f8f9fa"
  surface_tonal: "#f1f3f4"
  surface_tonal_2: "#e8eaed"
  fg_default: "#202124"
  fg_muted: "#5f6368"
  border_default: "#dadce0"
  on_primary: "#ffffff"

typography:
  display-xxl:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  display-xl:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.75px
  display-lg:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: -0.5px
  display-md:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.25px
  heading-lg:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0
  heading-md:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  heading-sm:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-sm:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
  caption:
    fontFamily: ""Google Sans", Roboto, system-ui, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0
---

# Design System Inspired by Google (Material Design)

## 1. Visual Theme & Atmosphere

Material Design is the archetypal "layered paper" system: a white canvas with surfaces that float above one another via elevation, tonal shading, and state layers rather than hard borders. The four Google primaries — blue `#4285f4`, red `#ea4335`, yellow `#fbbc05`, and green `#34a853` — act as the single source of brand energy against a deliberately neutral gray scaffold.

## 2. Color System

- **Blue** `#4285f4` — the workhorse primary for links and actions.
- **Red** `#ea4335`, **yellow** `#fbbc05`, **green** `#34a853` — the playful brand accents, used sparingly for states and moments of delight.
- Surfaces step through `#ffffff`, `#f8f9fa`, `#f1f3f4`, and `#e8eaed` to encode elevation without shadows.
- Text defaults to `#202124`, muted to `#5f6368`; borders are a quiet `#dadce0`.

## 3. Typography

Google Sans for display headlines and product UI, Roboto for long-form reading. The scale is generous: display sizes in the 40s-60s px with tight tracking, body at 16px/1.5. Hierarchy is carried by size and color, never excessive weight.

## 4. Components & Shape

Components use full, "stadium" pill radii for buttons, chips, and FABs; cards use a moderate 12px. The FAB is the signature element — a floating circular action that anchors the bottom-right. States (hover, focus, pressed) are expressed as translucent state layers overlaying the surface color.

## 5. Layout & Spacing

An 8dp baseline grid with a responsive 4-column → 12-column breakpoint system. Whitespace is abundant in marketing surfaces and tightened in productivity tools; alignment stays on the grid.

## 6. Motion

Motion follows standard Material easing curves (emphasized and standard), with 200-300ms durations. Elevation changes animate in Z-space; content fades and scales subtly rather than sliding.