---
version: alpha
name: "Dust"
website: "https://dust.tt"
description: >-
  An enterprise AI assistant platform whose marketing site sits on pure white with a 69px Geist display headline in near-black, anchored beside an isometric pastel-tiled illustration of a multiplayer workspace. The page runs Geist sans across every body, label, and nav surface and Geist Mono for uppercase eyebrow strips and code-style annotations. The single brand voltage is a saturated sky blue used as the CTA fill and the pre-header announcement strip; everything else is graphite ink, a dominant 562-occurrence cool gray hairline, and a few pastel illustration tints that never leave the product mockups. Radii commit to a generous 16-24px range plus a fully-rounded pill, anchored on the 9999px CTA.

seo:
  title: "Dust Design System for React — sky-blue voltage, Geist family, 17 components"
  metaDescription: "Dust's marketing site is anchored on a 69px Geist display headline in near-black with a saturated sky-blue CTA pill. Tokens for React, Next.js, and AI coding tools."
  highlights:
    - "Pre-header brand strip — a saturated sky-blue announcement bar at #1c91ff runs full-bleed across the top of every page, carrying a single linked sentence above the regular nav"
    - "Geist + Geist Mono pair — the same superfamily handles every surface; Geist sans for display, headings, body, and nav, Geist Mono for the rare 11px uppercase tracked eyebrow strips"
    - "Isometric pastel illustration — the hero pairs the near-black headline with a pastel-tiled isometric workspace mockup using soft greens, pinks, and blues, all confined to the illustration"
    - "Tight negative tracking — display sits at 69px / weight 600 with -2.76px letter-spacing; the 4% negative track is the editorial-display signature across every Geist heading"
    - "20px and 24px pill cards — the radius scale runs 16/20/24px on cards with a 9999px fully-rounded CTA; no 4-6px tight corners exist"
  tags:
    - "AI & LLM Platforms"
    - "Productivity & SaaS"
  lastUpdated: "2026-05-19"
  author:
    name: "Dov Azencot"
    url: "https://x.com/dovazencot"
  opening: |
    Dust's marketing site stages its hero on pure white with a single editorial move: a 69px Geist display headline in near-black on the left, paired with an isometric pastel-tiled illustration on the right showing a stylized multiplayer workspace. A saturated sky-blue announcement strip runs full-bleed across the very top of the page above the regular nav, carrying a single linked sentence about a podcast appearance. The CTA below the headline is a small sky-blue pill ("Request a demo") sitting beside a transparent secondary. Where Notion and Coda paint busy marketing pages with multiple chromatic accents and animated gradients, Dust commits to near-monochrome — graphite ink on white, with one saturated sky-blue voltage held in reserve for the announcement strip and the CTA. The illustration carries every pastel tint; the marketing chrome carries none.

    The DESIGN.md file packages the system into a machine-readable spec for React tooling. Inside: 18 color tokens drawn from the captured page — a cool-gray hairline at 562 occurrences carries every divider stroke, near-black at 364 carries text and shadows, graphite ink at 110 carries display headings, sky-blue at 10 carries the CTA and announcement strip, plus six pastel illustration colors confined to the workspace mockup. Typography runs three weights of Geist sans (400, 500, 600) at 12-69px plus Geist Mono at 11-12px for uppercase tracked eyebrow strips. 17 components cover the announcement strip, the hero illustration pair, the sky-blue pill CTA, hairline cards, the testimonial card, and a 4-up feature grid.

    Feed this file to Claude or Cursor and it reproduces Dust's specific moves: the pure-white canvas with no surface ladder, the 69px Geist display in near-black with -2.76px tracking, the saturated sky-blue voltage held to the announcement strip and CTA, the pastel illustration confined to the product mockup, and the 20-24px card corners. The one move worth borrowing only if your product is technically positioned: the pastel-isometric illustration as the single chromatic moment. On a consumer-AI page it would read as decorative; on a technical-enterprise page it reads as product evidence.
  related:
    - href: "/design"
      title: "Browse all design systems"
      description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each."
    - href: "https://dust.tt"
      title: "Dust — official site"
      description: "Dust's public marketing site — the source of truth for the live tokens captured in this file."
    - href: "https://github.com/google-labs-code/design.md"
      title: "The DESIGN.md specification"
      description: "Google Labs' open spec for machine-readable design system files — the format this page is built on."
  questions:
    - id: "primary-color"
      title: "What is Dust's primary brand color?"
      answer: "Dust's brand voltage is a saturated sky blue wired into CSS as --tw-ring-color and used as the focus-ring color across the Tailwind setup. It renders 10 times in the captured marketing page — 4 as text, 6 as background — and the dominant rendering is the pre-header announcement strip running full-bleed across the top of every page above the regular nav. The secondary rendering is the primary CTA pill (Request a demo) sitting below the hero headline. Everything else on the page is graphite ink on white, with a 562-occurrence cool-gray hairline carrying divider strokes. The brand voltage is held tightly in reserve; below the testimonial strip the sky-blue disappears entirely until the closing CTA section at page bottom."
    - id: "typography"
      title: "What typeface does Dust use, and what should I use as a substitute?"
      answer: "Dust runs the Geist superfamily across every text surface. Geist sans carries display, headings, body, button, and nav at weights 400, 500, and 600. The 69px hero h1 uses weight 600 with -2.76px letter-spacing — a 4% negative track that compresses the cap-height for the editorial-display feel. Body paragraphs sit at 16px / 400 with -0.32px tracking. The 24px section h2 uses weight 600 with -0.96px tracking. Geist Mono carries the rare uppercase tracked eyebrow strips at 11-12px with 0.44-0.72px positive tracking. Geist is open-source (Vercel's open release); no substitute is needed. If a closer commercial alternative is desired, GT America at the same weights transfers cleanly."
    - id: "illustration-strategy"
      title: "Why does Dust use a pastel illustration in the hero instead of a product screenshot?"
      answer: "The hero illustration is an isometric tiled diagram showing a stylized multiplayer workspace — pastel green, pink, lavender, and pale-yellow tiles arranged at an axonometric angle with small avatar markers placed across them. The choice signals technical positioning. Where Notion pairs the hero headline with a real product screenshot and Slack uses a literal app preview, Dust uses an abstracted diagram that hints at the multiplayer-AI concept without committing to a specific UI. The pastel palette ($bcde81 green, $f99bc3 pink, $caebff sky-blue, white) is confined entirely to the illustration; the marketing chrome around it stays in graphite ink and near-monochrome. The illustration carries every chromatic moment; the chrome carries none."
    - id: "rounded-style"
      title: "What is Dust's corner-radius philosophy?"
      answer: "The radius scale is dominated by 9999px (17 occurrences) on the CTA pill and 16px (9 occurrences) on the primary card surfaces. 24px appears 4 times on larger feature panels, 12px appears 3 times on smaller chips, and 5-6px appear sparingly on minor surfaces. The smallest meaningful radius is 5px; there is no 3-4px tight tier the way dev-tools brands like Vercel and Linear use. The system reads soft-card plus full-pill — closer to a consumer-AI aesthetic than to an enterprise-software one — and the choice of 16-24px corners signals approachability without going all the way to the 32-48px corners that would feel playful."
    - id: "use-in-project"
      title: "Can I use this DESIGN.md to build my own enterprise AI marketing site?"
      answer: "Yes — the file is structured for ingestion by Claude, Cursor, or any AI tool that reads design tokens. The agent reproduces Dust's specific moves: the pure-white canvas, the 69px Geist display in near-black with -2.76px letter-spacing, the saturated sky-blue voltage held to the announcement strip and CTA, the pastel illustration confined to the product mockup, and the 20-24px card corners. The token references resolve cleanly — every hex, font name, radius, and spacing value is quoted scalar. The one move worth borrowing only if your product needs technical credibility: the pastel-isometric illustration as the single chromatic moment. The marketing chrome's near-monochrome restraint relies on the illustration to carry the brand's playful side; without it the page reads as austere."

mockups:
  - "marketing-hero"
  - "dashboard-card-grid"

colors:
  primary: "#1c91ff"
  primary-soft: "#caebff"
  primary-dark: "#0a6cc6"
  ink: "#111418"
  ink-soft: "#1a1d21"
  ink-graphite: "#2a3241"
  ink-pure: "#000000"
  canvas: "#ffffff"
  surface-soft: "#eeeeef"
  hairline: "#d3d5d9"
  muted: "#596170"
  muted-cool: "#475569"
  muted-tertiary: "#969ca5"
  muted-quaternary: "#364153"
  accent-green: "#bcde81"
  accent-pink: "#f99bc3"
  accent-orange: "#e14322"
  ink-deep: "#020617"

typography:
  display-xl:
    fontFamily: "Geist, sans-serif"
    fontSize: 69px
    fontWeight: 600
    lineHeight: 62px
    letterSpacing: "-2.76px"
  display-lg:
    fontFamily: "Geist, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 52px
    letterSpacing: "-2.88px"
  heading-lg:
    fontFamily: "Geist, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 30px
    letterSpacing: "-0.96px"
  heading-md:
    fontFamily: "Geist, sans-serif"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 26px
    letterSpacing: "-0.36px"
  heading-sm:
    fontFamily: "Geist, sans-serif"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 26px
    letterSpacing: "-0.36px"
  body-lg:
    fontFamily: "Geist, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 26px
    letterSpacing: "-0.32px"
  body-md:
    fontFamily: "Geist, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "-0.28px"
  body-emphasized:
    fontFamily: "Geist, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 20px
    letterSpacing: "-0.28px"
  button-md:
    fontFamily: "Geist, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 20px
    letterSpacing: "-0.28px"
  nav-link:
    fontFamily: "Geist, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: "-0.28px"
  label-mono:
    fontFamily: "\"Geist Mono\", monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.44px"
  eyebrow-tracked:
    fontFamily: "Geist, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: "0.72px"

rounded:
  none: "0px"
  xs: "5px"
  sm: "6px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  full: "9999px"
  circle: "50%"

spacing:
  xs: "4px"
  sm: "6px"
  base: "8px"
  md: "12px"
  lg: "16px"
  xl: "20px"
  2xl: "24px"
  3xl: "40px"
  hero: "96px"

components:
  announcement-strip:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "12px 24px"
    height: "40px"
  top-nav:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: "16px 32px"
    height: "64px"
  nav-link:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: "2px 0"
  hero-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-xl}"
  section-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.display-lg}"
  sub-heading:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.heading-lg}"
  body-paragraph:
    backgroundColor: "transparent"
    textColor: "{colors.muted}"
    typography: "{typography.body-lg}"
  body-paragraph-strong:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
  eyebrow-label:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    typography: "{typography.eyebrow-tracked}"
  mono-eyebrow:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.canvas}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 28px"
    height: "44px"
  button-secondary:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.button-md}"
    rounded: "{rounded.full}"
    padding: "12px 28px"
    height: "44px"
    borderColor: "{colors.hairline}"
  card-hairline:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-lg}"
    rounded: "{rounded.lg}"
    padding: "24px"
    borderColor: "{colors.hairline}"
  testimonial-card:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.heading-md}"
    rounded: "{rounded.xl}"
    padding: "40px"
  feature-cell:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.none}"
    padding: "24px 0"
    borderColor: "{colors.hairline}"
  news-card:
    backgroundColor: "{colors.canvas}"
    textColor: "{colors.ink}"
    typography: "{typography.body-md}"
    rounded: "{rounded.lg}"
    padding: "20px"
    borderColor: "{colors.hairline}"
  closing-cta-section:
    backgroundColor: "{colors.ink-deep}"
    textColor: "{colors.canvas}"
    typography: "{typography.display-lg}"
    rounded: "{rounded.xl}"
    padding: "96px 48px"
---

## Overview

Dust's marketing site is anchored on near-monochrome restraint. **Single-voltage chrome.** The page sits on pure white with a 69px Geist display headline in near-black `{colors.ink}` (#111418) on the left and an isometric pastel-tiled illustration on the right showing a stylized multiplayer workspace. A saturated sky-blue announcement strip in `{colors.primary}` (#1c91ff) runs full-bleed across the very top of the page above the regular nav — the single chromatic moment outside the illustration. The CTA below the headline is a small sky-blue pill ("Request a demo") sitting beside a transparent secondary. Where Notion paints busy marketing pages with multiple chromatic accents and Coda leans on a soft pastel atmosphere, Dust commits to graphite ink on white with one saturated sky-blue voltage held in reserve for the announcement strip and the CTA. The illustration carries every pastel tint; the marketing chrome carries none.

The Geist superfamily does the typographic work. **Geist sans** carries every display, heading, body, button, and nav surface at weights 400, 500, and 600 across 12-69px. **Geist Mono** carries the rare uppercase tracked eyebrow strips at 11-12px with positive 0.44-0.72px tracking. The 69px hero h1 uses weight 600 with -2.76px letter-spacing — a 4% negative track that compresses the cap-height for the editorial-display feel. Every Geist heading in the system carries similar negative tracking (the 24px h2 sits at -0.96px, the 48px display at -2.88px). Where Cloudflare pairs FT Kunst Grotesk with Apercu Mono Pro and Stripe pairs Söhne with mono, Dust stays inside the Geist superfamily and lets a single-family Vercel-style typographic system carry every surface — a tighter discipline than the two-family split most marketing brands use.

The radius scale is **soft-card plus pill**: 16px (`{rounded.lg}`) and 24px (`{rounded.xl}`) on cards, plus 9999px (`{rounded.full}`) on the CTA pill. There is no 3-4px tight tier; the smallest meaningful radius is 5px on a single minor surface. Dust reads soft and approachable without going all the way to the 32-48px corners that would feel playful.

**Key Characteristics:**
- Sky-blue brand voltage `{colors.primary}` (#1c91ff) held tightly in reserve — appears 10 times on the captured page, dominantly as the full-bleed announcement strip and the CTA pill fill.
- Geist superfamily across every text surface: sans for display, headings, body, button, nav at weights 400-600; Geist Mono for the 11px uppercase tracked eyebrow strips.
- Hero illustration is an isometric pastel-tiled diagram (`{colors.accent-green}` #bcde81, `{colors.accent-pink}` #f99bc3, `{colors.primary-soft}` #caebff, pale yellow) — the only chromatic moment outside the announcement strip and CTA.
- 562-occurrence cool gray hairline `{colors.hairline}` (#d3d5d9) carries every divider stroke on the page; no second hairline tone competes.
- 69px hero h1 at weight 600 with -2.76px letter-spacing (4% negative tracking) — the editorial-display signature.
- 9999px fully-rounded pill (`{rounded.full}`) on the CTA, 16-24px on cards; no 3-4px tight tier exists.
- Closing CTA section breaks the white canvas with a near-black `{colors.ink-deep}` (#020617) panel — the only dark-surface moment on the page, used to anchor "The best teams aren't just using AI".
- Testimonial card uses a pale `{colors.surface-soft}` (#eeeeef) lavender-tinted fill with a 24px corner — the page's softest surface treatment.

## Colors

### Brand

- **Primary Sky** (`{colors.primary}` — #1c91ff): frequency 10 — 4 as text, 6 as background. Wired in CSS as `--tw-ring-color`. The brand voltage — fills the full-bleed announcement strip across the top of every page and the primary CTA pill. Held tightly in reserve elsewhere; below the testimonial strip the sky-blue disappears until the closing CTA section.
- **Primary Soft** (`{colors.primary-soft}` — #caebff): frequency 8 — 7 as background, 1 inside gradients. A pale sky tint used as the soft canvas behind the "Your company's knowledge" feature card and inside the hero illustration's sky tiles.
- **Primary Dark** (`{colors.primary-dark}` — #0a6cc6): frequency 7 as text. The hover and pressed variant of the brand sky — used for inline link colors and the announcement-strip link text on hover.

### Text

- **Ink** (`{colors.ink}` — #111418): frequency 110 — 103 as text, 4 as border, 3 as shadow. The dominant text color for display headings, body, and nav. Not pure black; a slightly cool near-black that softens the contrast against the white canvas.
- **Ink Soft** (`{colors.ink-soft}` — #1a1d21): frequency 20 — 18 as text, 2 as border. A secondary text tone used inside testimonial cards and feature-cell titles.
- **Ink Graphite** (`{colors.ink-graphite}` — #2a3241): frequency 3 as text. A mid-graphite for tertiary text below the fold.
- **Ink Pure** (`{colors.ink-pure}` — #000000): frequency 364 — 355 as text, 9 as shadow. Used inside body paragraph spans where pure-black reads softer than the near-black ink, plus as the shadow ink on rare elevated cards.
- **Muted** (`{colors.muted}` — #596170): frequency 25 as text. The dominant body-paragraph color rendered by `<p>` elements at 16px / 400. Cool-toned graphite that reads softer than the headline ink against the white canvas.
- **Muted Cool** (`{colors.muted-cool}` — #475569): frequency 5 as text. A slightly deeper cool-gray for emphasis inside body copy.
- **Muted Tertiary** (`{colors.muted-tertiary}` — #969ca5): frequency 5 as text. The lightest text tone used for sub-caption rows beneath feature cards.
- **Muted Quaternary** (`{colors.muted-quaternary}` — #364153): frequency 4 as text. A mid-graphite for label rows under product cards.

### Surface

- **Canvas** (`{colors.canvas}` — #ffffff): frequency 44 — 16 as text, 26 as background, 1 as border. Wired as `--tw-ring-offset-color`. The dominant body surface; every section except the closing CTA sits on it.
- **Surface Soft** (`{colors.surface-soft}` — #eeeeef): frequency 28 — 6 as text, 6 as background, 15 as border, 1 inside gradients. A pale lavender-tinted surface used for the testimonial card fill and barely-visible dropdown panels.
- **Ink Deep** (`{colors.ink-deep}` — #020617): frequency 1 as background. The closing CTA section breaks the white canvas with this near-black panel — the only dark-surface moment on the page.

### Hairline

- **Hairline** (`{colors.hairline}` — #d3d5d9): frequency 562 — all as border. The dominant divider tone — runs as the structural hairline across every card edge, feature-cell rule, and top-nav bottom border. No second hairline tone competes; the system is mono-hairline.

### Illustration Pastels

- **Accent Green** (`{colors.accent-green}` — #bcde81): frequency 2 as background. A pastel chartreuse used inside the hero illustration's tile-grid and the "Engineering Operations" code-block accent.
- **Accent Pink** (`{colors.accent-pink}` — #f99bc3): frequency 2 — 1 as text, 1 as background. A pastel rose used inside the hero illustration's tile-grid; the page's only pink moment.
- **Accent Orange** (`{colors.accent-orange}` — #e14322): frequency 2 as text. A saturated terracotta used inside emoji-style accent badges within the integration-card grid.

## Typography

### Font Families

The system runs the **Geist** superfamily across every text surface. **Geist sans** carries display, headings, body, button, and nav at weights 400, 500, and 600 from 12-69px. **Geist Mono** carries the rare uppercase tracked eyebrow strips at 11-12px with positive 0.44-0.72px tracking. Both faces are open-source (Vercel's open release); no commercial license substitute is needed.

The single-superfamily commitment is the system's typographic move. Where Cloudflare pairs FT Kunst Grotesk with Apercu Mono Pro, Stripe pairs Söhne with mono, and Glean runs four cuts of Polysans, Dust stays inside one family and lets weight variation and the rare mono cut do every distinction. The result is a tighter typographic discipline than most marketing brands carry.

### Hierarchy

| Token | Family / Weight | Size | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
| `{typography.display-xl}` | Geist 600 | 69px | 62px | -2.76px | Hero h1 ("Multiplayer AI for human-agent collaboration") |
| `{typography.display-lg}` | Geist 500 | 48px | 52px | -2.88px | Section h2 (large editorial displays) |
| `{typography.heading-lg}` | Geist 600 | 24px | 30px | -0.96px | Sub-section h2 ("Trusted among AI Operators", "A new kind of workspace") |
| `{typography.heading-md}` | Geist 600 | 18px | 26px | -0.36px | h3 feature-cell titles |
| `{typography.heading-sm}` | Geist 500 | 18px | 26px | -0.36px | h3 secondary headings |
| `{typography.body-lg}` | Geist 400 | 16px | 26px | -0.32px | Default running text — paragraphs rendered by `<p>` elements |
| `{typography.body-md}` | Geist 400 | 14px | 20px | -0.28px | Smaller body and link text |
| `{typography.body-emphasized}` | Geist 600 | 14px | 20px | -0.28px | Strong-emphasis inline text |
| `{typography.button-md}` | Geist 500 | 14px | 20px | -0.28px | Primary and secondary button labels |
| `{typography.nav-link}` | Geist 400 | 14px | 20px | -0.28px | Top-nav link labels |
| `{typography.label-mono}` | Geist Mono 500 | 11px | 16px | 0.44px | Uppercase tracked eyebrow labels above feature cells |
| `{typography.eyebrow-tracked}` | Geist 500 | 12px | 16px | 0.72px | Sans-uppercase eyebrow labels for "A NEW KIND OF WORKSPACE", "RAG IS NOT ENOUGH" |

### Principles

Every Geist heading carries negative letter-spacing — the 69px hero at -2.76px (4% negative), the 48px display at -2.88px (6% negative), the 24px h2 at -0.96px (4% negative). The negative tracking compresses the cap-height and reads as editorial-display rather than running-text headline. Body and nav surfaces at 14-16px carry a smaller -0.28-0.32px track. The eyebrow tier is the only place positive tracking appears — Geist Mono at 0.44px and Geist sans at 0.72px on the rare uppercase labels.

Weight stays at 400 for body, 500 for buttons and emphasis, 600 for display and headings. There is no 700-800 weight in the system; the negative tracking carries the typographic confidence without needing heavier strokes.

### Note on Font Substitutes

Geist is open-source. No substitute is needed; the family is available via the Vercel font CDN, npm (`geist`), or direct download. If a closer commercial alternative is preferred, **GT America** at the same weights transfers cleanly at the 16-24px body sizes; **Söhne** at -0.04em tracking matches the 69px display tier.

## Layout

### Spacing System

- **Base unit:** 4px, with 8px (47 occurrences) and 12px (26 occurrences) as the dominant smaller modules.
- **Tokens:** `{spacing.xs}` 4px · `{spacing.sm}` 6px · `{spacing.base}` 8px · `{spacing.md}` 12px · `{spacing.lg}` 16px · `{spacing.xl}` 20px · `{spacing.2xl}` 24px · `{spacing.3xl}` 40px · `{spacing.hero}` 96px.
- **Section padding (vertical):** ~96px between major sections — the most generous breathing room in the system, used to keep the near-monochrome page from feeling cramped.
- **Card internal padding:** `{spacing.3xl}` (40px) on the testimonial card; `{spacing.2xl}` (24px) on the hairline feature cards; `{spacing.xl}` (20px) on the news-card surfaces.
- **Top-nav padding:** `{spacing.lg}` (16px) vertical, `{spacing.2xl}` (32px) horizontal — the wordmark sits flush left, product links center, and the right-aligned Sign In plus Get Demo cluster.

### Grid & Container

- **Max content width:** ~720px on the hero text column, ~1080px on the editorial sections, ~1280px on the testimonial card.
- **Hero:** asymmetric 50/50 — the near-black headline plus body paragraph plus CTA on the left, the isometric pastel-tiled illustration on the right. Both halves anchor at ~480px width.
- **Below-fold sections:** centered single-column displays at ~720px width — the "A new kind of workspace", "Your company's knowledge", "Agents that get smarter" headings all sit centered.
- **Integration-card grid:** 2-column 50/50 grid pairing white hairline cards on the left with mock product UI on the right.
- **Closing CTA section:** full-bleed `{colors.ink-deep}` near-black panel containing a centered 48px display and a single sky-blue CTA pill.

### Rhythm

The page alternates between **near-monochrome restraint** and **single-illustration moment** rather than a varying chromatic tempo. The hero is the page's loudest chromatic moment thanks to the pastel illustration. Section 2 (the trust logo wall) is dense and monochrome. Section 3 (the workspace product card) is generous and white with a small accent illustration. Section 4 (the testimonial card with photo) returns to monochrome on a pale lavender surface. The remaining sections alternate between roomy white panels and dense card grids, with the closing CTA section providing the page's only near-black surface as a punctuation mark.

## Elevation

The system has essentially **no shadow tier**. The captured page has 9 shadow occurrences from `{colors.ink-pure}` (#000000), 3 from `{colors.ink}` (#111418) — almost all confined to barely-perceptible elevations on the testimonial card and dropdown panels. Hairline borders (`{colors.hairline}` — 562 occurrences) carry the work that shadows would carry on a typical SaaS page; depth comes from surface-color contrast (pale lavender testimonial card over white, near-black closing CTA over white) rather than from layered elevation.

- **Flat (no shadow):** announcement strip, hero, feature cells, news cards, closing CTA — 99% of surfaces.
- **Tonal lift:** the `{colors.surface-soft}` (#eeeeef) testimonial card sits on `{colors.canvas}` (#ffffff) — the barely-perceptible lavender tint reads as elevation without any shadow being drawn.
- **Hairline outlines:** `{colors.hairline}` (#d3d5d9) marks every card edge below the fold — the structural cool-gray that does all the elevation work.

## Shapes

The radius scale is **soft-card plus pill**, centered on a 16-24px range:

- `{rounded.none}` 0px — only on the announcement strip and the integration-grid feature cells.
- `{rounded.xs}` 5px — small UI surfaces (2 occurrences).
- `{rounded.sm}` 6px — minor chip surfaces (1 occurrence).
- `{rounded.md}` 12px — secondary card surfaces (3 occurrences).
- `{rounded.lg}` 16px — the dominant card radius (9 occurrences). Used on hairline feature cards and news-card surfaces.
- `{rounded.xl}` 24px — larger feature panels (4 occurrences). Used on the testimonial card and the closing CTA section.
- `{rounded.full}` 9999px — the fully-rounded CTA pill (17 occurrences). The primary and secondary CTAs, plus the pill-shaped badges in feature cells.
- `{rounded.circle}` 50% — avatar circles in the testimonial and integration-card rows.

There is no 3-4px tight tier. The smallest meaningful radius is 5px on a single minor surface; cards begin at 12px and trend to 16-24px. The 9999px fully-rounded pill on the CTA is the warmest surface in the system, balancing the soft-card identity with one fully-round affordance.

## Components

**`announcement-strip`** — Full-bleed `{colors.primary}` (#1c91ff) sky-blue surface, 12×24px padding, 40px height. Holds a single linked sentence about a podcast appearance ("Get exclusive insights on AI Operators on Indie Hackers"). The single chromatic moment above the regular nav.

**`top-nav`** — White `{colors.canvas}` surface, 64px height. Dust wordmark flush left, product-nav links (Product, Speakers, Resources, Pricing) center, Sign In plus Try for Free plus Request a Demo cluster on the right.

**`nav-link`** — Near-black `{colors.ink}` text in `{typography.nav-link}` (Geist 14px / 400 / -0.28px). 2×0 padding. No hover background visible on the captured surface.

**`hero-heading`** — Near-black `{colors.ink}` text, Geist 69px / 600 with -2.76px letter-spacing. "Multiplayer AI for human-agent collaboration" is the canonical instance — the loudest typographic moment on the page.

**`section-heading`** — Geist 48px / 500 with -2.88px tracking. Used for the closing CTA section heading.

**`sub-heading`** — Geist 24px / 600 with -0.96px tracking. Used for "Trusted among AI Operators", "A new kind of workspace", "Agents that get smarter", "Reimagine your everyday work".

**`body-paragraph`** — `{colors.muted}` (#596170) text at `{typography.body-lg}` (16px / 400 / -0.32px). The workhorse paragraph rendered by `<p>` elements — cool-toned graphite that reads softer than the headline ink.

**`body-paragraph-strong`** — Near-black `{colors.ink}` variant of the body for emphasis statements and customer-name lines in testimonial cards.

**`eyebrow-label`** — Sky-blue `{colors.primary}` (#1c91ff) text in `{typography.eyebrow-tracked}` (Geist 12px / 500 / 0.72px uppercase). Used for "A NEW KIND OF WORKSPACE", "RAG IS NOT ENOUGH", "AGI IS NOT MARKETING".

**`mono-eyebrow`** — Near-black text in Geist Mono 11px / 500 with 0.44px tracking. The rare mono treatment for tracked uppercase labels.

**`button-primary`** — The signature CTA. Sky-blue `{colors.primary}` (#1c91ff) fill, white text, `{rounded.full}` fully-rounded pill, 12×28px padding, 44px height. "Request a demo" is the canonical instance.

**`button-secondary`** — White `{colors.canvas}` fill, near-black text, 1px `{colors.hairline}` border, pill radius, 44px height. Used for "Try for Free" beside the primary in the hero CTA stack.

**`card-hairline`** — White surface, 1px `{colors.hairline}` (#d3d5d9) border, `{rounded.lg}` 16px radius, 24px internal padding. The default content card — holds feature explanations and product UI thumbnails.

**`testimonial-card`** — Pale `{colors.surface-soft}` (#eeeeef) lavender-tinted fill, near-black text, `{rounded.xl}` 24px radius, 40px padding. "Dust is the most impactful software we've adopted since building Clay." — the page's softest surface treatment.

**`feature-cell`** — White surface, 1px `{colors.hairline}` top border, 24×0 padding, no radius. Used in the 4-up "Knows your company / Multiplayer AI / Model flexibility / Productivity that compounds" strip — divided by hairline rules rather than card outlines.

**`news-card`** — White surface, 1px `{colors.hairline}` border, `{rounded.lg}` 16px radius, 20px padding. Used in the "News and announcements" 2-column grid at page bottom.

**`closing-cta-section`** — Near-black `{colors.ink-deep}` (#020617) fill, white text, `{rounded.xl}` 24px radius, 96×48px padding. The only dark-surface moment on the page — holds "The best teams aren't just using AI. They're running it." with a centered sky-blue CTA pill.

## Do's and Don'ts

**Do** keep the brand sky-blue voltage `{colors.primary}` (#1c91ff) confined to the announcement strip and the CTA. The 10-occurrence scarcity is the system's chromatic discipline; multiplying it into body emphasis, link colors, or section accents dilutes the only chromatic moment outside the hero illustration.

**Do** carry the hero's pastel illustration as the single chromatic moment outside the brand voltage. The pastel green, pink, sky-blue, and pale-yellow tiles are confined to the illustration; replacing the illustration with a product screenshot loses the page's only playful surface and turns the chrome austere.

**Do** preserve the negative letter-spacing across Geist headings. The hero at -2.76px (4% negative), the 48px display at -2.88px (6%), the 24px h2 at -0.96px (4%) — these tracks are the editorial-display signature. Resetting to 0 tracking turns the headlines into a generic Vercel-style display.

**Do** use `{colors.hairline}` (#d3d5d9) — NOT a shadow — for every card outline and divider stroke. The 562-occurrence dominance is the structural elevation tone; introducing a second hairline color or a tinted shadow breaks the mono-hairline discipline.

**Don't** use `{colors.primary-soft}` (#caebff) or any other pastel illustration tint outside the hero illustration. The pastels are illustration-scoped; rendering a feature card with a pastel-pink background or a green divider would compete with the chrome's near-monochrome restraint.

**Don't** swap the testimonial-card fill from `{colors.surface-soft}` (#eeeeef) to white. The pale lavender tint is the page's softest surface treatment; flattening it to pure white removes the tonal lift that compensates for the absent shadow tier.

**Don't** introduce a 3-4px tight corner. The smallest meaningful radius in the system is 5px on a single minor surface; cards begin at 12-16px and trend to 24px. Adding 3-4px corners on dropdowns or chips reads as borrowed from a dev-tools system and breaks the soft-card identity.

**Don't** render display headings at weight 700 or above. The system tops out at weight 600 with significant negative tracking; pushing to weight 700 or 800 turns the editorial-display feel into a generic SaaS shout and loses the Geist superfamily's typographic discipline.

## Known Gaps

- **Dark mode:** the captured marketing surfaces are light-only except for the single closing CTA panel. A dark variant likely exists inside the Dust product UI (`app.dust.tt`) but is not represented here.
- **Hover and focus states:** the captured surfaces show resting states only. The `--tw-ring-color` declared as the brand sky-blue suggests focus rings exist across form surfaces, but the full state matrix for the primary CTA, nav links, and feature cards is not exposed.
- **Form input states:** no text-input surface is captured on the marketing page; form styling lives in the gated demo flow and is not represented here.
- **Motion:** the hero illustration appears static in the screenshot but may carry subtle motion (avatar pulse, tile-grid drift) on the live page. The spec captures end-state values only.
- **Mobile layout:** the captured surface is desktop-only at 1440px. The asymmetric 50/50 hero split likely stacks into a vertical pattern at narrower viewports, but the breakpoint values are not exposed in the marketing CSS.
- **Product surfaces:** this DESIGN.md captures the marketing site only. The Dust assistant UI (`app.dust.tt`) carries a separate token set for the conversation canvas, agent-builder workspace, and citation styling that is not represented here.
- **Tailwind chart variables:** the CSS declares `--chart-1` through `--chart-5` HSL values for product-UI charts, but these never render on the captured marketing page and are not included as primary tokens.