返回设计库
G

Gemini

Google

访问网站

Google AI助手。蓝紫色渐变,Material Design 3 风格,明亮多彩的界面。

蓝紫渐变Material 3圆角设计光影层次多彩图标

配色方案

primary
secondary
accent
background
surface
text
muted
border

字体规范

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

标题层级

h1Gemini Heading
h2Gemini Heading
h3Gemini Heading
h4Gemini Heading

DESIGN.md

# Gemini Design System

## Visual Theme & Atmosphere
Vibrant, playful, intelligent. Uses Material Design 3 with dynamic color and elevation. The purple-to-blue gradient suggests creativity meeting technology. Light, airy surfaces with colorful accents create an approachable, futuristic feel.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #8B5CF6 | Brand, navigation, CTAs |
| Secondary | #3B82F6 | Supporting actions |
| Accent | #F59E0B | Highlights, badges |
| Background | #F8FAFC | Main canvas |
| Surface | #FFFFFF | Cards, containers |
| Text | #1E293B | Primary text |
| Muted | #64748B | Secondary text |
| Border | #E2E8F0 | Dividers |

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

## Component Stylings
- **Buttons**: Rounded 20px, gradient fill or tonal, 40px height
- **Cards**: 16px radius, surface-tinted, dynamic color elevation
- **Inputs**: Filled with surface tint, 28px radius, floating labels
- **Chips**: Rounded 8px, tonal fill with icons

## Layout Principles
- 8px base grid
- Responsive containers with max-width 1200px
- Generous padding (24px+)
- Material 3 motion transitions (200-300ms)

## Responsive Behavior
- Breakpoints: 600px, 840px, 1200px
- Adaptive layout columns
- Bottom sheet for mobile actions

常见问题

Gemini 的设计风格是什么?

Google AI助手。蓝紫色渐变,Material Design 3 风格,明亮多彩的界面。

Gemini 使用什么主色调?

Gemini 的主色调是 #8B5CF6,背景色为 #F8FAFC,文本色为 #1E293B。

Gemini 使用什么字体?

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

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

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

探索更多设计系统

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

查看全部设计系统