Google Workspace Design System

Extracted from workspace.google.com — Production-ready components

Typography

Hero (64px)

Title (48px)

Heading (32px)

Subheading (24px)

Body Large (18px) - Used for introductory content and important descriptions

Body (16px) - Standard text for most content throughout the page

Small (14px) - Labels, secondary information, and supporting text

Caption (12px) - Fine print, tertiary information

Colors

Primary

#1A73E8
Google Blue

#1557B0
Blue Hover

#4285F4
Blue Light

Text & Background

#202124
Primary

#5F6368
Secondary

#F8F9FA
BG Light

#DADCE0
Border

Product Colors

#EA4335
Gmail Red

#4285F4
Calendar Blue

#0F9D58
Drive Green

#00897B
Meet Teal

Buttons

Sizes & Variants

Cards

Standard Card

Default card with shadow-1, 16px radius, generous padding. Hover for shadow-2.

Interactive Card

Lifts on hover with transform and deeper shadow. Used for clickable items.

Product Cards

📧

Gmail

Professional email

📅

Calendar

Shared calendars

💾

Drive

Cloud storage

📹

Meet

Video conferencing

Spacing System

8px Base Unit

xs: 4px

sm: 8px

md: 16px

lg: 24px

xl: 32px

2xl: 48px

3xl: 64px

4xl: 96px

Border Radius

Small

8px radius

Medium

16px radius (default)

Large

24px radius

Full

100px radius (pill)

Complete Example

The better way to work

Join millions of businesses that run on premium versions of Gmail, Calendar, Drive, Meet, and more. Future-proof your business with familiar tools.

📧

Professional email

Custom email @yourcompany with 30GB+ storage

📅

Shared calendars

Schedule meetings and manage resources

💾

Cloud storage

Secure file storage with team sharing