Dust Design System

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

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.