Design System inspired by Google

Search and services. Material Design, four-color system, clean functional.

Usage

npx getdesign@latest add google

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs

Bookmarked

Not an official Google design system. A curated starting point for building Google-like UIs with your AI coding agent.

Search and services. Material Design, four-color system, clean functional.

Preview

google.design.md

Brand System Catalog

DESIGN SYSTEM INSPIRATION OF GOOGLE

Search and services. Material Design, four-color system, clean functional.

Explore the system View tokens

Color Palette

Search and services. Material Design, four-color system, clean functional.

Primary

Blue

#4285f4

Brand color

Red

#ea4335

Brand color

Yellow

#fbbc04

Brand color

Green

#34a853

Brand color

White

#ffffff

Brand color

Dark

#202124

Brand color

Gray 200

#e8eaed

Brand color

Gray 500

#9aa0a6

Brand color

Gray 700

#5f6368

Brand color

Typography

A type system inspired by Google.

Google Sans

Google Sans, Google Sans

Roboto

Roboto, Google Sans

Roboto Mono

Roboto Mono, Google Sans

DISPLAY / 64px / 700 / 1.1

EVERYONE

H1 / 48px / 700 / 1.2

A disciplined editorial voice

H2 / 32px / 600 / 1.3

Section heading

BODY / 16px / 400 / 1.6

Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.

SMALL / 14px / 400 / 1.5

Small

CODE / 14px / 400 / 1.6

Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Google.

Not detected on this URL

Components

Other component primitives mapped from the Google spec.

Not detected on this URL

Design System Inspired by Google

1. Visual Theme & Atmosphere

Search and services. Material Design, four-color system, clean functional.

Key Characteristics:

Four-color brand system (blue, red, yellow, green)

Material Design 3 component system

Clean functional search-centric layout

Google Sans for marketing, Roboto for UI

Card-based content organization

2. Color Palette & Roles

Primary

Blue (#4285F4): Brand color
Red (#EA4335): Brand color
Yellow (#FBBC04): Brand color
Green (#34A853): Brand color
White (#FFFFFF): Brand color
Dark (#202124): Brand color
Gray 200 (#E8EAED): Brand color
Gray 500 (#9AA0A6): Brand color
Gray 700 (#5F6368): Brand color

3. Typography Rules

Font Family

Display & UI: Google Sans, Roboto, Roboto Mono

Hierarchy

Role	Size	Weight	Line Height
Display	64px	700	1.1
H1	48px	700	1.2
H2	32px	600	1.3
Body	16px	400	1.6
Small	14px	400	1.5
Code	14px	400	1.6

4. Component Stylings

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

5. Layout Principles

Base unit: 4-8px
Max container: 1100-1200px
Consistent section spacing: 80-120px vertical

6. Depth & Elevation

Depth communicated through background color shifts, subtle shadows, or border treatments.

7. Do's and Don'ts

Do

Follow the established color palette strictly
Maintain typographic hierarchy
Use brand-consistent border-radius

Don't

Introduce off-brand colors
Use inconsistent spacing
Override the established visual language

8. Responsive Behavior

Breakpoint	Width
Mobile	<640px
Tablet	640-1024px
Desktop	>1024px

9. Agent Prompt Guide

Quick Color Reference

Blue: #4285F4
Red: #EA4335
Yellow: #FBBC04
Green: #34A853
White: #FFFFFF
Dark: #202124

Typography

Font: Google Sans, Roboto, Roboto Mono