№ google-com

Google

Cool, spacious, technical—slate grays and muted blues, crisp sans-serif geometry.

Feature Stackminimalism swiss brutalism saas ailight

The page uses a clean, spacious layout with a focus on showcasing the product. The color palette is restrained, relying on muted tones and stark contrasts. Typography is clear and functional, prioritizing readability and a sense of precision. · chromebook plus, gemini, laptop, ai assistant, productivity, minimalist design, tech product, software, computing, google

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · cool · monochrome

SwatchHexOKLCHSuggested roleCopy

Hex#f04639
OKLCHoklch(63.9% 0.209 29)
RoleDominant
find sites →
Hex#7b1109
OKLCHoklch(37.6% 0.141 30)
RoleSurface
find sites →
Hex#9c9adf
OKLCHoklch(71.4% 0.100 285)
RoleInk
find sites →
Hex#8c7c54
OKLCHoklch(59.1% 0.060 89)
RoleAccent
find sites →
Hex#d1abcb
OKLCHoklch(78.5% 0.062 332)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
body	Google Sans	14px	400	1.4	0	Aa Bb Cc
button	Google Sans	14px	400	1.4	0	Aa Bb Cc

Radius scale

0px

8px

50px

Export

:root {
  --color-dominant: #f04639;
  --color-surface: #7b1109;
  --color-ink: #9c9adf;
  --color-accent: #8c7c54;
  --color-detail: #d1abcb;
}

/* CSS variables exposed by source */
:root {
  --BRLwE: #d3e3fd;
  --qBwyqb: Google Sans,Arial,sans-serif;
  --ZNg88: 14px;
  --JKqx2: #1a0dab;
  --TMYS9: #0b57d0;
  --VuZXBd: #001d35;
  --ZXiaGf: #fff;
  --JT4IPc: 400;
  --cIehld: #fff;
  --IT7y3c: Google Sans,Arial,sans-serif;
  --Wmwad: #0b57d0;
  --nUOqEc: 16px;
  --CUS15e: 500;
  --a9X0Jc: 24px;
  --fuvksc: #0b57d0;
  --HIyEKc: 18px;
  --todMNc: #fff;
  --xPpiM: #001d35;
  --yTtsEf: #072711;
  --XKMDxc: #f3f5f6;
  --JclFj: #d2d2d2;
  --Zia6nf: #d3e3fd;
  --Vyi8yc: 400;
  --PBxOKe: #1f1f1f;
  --NoaQW: #001d35;
  --aim-button-gradient-end: rgba(0, 0, 0, 0);
  --C74x2e: 24px;
  --ywz01c: #fbbc04;
  --cMTvjf: 12px;
  --Yoa6qd: 400;
  --QWaaaf: #a3c9ff;
  --lv6yU: #0b57d0;
  --ONhrGd: #d2d2d2;
  --nkmQOe: Google Sans,Arial,sans-serif;
  --YfiKf: Google Sans,Arial,sans-serif;
  --Nsm0ce: #0b57d0;
  --LMFHUd: #001d35;
  --Aoh9Xe: Google Sans,Arial,sans-serif;
  --rrJJUc: #0b57d0;
  --GiToJf: 20px;
  --Ia70Xd: 28px;
  --hwEqod: #001d35;
  --gVUKcd: rgba(0,0,0,0.6);
  --IXoxUe: #636363;
  --TyVYld: #0b57d0;
  --CRMNZd: #001d35;
  --uBdgTe: 18px;
  --qjVU3d: 400;
  --EoKObe: #fff;
  --V9ysqf: #fff;
  --qYGXw: 28px;
  --YLNNHc: #1f1f1f;
  --Zf9Xnd: 400;
  --izGsqb: #0b57d0;
  --aim-button-gradient-start: rgba(0, 0, 0, 0);
  --Ijc2tf: #ebf1ff;
  --ofwUBc: 400;
  --jINu6c: #001d35;
  --amnPwe: #636363;
  --aYn2S: #f3f5f6;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Google.
Reference design system (extracted from the live site):
- Palette: #f04639, #7b1109, #9c9adf, #8c7c54, #d1abcb
- Typefaces: Google Sans
- Macrostructure: Feature Stack
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/google-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

body

Google Sans

14px

400

1.4

Aa Bb Cc

button

Google Sans

14px

400

1.4

Aa Bb Cc

:root { --color-dominant: #f04639; --color-surface: #7b1109; --color-ink: #9c9adf; --color-accent: #8c7c54; --color-detail: #d1abcb; } /* CSS variables exposed by source */ :root { --BRLwE: #d3e3fd; --qBwyqb: Google Sans,Arial,sans-serif; --ZNg88: 14px; --JKqx2: #1a0dab; --TMYS9: #0b57d0; --VuZXBd: #001d35; --ZXiaGf: #fff; --JT4IPc: 400; --cIehld: #fff; --IT7y3c: Google Sans,Arial,sans-serif; --Wmwad: #0b57d0; --nUOqEc: 16px; --CUS15e: 500; --a9X0Jc: 24px; --fuvksc: #0b57d0; --HIyEKc: 18px; --todMNc: #fff; --xPpiM: #001d35; --yTtsEf: #072711; --XKMDxc: #f3f5f6; --JclFj: #d2d2d2; --Zia6nf: #d3e3fd; --Vyi8yc: 400; --PBxOKe: #1f1f1f; --NoaQW: #001d35; --aim-button-gradient-end: rgba(0, 0, 0, 0); --C74x2e: 24px; --ywz01c: #fbbc04; --cMTvjf: 12px; --Yoa6qd: 400; --QWaaaf: #a3c9ff; --lv6yU: #0b57d0; --ONhrGd: #d2d2d2; --nkmQOe: Google Sans,Arial,sans-serif; --YfiKf: Google Sans,Arial,sans-serif; --Nsm0ce: #0b57d0; --LMFHUd: #001d35; --Aoh9Xe: Google Sans,Arial,sans-serif; --rrJJUc: #0b57d0; --GiToJf: 20px; --Ia70Xd: 28px; --hwEqod: #001d35; --gVUKcd: rgba(0,0,0,0.6); --IXoxUe: #636363; --TyVYld: #0b57d0; --CRMNZd: #001d35; --uBdgTe: 18px; --qjVU3d: 400; --EoKObe: #fff; --V9ysqf: #fff; --qYGXw: 28px; --YLNNHc: #1f1f1f; --Zf9Xnd: 400; --izGsqb: #0b57d0; --aim-button-gradient-start: rgba(0, 0, 0, 0); --Ijc2tf: #ebf1ff; --ofwUBc: 400; --jINu6c: #001d35; --amnPwe: #636363; --aYn2S: #f3f5f6; }

Build a landing page in the visual style of Google. Reference design system (extracted from the live site): - Palette: #f04639, #7b1109, #9c9adf, #8c7c54, #d1abcb - Typefaces: Google Sans - Macrostructure: Feature Stack Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/google-com