Archdaily
Ecosystem Index
Loading
Blog Google
Deep indigo space, clean sans-serif, warm ochre accents – a tranquil, intelligent flow.
Click any value to copy. Roles are suggestions, not gospel.
- #1c73eaoklch(57.6% 0.197 258)Dominant
- #143494oklch(37.2% 0.162 265)Surface
- #ecbc87oklch(82.6% 0.088 69)Ink
- #9e735aoklch(59.3% 0.066 51)Accent
- #9cd4acoklch(82.0% 0.081 153)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Google Sans Flex | 36px | 400 | 1.22 | 0 | Aa Bb Cc |
| h2 | Google Sans | 28px | 700 | 1.29 | 0 | Aa Bb Cc |
| h3 | Google Sans Flex | 36px | 400 | 1.22 | 0 | Aa Bb Cc |
| body | Google Sans | 18px | 300 | 1.44 | 0 | Aa Bb Cc |
| button | Google Sans | 18px | 300 | 1.44 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #1c73ea;
--color-surface: #143494;
--color-ink: #ecbc87;
--color-accent: #9e735a;
--color-detail: #9cd4ac;
}
/* CSS variables exposed by source */
:root {
--color-aurora-soft-purple-main: #6a64fd;
--bg-card-main-hover: #f1f3f4;
--color-red-900: #a50e0e;
--color-aurora-green-minus3: #00694e;
--color-aurora-red-plus1: #ff5a59;
--color-aurora-pink-minus6: #410027;
--text-primary-hover: #3c4043;
--color-aurora-purple-minus2: #4d34cf;
--text-primary-title-hover: #5f6368;
--color-aurora-yellow-plus5: #fcffad;
--color-blue-700: #1967d2;
--color-grey-100: #f1f3f4;
--border-nav: #1967d2;
--bg-surface-event: hsla(0,0%,100%,.3);
--color-aurora-yellow-minus1: #f29900;
--bg-high-disabled: #f8f9fa;
--color-aurora-pink-minus2: #de249e;
--bg-nav-dropdown: #fff;
--color-aurora-blue-minus6: #0f173a;
--color-blue-300: #8ab4f8;
--color-aurora-blue-plus05: #3c90ff;
--color-aurora-purple-minus5: #241654;
--color-aurora-yellow-plus6: #feffe1;
--color-aurora-red-plus4: #ffdeec;
--color-aurora-purple-main: #6a64fd;
--color-yellow-400: #fcc934;
--color-grey-0: #fff;
--bg-surfaces-main-hover: #f8f9fa;
--color-aurora-blue-minus3: #1f3b9b;
--color-aurora-yellow-minus2: #e57e00;
--color-aurora-red-plus05: #ff4c45;
--color-green-500: #34a853;
--color-aurora-purple-minus6: #1c1041;
--color-aurora-yellow-plus3: #fff350;
--color-aurora-red-main: #fc413d;
--bg-interacted-high: rgba(0,0,0,.16);
--color-blue-400: #669df6;
--border-pill-primary: #202124;
--spacer-6: 80px;
--color-aurora-blue-plus5: #dcf1ff;
--bg-nav-hover: #f1f3f4;
--color-yellow-300: #fdd663;
--gap-group-primary: 8px;
--color-aurora-yellow-plus1: #ffdb0f;
--color-aurora-pink-plus5: #ffdbf5;
--spacer-1-plus: 12px;
--color-aurora-green-plus4: #bff3b9;
--spacer-1: 8px;
--bg-cta-transparent-hover: color-mix(in sRGB,#202124,transparent 96%);
--radius-main: 24px;
--color-aurora-red-plus6: #fff7f9;
--size-cta-default: 48px;
--color-green-900: #0d652d;
--color-aurora-pink-plus2: #ffa8e3;
--color-aurora-yellow-main: #fec700;
--color-aurora-yellow-minus5: #7a2b00;
--radius-rounded: 120px;
--color-aurora-purple-plus5: #e0e7ff;
--color-blue-800: #185abc;
--color-aurora-pink-plus05: #ff88d3;
}Drop-in prompt
Build a landing page in the visual style of Blog Google.
Reference design system (extracted from the live site):
- Palette: #1c73ea, #143494, #ecbc87, #9e735a, #9cd4ac
- Typefaces: Google Sans Flex, Google Sans
- Macrostructure: Ecosystem Index
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/blog-google--products-marketingplatform-360-ads-data-hub-powered-solutions
