Google Business Profile – Design System Deep Dive

1. Brand Overview

Google's design philosophy here is very much in line with its mature Material Design evolution — but with a corporate, utility-first flavour. This is not the playful Google doodle vibe. This is the “we want small business owners to trust the interface and get things done” vibe.

The Business Profile site is built for owners, marketers, and agencies managing listings. It’s transactional, but with enough friendliness to not feel like an admin dashboard. The tone is professional but approachable — think clean typography, restrained color palette, and subtle depth.

Notice how the primary blue (#1a73e8) is the only strong hue that consistently signals interactive elements. Neutral grays dominate, especially #3c4043 and #5f6368, keeping the UI grounded. This works because the audience is here to manage business data, not to be entertained. You don’t want to overwhelm them with color.

The typography stack is pure Google: Google Sans Display for large headings, Google Sans and Google Sans Text for body and UI text. Material Symbols Outlined for icons. This keeps brand consistency across Google's ecosystem.

Layout-wise, the 8px grid is king. Everything snaps to multiples of 8px, with occasional 4px adjustments. Breakpoints at 600px, 1023px, and 1024px reflect a mobile-first approach but with fine control over tablet vs desktop.

If you’ve worked with Material Design, you’ll feel at home — but there’s a layer of corporate polish: border radii are purposeful (24px avatars, 1000px pill buttons), shadows are light and controlled, and borders replace heavy depth.

2. Color System

2.1 Primary Colors

The hero color is #1a73e8 — a saturated Google blue. Used for CTAs, links, and key actions. Psychologically, blue signals trust, reliability, and calm. It’s a safe choice for a business management tool. Competitors like Facebook also lean heavily on blue for similar reasons. The difference: Google’s blue is lighter than Facebook’s deep navy, keeping it friendlier.

Secondary accents are functional: #0b57d0 (a darker blue for avatars and secondary buttons), #4285f4 appears as a focus outline color in cards. Grays dominate for text and surfaces.

2.2 Complete Palette

Color Name	Hex	Role	Usage
Text Dark	#3c4043	Primary text	Headers, body text
Text Medium	#5f6368	Secondary text	Labels, muted links
Text Black	#202124	Strong text	Navigation, emphasis
Primary Blue	#1a73e8	CTA	Buttons, links
Surface Light	#f8f9fa	Background	Panels, modals
Black	#000000	Pure black	Icons, text
Dark Blue	#0b57d0	Secondary action	Avatars, secondary buttons
Gray Light	#bdc1c6	Disabled	Disabled buttons, muted text
Container Blue	#e8f0fe	Background	Blue-tinted surfaces
Focus Blue	#174ea6	Focus indicator	Active icons
Outline Gray	#dadce0	Outlines	Button borders
Accent Yellow	#ffe07c	Highlight	Warnings, accent surfaces
Icon Press Blue	#d2e3fc	Interaction	Icon press feedback
On-Surface Accent Blue	#001944	Text on blue	Accessibility
Container Green	#e6f4ea	Background	Success surfaces
Accent Blue Surface	#7fcfff	Decorative	Blue accents
Icon Green	#188038	Functional icon	Success icons
Container Yellow	#fef7e0	Background	Warning surfaces
Tertiary Yellow Surface	#fefaec	Background	Light warning
Container Red	#fce8e6	Background	Error surfaces
Accent Green Surface	#beefbb	Background	Success accent
Focus Outline Blue	#4285f4	Focus state	Card outlines
Press Gray	#e8eaed	Interaction	Tab press state
Accent Red Text	#d93025	Error text	Validation
On-Surface Accent Red	#3a0907	Text on red	Accessibility
On-Surface Accent Yellow	#2f1400	Text on yellow	Accessibility
Accent Red Surface	#ffdadc	Background	Error highlights
On-Surface Accent Green	#002110	Text on green	Accessibility
Hover Outline Blue	#8ab4f8	Hover state	Medium emphasis button hover

2.3 Color Relationships

Contrast is generally strong: primary blue (#1a73e8) with white text passes WCAG AA easily. Grays (#3c4043, #5f6368) on white surfaces are readable at small sizes. Disabled states use #bdc1c6 — low contrast intentionally.

Dark mode isn’t explicit here — palette is tuned for light backgrounds. But on-surface accent colors (#001944, #3a0907, etc.) are clearly meant to ensure text legibility on colored surfaces.

2.4 Usage Guide

Combine #1a73e8 with white for primary actions.
Use #0b57d0 for secondary actions or avatars.
Avoid mixing more than one accent in a single component — keeps focus clear.
Disabled states: use #bdc1c6 and avoid hover effects.
For success messages: #e6f4ea background with #188038 icon/text.
For errors: #fce8e6 background with #d93025 text.

3. Typography

3.1 Font Families

Google Sans Display — large headings. Fallbacks: Arial, Helvetica.
Google Sans — headings, body. Fallbacks: Roboto, Arial, Helvetica.
Google Sans Text — body, captions, buttons. Fallbacks: Arial, Helvetica.
Material Symbols Outlined — icons. Font feature "liga" enabled.

All fonts from Google Fonts. Variable fonts supported.

3.2 Type Scale

Element	Font	Size	Weight	Line Height
H1	Google Sans Display	60px	400	1.20
H1 Bold	Google Sans Display	60px	700	1.20
H1	Google Sans Display	48px	400	1.17
H1 Medium	Google Sans Display	48px	500	1.17
Button	Google Sans Text	44px	400	1.50
H1 Bold	Google Sans Text	42px	700	0.12
H1	Google Sans	36px	400	1.22
H1 Medium	Google Sans	36px	500	1.22
H1 Medium	Google Sans	28px	500	1.29
H1	Google Sans	28px	400	1.29
Icon	Material Symbols Outlined	24px	400	1.00
H1	Google Sans	22px	400	—
H1	Google Sans	20px	400	1.40
H1 Medium	Google Sans	20px	500	1.40
H1 Bold	Google Sans	18px	700	1.78
H1	Google Sans	18px	400	1.50
Link	Google Sans	16px	500	1.50
Caption	Google Sans Text	14px	400	2.40

(Full list is extensive — every size in the data is valid and used)

3.3 Hierarchy

Large display sizes (48–60px) are rare — reserved for hero headings. Most UI text sits between 14–18px — comfortable for dashboards. Weight shifts (400, 500, 700) create clear hierarchy without changing size. This keeps screens dense but readable.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid. Common values:

Value	Count	Notes
1px	166	Hairline borders
6px	156	Icon spacing
8px	199	Button padding, small gaps
24px	37	Section gaps
32px	22	Card padding
60px	15	Hero section spacing

Occasional 4px, 12px for tighter control. Rare 80px for large section separation.

4.2 Layout

Breakpoints:

600px (mobile/tablet)
1023px (tablet/desktop)
1024px (desktop)

Containers are fluid, snapping to breakpoints. Padding scales with viewport.

5. Visual Elements

Border Radius

All values:

4px — default for buttons, cards
24px — avatars, rounded buttons
1000px — pill buttons
50% — perfect circles for images
Odd shapes: 4px 100px 100px 4px for asymmetrical pills.

Shadows

Light, controlled:

rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px
No heavy drop shadows — depth via borders.

Borders

1px solid #dadce0 for button outlines.
Menu items: 2px solid #202124 or #5f6368 on left.

6. Components

6.1 Buttons

Primary
Default: bg #1a73e8, color #fff, padding 8px 16px, radius 1000px, border none, font-weight 500, size 16px.
Hover: not explicitly defined — likely shade change.
Focus: outline #fff.

Secondary / Avatar
Default: transparent bg, color #0b57d0, radius 24px, border 1px solid #dadce0.

Header CTA
Default: bg #f8f9fa, text #3c4043, no radius.

6.2 Links

Gray links (#5f6368) with underline.
Blue links (#1a73e8) no underline.
White links (#fff) on dark background.

6.3 Forms

Select inputs: bg #f8f9fa, text #5f6368, padding right 24px, left 2px, radius 0.

6.4 Cards

Radius varies: 4px, 12px, 24px. Borders 1px solid #dadce0. Shadows minimal.

7. Design Tokens

:root {
  /* Colors */
  --color-text-dark: #3c4043;
  --color-text-medium: #5f6368;
  --color-text-black: #202124;
  --color-primary-blue: #1a73e8;
  --color-surface-light: #f8f9fa;
  --color-black: #000000;
  --color-dark-blue: #0b57d0;
  --color-gray-light: #bdc1c6;
  --color-container-blue: #e8f0fe;
  --color-focus-blue: #174ea6;
  --color-outline-gray: #dadce0;
  --color-accent-yellow: #ffe07c;
  --color-icon-press-blue: #d2e3fc;
  --color-on-surface-accent-blue: #001944;
  --color-container-green: #e6f4ea;
  --color-accent-blue-surface: #7fcfff;
  --color-icon-green: #188038;
  --color-container-yellow: #fef7e0;
  --color-tertiary-yellow-surface: #fefaec;
  --color-container-red: #fce8e6;
  --color-accent-green-surface: #beefbb;
  --color-focus-outline-blue: #4285f4;
  --color-press-gray: #e8eaed;
  --color-accent-red-text: #d93025;
  --color-on-surface-accent-red: #3a0907;
  --color-on-surface-accent-yellow: #2f1400;
  --color-accent-red-surface: #ffdadc;
  --color-on-surface-accent-green: #002110;
  --color-hover-outline-blue: #8ab4f8;

  /* Typography */
  --font-google-sans-display: "Google Sans Display", Arial, Helvetica;
  --font-google-sans: "Google Sans", Arial, Helvetica;
  --font-google-sans-text: "Google Sans Text", Arial, Helvetica;
  --font-material-symbols: "Material Symbols Outlined";

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-60: 60px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-pill: 1000px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-light: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
}

8. AI Coding Assistant Prompt

# Google Business Profile Design System Specification

You are a Google Business Profile design expert. Build UIs matching their visual language exactly.

## Brand Context
Google Business Profile UI is professional, approachable, and built for task efficiency. Colors are restrained, typography is clean, and layout sticks to an 8px grid. Depth is minimal — borders and light shadows replace heavy effects.

## Color Palette
- Text Dark: #3c4043 — Primary text
- Text Medium: #5f6368 — Secondary text
- Text Black: #202124 — Strong text
- Primary Blue: #1a73e8 — CTAs, primary buttons
- Surface Light: #f8f9fa — Backgrounds
- Black: #000000 — Icons, text
- Dark Blue: #0b57d0 — Avatars, secondary actions
- Gray Light: #bdc1c6 — Disabled states
- Container Blue: #e8f0fe — Background surfaces
- Focus Blue: #174ea6 — Focus icon color
- Outline Gray: #dadce0 — Button borders
- Accent Yellow: #ffe07c — Warnings
- Icon Press Blue: #d2e3fc — Icon press feedback
- On-Surface Accent Blue: #001944 — Text on blue
- Container Green: #e6f4ea — Success background
- Accent Blue Surface: #7fcfff — Decorative accents
- Icon Green: #188038 — Success icons
- Container Yellow: #fef7e0 — Warning background
- Tertiary Yellow Surface: #fefaec — Light warning background
- Container Red: #fce8e6 — Error background
- Accent Green Surface: #beefbb — Success accent background
- Focus Outline Blue: #4285f4 — Focus state outline
- Press Gray: #e8eaed — Tab press state
- Accent Red Text: #d93025 — Error text
- On-Surface Accent Red: #3a0907 — Text on red
- On-Surface Accent Yellow: #2f1400 — Text on yellow
- Accent Red Surface: #ffdadc — Error highlight
- On-Surface Accent Green: #002110 — Text on green
- Hover Outline Blue: #8ab4f8 — Medium emphasis button hover

## Typography
Fonts:
- Google Sans Display, Arial, Helvetica — Large headings
- Google Sans, Roboto, Arial, Helvetica — Body, headings
- Google Sans Text, Arial, Helvetica — UI text, captions
- Material Symbols Outlined — Icons

Sizes:
| Level | Font | Size | Weight | Line Height | Use |
| H1 | Google Sans Display | 60px | 400 | 1.20 | Hero titles |
| H1 Bold | Google Sans Display | 60px | 700 | 1.20 | Hero emphasis |
| H1 | Google Sans Display | 48px | 400 | 1.17 | Section titles |
| H1 Medium | Google Sans Display | 48px | 500 | 1.17 | Section emphasis |
| Body | Google Sans | 16px | 400 | 1.50 | Main content |
| Button | Google Sans Text | 16px | 500 | 1.50 | CTAs |
| Caption | Google Sans Text | 14px | 400 | 2.40 | Meta info |

## Spacing & Grid
Base: 8px grid. Scale: 1px, 4px, 6px, 8px, 12px, 16px, 24px, 32px, 60px, 80px.
Buttons: padding 8px 16px.
Cards: padding 24px–32px.
Section gaps: 60px.

## Border Radius
- none: 0px — Headers
- sm: 4px — Buttons, small cards
- md: 8px — Modals
- lg: 24px — Avatars, large buttons
- pill: 1000px — Primary buttons
- circle: 50% — Images

## Shadows & Depth
Light shadows only:
- rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: #1a73e8;
  color: #fff;
  padding: 8px 16px;
  border-radius: 1000px;
  border: 1px solid transparent;
  font-weight: 500;
  font-size: 16px;
}
.btn-primary:focus {
  outline: 2px solid #fff;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #0b57d0;
  border-radius: 24px;
  border: 1px solid #dadce0;
  font-weight: 400;
  font-size: 16px;
}
```

### Link
```css
.link-primary {
  color: #1a73e8;
  text-decoration: none;
}
.link-secondary {
  color: #5f6368;
  text-decoration: underline;
}
```

### Input Field
```css
.select {
  background: #f8f9fa;
  color: #5f6368;
  border: 0;
  border-radius: 0;
  padding: 0 24px 0 2px;
}
```

### Card
```css
.card {
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  padding: 24px;
}
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: <600px
- Tablet: 600px–1023px
- Desktop: ≥1024px

## Interaction Rules
- Transition: 150ms ease for hover/focus.
- Focus indicators: Use outline colors from palette.
- Disabled states: Reduce opacity, use #bdc1c6.

## DO List
- Use only colors from palette.
- Maintain 8px grid.
- Use Google Sans family throughout.
- Keep shadows subtle.
- Use pill radius for primary CTAs.

## DON'T List
- Avoid heavy shadows.
- Don’t mix corner styles in one component.
- Don’t invent new colors.
- Avoid overusing accent colors.

## Code Examples
(Button, Card, Input shown above)

9. Summary

TL;DR — This is Google’s Business Profile in Material Design maturity mode: restrained palette, clean type, 8px grid, subtle depth. Blue is your action color; everything else supports it.

Brand Keywords:

trust-focused
utility-clean
grid-disciplined
brand-consistent

G Design System: Professional Utility-First UI

Brand Identity

Color Palette

Typography

Design Style

Full Analysis