Google Workspace

Overview

Google Workspace is an enterprise-grade productivity platform that embodies 'Functional Minimalism'—a design philosophy that prioritizes clarity, efficiency, and purposeful hierarchy over decorative elements. The interface serves millions of businesses by combining Gmail, Drive, Meet, Calendar, and AI-powered tools into a cohesive ecosystem. The visual language is clean, accessible, and optimized for rapid task completion: users should locate features and execute actions within 1–2 seconds. The brand personality is professional yet approachable, confident without arrogance, and deeply focused on user outcomes. Voice: direct, solution-oriented, and human-centered. Example: 'Get results faster with Gemini—your AI assistant that understands your business context.'

Colors

The color system is anchored by a vibrant, action-oriented primary blue (#1a73e8) that appears on all call-to-action buttons, links, and interactive states. This blue is the signature accent—it commands attention without overwhelming the interface. The surface stack is built on pure white (#ffffff) for maximum clarity and accessibility, with subtle container variations (surface-dim #f8f9fa, surface-container-high #e9eef6) used to create visual separation between content zones without introducing visual noise. Secondary colors (dde3ea, c2e7ff) support status indicators and secondary actions. On-surface text is set to #202124 (near-black) for 16:1 contrast ratio compliance. Error states use #b3261e for destructive actions. The outline color (#c4c7c5) is reserved for borders and dividers. All

Typography

The type system uses Google Sans (headline/display) and Roboto (body/label) to balance brand personality with legibility at all sizes. Display (54px, 700 weight, -0.02em tracking) anchors hero sections and major page titles; Headline-lg (40px, 600 weight) structures section breaks; Body-md (16px, 400 weight) is the baseline for all body copy and ensures comfortable reading at 24px line-height. Label-md (14px, 500 weight) is applied to buttons and navigation to create visual distinction from body text. The type hierarchy is reinforced through weight progression (400 → 500 → 600 → 700) rather than excessive size jumps, maintaining rhythm across the page. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) on small labels (12px and below) when placed over busy backgrounds to ensure legibility.

Layout

The page uses a 12-column grid with a max-width of 1440px, allowing content to scale fluidly on mobile (single column) through tablet (6 columns) to desktop (full 12 columns). The hero section spans full width with 64px (lg spacing) vertical padding on desktop, reducing to 40px (md spacing) on tablet and 24px (gutter) on mobile. Section separation uses lg spacing (40px) between major content blocks to create breathing room without excessive whitespace. The gutter (24px) is applied consistently to left/right margins on all container elements. Cards and content modules use md spacing (24px) for internal padding, with sm spacing (12px) for nested elements. This creates a clear visual hierarchy: large gaps separate major sections, medium gaps separate card groups, and small gaps separate list

Elevation & Depth

Depth is conveyed through subtle shadow layering rather than color shifts. The base elevation (sm: 0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 3px rgba(60, 64, 67, 0.15)) is applied to all interactive elements (buttons, cards, inputs) to lift them 1–2px from the surface. On hover, elements transition to md elevation (0 4px 12px rgba(0, 0, 0, 0.08)) over 200ms, signaling interactivity. Modals and overlays use lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) to create clear separation from the page. Active/pressed states use inset shadows (inset 0 2px 0 rgba(0, 0, 0, 0.15)) to create a tactile 'pre

Shapes

The shape language follows 'Geometric Precision'—a philosophy that uses rounded corners strategically to soften hard edges while maintaining a structured, professional appearance. Buttons use full rounding (100px border-radius) to create pill-shaped affordances that feel modern and clickable. Cards and containers use md rounding (8px) to balance softness with structure. Input fields use DEFAULT rounding (4px) for a more technical, form-like appearance. Tab indicators and small UI elements use sm rounding (0.25rem / 4px). The full rounding (100px) is reserved exclusively for primary CTAs and ba

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #1a73e8 background with white text (16px, 500 weight), 11px vertical padding, 24px horizontal padding, and full rounding (100px). On hover, the background darkens to #1557b0 and applies sm elevation (0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 3px rgba(60, 64, 67, 0.15)) over 200ms. On active/press, the background becomes #0d47a1 with an inset shadow (inset 0 2px 0 rgba(0, 0, 0, 0.15)) to create tactile feedback. Secondary buttons use transparent background with a 1px border (#c4c7c5) and #1a73e8 text; on hover, they lift to #e9eef6 background. All button text uses Google Sans Text at 14px, 500 weight, 0.01em tracking.

Containers & Surfaces Cards are the primary content container. Standard cards use wh

Do's and Don'ts

**Do**

• Do use primary blue (#1a73e8) exclusively for CTAs, links, and interactive states—it is the signature brand accent and must remain visually distinct.
• Do apply full rounding (100px) only to buttons and badges to create clear visual hierarchy; use 8px rounding for cards and containers.
• Do maintain 16:1 contrast ratio minimum between text and background; use #202124 on white and #f8f9fa on dark surfaces.
• Do use Google Sans for headlines and Roboto for body text; never mix serif fonts or system-ui fallbacks in the primary type stack.
• Do apply sm elevation (0px 1px 2px rgba(60, 64, 67, 0.3), 0px 1px 3px rgba(60, 64, 67, 0.15)) to all interactive elements to signal clickability.
• Do use lg spacing (40px) between major sections and md spacing (24px) between card groups to create visual breathing room.

**Don't**

• Don't use secondary blue (#4285f4) or tertiary colors as primary CTAs; primary blue (#1a73e8) is the only action color.
• Don't apply shadows to text or use text-shadow for body copy; reserve shadows for UI containers and interactive elements only.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the geometric precision system.
• Don't reduce padding below 12px (sm spacing) on interactive elements; minimum touch targets must be 40px × 40px for accessibility.
• Don't mix Google Sans and Roboto weights arbitrarily; use 400 for body, 500 for labels, 600 for headlines, and 700 for display only.
• Don't apply color overlays or gradients to the white surface; the clean, minimal aesthetic depends on pure white backgrounds.