Google

# Google Design System

## Visual Theme & Atmosphere
Clean, utilitarian, universal. Google's design prioritizes clarity and speed over decoration. The four-color logo palette (Blue, Red, Yellow, Green) provides brand recognition while the interface remains overwhelmingly white and functional.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Blue | #4285F4 | Primary brand, links, CTAs |
| Red | #EA4335 | Alerts, destructive actions |
| Yellow | #FBBC05 | Highlights, stars, ratings |
| Green | #34A853 | Success, positive states |
| Background | #FFFFFF | Main canvas |
| Surface | #F8F9FA | Secondary surfaces |
| Text | #202124 | Primary text |
| Muted | #5F6368 | Secondary text |

## Typography Rules
- **Heading Font**: Google Sans, system-ui
- **Body Font**: Roboto, Arial
- **Base Size**: 16px
- **H1**: 2.5rem / weight 700
- **H2**: 2rem / weight 500
- **H3**: 1.5rem / weight 500
- **Body**: 1rem / weight 400 / line-height 1.6

## Component Stylings
- **Buttons**: Blue primary, 4px radius, contained or outlined
- **Search Bar**: Pill-shaped, white fill, prominent shadow
- **Cards**: 8px radius, 1px border, white surface
- **Inputs**: Underlined or filled, blue focus indicator

## Layout Principles
- Max content width: 1200px
- 8px grid system
- Dense information layout
- Consistent 16px spacing rhythm