Google Meet

Overview

Google Meet is a productivity-focused video conferencing platform that prioritizes clarity, accessibility, and trust. The design system embodies **Functional Minimalism**—a philosophy that strips away decorative elements to reveal a clean, purposeful interface where every pixel serves collaboration. The brand personality is professional yet approachable: confident in its capabilities, never condescending, and optimized for both enterprise and consumer use cases. The UI evokes a sense of calm efficiency; users feel in control, not overwhelmed by complexity. Voice: direct, reassuring, action-oriented. Example: "Join a meeting now with one click—no setup required."

Colors

The color palette is anchored in **Google's signature Blue** (#1a73e8), which serves as the primary accent for all interactive elements—CTAs, links, focus states, and active indicators. This blue is trustworthy and energetic without being aggressive. The surface stack is built on near-white neutrals: #ffffff (base surface), #f8f9fa (surface-dim for subtle backgrounds), and a graduated container scale (#f1f3f4 to #dadce0) that provides visual hierarchy without relying on darkness. Secondary colors include a neutral charcoal (#3c4043) for text and a warning red (#fc413d) for error states and critical actions. The outline color (#bdc1c6) is used for borders and dividers, creating soft visual separation at 1px width. All interactive elements use the primary blue (#1a73e8) on white backgrounds;

Typography

The type system uses **Google Sans** (weights 500, 700) for headings and **Google Sans Text** (weights 400, 500) for body copy, creating a clear distinction between navigation and content. Display (60px, 700 weight) anchors hero sections; headline-lg (40px, 700) is reserved for major section titles; headline-md (28px, 600) for subsections; title-lg (20px, 600) for card headers. Body-lg (18px, 400) and body-md (16px, 400) handle descriptive text, with line-height set to 1.5 (28px and 24px respectively) for comfortable reading. Labels use 14px (label-md, weight 500) for buttons and 12px (label-sm, weight 500) for smaller UI text. Letter-spacing is minimal (0.01em on labels, 0em on body) to maintain Google's signature tight, modern feel. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on sma

Layout

The layout uses a **12-column fluid grid** with a max-width of 1280px, ensuring responsive scaling from mobile (single column) to desktop (full grid). The gutter is consistently 24px, applied as margin-left/right on grid items. White-space is generous: section separation uses lg spacing (40px), card padding uses md spacing (24px), and internal element spacing uses sm (12px). The hero section spans full-width with 64px (xl spacing) top/bottom padding on desktop, creating breathing room around the primary CTA. Container max-width is enforced at 1280px to prevent line-length from exceeding 80 characters on body text. Spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for component internals, md (24px) for card padding and button groups, lg (40px) for section breaks, xl (64p

Elevation & Depth

Depth is achieved through **subtle, layered shadows** rather than color shifts. Level 1 (Base): no shadow; surface is #ffffff with no elevation. Level 2 (Cards/Containers): box-shadow: 0 1px 3px rgba(60, 64, 67, 0.3), creating a soft, 1px lift. Level 3 (Modals/Popovers): box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), a multi-layer shadow that conveys 8px elevation. Level 4 (Floating Action Buttons/Chat): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a pronounced shadow for persistent floating elements. Hover states on cards transi

Shapes

The shape language is **Soft-Technical**: rounded corners are used strategically to soften hard edges without introducing organic, playful curves. Buttons and chips use full border-radius (9999px / border-radius: 50%) to create pill-shaped affordances that feel modern and clickable. Cards and containers use lg radius (1rem / 16px) for a subtle roundness that distinguishes them from the sharp edges of inputs (DEFAULT radius, 0.5rem / 8px). Input fields and text areas use DEFAULT radius (8px) to signal they are functional, not decorative. The reasoning: full-radius buttons are instantly recogniz

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use {colors.primary} (#1a73e8) background with {colors.on-primary} (white) text, padding 11px 24px, height 40px, full border-radius, and no border. Hover state transitions to #1765cc over 200ms. Focus state adds a 3px ring of rgba(26, 115, 232, 0.2). Secondary buttons are transparent with a 1px {colors.outline} border, same padding/height, and text color {colors.primary}; hover fills with {colors.surface-container-high}. Links are underlined text in {colors.primary}, with hover color #1765cc. All buttons use label-md typography (14px, 500 weight).

Containers & Surfaces Cards are the primary content container: {colors.surface} background, {rounded.lg} (16px), {spacing.md} (24px) padding, and {elevation.s

Do's and Don'ts

**Do**

• Do use {colors.primary} (#1a73e8) exclusively for primary CTAs, links, and focus indicators—it is the only accent color and must remain visually distinct.
• Do apply {elevation.sm} (0 1px 3px rgba(60, 64, 67, 0.3)) to cards and {elevation.md} on hover to create subtle, professional depth without visual clutter.
• Do maintain 24px gutter spacing between grid columns and 40px section separation (lg spacing) to ensure content breathes and remains scannable.
• Do use Google Sans (700 weight) for all headings and Google Sans Text (400 weight) for body copy to maintain the brand's modern, accessible voice.

**Don't**

• Don't use colors outside the defined palette—no custom blues, grays, or accent colors. The system is intentionally constrained to ensure consistency.
• Don't apply shadows deeper than {elevation.lg} (0 3px 8px rgba(0, 0, 0, 0.15)) except on floating action buttons; excessive shadows undermine the clean, professional aesthetic.
• Don't use border-radius values other than the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii fragment the design language.
• Don't mix Google Sans and Google Sans Text within a single heading or button—use Google Sans for all interactive/navigational text and Google Sans Text for body content only.