---
version: alpha
name: DeepMind-design-analysis
category: AI & LLM Platforms
website: https://deepmind.google
description: A monochrome research interface where colour is content, never chrome. Near-black ink
  on white, one variable typeface carrying the entire hierarchy through weight alone, and hairlines
  plus large vertical intervals doing the work that borders and shadows do elsewhere. All colour
  arrives through media — pastel gradient cards and brand gradients — so the interface itself never
  competes with what it presents.

colors:
  ink: "#121317"
  ink-variant: "#45474d"
  ink-tertiary: "#80868b"
  surface: "#ffffff"
  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)"
  dark-surface: "#121317"
  dark-ink: "#f8f9fc"
  dark-ink-variant: "#b2bbc5"
  dark-surface-container: "#18191d"
  dark-surface-container-high: "#212226"
  dark-outline: "rgba(230, 234, 240, 0.12)"
  accent-blue: "#3186ff"
  accent-cyan: "#2daeb8"
  accent-green: "#00af57"
  accent-orange: "#ff902a"
  accent-red: "#fc413d"
  accent-yellow: "#fec700"
  state-hover: "rgba(33, 34, 38, 0.04)"
  state-pressed: "rgba(33, 34, 38, 0.06)"
  state-focus: "rgba(33, 34, 38, 0.12)"

typography:
  display-9xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 148px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.00594em
  display-7xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 98px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.00944em
  display-6xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.01067em
  display-5xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 54px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.00625em
  display-4xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 42px
    fontWeight: 500
    lineHeight: 1.06
    letterSpacing: -0.00778em
  headline-3xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.00867em
  headline-2xl:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -0.00583em
  title-lg:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 22px
    fontWeight: 500
    lineHeight: 1.14
    letterSpacing: -0.00444em
  title-md:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: -0.00389em
  body:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 17.5px
    fontWeight: 350
    lineHeight: 1.45
    letterSpacing: 0.01188em
  label:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 14.5px
    fontWeight: 450
    lineHeight: 1.45
    letterSpacing: 0.01143em
  caption:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 14.5px
    fontWeight: 350
    lineHeight: 1.45
    letterSpacing: 0.01143em
  eyebrow:
    fontFamily: "Google Sans Flex, Arial, Helvetica, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0.00917em
    textTransform: uppercase
  code:
    fontFamily: "Google Sans Code, monospace"
    fontSize: 14.5px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0.01143em

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 36px
  xxl: 48px
  xxxl: 60px
  card: 24px
  pill: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 16px
  md: 24px
  lg: 28px
  xl: 36px
  xxl: 48px
  section: 72px
  block: 120px
  block-lg: 180px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.surface}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-tonal:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-outlined:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    borderColor: "{colors.outline}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  button-protected:
    backgroundColor: "rgba(255, 255, 255, 0.18)"
    textColor: "{colors.on-media}"
    typography: "{typography.label}"
    rounded: "{rounded.pill}"
    padding: 8px 16px
  header:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    height: 64px
  card:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.none}"
    gap: "{spacing.sm}"
  card-media:
    rounded: "{rounded.lg}"
  card-promo:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.ink}"
    typography: "{typography.title-md}"
    rounded: "{rounded.card}"
    padding: "{spacing.md}"
  divider:
    borderColor: "{colors.outline}"
    height: 1px
  eyebrow-label:
    textColor: "{colors.ink-variant}"
    typography: "{typography.eyebrow}"
  meta-row:
    textColor: "{colors.ink-variant}"
    typography: "{typography.caption}"
    gap: "{spacing.md}"
  footer:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
---

## 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.

| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-9xl}` | 148px | 500 | 1.06 | -0.00594em | Statement headline, largest step |
| `{typography.display-7xl}` | 98px | 500 | 1.06 | -0.00944em | Large statement headline |
| `{typography.display-6xl}` | 72px | 500 | 1.06 | -0.01067em | Section statement |
| `{typography.display-5xl}` | 54px | 500 | 1.06 | -0.00625em | Featured news headline |
| `{typography.display-4xl}` | 42px | 500 | 1.06 | -0.00778em | Smaller display headline |
| `{typography.headline-3xl}` | 32px | 500 | 1.08 | -0.00867em | Section headline |
| `{typography.headline-2xl}` | 28px | 500 | 1.08 | -0.00583em | Sub-section headline |
| `{typography.title-lg}` | 22px | 500 | 1.14 | -0.00444em | Large card title |
| `{typography.title-md}` | 20px | 500 | 1.3 | -0.00389em | Card title, section heading |
| `{typography.body}` | 17.5px | 350 | 1.45 | +0.01188em | Default paragraph, nav links |
| `{typography.label}` | 14.5px | 450 | 1.45 | +0.01143em | Button and CTA labels |
| `{typography.caption}` | 14.5px | 350 | 1.45 | +0.01143em | Meta rows, captions |
| `{typography.eyebrow}` | 10px | 400 | 1.45 | +0.00917em | UPPERCASE eyebrow |

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
| Breakpoint | Columns | Margin | Gutter |
|---|---|---|---|
| < 768px | 4 | 28px | 28px |
| ≥ 768px | 8 | 28px | 28px |
| ≥ 1024px | 12 | 40px | 40px |
| ≥ 1280px | 12 | 72px | 48px |
| ≥ 1728px | 12 | 72px | 64px |

- 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

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, no border | Everything by default |
| Tint 1 | `{colors.surface-container}` #f8f9fc | Tonal buttons, softest raise |
| Tint 2 | `{colors.surface-container-high}` #eff2f7 | Hovered/raised containers |
| Tint 3 | `{colors.surface-container-higher}` #e6eaf0 | Higher containers |
| Tint 4 | `{colors.surface-container-highest}` #e1e6ec | Focus background, highest step |
| Hairline | 1px `{colors.outline}` | Section dividers, outlined buttons |

**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

| Token | Value | Use |
|---|---|---|
| `{rounded.none}` | 0px | Sections, dividers, text blocks |
| `{rounded.xs}` | 4px | Small chips |
| `{rounded.sm}` | 8px | Inline code, small containers |
| `{rounded.md}` | 12px | Medium containers |
| `{rounded.lg}` | 16px | **All media** — images, video, card thumbnails |
| `{rounded.card}` | 24px | Hero promo/model cards |
| `{rounded.xl}` – `{rounded.xxxl}` | 36 / 48 / 60px | Large decorative containers |
| `{rounded.pill}` | 9999px | **All buttons**, without exception |

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

| Name | Width | Key Changes |
|---|---|---|
| Mobile | < 768px | 4 columns, 28px margins; display steps at their smallest (148 → 38px) |
| Tablet | ≥ 768px | 8 columns; block interval 120px |
| Laptop | ≥ 1024px | 12 columns, 40px margins/gutters; block interval 120px |
| Desktop | ≥ 1280px | 12 columns, 72px margin / 48px gutter; **full display scale unlocks** |
| Wide | ≥ 1728px | Gutter opens to 64px; container still capped at 1440px |

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.