返回设计库
G

Google

Google

访问网站

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

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

配色方案

primary
secondary
accent
background
surface
text
muted
border

字体规范

标题字体Google Sans, system-ui, sans-serif
正文字体Roboto, Arial, sans-serif
基础字号16px
行高1.6
字重400, 500, 700

标题层级

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

常见问题

Google 的设计风格是什么?

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

Google 使用什么主色调?

Google 的主色调是 #4285F4,背景色为 #FFFFFF,文本色为 #202124。

Google 使用什么字体?

标题字体: Google Sans, system-ui, sans-serif。正文字体: Roboto, Arial, sans-serif。基础字号: 16px。

如何在项目中使用 Google 设计系统?

点击上方 DESIGN.md 代码块中的复制按钮,将完整设计规范复制到你的项目中。AI Coding 工具(如 Cursor)可以直接读取 DESIGN.md 来生成符合 Google 风格的代码。

探索更多设计系统

发现 50+ 精选设计系统,为你的 AI Coding 项目提供设计灵感。

查看全部设计系统