DeepMind

Overview

Google DeepMind's site is built on a single inversion: the interface is monochrome so that the content can carry all the colour. Surfaces are white or near-black {colors.ink} (#121317), every piece of chrome is greyscale, and the only saturated colour on the page arrives inside a media frame — a pastel gradient model card, a photograph, a brand gradient. Nothing in the navigation, the buttons, or the links is coloured.

Hierarchy is carried by weight, not by size jumps or colour. One variable typeface, Google Sans Flex, runs the entire site across a 1–1000 weight axis, and the system uses four positions on it: 350 for body, 400 for eyebrows, 450 for buttons and labels, 500 for headings. That restraint is what lets a 17.5px paragraph and a 148px display headline read as the same voice.

Separation is done with air and hairlines. Sections are divided by a 1px {colors.outline} rule and 72–180px of vertical interval; there are no cards with borders, no shadows anywhere, and no elevation model beyond tinted surface containers. The result reads as a research publication that happens to be a website: quiet, dense with content, and confident enough not to decorate.

Key Characteristics:

• Monochrome chrome, colourful content — colour appears only inside media, never in UI.
• One variable typeface across the whole site; weight (350/400/450/500) is the hierarchy tool.
• Optical tightening at scale: display steps run line-height 1.06 with negative tracking; small text runs 1.45 with positive tracking.
• {rounded.pill} for every action, {rounded.lg} (16px) for media, {rounded.card} (24px) for hero promo cards.
• Hairline dividers plus 72–180px section intervals replace borders, shadows and boxes entirely.
• Material-3 token architecture: surface / on-surface / surface-container-* with 4/6/12% state layers.
• Signature easing cubic-bezier(0.16, 1, 0.3, 1) at 150–350ms, used for reveals and menus.
• Content pattern: uppercase 10px eyebrow → large display headline → grey meta row → pill CTA.

Colors

Source pages analyzed: deepmind.google homepage (hero carousel, news, model cards, mission section), plus the global header and footer chrome.

Brand & Accent

There is no brand accent in the interface. The six AI brand colours exist only for media, data visualisation and gradient artwork:

• AI Blue ({colors.accent-blue} — #3186ff), Cyan ({colors.accent-cyan} — #2daeb8), Green ({colors.accent-green} — #00af57), Orange ({colors.accent-orange} — #ff902a), Red ({colors.accent-red} — #fc413d), Yellow ({colors.accent-yellow} — #fec700).
• These pair into four signature gradients, each with a pastel -surface twin used as card artwork — e.g. linear-gradient(90deg, #3186ff 35%, #2daeb8 90%) and its surface variant linear-gradient(90deg, #9dd2ff 35%, #cbebed 90%).
• Never use these for buttons, links, or focus states. An accent in the chrome breaks the system.

Surface

• Surface ({colors.surface} — #ffffff): The page.
• Surface Container ({colors.surface-container} — #f8f9fc): Tonal buttons and the softest raised tint.
• Container High / Higher / Highest ({colors.surface-container-high} — #eff2f7, {colors.surface-container-higher} — #e6eaf0, {colors.surface-container-highest} — #e1e6ec): The elevation ladder. Elevation here is a tint, never a shadow.
• Dark Surface ({colors.dark-surface} — #121317) with Dark Container steps #18191d → #212226: the same ladder inverted for dark sections.

Text

• Ink ({colors.ink} — #121317): All primary text, and the fill of {component.button-primary}. The same hex is both the ink and the dark surface — a deliberate symmetry.
• Ink Variant ({colors.ink-variant} — #45474d): Secondary copy, eyebrows, meta rows, captions.
• Ink Tertiary ({colors.ink-tertiary} — #80868b): Disabled states.
• On Media ({colors.on-media} — #ffffff, variant rgba(255,255,255,.72)): Text over imagery and gradient cards.
• On dark surfaces the ink becomes {colors.dark-ink} (#f8f9fc) with {colors.dark-ink-variant} (#b2bbc5) for secondary.

Hairlines & Borders

• Outline ({colors.outline} — rgba(33,34,38,.12)): Section dividers and outlined-button borders. Expressed as alpha, not a solid grey, so it works over any surface tint.
• Outline Variant ({colors.outline-variant} — rgba(33,34,38,.06)): The faintest separation.
• Dark theme mirrors both at rgba(230,234,240,.12) / .06.

Brand Gradient

Gradients exist, but only as content. The hero model cards carry soft, blurred pastel artwork (mint, ice-blue, near-black) as full-bleed backgrounds with text laid over them. No gradient is ever applied to a button, a header, or a section background.

Typography

Font Family

• Google Sans Flex — the only text face, variable across optical size 6–144 and weight 1–1000. Publicly served, so use the real thing: https://fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@6..144,1..1000&display=swap
• Google Symbols — variable icon font (weight 100–300, FILL axis), rendered at 18px inline with labels.
• Google Sans Code — monospace, used only for {typography.code}.
• Fallback stack: "Google Sans Flex", Arial, Helvetica, sans-serif.

Hierarchy

Desktop values (≥1280px). The scale below {typography.title-md} does not change with viewport.

At ≤1279px the display steps collapse hard — 148px → 38px, 54px → 30px, 42px → 28px — while {typography.body}, {typography.label}, {typography.caption} and {typography.eyebrow} hold their size at every viewport.

Principles

• Weight is the hierarchy, not size or colour. Four positions only: 350 body, 400 eyebrow, 450 label/button, 500 heading. There is no bold.
• Tracking inverts with size. Display steps carry negative tracking (−0.6% to −1.1%); everything at 17.5px and below carries positive tracking (+0.9% to +1.2%). Never apply one global value.
• Line-height splits at the display boundary. 1.06–1.14 for headings, a constant 1.45 for body, labels, captions and eyebrows.
• Optical size matters. The face is variable on opsz 6–144; let the browser apply it rather than forcing a static instance.
• Balance headlines, pretty body. text-wrap: balance on headlines and text-wrap: pretty on paragraphs are part of the look.

Note on Font Substitutes

Google Sans Flex is publicly served — use the real font. Only if it must be self-hosted:

• Inter (variable) is the closest free substitute; map 350/400/450/500 directly.
• Inter runs slightly wider: keep the negative display tracking, and reduce the positive body tracking to roughly +0.006em, since Inter's default spacing is already open.
• Do not substitute a geometric sans — the humanist grotesque skeleton is what makes weight-only hierarchy legible.

Layout

Spacing System

• Base unit: 4px, with the working scale 4 · 8 · 16 · 24 · 28 · 36 · 48 · 60 · 64 · 72 · 80 · 88 · 120 · 180.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 16px · {spacing.md} 24px · {spacing.lg} 28px · {spacing.xl} 36px · {spacing.xxl} 48px · {spacing.section} 72px · {spacing.block} 120px · {spacing.block-lg} 180px.
• Section rhythm: {spacing.section} (72px) of padding inside a section, {spacing.block-lg} (180px) between major blocks at desktop — stepping down to 120px at ≤1279px and 88px at ≤1023px.

Grid & Container

• Container max-width 1440px; the hero carousel is allowed to run to 1584px.
• Header height is a fixed 64px and the page scrolls beneath it.

Whitespace Philosophy

Whitespace is the separation system. Because there are no borders, shadows or boxes, the only things telling a reader where one idea ends and the next begins are a 1px hairline and a large vertical interval. That interval is generous by design — 180px between major blocks at desktop — and it is what makes a page with no decoration still feel structured rather than run-on.

Elevation & Depth

Shadow philosophy. There are no shadows. Elevation is expressed entirely as a surface tint, and separation entirely as a hairline. A box-shadow anywhere in this system is a mistake.

Decorative Depth

• State layers rather than hover effects: 4% hover, 6% pressed, 12% focus, applied as overlay tints.
• Focus is box-shadow: inset 0 0 0 2px in the ink colour plus the highest container tint — an inset ring, not an outer glow.
• Depth in media comes from the artwork itself (blurred pastel gradients), never from CSS applied to the frame.

Shapes

Border Radius Scale

The grammar is two-tier and strict: pills mean action, 16px means media, 24px means hero card, and structural elements are square.

Media Geometry

• Media is always {rounded.lg} (16px) and uses aspect-ratio tokens: 16/9 and 1/1 for news and blog cards, 2/3 portrait for hero model cards.
• Hero model cards are full-bleed gradient artwork with the copy laid over them and an optional dark scrim.
• Card media never carries a border or a shadow.

Components

Top Navigation

header — 64px, fixed, transparent background; the page scrolls visibly beneath it. Wordmark left with a chevron switcher, nav links in {typography.body} at weight 500, and a right-hand pair of pills: one {component.button-outlined} and one filled action. There is no border, no shadow and no backdrop blur — the header simply floats.

Buttons

All buttons are {rounded.pill}. State layers: 4% hover, 6% pressed, 12% focus.

button-primary — Fill {colors.ink}, text {colors.surface}, {typography.body}, padding 12px × 24px (~48px tall). The main CTA. On dark surfaces it inverts to a white fill with ink text.

button-tonal — Fill {colors.surface-container}, text {colors.ink}. The secondary action on white.

button-outlined — Transparent with a 1px {colors.outline} border, {typography.label} (14.5px / 450), padding 8px × 16px. Usually carries a trailing Google Symbols arrow.

button-protected — rgba(255,255,255,.18) over imagery with {colors.on-media} text, for CTAs sitting on a photograph or gradient card.

Focus on any button: box-shadow: inset 0 0 0 2px {colors.ink} plus {colors.surface-container-highest} background.

Cards & Containers

card — Not a box. Media at {rounded.lg} → title in {typography.title-md} → description in {typography.body} at {colors.ink-variant} → meta row in {typography.caption}. No background, no border, no shadow. The whole card is a link via an absolutely positioned overlay anchor.

card-promo — The hero model card: 2:3 portrait, {rounded.card} (24px), full-bleed gradient or photographic artwork, copy on the media, pill CTAs at the bottom. Uses CSS container queries so the type scales with the card, not the viewport.

divider — A 1px {colors.outline} rule. This is the section separator.

eyebrow-label / meta-row — The recurring content pattern: a 10px uppercase eyebrow above the headline, and below it a grey row of date · category · link in {typography.caption}.

Inputs & Forms

Not surfaced on the analyzed page — see ## Known Gaps.

Footer

footer — White, ink text, separated from the page by a {component.divider}. Links in {typography.body} at weight 450. There is no dark footer; the whole site stays light unless a section explicitly opts into the dark theme.

Do's and Don'ts

Do

• Keep every piece of chrome greyscale; let colour arrive through media only.
• Carry hierarchy with weight — 350 / 400 / 450 / 500 — and keep sizes calm.
• Apply the per-step tracking from the table; it changes sign across the scale.
• Use {rounded.pill} for actions, {rounded.lg} for media, {rounded.card} for hero cards, and square for structure.
• Separate sections with a {component.divider} and 72–180px of vertical interval.
• Express elevation as a surface-container tint and states as 4/6/12% overlays.
• Animate with cubic-bezier(0.16, 1, 0.3, 1) at 150–350ms, on opacity and transform.
• Open a content block with the eyebrow → headline → meta pattern.

Don't

• Don't colour a button, link, or focus ring — actions are near-black pills, links are ink-coloured text.
• Don't add a box-shadow anywhere; this system has none.
• Don't put a border or background on a {component.card} — the media and the whitespace are the card.
• Don't use one global letter-spacing; display tracking is negative, body tracking is positive.
• Don't introduce a second typeface. One variable family covers everything.
• Don't round structural containers, and don't square the buttons.
• Don't reach for a bold weight — 500 is the top of the ladder.

Responsive Behavior

Breakpoints

The single most consequential breakpoint is 1280px, where the display steps roughly quadruple (38 → 148px at the top of the scale) while body and label sizes stay fixed.

Touch Targets

• {component.button-primary} is ~48px tall at 12px vertical padding — comfortably above 44px.
• {component.button-outlined} at 8px padding on 14.5px text sits near 36px; treat it as a desktop-density control and use the primary/tonal size on touch surfaces.
• Header is 64px with 18px inline icons.

Collapsing Strategy

• Header: full nav row → flyout accordion on mobile.
• Type: display steps collapse at 1280px; body-scale steps never change.
• Section intervals: 180px → 120px at ≤1279px → 88px at ≤1023px.
• Carousels: Embla with a deliberately peeked next slide, free-drag, 48px circular pagination.

Image Behavior

• Media keeps its aspect-ratio token across breakpoints and scales within the grid.
• Hero model cards stay 2:3 portrait at every size; container queries scale the type inside them.
• Scroll reveal via IntersectionObserver adding .is-in-view, then a fade-and-rise.

Iteration Guide

1. Work on one component at a time, addressed by its YAML key ({component.card-promo}, {component.button-outlined}).
2. Variants live as their own components: entries; state layers are tokens, not separate components.
3. Use {token.refs} everywhere; never inline a hex once a token exists.
4. Document default and active/pressed only — never hover.
5. The two rules that define this language: no colour in chrome, and no shadows anywhere. Break either and it stops being this design.
6. Before adding a border or a box to create emphasis, add whitespace or a hairline instead.
7. Hierarchy problems are solved on the weight axis (350 → 450 → 500), not with size or colour.

Known Gaps

• Only the homepage was analyzed. Article, research-paper and model-detail templates were not sampled; expect additional components there, especially long-form typography and citation styling.
• No form components observed. Inputs, selects, validation and error states are absent from this reference.
• Dark theme is documented from tokens, not from a rendered page. .deepai--dark publishes a complete inverted palette, but the analyzed page used the light theme throughout; the dark component styling is inferred from the token pairs.
• Data-visualisation palettes exist but were not seen in use. Seven colour families with five emphasis levels each and paired on- colours are defined in the CSS; no chart on the analyzed page exercised them.
• The spacing scale is derived. Section intervals (72 / 120 / 180px) and the grid values are measured; the mid-scale steps are inferred from the published --space-* ramp.
• Motion beyond easing and duration is unverified. The signature curve and the scroll-reveal mechanism are measured; carousel physics and staggering were not instrumented.