What is Dust's primary brand color?

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.

What typeface does Dust use, and what should I use as a substitute?

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.

Why does Dust use a pastel illustration in the hero instead of a product screenshot?

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.

What is Dust's corner-radius philosophy?

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.

Can I use this DESIGN.md to build my own enterprise AI marketing site?

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.

Dust Design System

Dust's marketing site is anchored on a 69px Geist display headline in near-black with a saturated sky-blue CTA pill.

About Dust DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source dust.tt

AI & LLM Platforms
Productivity & SaaS

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.

What makes it distinct

Pre-header brand stripa 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 pairthe 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 illustrationthe 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 trackingdisplay 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 cardsthe radius scale runs 16/20/24px on cards with a 9999px fully-rounded CTA; no 4-6px tight corners exist

Live at dust.tt

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

dust.tt

Explore Dust

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Dust design system FAQ

Common questions about Dust's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Dust — official site

Dust's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.