deepmind.google website design: fonts, colors and UI patterns

Design character

Google DeepMind’s model pages are a dark, spacious product-science narrative: near-black canvas, cool gray surfaces, soft white primary type, and pill navigation that feels closer to a device OS than a docs site. Benchmarks, model stories, and open-model launches (Gemini, Gemma) share one cinematic system—large quiet headlines, airy section padding, and data tables that still look designed rather than dumped.

What should survive adaptation:

• Dark monochrome base with cool blue-gray secondary text.
• Pill / segmented controls as the primary way to switch narrative chapters.
• Large radius cards and soft panels over harsh grids.
• Benchmark and spec content presented as editorial data, not dense admin tables.

Foundations

Color

Measured text roles:

• Primary text: #f8f9fc
• Secondary text: #b2bbc5

Visual canvas (from screenshots): deep charcoal/black page background; elevated panels slightly lighter charcoal; white filled pill for the active tab; hairline column rules in tables at low contrast. Accents are minimal—status is mostly value emphasis (bold white numbers) rather than hue.

Suggested working palette from captures: #f8f9fc, #b2bbc5, plus near-black surfaces.

Typography

Families not declared. Observed scale:

• Body ~17.5px / 25.4px line-height (dominant).
• Secondary ~14.5px / 21px.
• Section titles ~32px medium (weight ~500).
• Display on Gemma launch ~120px light (weight ~300) and mid display ~42px.
• Table numerals inherit body size but read bolder via weight/contrast.
• Single sans system across UI and content; no decorative serif.

Spacing and layout

Strong, repeated spacing:

• Horizontal content padding 72px; vertical section padding 64–72px.
• Wide side margins ~300–308px on ultra-wide frames—content stays in a focused column.
• Grid gaps 64px between major blocks; tighter 16px gaps inside control clusters.
• Table rows breathe; section stacks are generous (margin-bottom 60–120px between big chapters).

Layout model: top floating controls → large rounded content stage → narrative sections and comparison tables.

Visual language

• Radii: 16px panels common; 8px and 4px for smaller controls; 9999px pills/chips everywhere (tabs, tags, some buttons).
• Borders: 1–2px solid low-contrast strokes on chips and some cards.
• Shadows: nearly absent; depth from surface value shifts.
• Imagery: abstract model art and gradient device visuals on launch heroes (Gemma); performance pages stay typographic/data-first.
• Taxonomy read: dark mode, muted/monochrome, generative-AI product marketing, moderate density.

Components and states

1. Segmented pill nav — dark track with white active pill (Capabilities / Hands-on / Performance / Model information).
2. Icon circle buttons — back/forward chevrons in soft dark circles.
3. Performance stage card — large 16px-radius charcoal panel holding headline + benchmark table.
4. Data table — multi-column model comparison; primary column emphasized; muted headers; subtle row separation.
5. Launch hero (Gemma) — massive light display type, short deck, pill CTAs, optional abstract visual.
6. Model card chrome — compact pill/chip clusters with 2px borders (header capture).

Active tab is the clearest state; hover/focus not evidenced.

Responsive behavior

Captures include ultra-wide (~2048), mid (~1296–1793), and square-ish (~616) viewports on Gemma. Pills and heroes compress; display type scales down but stays light and huge relative to body. Performance table is desktop-oriented in the wide shots. True small-phone patterns were not fully documented.

Practical guidance

Preserve

• Cool dark neutrals with #f8f9fc / #b2bbc5 text pairing.
• Pill chapter navigation.
• 72px section padding and large 16px content radii.
• Benchmark tables as designed editorial objects.
• Sparse accent color—let white type and layout do hierarchy.

Avoid

• Bright Material rainbow chrome on these model stories.
• Dense light-mode admin tables.
• Tiny radii or heavy drop shadows.
• Multiple competing type families.
• Filling every section with illustration; data pages should stay calm.

Scope note

Studied Gemini 3.1 Pro performance/model pages (9520, 9519), Gemma 4 launch viewports (8701–8705), and a model-card header (6854). Background/palette extractions and font family names were unsupported; hex text roles and spacing/radius figures are measured. Surface blacks are visual reads from screenshots.