Gemini

# 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