Gmail design system

Gmail on the web, in the Material 3 look Google launched in 2022 and still uses in 2026. Colours, type, 163 icons and every main part, in light and dark. Values come from Google's own public files (its GM3 colour tokens and Gmail's own stylesheet, saved by the Wayback Machine in Sept 2024) or were measured on Google's own pictures. We never signed in to Gmail.

real = Google's own filemeasured = read from Google's picturesest. = our best guessours = our design where Gmail shows nothing

Gmail at a glance

A calm, quiet mail app. A blue-grey page, a white card for the list, one font (Google Sans), 14px text on 20px lines and 40px rows. Unread mail is bold on white; read mail is normal on a pale tint. Colour is saved for two things: the light-blue Compose button and the blue Send button. Hovers change in 150 ms on one curve.

What you notice first

Left: Google's picture (or a blog's). Right: our copy, built only from this design system. The copies work: open one full size to point at rows, star, archive with Undo, open a mail, reply and write a new one. The Dark mode switch at the top also switches every copy below.

Inbox (2026)

Open conversation with the reply box

Compose window (close-up)

Search results with filter chips

Quick settings

Gmail uses Google's "GM3" colour set (Google's own version of Material 3) and gives each colour a job. The tables below are read live from the token file, so they always show what the file really says. The small label says where each value came from.

Gmail roles · light and dark

Light comes from Gmail's own stylesheet or from Google's 2022 launch picture. Dark is Gmail's real Dark theme, a neutral grey theme measured on two real dark inbox pictures (2022 and 2026). Where no dark picture shows a part, the dark value is our estimate.

Label colours measured

Measured on the 2026 light and dark pictures. They stay the same in both themes. A label chip in a row uses the label colour as its fill.

Google's GM3 system colours real

Google's own token values from a public Google page; Gmail's stylesheet uses the same values. Note: Gmail's Dark theme does not use the blue-tinted GM3 dark surfaces (#131314, #1E1F20). It uses plain greys instead.

One family: Google Sans, now free to use (open licence since 2025). Gmail's own stylesheet asks for "Google Sans" first, then Roboto. Message text asks for "Google Sans Text", which is not openly licensed, so Google Sans stands in for it here. Most text is 14px on 20px lines. Unread mail is bold (700); buttons and tabs are medium (500).

Size steps: 12, 14, 16, 18, 22, 24. Weights: 400 (most text), 500 (buttons, tabs, sender in a conversation), 700 (unread). Font stack from Gmail's stylesheet: "Google Sans", Roboto, RobotoDraft, Helvetica, Arial, sans-serif real.

Gmail draws its icons from Google's Material Symbols (outlined, weight 400; filled when chosen). Gmail's own icon files are named "_20dp", so most icons are 20px; the top bar uses 24px. Every icon here is the real Material Symbols drawing (Apache licence), named as Google names it. Click any icon to copy its name.

The ones you see on the inbox

All icons

Gmail is soft and round: pills for search, Send, nav items and chips; 16px corners on the list card and Compose button; 4px on tooltips and snackbars. Space follows a 4px grid (8, 12, 16, 24).

Space steps est.

Gmail has no public space scale. These are the gaps that repeat in its stylesheet and pictures.

Heights and sizes

Gmail's shadows are two soft grey layers in Google's grey (60, 64, 67). Things that float get a shadow: the Compose button on hover, a row you point at, menus and the compose window. In dark mode shadows almost vanish, so Gmail relies on lighter greys instead.

Live and clickable, drawn with the real kit classes in gmail.css. Point, click and use the keyboard. In the app these parts are placed at fixed spots; here they sit one after another.

S

Compose

• Inbox12
• Starred
• Snoozed
• Sent
• Drafts3
• More

Labels

• Clients
• FYI
• Marketing

Click the search pill: it turns white with a shadow while you type. Type something and a clear (×) button appears; Enter "searches".

Click a nav item to choose it. The chosen item gets the pale blue pill and bold words. Unread folders show a bold count.

Compose opens a New Message window (in the compose demo further down).

Top bar 64px, same colour as the page, icons 24px in 40px round buttons, lockup 109 × 40. Search 48px pill, 24px corners, --gm-search; focus turns it white with --gm-shadow-1 est.. Compose 56px tall, 16px corners, #C2E7FF with dark words #001D35 (dark theme: white with black words); hover adds --gm-shadow-2 in 0.08s. Nav item 32px, round on the right, chosen = #D3E3FD + bold; hover 8% grey. Width 256px.

A small working Gmail built only from this design system. Switch folders and tabs, point at a row to archive or delete (with Undo), star, tick rows for the bulk bar, open a mail and reply, write a new mail, search, and change density. It follows the page's light/dark switch. Want the full-size copy? Open the inbox copy.

Every clickable thing has the same few looks: a faint grey layer on hover (8%), a stronger one when pressed (12%), a 2px blue outline for keyboard focus, and a pale blue fill when chosen. Each state is frozen below so you can compare without pointing. Hover and press layers are Gmail's own real; a few press looks are est..

Motion

Gmail moves little and fast. Colour changes take 150ms on one curve (cubic-bezier(.4, 0, .2, 1), from Gmail's stylesheet). Panels and the compose window take about 250ms and slow down at the end. Press Play to see each one.

Motion tokens

If someone turns on "reduce motion" on their computer, the kit switches every transition off.

Gmail's Dark theme is plain neutral grey, not Material's blue-tinted dark. Two real pictures (9to5Google, July 2022 and Mailmeteor, Jan 2026) agree: page #111111, list card #2C2C2C, read rows #161616 (darker than the card!), search #474747, and a white Compose button. Flip the whole page with the switch at the top.

What is real and what is ours

Scores: the inbox copy matches Gmail's real dark picture at 92.7%. The thread, compose, search and quick settings copies have dark versions, but they are our estimate.

Checked against Gmail's own pictures and stylesheet. The small label after each rule names the Law of UX behind it; click it to jump there. A red bullet marks a place where Gmail itself falls short.

The rules behind Gmail's feel, for AltLeads too. Each card names the UX law, says it simply, and shows where Gmail follows it. All 29 laws are checked one by one in the scorecard below.

Each pair is measured live from the token file, in both themes at once. Text needs 4.5:1 (big text 3:1). Icons and outlines need 3:1.

Accessibility checklist

Tick as you check a screen. Your ticks are saved in this browser.

All 29 laws from lawsofux.com, each checked against Gmail's own screens. Every card says what the law means in plain words, what Gmail really does, and what AltLeads should take from it. Click a coloured bar to jump to a law, or filter by result.

A caller's lead list works a lot like an inbox. These Gmail ideas could move across almost as they are.

Add these files to any HTML page, then use the classes. Put gm-dark on <html> (or any parent) for the Dark theme. Icons: <svg data-i="archive"> is filled in by the kit; add .fill to the name for the filled style.

<link rel="stylesheet" href="gmail/gmail-tokens.css">  <!-- GM3 colours + Gmail roles, light + dark, fonts -->
<link rel="stylesheet" href="gmail/gmail.css">         <!-- parts: gm-row, gm-compose, gm-chip, gm-btn ... -->
<body class="gm-root">
<script src="gmail/gmail-icons.js"></script>           <!-- 163 Material Symbols (+95 filled), 20 and 24px -->
<script src="gmail/gmail-kit.js"></script>             <!-- GM.svg, GM.hydrate, GM.tips, GM.snack, GM.menu -->

<button class="gm-compose-btn"><svg data-i="edit" data-s="24"></svg>Compose</button>
<span class="gm-send"><button class="go">Send</button><button class="more" aria-label="More send options"><svg data-i="arrow_drop_down"></svg></button></span>
<button class="gm-chip" aria-pressed="false">Has attachment</button>
<button class="gm-ib" aria-label="Archive" data-tip="Archive"><svg data-i="archive"></svg></button>

<script>
  GM.tips(document);                                       // tooltips for every [data-tip]
  GM.snack('Conversation archived.', 'Undo', undoFn);      // bottom-left snackbar
  GM.menu(button, [{ label: 'Mark as unread', icon: 'mark_email_unread', run: fn }, '-', { label: 'Move to' }]);
</script>

Everything came from public pages, collected 13 Oct 2026. Nobody signed in, and mail.google.com was never opened. Full notes: inspiration/gmail/NOTES.md.

Honest gaps

• No real dark picture of the compose window, a conversation, settings or quick settings. Their dark looks are our estimate.
• No real picture of Comfortable or Compact density. Heights come from Gmail's stylesheet (40 and 28px), not from a picture.
• Gmail's dark stylesheet was not found. Dark text colours are read from JPEGs, so they may be a little off.
• The search pill fill differs between sources (#EAF1FB in the 2024 stylesheet, #E9EEF6 in a 2026 picture). We used the stylesheet.
• No phone (mobile web) Gmail was collected.
• The snackbar, dialog and checkbox colours follow Material 3, not a Gmail picture.