Light interfaceMeasured m3.material.io

Google Material 3

A soft, rounded, playful system built from gentle purples and pinks

This page is styled with Google Material 3’s own measured values. It is a private reference for AltLeads; their logo, brand and company-only fonts belong to them.

Colours

Each role is a value read from their live website, checked against their screenshots.

Background#F8F1F6
Page behind everything

Surface#FEFBFF
Cards, panels, menus

Text#1C1B1D
Headings and body

Muted text#4D4256
Secondary info

Line#F2ECEE
Dividers and outlines

Accent#6442D6
Main button, links, selection

On accent#FEFBFF
Text on the accent

Contrast

Text on background 15.4:1Muted on background 8.5:1Text on accent 6.2:1

Every colour found on their site

#4D4256#1C1B1D#F2F2F2#6442D6#21182B#F8F1F6#DCDAF5#FEFBFF#F5EFF1#F2ECEE#2F2F2F#F1D3F9

Typography

Headings use Google Sans (free). Body text uses Google Sans Text (free).

h1	Google Sans · 96px · 475	Material Design
h2	Google Sans · 57px · 475	Material at Google I/O 2026
p	Google Sans Text · 16px · 400	Material’s latest updates make it easier to create expressiv

Corners & shadows

Corner sizes used

24px

4px

16px

6px

48px

32px

Shadows

Shadow 1

Components, rebuilt from their values

Live and clickable. Built by us from the numbers above, not copied from their code. Sample CRM data.

Buttons

Navigation

WorkspaceCompanies Contacts Meetings

Disposition

InterestedCallbackBengaluru

Hide do-not-call

Next call

Licious · Admin head

Wants a proposal before the cafeteria contract renews in March.

Tabs

Table

Company	Owner	Status	Last touch
Zomato Food tech · Gurugram	PR	Callback	18 days ago
Licious Food tech · Bengaluru	RM	Interested	Today
Delhivery Logistics · Gurugram	AS	No answer	35 days ago

Toast

Call logged · callback on Friday

Real components from their site

Cropped from Google Material 3’s live website. Click to enlarge.

Buttons · 2

Google Material 3 button: search — #F1D3F9 · corners 16px · 56px

Google Material 3 button: pause — #F1D3F9 · corners 50% · 40px

Buttons · 2

Google Material 3 Buttons: search — fill #F1D3F9 · corners 16px · Google Sans Text 16px

Google Material 3 Buttons: pause — fill #F1D3F9 · corners 50% · Arial 13.3333px

Tabs and switches · 1

Google Material 3 Tabs and switches: play_arrow — no fill · corners 32px · Google Sans Text 16px

Cards and panels · 2

Google Material 3 Cards and panels: Material Design — fill #F8F1F6 · corners 24px · Google Sans Text 16px

Google Material 3 Cards and panels — fill #DCDAF5 · corners 24px · Google Sans Text 16px

Icons

Their site draws no inline icons we could copy.

Product screens

10 real screens from web image search, each linked to where it was found.

Google Material 3 product screen: 1920 × 1080 — 1920 × 1080

Google Material 3 product screen: 1400 × 915 — 1400 × 915

Google Material 3 product screen: 1600 × 3245 — 1600 × 3245

Google Material 3 product screen: 1920 × 960 — 1920 × 960

Google Material 3 product screen: 1108 × 720 — 1108 × 720

Google Material 3 product screen: 1651 × 1448 — 1651 × 1448

Google Material 3 product screen: 1545 × 960 — 1545 × 960

Google Material 3 product screen: 5264 × 2524 — 5264 × 2524

Do & don’t

What makes it Google Material 3

Very rounded shapes everywhere — pill buttons, blobby cards, circular icons
Soft lavender and pink tinted surfaces instead of plain white or grey
Large, expressive display type paired with a friendly purple accent

Use large rounded corners (16-48px) on buttons, cards, and inputs
Tint neutral surfaces faintly with purple or pink rather than pure grey
Use one confident purple accent for primary actions

Don’t

Don't use sharp corners or flat, boxy shapes
Don't use pure white/grey surfaces with no colour tint
Don't mix many unrelated accent colours on one screen

For AltLeads: A calling CRM could borrow the soft rounded shapes and gentle tinted surfaces to make a dense, data-heavy tool feel more approachable to agents using it all day.

Copy the tokens

Paste into any project to try this look.

/* Google Material 3 · values measured from https://m3.material.io/ · reference only, their brand belongs to them */
:root {
  --bg: #F8F1F6;
  --surface: #FEFBFF;
  --text: #1C1B1D;
  --muted: #4D4256;
  --line: #F2ECEE;
  --accent: #6442D6;
  --on-accent: #FEFBFF;
  --radius-button: 16px;
  --radius-card: 24px;
  --radius-small: 4px;
  --button-height: 52px;
  --font-heading: "Google Sans", "Google Sans Flex", system-ui, sans-serif;
  --font-body: "Google Sans Text", "Google Sans Flex", system-ui, sans-serif;
  --shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px, rgba(0, 0, 0, 0.15) 0px 1px 3px 1px;
}