№ material-io--develop-web-guides-typography

Material

Cool, geometric clarity—crisp sans-serifs on a deep, tech-forward azure and muted grey.

Feature Stackminimalism swiss brutalism developer toolslight

The page prioritizes clarity and functionality with a clean, spacious layout. Typography is straightforward and legible, emphasizing content hierarchy. The color palette is restrained, relying on muted tones and ample white space to create a sense of professionalism. · material design 3, google design system, developer tools, ui design, ux design, design guidelines, color palette, typography

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 · monochrome · pastel

SwatchHexOKLCHSuggested roleCopy

Hex#10b1eb
OKLCHoklch(71.4% 0.142 231)
RoleDominant
find sites →
Hex#095c8a
OKLCHoklch(45.4% 0.103 241)
RoleSurface
find sites →
Hex#ebf397
OKLCHoklch(93.8% 0.115 113)
RoleInk
find sites →
Hex#5057b2
OKLCHoklch(49.9% 0.142 277)
RoleAccent
find sites →
Hex#b8a6cc
OKLCHoklch(75.3% 0.057 306)
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	Sample
h1	Google Sans	96px	475	1	Aa Bb Cc
h2	Google Sans	57px	475	1.12	Aa Bb Cc
h3	Google Sans Text	14px	500	1.43	Aa Bb Cc
body	Google Sans Text	16px	400	1.5	Aa Bb Cc
button	Google Sans Text	16px	500	1.5	Aa Bb Cc

Spacing scale

4px

8px

14px

16px

20px

24px

56px

64px

Radius scale

0px

4px

24px

48px

50px

Container

Max content width 1352px

Export

:root {
  --color-dominant: #10b1eb;
  --color-surface: #095c8a;
  --color-ink: #ebf397;
  --color-accent: #5057b2;
  --color-detail: #b8a6cc;
}

/* CSS variables exposed by source */
:root {
  --mio-theme-display-font-family: "Google Sans", sans-serif;
  --mio-theme-v2-display-m-font-weight: 475;
  --mio-theme-v2-code-l-font-weight: 400;
  --mio-theme-v2-title-s-font-weight: 500;
  --mio-theme-v2-headline-s-letter-spacing: 0;
  --mio-theme-v2-hero-sm-font-size: 60px;
  --mio-theme-v2-title-l-line-height: 30px;
  --mio-theme-v2-display-m-font-variation-opsz: 18;
  --mio-theme-v2-label-m-font-family: "Google Sans Text", sans-serif;
  --mio-theme-v2-headline-m-font-family: "Google Sans", sans-serif;
  --mio-theme-v2-label-m-font-size: 12px;
  --mio-theme-v2-title-s-font-variation-GRAD: 0;
  --mio-theme-v2-title-m-font-size: 16px;
  --mio-theme-v2-title-l-font-family: "Google Sans Text", sans-serif;
  --mio-theme-v2-hero-sm-line-height: 65px;
  --mio-theme-v2-body-s-font-size: 12px;
  --mio-theme-v2-display-l-line-height: 64px;
  --mio-theme-color-white: #fff;
  --mio-theme-v2-label-s-font-variation-GRAD: 0;
  --mio-theme-v2-code-snippet-font-weight: 500;
  --mio-theme-v2-code-l-letter-spacing: 0;
  --mio-theme-v2-headline-m-font-weight: 475;
  --mio-theme-v2-title-s-font-size: 14px;
  --mio-theme-v2-display-xl-font-variation-GRAD: 0;
  --mio-theme-v2-label-m-font-weight: 500;
  --mio-theme-v2-body-s-font-variation-GRAD: 0;
  --mio-theme-v2-label-m-letter-spacing: .1px;
  --mio-theme-color-scrim-video-control-pressed: rgb(255 255 255 / 24%);
  --mio-theme-v2-body-l-line-height: 24px;
  --mio-theme-v2-code-snippet-font-family: "Google Sans Mono", sans-serif;
  --mio-theme-v2-title-m-font-variation-opsz: 17;
  --mio-theme-v2-label-s-font-size: 11px;
  --mio-theme-v2-body-l-letter-spacing: 0;
  --mio-theme-color-scrim-video-control: rgb(255 255 255 / 12%);
  --mio-theme-v2-label-m-line-height: 16px;
  --mio-theme-v2-title-l-letter-spacing: 0;
  --mio-theme-v2-hero-font-weight: 475;
  --mio-theme-v2-label-s-font-weight: 500;
  --mio-theme-v2-hero-sm-letter-spacing: 0;
  --mio-theme-v2-body-s-line-height: 16px;
  --mio-theme-v2-code-m-font-weight: 400;
  --mio-theme-text-font-family: "Google Sans Text", sans-serif;
  --mio-theme-v2-code-snippet-font-size: 15px;
  --mio-theme-v2-code-m-font-size: 14px;
  --mio-theme-v2-label-l-font-family: "Google Sans Text", sans-serif;
  --mio-theme-v2-display-m-letter-spacing: 0;
  --mio-theme-v2-headline-l-font-size: 32px;
  --mio-theme-v2-headline-l-font-variation-opsz: 18;
  --mio-theme-v2-label-l-font-size: 14px;
  --mio-theme-v2-display-xl-line-height: 96px;
  --mio-theme-v2-hero-sm-font-weight: 475;
  --mio-theme-v2-hero-md-letter-spacing: 0;
  --mio-theme-v2-display-m-font-family: "Google Sans", sans-serif;
  --mio-theme-v2-headline-s-font-family: "Google Sans", sans-serif;
  --mio-theme-v2-display-m-font-variation-GRAD: 0;
  --mio-theme-v2-title-l-font-size: 22px;
  --mio-theme-v2-label-l-font-variation-GRAD: 0;
  --mio-theme-v2-code-m-letter-spacing: 0;
  --mio-theme-v2-display-l-letter-spacing: 0;
  --mio-theme-v2-display-l-font-variation-opsz: 18;
}

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 Material.
Reference design system (extracted from the live site):
- Palette: #10b1eb, #095c8a, #ebf397, #5057b2, #b8a6cc
- Typefaces: Google Sans, Google Sans Text
- 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/material-io--develop-web-guides-typography

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Google Sans

96px

475

Aa Bb Cc

Google Sans

57px

475

1.12

Aa Bb Cc

Google Sans Text

14px

500

1.43

Aa Bb Cc

body

Google Sans Text

16px

400

1.5

Aa Bb Cc

button

Google Sans Text

16px

500

1.5

Aa Bb Cc

:root { --color-dominant: #10b1eb; --color-surface: #095c8a; --color-ink: #ebf397; --color-accent: #5057b2; --color-detail: #b8a6cc; } /* CSS variables exposed by source */ :root { --mio-theme-display-font-family: "Google Sans", sans-serif; --mio-theme-v2-display-m-font-weight: 475; --mio-theme-v2-code-l-font-weight: 400; --mio-theme-v2-title-s-font-weight: 500; --mio-theme-v2-headline-s-letter-spacing: 0; --mio-theme-v2-hero-sm-font-size: 60px; --mio-theme-v2-title-l-line-height: 30px; --mio-theme-v2-display-m-font-variation-opsz: 18; --mio-theme-v2-label-m-font-family: "Google Sans Text", sans-serif; --mio-theme-v2-headline-m-font-family: "Google Sans", sans-serif; --mio-theme-v2-label-m-font-size: 12px; --mio-theme-v2-title-s-font-variation-GRAD: 0; --mio-theme-v2-title-m-font-size: 16px; --mio-theme-v2-title-l-font-family: "Google Sans Text", sans-serif; --mio-theme-v2-hero-sm-line-height: 65px; --mio-theme-v2-body-s-font-size: 12px; --mio-theme-v2-display-l-line-height: 64px; --mio-theme-color-white: #fff; --mio-theme-v2-label-s-font-variation-GRAD: 0; --mio-theme-v2-code-snippet-font-weight: 500; --mio-theme-v2-code-l-letter-spacing: 0; --mio-theme-v2-headline-m-font-weight: 475; --mio-theme-v2-title-s-font-size: 14px; --mio-theme-v2-display-xl-font-variation-GRAD: 0; --mio-theme-v2-label-m-font-weight: 500; --mio-theme-v2-body-s-font-variation-GRAD: 0; --mio-theme-v2-label-m-letter-spacing: .1px; --mio-theme-color-scrim-video-control-pressed: rgb(255 255 255 / 24%); --mio-theme-v2-body-l-line-height: 24px; --mio-theme-v2-code-snippet-font-family: "Google Sans Mono", sans-serif; --mio-theme-v2-title-m-font-variation-opsz: 17; --mio-theme-v2-label-s-font-size: 11px; --mio-theme-v2-body-l-letter-spacing: 0; --mio-theme-color-scrim-video-control: rgb(255 255 255 / 12%); --mio-theme-v2-label-m-line-height: 16px; --mio-theme-v2-title-l-letter-spacing: 0; --mio-theme-v2-hero-font-weight: 475; --mio-theme-v2-label-s-font-weight: 500; --mio-theme-v2-hero-sm-letter-spacing: 0; --mio-theme-v2-body-s-line-height: 16px; --mio-theme-v2-code-m-font-weight: 400; --mio-theme-text-font-family: "Google Sans Text", sans-serif; --mio-theme-v2-code-snippet-font-size: 15px; --mio-theme-v2-code-m-font-size: 14px; --mio-theme-v2-label-l-font-family: "Google Sans Text", sans-serif; --mio-theme-v2-display-m-letter-spacing: 0; --mio-theme-v2-headline-l-font-size: 32px; --mio-theme-v2-headline-l-font-variation-opsz: 18; --mio-theme-v2-label-l-font-size: 14px; --mio-theme-v2-display-xl-line-height: 96px; --mio-theme-v2-hero-sm-font-weight: 475; --mio-theme-v2-hero-md-letter-spacing: 0; --mio-theme-v2-display-m-font-family: "Google Sans", sans-serif; --mio-theme-v2-headline-s-font-family: "Google Sans", sans-serif; --mio-theme-v2-display-m-font-variation-GRAD: 0; --mio-theme-v2-title-l-font-size: 22px; --mio-theme-v2-label-l-font-variation-GRAD: 0; --mio-theme-v2-code-m-letter-spacing: 0; --mio-theme-v2-display-l-letter-spacing: 0; --mio-theme-v2-display-l-font-variation-opsz: 18; }

Build a landing page in the visual style of Material. Reference design system (extracted from the live site): - Palette: #10b1eb, #095c8a, #ebf397, #5057b2, #b8a6cc - Typefaces: Google Sans, Google Sans Text - 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/material-io--develop-web-guides-typography