/* ============================================================
DeepMind Design Language — drop-in tokens + base styles
Extracted from deepmind.google (July 2026).
Usage: (or dm--dark), import the
two Google Fonts links (see below), then build with the vars.
============================================================ */
:root {
/* ---- Layout constants ---- */
--header-height: 64px;
--max-width-container: 1440px;
--max-width-cover: 1584px;
/* ---- Space scale (px equivalents in comments) ---- */
--space-1: 0.25rem; /* 4 */
--space-2: 0.5rem; /* 8 */
--space-3: 1rem; /* 16 */
--space-4: 1.5rem; /* 24 */
--space-5: 1.75rem; /* 28 */
--space-6: 2.25rem; /* 36 */
--space-7: 2.5rem; /* 40 */
--space-8: 3rem; /* 48 */
--space-9: 3.75rem; /* 60 */
--space-10: 4rem; /* 64 */
--space-11: 4.5rem; /* 72 */
--space-12: 5rem; /* 80 */
--space-13: 5.5rem; /* 88 */
--space-14: 7.5rem; /* 120 */
--space-15: 11.25rem; /* 180 */
/* ---- Radius ---- */
--shape-corner-xs: 4px;
--shape-corner-sm: 8px;
--shape-corner-md: 12px;
--shape-corner-lg: 16px; /* default for media/cards */
--shape-corner-card: 24px; /* hero/promo cards */
--shape-corner-xl: 36px;
--shape-corner-2xl: 48px;
--shape-corner-3xl: 60px;
--shape-corner-rounded: 9999px; /* all buttons */
/* ---- Aspect ratios ---- */
--aspect-9-16: 9 / 16; --aspect-16-9: 16 / 9;
--aspect-3-2: 3 / 2; --aspect-4-3: 4 / 3;
--aspect-1-1: 1 / 1; --aspect-4-5: 4 / 5;
--aspect-2-3: 2 / 3; --aspect-3-4: 3 / 4;
/* ---- Type scale: mobile-first (desktop overrides below) ---- */
--font-xs: 0.625rem; --line-height-xs: 1.45; --letter-spacing-xs: 0.00917em;
--font-sm: 0.90625rem; --line-height-sm: 1.45; --letter-spacing-sm: 0.01143em;
--font-base: 1.09375rem; --line-height-base: 1.45;--letter-spacing-base: 0.01188em;
--font-md: 1.125rem; --line-height-md: 1.3; --letter-spacing-md: -0.00389em;
--font-lg: 1.25rem; --line-height-lg: 1.14; --letter-spacing-lg: -0.00444em;
--font-xl: 1.375rem; --line-height-xl: 1.12; --letter-spacing-xl: -0.0065em;
--font-2xl: 1.5rem; --line-height-2xl: 1.08; --letter-spacing-2xl: -0.00583em;
--font-3xl: 1.625rem; --line-height-3xl: 1.08; --letter-spacing-3xl: -0.00867em;
--font-4xl: 1.75rem; --line-height-4xl: 1.06; --letter-spacing-4xl: -0.00778em;
--font-5xl: 1.875rem; --line-height-5xl: 1.06; --letter-spacing-5xl: -0.00625em;
--font-6xl: 2rem; --line-height-6xl: 1.06; --letter-spacing-6xl: -0.01067em;
--font-7xl: 2.125rem; --line-height-7xl: 1.06; --letter-spacing-7xl: -0.00944em;
--font-8xl: 2.25rem; --line-height-8xl: 1.06; --letter-spacing-8xl: -0.0075em;
--font-9xl: 2.375rem; --line-height-9xl: 1.06; --letter-spacing-9xl: -0.00594em;
/* ---- Font weights (the hierarchy tool) ---- */
--weight-body: 350;
--weight-eyebrow: 400;
--weight-label: 450; /* buttons, labels */
--weight-heading: 500; /* headings, nav */
/* ---- Responsive grid ---- */
--grid-columns: 4;
--grid-margin: 1.75rem; /* 28px */
--grid-gutter: 1.75rem;
--spacer-block-sm: 1rem;
--spacer-block-md: 1.75rem;
--spacer-block-lg: 5.5rem; /* 88px between major sections */
/* ---- Motion ---- */
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); /* signature */
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--duration-micro: 150ms;
--duration-short: 250ms;
--duration-med: 350ms;
/* ---- Grey ramp ---- */
--grey-0: #ffffff; --grey-10: #f8f9fc; --grey-20: #eff2f7;
--grey-50: #e6eaf0; --grey-100: #e1e6ec; --grey-200: #cdd4dc;
--grey-300: #b2bbc5; --grey-400: #bdc1c6; --grey-500: #9aa0a6;
--grey-600: #80868b; --grey-700: #5f6368; --grey-800: #45474d;
--grey-900: #2f3034; --grey-950: #101218; --grey-1000: #212226;
--grey-1100: #18191d; --grey-1200: #121317;
/* ---- Accent ramps (media & data-vis only — never UI chrome) ---- */
--blue-100: #9dd2ff; --blue-300: #4fa0ff; --blue-500: #3186ff; --blue-700: #336ef3; --blue-900: #27329b;
--red-100: #ffacc2; --red-500: #fc413d; --red-800: #be1c1b;
--yellow-100: #fff350; --yellow-500: #fec700; --yellow-700: #f29900;
--green-100: #9be69a; --green-500: #00af57; --green-800: #008052;
--purple-100: #b8c0ff; --purple-500: #6a64fd; --purple-800: #4d34cf;
--pink-100: #ffb5e8; --pink-500: #ff69c3; --pink-800: #de249e;
--orange-500: #fa7b17; --cyan-500: #24c1e0;
--ai-brand-blue: #3186ff; --ai-brand-cyan: #2daeb8;
--ai-brand-green: #00af57; --ai-brand-orange: #ff902a;
--ai-brand-red: #fc413d; --ai-brand-yellow: #fec700;
/* ---- Signature gradients ---- */
--gemini-models-gradient: linear-gradient(90deg, #3b6bff 0%, #2e96ff 65%, #acb7ff 100%);
--gemini-app-gradient: linear-gradient(90deg, #217bfe 0%, #078efb 33.53%, #ac87eb 67.74%, #ee4d5d 100%);
--ai-gradient-1: linear-gradient(90deg, #3186ff 35%, #2daeb8 90%);
--ai-gradient-1-surface: linear-gradient(90deg, #9dd2ff 35%, #cbebed 90%);
--ai-gradient-2: linear-gradient(90deg, #fc413d 35%, #ff902a 90%);
--ai-gradient-2-surface: linear-gradient(90deg, #ffacc2 35%, #ffe3ca 90%);
--ai-gradient-3: linear-gradient(90deg, #00af57 35%, #2daeb8 90%);
--ai-gradient-3-surface: linear-gradient(90deg, #9be69a 35%, #cbebed 90%);
--ai-gradient-4: linear-gradient(90deg, #fec700 35%, #ff902a 90%);
--ai-gradient-4-surface: linear-gradient(90deg, #fff350 35%, #ffe3ca 90%);
}
/* ---- Responsive overrides ---- */
@media (min-width: 768px) {
:root { --grid-columns: 8; --spacer-block-lg: 7.5rem; }
}
@media (min-width: 1024px) {
:root {
--grid-columns: 12;
--grid-margin: 2.5rem; --grid-gutter: 2.5rem;
--spacer-block-sm: 1.75rem; --spacer-block-md: 2.5rem; --spacer-block-lg: 7.5rem;
}
}
@media (min-width: 1280px) {
:root {
--grid-margin: 4.5rem; --grid-gutter: 3rem;
--spacer-block-sm: 3.75rem; --spacer-block-md: 4.5rem; --spacer-block-lg: 11.25rem;
/* Display sizes open up dramatically on desktop */
--font-md: 1.25rem; --font-lg: 1.375rem; --font-xl: 1.5rem;
--font-2xl: 1.75rem; --font-3xl: 2rem; --font-4xl: 2.625rem;
--font-5xl: 3.375rem; /* 54px */
--font-6xl: 4.5rem; /* 72px */
--font-7xl: 6.125rem; /* 98px */
--font-8xl: 7.75rem; /* 124px */
--font-9xl: 9.25rem; /* 148px */
}
}
@media (min-width: 1728px) {
:root { --grid-gutter: 4rem; }
}
/* ============================================================
Semantic themes — Material-3-style token architecture
============================================================ */
.dm, .dm--light {
--surface: #ffffff;
--on-surface: #121317;
--on-surface-variant: #45474d;
--surface-container: #f8f9fc;
--surface-container-high: #eff2f7;
--surface-container-higher: #e6eaf0;
--surface-container-highest: #e1e6ec;
--outline: rgba(33, 34, 38, 0.12);
--outline-variant: rgba(33, 34, 38, 0.06);
--on-media: #ffffff;
--on-media-variant: rgba(255, 255, 255, 0.72);
--state-hover: rgba(33, 34, 38, 0.04);
--state-pressed: rgba(33, 34, 38, 0.06);
--state-focus: rgba(33, 34, 38, 0.12);
}
.dm--dark {
--surface: #121317;
--on-surface: #f8f9fc;
--on-surface-variant: #b2bbc5;
--surface-container: #18191d;
--surface-container-high: #212226;
--surface-container-higher: #2f3034;
--surface-container-highest: #45474d;
--outline: rgba(230, 234, 240, 0.12);
--outline-variant: rgba(230, 234, 240, 0.06);
--state-hover: rgba(230, 234, 240, 0.04);
--state-pressed: rgba(230, 234, 240, 0.06);
--state-focus: rgba(230, 234, 240, 0.12);
}
/* ============================================================
Base styles
============================================================ */
.dm {
font-family: "Google Sans Flex", Arial, Helvetica, sans-serif;
font-size: var(--font-base);
font-weight: var(--weight-body);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
color: var(--on-surface);
background: var(--surface);
-webkit-font-smoothing: antialiased;
}
.dm h1, .dm h2, .dm h3 { font-weight: var(--weight-heading); margin: 0; }
.dm p { color: var(--on-surface-variant); margin: 0; }
/* Display headline (featured news / hero statements) */
.dm .display {
font-size: var(--font-5xl);
line-height: var(--line-height-5xl);
letter-spacing: var(--letter-spacing-5xl);
font-weight: var(--weight-heading);
color: var(--on-surface);
text-wrap: balance;
}
.dm .display--xl { font-size: var(--font-7xl); line-height: var(--line-height-7xl); letter-spacing: var(--letter-spacing-7xl); }
/* Section heading */
.dm .section-title {
font-size: var(--font-lg);
line-height: 1.45;
font-weight: var(--weight-heading);
}
/* Eyebrow: TRY IT IN */
.dm .eyebrow {
font-size: var(--font-xs);
font-weight: var(--weight-eyebrow);
letter-spacing: var(--letter-spacing-xs);
line-height: var(--line-height-xs);
text-transform: uppercase;
color: var(--on-surface-variant);
}
/* Meta row: July 2026 · Models · Learn more → */
.dm .meta {
font-size: var(--font-sm);
font-weight: var(--weight-body);
color: var(--on-surface-variant);
display: flex; gap: var(--space-4); align-items: center;
}
/* ---- Buttons: always pills, wght 450 ---- */
.dm .btn {
display: inline-flex; align-items: center; gap: var(--space-2);
border-radius: var(--shape-corner-rounded);
padding: 12px 24px;
font: inherit; font-size: var(--font-base);
font-weight: var(--weight-label);
line-height: 1.2; letter-spacing: 0.012em;
border: 0; cursor: pointer; text-decoration: none;
color: var(--on-surface); background: transparent;
transition: background-color var(--duration-micro) ease;
}
.dm .btn--sm { padding: 8px 16px; font-size: var(--font-sm); }
.dm .btn--primary { background: var(--on-surface); color: var(--surface); }
.dm .btn--primary:hover { opacity: 0.92; }
.dm .btn--tonal { background: var(--surface-container); }
.dm .btn--tonal:hover { background: var(--surface-container-high); }
.dm .btn--outlined { box-shadow: inset 0 0 0 1px var(--outline); }
.dm .btn--outlined:hover { background: var(--state-hover); }
.dm .btn--protected { background: rgba(255, 255, 255, 0.18); color: var(--on-media); backdrop-filter: blur(8px); }
.dm .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--on-surface); background: var(--surface-container-highest); }
/* ---- Cards: no border, no shadow — media-first ---- */
.dm .card { position: relative; display: grid; gap: var(--space-3); }
.dm .card__media {
border-radius: var(--shape-corner-lg);
overflow: hidden; width: 100%;
aspect-ratio: var(--aspect-16-9);
object-fit: cover; background: var(--surface-container-high);
}
.dm .card__title { font-size: var(--font-lg); font-weight: var(--weight-heading); line-height: 1.45; }
.dm .card__desc { font-size: var(--font-base); color: var(--on-surface-variant); }
.dm .card__link { position: absolute; inset: 0; border-radius: inherit; }
/* Promo/hero card: 2:3, text on gradient media, 24px radius */
.dm .card--promo {
border-radius: var(--shape-corner-card);
overflow: hidden; aspect-ratio: var(--aspect-2-3);
background: var(--surface-container);
padding: var(--space-4);
display: flex; flex-direction: column; gap: var(--space-2);
}
.dm .card--promo.--on-media { color: var(--on-media); }
.dm .card--promo .card__actions { align-self: end; margin-top: auto; display: flex; gap: var(--space-2); }
/* ---- Structure ---- */
.dm .container { max-width: var(--max-width-container); margin-inline: auto; padding-inline: var(--grid-margin); }
.dm .divider { border: 0; border-top: 1px solid var(--outline); margin: 0; }
.dm .section { padding-top: var(--space-11); margin-bottom: var(--spacer-block-lg); }
.dm .header {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
height: var(--header-height);
display: flex; align-items: center; gap: var(--space-8);
padding-inline: var(--space-4);
}
.dm .grid { display: grid; grid-template-columns: repeat(var(--grid-columns), 1fr); gap: var(--grid-gutter); }
/* ---- Reveal on scroll (add .is-in-view via IntersectionObserver) ---- */
.dm .reveal { opacity: 0; transform: translateY(24px);
transition: opacity var(--duration-short) var(--ease-out-expo),
transform var(--duration-short) var(--ease-out-expo); }
.dm .reveal.is-in-view { opacity: 1; transform: none; }
/* ---- Icons (Google Symbols) ---- */
.dm .symbol {
font-family: "Google Symbols";
font-weight: 300; font-style: normal;
font-size: 18px; line-height: 1;
letter-spacing: normal; text-transform: none;
font-variation-settings: "FILL" 0, "GRAD" 0, "opsz" 48;
}