Waze
waze.com · set in Google Sans
SaveUnofficial A style guide made by SiteStyleGuide from blog.google’s public web pages. Not affiliated with or endorsed by blog.google. The real site is blog.google ↗
Unofficial style guide
blog.googlestyle guide
blog.google’s website (blog.google) uses Google Sans for its headings and body text. Its palette is led by Light Royal Blue (#1A73E8), Dark Slate Blue (#174EA6) and Royal Blue (#1967D2), with #5F6368 text on #FFFFFF. Captured from the live site on 3 November 2026.
- Website
- blog.google
- Typefaces
- Google Sans, Google Sans Flex, Product Sans
- Palette
- 4 neutrals, 12 colours, 3 gradients
- Captured
- 3 Nov 2026 · added by @sitestyleguide
https://blog.google/
Screenshot
blog.google
Identity & metadata
What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.
Title &
description
- Page title
- News from Google | Google Product and Technology News and Stories
- ▲ 65 / 60 characters
- Meta description
- Get the latest news and stories about Google products, technology and innovation on News from Google, Google's official blog.
- ● 125 / 160 characters
- Site name
- blog.google
- og:title
- News from Google
- og:description
- Get the latest news and stories about Google products, technology and innovation on News from Google, Google's official blog.
- Language
- en-us
In search results
blog.googlehttps://blog.google/
News from Google | Google Product and Technology News and Sto…
Get the latest news and stories about Google products, technology and innovation on News from Google, Google's official blog.
When shared
blog.google
News from Google
Get the latest news and stories about Google products, technology and innovation on News from Google, Google'…
Logo & favicons
Found as: image in the header. SVG, 30 × 30.
Logo
On white
On black
On Light Royal Blue
Favicons
2 found-
180 px · PNG
apple-touch-icon
-
News from Google | Google Product and Technology News and Stories
Light browser tab
News from Google | Google Product and Technology News and Stories
Dark browser tab
Colour
Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.
Contrast is against the site’s text colour (#5F6368) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.
Colour
Balance
How much each colour is used- White 30.2%
- Near Black 19.5%
- Light Royal Blue 10.3%
- Cool Dark Grey 9.6%
- Dark Slate Blue 7.2%
- Royal Blue 7.1%
- Off White 5.3%
- Light Lavender 3.5%
- Light Steel Blue 1.2%
- Deep Lavender 1.2%
- Deep Steel Blue 1.2%
- Light Blue 0.8%
- Fire Brick 0.8%
- Dodger Blue 0.8%
- Honey Dew 0.7%
- Deep Royal Blue 0.7%
By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.
Neutrals
Text, backgrounds and structure-
White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 0 0 0
- On text
- 6.05:1 AA
- On white
- —
Background, text, border · body, .uni-article-hero--blue
-
Near Black
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 11 8 0 86
- On text
- 2.66:1 Fail
- On white
- 16.10:1 AAA
Text, graphic, border · .uni-landing-newsletter__description, .uni-article-card__summary
-
Cool Dark Grey
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 9 5 0 59
- On text
- —
- On white
- 6.05:1 AA
Text, graphic, background · .uni-nav-mobile__section-title--small, body
-
Off White
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 3 2 0 12
- On text
- 4.41:1 AA large
- On white
- 1.37:1 Fail
Background, border, text · .uni-nav-mobile__shape, .uni-nav-desktop__footer p:before
Colours
Brand colours and accents, most used first-
Light Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 89 50 0 9
- On text
- 1.34:1 Fail
- On white
- 4.51:1 AA
Text, background, border · .uni-category-page__subtitle>* a.superscript, .uni-subcategory-page__subheading>* a
-
Dark Slate Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 86 53 0 35
- On text
- 1.30:1 Fail
- On white
- 7.85:1 AAA
Text, border, background · .uni-category-page__subtitle>* a:active, .uni-category-page__subtitle>* a.superscript:hover
-
Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 88 51 0 18
- On text
- 1.13:1 Fail
- On white
- 5.37:1 AA
Border, background, text · .uni-landing-newsletter-form__button, .uni-landing-newsletter-form__button:before
-
Light Lavender
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 17 10 0 1
- On text
- 4.65:1 AA
- On white
- 1.30:1 Fail
Background · .uni-category-page__subtitle>* a.superscript:hover, .uni-category-page__subtitle>* a.superscript:active
-
Light Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 30 19 0 2
- On text
- 3.67:1 AA large
- On white
- 1.65:1 Fail
Background, border · .skeleton--blue, --color-blue-200
-
Deep Lavender
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 18 16 0 0
- On text
- 4.29:1 AA large
- On white
- 1.41:1 Fail
Background · .uni-landing-newsletter--color .uni-landing-newsletter__background, .uni-article-hero--purple
-
Deep Steel Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 28 25 0 0
- On text
- 3.41:1 AA large
- On white
- 1.77:1 Fail
Background · .uni-nav__action-btn--gemini:before, --color-aurora-soft-purple-plus3
-
Light Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 27 11 0 0
- On text
- 4.45:1 AA large
- On white
- 1.36:1 Fail
Background · .uni-article-hero--blue, --color-aurora-blue-plus4
-
Fire Brick
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 0 92 92 35
- On text
- 1.30:1 Fail
- On white
- 7.87:1 AAA
Text · .uni-landing-newsletter-form__error, --color-red-900
-
Dodger Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 73 45 0 4
- On text
- 1.70:1 Fail
- On white
- 3.56:1 AA large
Text, background · .gemini-fx-draw-border.is-animating, --color-blue-500
-
Honey Dew
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 12 0 15 2
- On text
- 5.32:1 AA
- On white
- 1.14:1 Fail
Background · .uni-article-hero--green, --color-aurora-green-plus5
-
Deep Royal Blue
- HEX
- RGB
- HSL
- OKLCH
- CMYK
- 87 52 0 26
- On text
- 1.08:1 Fail
- On white
- 6.51:1 AA
Background · --color-blue-800, .kw-button--high-emphasis:hover
Gradients
-
linear-gradient(180deg,#f1f3f4,#dadce0)
-
linear-gradient(180deg,#f1f3f4 0%,#dadce0 100%)
-
linear-gradient(#1967d2,#1a73e8)
Dark mode
Switched on by the site-
Cool Charcoal
#3C4043 · --bg-surfaces-secondary
-
White
#FFFFFF · --bg-surfaces-inverse-main
-
Near Black
#202124 · --bg-surfaces-main
-
Cool Dark Grey
#5F6368 · --bg-surfaces-secondary-hover
-
Light Steel Blue
#AECBFA · --bg-high-base
-
Cool Grey
#9AA0A6 · --border-pill-disabled
-
Cool Grey
#80868B · --text-disabled
Typography
Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.
Google Sans
Aa
300
Aa
700
Google Sans
Google Fonts · weights 300, 400, 500, 600, 700 · headings, body, buttons
Aa
400
Aa
700
Google Sans Flex
Google Fonts · weights 400, 500, 700 · headings
Aa
400
Product Sans
Google Fonts · weights 400
Aa
400
WazeBoingRegular
Self-hosted · weights 400 · shown in a stand-in if you don’t have it
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”
Type scale
From the site’s CSS · root 18 px
Heading 1
32px / 1.25
weight 400 · Google Sans
blog.google
Heading 2
24px / 1.3333333333
weight 400 · Google Sans
News from Google | Google Product and Technolog…
Heading 3
20px / 1.4
weight 400 · Google Sans
News from Google | Google Product and Technolog…
Heading 4
16px / 1.625
weight 400 · Google Sans
News from Google | Google Product and Technolog…
Heading 5
18px
weight 300
News from Google | Google Product and Technolog…
Heading 6
18px
weight 300
News from Google | Google Product and Technolog…
Body
1em · 18 px / 1.444
weight 300 · Google Sans
Get the latest news and stories about Google products, technology and innovation on News from Google, Google's official blog.
Paragraph
16px / 28px
weight 400 · Google Sans
Get the latest news and stories about Google products, technology and innovation on News from Google, Google's official blog.
Small
80%
Get the latest news and stories about Google products, technology and innovation on News from Google, Google's official blog.
Link
.7777777778rem · 14 px
weight 400 · Google Sans Flex
Read more about blog.google
Sizes in use
Most common across the site- 32pxline 40px · 5 rules
- 24pxline 32px · 8 rules
- 22pxline 30px · 5 rules
- 20pxline 28px · 19 rules
- 18pxline 28px · 15 rules
- 16pxline 24px · 33 rules
- 14pxline 24px · 43 rules
- 12pxline 0 · 20 rules
Elements
The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.
Elements
Button
Get started
.uni-tag a · #E8F0FE · radius 48px
Link
Read our latest news today.
a · #1A73E8
Corner radius
- 24px · 43×
- 8px · 34×
- 120px · 32×
- 4px · 16×
- 48px · 12×
Shadows
- 0 8px 12px 4px rgba(0,0,0,.04)
- 0 1px 4px 0 rgba(60,64,67,.25),0 1px 2px 0 rgba(60,64,67,.3)
- 0 1px 2px 0 rgba(60,64,67,.3),0 2px 6px 2px rgba(60,64,67,.15)
Layout
Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.
Grid
Breakpoints
330
481
600
768
900
1024
1025
1440
On a scale of 0 to 1440 px.
Content widths (max-width)
1440 px
1344 px
1280 px
1260 px
568 px
380 px
Notes
Plain checks on what was found. Worth fixing if you look after this site.
Notes
- ▲ CheckThe title is 65 characters. Google usually cuts titles near 60, so the end may not show in results.
Questions
Quick answers, from the same capture as the rest of this guide.
Questions
- What font does blog.google use?
- blog.google’s website uses four typefaces: Google Sans (headings and body text), google Fonts; Google Sans Flex, google Fonts; Product Sans, google Fonts; WazeBoingRegular, self-hosted.
- What are blog.google’s brand colours?
- The main colours on blog.google are Light Royal Blue (#1A73E8), Dark Slate Blue (#174EA6), Royal Blue (#1967D2), Light Lavender (#D2E3FC), Light Steel Blue (#AECBFA) and Deep Lavender (#D1D7FF).
- What colour is blog.google’s text and background?
- Body text is #5F6368 on a #FFFFFF background.
- Where is blog.google’s logo from?
- The logo shown in this guide was found on blog.google’s homepage. For official logo files and usage rules, check blog.google’s own brand or press page.
- Is this blog.google’s official style guide?
- No. SiteStyleGuide made it from blog.google’s public web pages on 3 November 2026, and isn’t affiliated with blog.google. Members can refresh a guide after 90 days to pick up changes.
Design tokens
Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.
Tokens
blog-google-tokens.css
/* blog.google design tokens, from SiteStyleGuide (https://sitestyleguide.com/blog.google) */
:root {
/* Colours */
--text: #5F6368;
--background: #FFFFFF;
--colour-white: #FFFFFF;
--colour-near-black: #202124;
--colour-cool-dark-grey: #5F6368;
--colour-off-white: #DADCE0;
--colour-light-royal-blue: #1A73E8;
--colour-dark-slate-blue: #174EA6;
--colour-royal-blue: #1967D2;
--colour-light-lavender: #D2E3FC;
--colour-light-steel-blue: #AECBFA;
--colour-deep-lavender: #D1D7FF;
--colour-deep-steel-blue: #B8BEFF;
--colour-light-blue: #BBE2FF;
--colour-fire-brick: #A50E0E;
--colour-dodger-blue: #4285F4;
--colour-honey-dew: #DAF9D4;
--colour-deep-royal-blue: #185ABC;
--gradient-1: linear-gradient(180deg,#f1f3f4,#dadce0);
--gradient-2: linear-gradient(180deg,#f1f3f4 0%,#dadce0 100%);
--gradient-3: linear-gradient(#1967d2,#1a73e8);
/* Typefaces */
--font-headings: 'Google Sans', 'roboto', 'arial', 'helvetica';
--font-body: 'Google Sans', 'roboto', 'arial', 'helvetica';
--font-buttons: 'Google Sans', 'roboto', 'arial', 'helvetica';
--font-other: 'Product Sans', 'arial', 'helvetica', sans-serif;
/* Type scale */
--text-h1: 32px;
--leading-h1: 1.25;
--text-h2: 24px;
--leading-h2: 1.3333333333;
--text-h3: 20px;
--leading-h3: 1.4;
--text-h4: 16px;
--leading-h4: 1.625;
--text-h5: 18px;
--text-h6: 18px;
--text-body: 1em;
--leading-body: 1.444;
--text-p: 16px;
--leading-p: 28px;
--text-small: 80%;
--text-a: .7777777778rem;
/* Shape */
--radius-1: 24px;
--radius-2: 8px;
--radius-3: 120px;
--radius-4: 4px;
--radius-5: 48px;
/* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
--breakpoint-1: 330px;
--breakpoint-2: 481px;
--breakpoint-3: 600px;
--breakpoint-4: 768px;
--breakpoint-5: 900px;
--breakpoint-6: 1024px;
--breakpoint-7: 1025px;
--breakpoint-8: 1440px;
--max-width-1: 1440px;
--max-width-2: 1344px;
--max-width-3: 1280px;
--max-width-4: 1260px;
--max-width-5: 568px;
--max-width-6: 380px;
}
{
"site": "blog.google",
"source": "https://sitestyleguide.com/blog.google",
"text": "#5F6368",
"background": "#FFFFFF",
"colours": [
{
"name": "White",
"hex": "#FFFFFF",
"rgb": [
255,
255,
255
]
},
{
"name": "Near Black",
"hex": "#202124",
"rgb": [
32,
33,
36
]
},
{
"name": "Cool Dark Grey",
"hex": "#5F6368",
"rgb": [
95,
99,
104
]
},
{
"name": "Off White",
"hex": "#DADCE0",
"rgb": [
218,
220,
224
]
},
{
"name": "Light Royal Blue",
"hex": "#1A73E8",
"rgb": [
26,
115,
232
]
},
{
"name": "Dark Slate Blue",
"hex": "#174EA6",
"rgb": [
23,
78,
166
]
},
{
"name": "Royal Blue",
"hex": "#1967D2",
"rgb": [
25,
103,
210
]
},
{
"name": "Light Lavender",
"hex": "#D2E3FC",
"rgb": [
210,
227,
252
]
},
{
"name": "Light Steel Blue",
"hex": "#AECBFA",
"rgb": [
174,
203,
250
]
},
{
"name": "Deep Lavender",
"hex": "#D1D7FF",
"rgb": [
209,
215,
255
]
},
{
"name": "Deep Steel Blue",
"hex": "#B8BEFF",
"rgb": [
184,
190,
255
]
},
{
"name": "Light Blue",
"hex": "#BBE2FF",
"rgb": [
187,
226,
255
]
},
{
"name": "Fire Brick",
"hex": "#A50E0E",
"rgb": [
165,
14,
14
]
},
{
"name": "Dodger Blue",
"hex": "#4285F4",
"rgb": [
66,
133,
244
]
},
{
"name": "Honey Dew",
"hex": "#DAF9D4",
"rgb": [
218,
249,
212
]
},
{
"name": "Deep Royal Blue",
"hex": "#185ABC",
"rgb": [
24,
90,
188
]
}
],
"fonts": [
{
"name": "Google Sans",
"stack": "\"Google Sans\", roboto, arial, helvetica",
"weights": [
300,
400,
500,
600,
700
],
"source": "Google Fonts"
},
{
"name": "Google Sans Flex",
"stack": "\"Google Sans Flex\", roboto, arial, helvetica, sans-serif",
"weights": [
400,
500,
700
],
"source": "Google Fonts"
},
{
"name": "Product Sans",
"stack": "Product Sans, arial, helvetica, sans-serif",
"weights": [
400
],
"source": "Google Fonts"
},
{
"name": "WazeBoingRegular",
"stack": "\"WazeBoingRegular\"",
"weights": [
400
],
"source": "Self-hosted"
}
]
}
Share
Links open each service’s own share page. Nothing from them loads here.
Share
Run blog.google?
Add the badge to your siteLink to this guide from your own site, so your team, designers and agencies can find your colours and fonts in one place.
<a href="https://sitestyleguide.com/blog.google" title="blog.google style guide on SiteStyleGuide"><img src="https://sitestyleguide.com/public/badge.svg" alt="View our style guide on SiteStyleGuide" width="200" height="44"></a>
Also set in Google Sans
Other websites using Google Sans as their main typeface
Similar colours
Websites whose lead colour is closest to blog.google’s
Apple
apple.co · 18 hours ago
Save
Electronic Arts Home Page
ea.com · 2 days ago
Save
FreshBooks
freshbooks.com · 5 days ago
Save
ASUS Global
asus.com · 5 days ago
Save
Captured from blog.google on 3 November 2026. SiteStyleGuide isn’t affiliated with or endorsed by blog.google; this guide describes the public website for reference.