Dust — design system & UI screens

AI · 1 screen · 11 sections · https://dust.tt/

Light landing anchored by a colorful isometric 3D collaboration render, a floating agent chat-notification card, and a 3,000+-organizations logo wall (Datadog, Clay, Cursor).

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/dust.

Decoded design system

Dust's decoded design system: background #FFFFFF, text #585B5D, accent #1C91FF, link #E9F7FF, primary #1C91FF; type scale h1 76px / h2 24px / body 18px; 4px spacing base; 0px base radius. The single interactive/action color is #1C91FF — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FFFFFF`
surface	`#F4F5F5`
border	`#E5E6E6`
text	`#585B5D`
text_muted	`#97999A`
primary	`#1C91FF`
accent	`#1C91FF`
link	`#E9F7FF`
secondary	`#596170`
button_bg	`#1C91FF`
button_text	`#E9F7FF`

Using these colors

Action color #1C91FF — the single interactive color; only on things you click or must notice, never large fills.
primary, accent, button_bg are all #1C91FF — one role, not several (the action color).
accent #1C91FF — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
link #E9F7FF — fails contrast on the background (~1.1:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
secondary #596170 — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Geist
Body: Geist
Mono: Geist Mono
h1: 76px
h2: 24px
body: 18px

Spacing

base unit: 4px
scale: 2px, 4px, 6px, 8px, 12px, 16px, 20px, 24px, 28px, 40px

Radii

base: 0px
button: 16px

Motion

Micro-interactions run at 500ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 500ms · 180ms · 300ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease
animated properties: opacity, transform, fill, color

Native design tokens

Token	Value
`--color-border-darker`	`oklch(90.65% .0029 264.54)`
`--separator-border`	`#80808059`
`--focus-border`	`#007fd4`
`--color-blue-50`	`oklch(96.81% .0183 232.5)`
`--color-blue-100`	`oklch(92.26% .0441 234.57)`
`--color-blue-200`	`oklch(86.31% .0791 235.24)`
`--color-blue-300`	`oklch(79.91% .111 242.35)`
`--color-blue-400`	`oklch(72.15% .1521 248.14)`
`--color-blue-500`	`oklch(65.39% .1893 252.74)`
`--color-blue-600`	`oklch(59.5% .1756 252.9)`

…and 110 more measured on the page.

Button states (measured)

primary hover: background oklch(0.7215 0.1521 248.14)

Layout (measured)

container max-width: 1130px
nav: 36px relative
common grid: 2 columns

Motion choreography (measured)

Load order: svg.flex-shrink-0 → span.pointer-events-none → span.pointer-events-none → div.home-trusted-track → g.human-body×22 → g.agent-body×8

Scroll reveal: 23 elements rest at opacity 0, translateY(14px), animate in over 0.5s cubic-bezier(0.215, 0.61, 0.355, 1).

Stagger: div ×5 — 80ms apart.

Stagger: article ×4 — 80ms apart.

Overlay recipe (measured)

dropdown panel: rgba(0, 0, 0, 0) · radius 0px · enter 180ms cubic-bezier(0.23, 1, 0.32, 1)

Responsive (measured)

mobile (390px): hero 40px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Dust - Multiplayer AI for Human-Agent Collaboration