Back to Library
G

Google

Google

Visit Website

搜索与产品生态。多彩标志配色,白色为主,简洁实用的产品设计。

多彩标志纯白背景实用主义Material Design全球可用

Color Palette

primary
secondary
accent
background
surface
text
muted
border

Typography

Heading FontGoogle Sans, system-ui, sans-serif
Body FontRoboto, Arial, sans-serif
Base Size16px
Line Height1.6
Weights400, 500, 700

Heading Scale

h1Google Heading
h2Google Heading
h3Google Heading
h4Google Heading

DESIGN.md

# 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

Frequently Asked Questions

What is Google's design style?

搜索与产品生态。多彩标志配色,白色为主,简洁实用的产品设计。

What is Google's primary color?

Google uses #4285F4 as primary color, #FFFFFF for background, and #202124 for text.

What fonts does Google use?

Heading font: Google Sans, system-ui, sans-serif. Body font: Roboto, Arial, sans-serif. Base size: 16px.

How to use Google design system in my project?

Click the Copy button above the DESIGN.md code block to copy the complete design specification. AI Coding tools like Cursor can directly read DESIGN.md to generate code matching Google's style.

Explore More Design Systems

Discover 50+ curated design systems for your AI Coding projects.

View All Design Systems