№ dust-tt--home-about

Dust Tt

Cool, clinical blue geometry; precise sans-serifs on vast, airy white space.

Ecosystem Indexminimalism brutalism swiss ai saaslight

The layout prioritizes clarity and functionality, using a grid system to present information in distinct, modular sections. The color palette is restrained, relying on muted tones and stark contrasts to emphasize the technical nature of the product. · ai collaboration, developer tools, saas landing page, technical design, modular layout, minimalist ui, dark theme, workflow tools

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

Click any value to copy. Roles are suggestions, not gospel.

Reads as: muted · monochrome · cool

SwatchHexOKLCHSuggested roleCopy

Hex#3a85f4
OKLCHoklch(62.8% 0.182 258)
RoleDominant
find sites →
Hex#0c84bc
OKLCHoklch(58.2% 0.126 238)
RoleSurface
find sites →
Hex#6cbcfc
OKLCHoklch(77.0% 0.121 244)
RoleInk
find sites →
Hex#668e80
OKLCHoklch(61.3% 0.049 171)
RoleAccent
find sites →
Hex#c6a699
OKLCHoklch(75.0% 0.042 43)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	Geist	69px	550	0.9	-2.7648px	Aa Bb Cc
h2	Geist	24px	550	1.25	-0.48px	Aa Bb Cc
h3	Geist	24px	550	1.25	-0.24px	Aa Bb Cc
body	Geist	16px	400	1.5	0	Aa Bb Cc
caption	Geist	14px	450	1.43	-0.28px	Aa Bb Cc
button	Geist	16px	450	1.5	-0.32px	Aa Bb Cc

Spacing scale

4px

16px

24px

28px

40px

48px

64px

80px

96px

128px

136px

Radius scale

0px

12px

15px

16px

18px

24px

50px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #3a85f4;
  --color-surface: #0c84bc;
  --color-ink: #6cbcfc;
  --color-accent: #668e80;
  --color-detail: #c6a699;
}

/* CSS variables exposed by source */
:root {
  --color-golden-500: oklch(80.18% .169 72.86);
  --color-purple-200: oklch(90.2% .063 306.703);
  --color-info-50: oklch(98.22% .0343 98.05);
  --color-rose-200: oklch(87.89% .0769 349.14);
  --color-slate-200: oklch(92.9% .013 255.508);
  --color-pink-500: oklch(65.11% .2041 1.46);
  --color-violet-600: oklch(54.1% .281 293.009);
  --color-app-background: oklch(98.56% .0017 67.8);
  --color-orange-600: oklch(64.6% .222 41.116);
  --color-orange-800: oklch(47% .157 37.304);
  --color-red-900: oklch(30.82% .0982 33.18);
  --color-pink-950: oklch(23.12% .0807 2.27);
  --color-blue-700: oklch(53.19% .1614 253.34);
  --color-slate-500: oklch(55.4% .046 257.417);
  --color-orange-900: oklch(40.8% .123 38.172);
  --spacing-sidebar-side-spacing: .75rem;
  --color-separator: oklch(97% .001 106.424);
  --color-primary-400: oklch(70.9% .01 62.526);
  --color-orange-50: oklch(98% .016 73.684);
  --color-highlight-on: oklch(96.81% .0183 232.5);
  --color-info-950: oklch(23.95% .0536 47.83);
  --radius-4xl: 2rem;
  --color-blue-300: oklch(79.91% .111 242.35);
  --text-6xl--letter-spacing: -3.36px;
  --color-golden-600: oklch(77.64% .1686 65.1);
  --color-success-950: oklch(17.26% .0316 155.98);
  --color-gray-300: oklch(77.52% .0109 261.78);
  --color-stone-25: oklch(99.4% .001 106.424);
  --color-primary-300: oklch(86.9% .004 56.366);
  --color-yellow-400: oklch(85.2% .199 91.936);
  --font-mono: "Geist Mono",monospace;
  --color-primary-800: oklch(25.6% .006 34.298);
  --color-slate-300: oklch(86.9% .022 252.894);
  --color-overlay-background: oklch(100% 0 0);
  --color-primary-500: oklch(55.4% .014 59.397);
  --color-gray-500: oklch(60.22% .0195 264.42);
  --color-info-700: oklch(67.85% .1628 54.48);
  --text-base--line-height: 24px;
  --color-stone-650: oklch(40.4% .01 73.615);
  --color-brand-electric-blue: oklch(65.39% .1893 252.74);
  --color-green-500: oklch(66.8% .1093 143.52);
  --text-2xl--letter-spacing: -.96px;
  --color-primary-700: oklch(37.4% .01 73.594);
  --color-panel-background: oklch(100% 0 0);
  --text-9xl--line-height: 84px;
  --color-white: #fff;
  --color-gray-400: oklch(69.07% .0149 258.36);
  --color-blue-400: oklch(72.15% .1521 248.14);
  --color-slate-400: oklch(70.4% .04 256.788);
  --color-pink-50: oklch(97.08% .0169 349.48);
  --color-stone-900: oklch(20.6% .005 67.543);
  --radius-sm: .25rem;
  --color-yellow-300: oklch(90.5% .182 98.111);
  --font-weight-bold: 700;
  --color-brand-sunshine-golden: oklch(91.33% .1487 96.54);
  --color-brand-support-gray: oklch(97.61% 0 0);
  --color-brand-pink-rose: oklch(80.93% .0841 31.78);
  --color-gray-100: oklch(94.94% .0013 286.37);
  --color-emerald-200: oklch(92.46% .1174 162.55);
  --color-golden-700: oklch(67.85% .1628 54.48);
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Dust Tt.
Reference design system (extracted from the live site):
- Palette: #3a85f4, #0c84bc, #6cbcfc, #668e80, #c6a699
- Typefaces: Geist
- Macrostructure: Ecosystem Index
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/dust-tt--home-about

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Geist

69px

550

0.9

-2.7648px

Aa Bb Cc

Geist

24px

550

1.25

-0.48px

Aa Bb Cc

Geist

24px

550

1.25

-0.24px

Aa Bb Cc

body

Geist

16px

400

1.5

Aa Bb Cc

caption

Geist

14px

450

1.43

-0.28px

Aa Bb Cc

button

Geist

16px

450

1.5

-0.32px

Aa Bb Cc

:root { --color-dominant: #3a85f4; --color-surface: #0c84bc; --color-ink: #6cbcfc; --color-accent: #668e80; --color-detail: #c6a699; } /* CSS variables exposed by source */ :root { --color-golden-500: oklch(80.18% .169 72.86); --color-purple-200: oklch(90.2% .063 306.703); --color-info-50: oklch(98.22% .0343 98.05); --color-rose-200: oklch(87.89% .0769 349.14); --color-slate-200: oklch(92.9% .013 255.508); --color-pink-500: oklch(65.11% .2041 1.46); --color-violet-600: oklch(54.1% .281 293.009); --color-app-background: oklch(98.56% .0017 67.8); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-800: oklch(47% .157 37.304); --color-red-900: oklch(30.82% .0982 33.18); --color-pink-950: oklch(23.12% .0807 2.27); --color-blue-700: oklch(53.19% .1614 253.34); --color-slate-500: oklch(55.4% .046 257.417); --color-orange-900: oklch(40.8% .123 38.172); --spacing-sidebar-side-spacing: .75rem; --color-separator: oklch(97% .001 106.424); --color-primary-400: oklch(70.9% .01 62.526); --color-orange-50: oklch(98% .016 73.684); --color-highlight-on: oklch(96.81% .0183 232.5); --color-info-950: oklch(23.95% .0536 47.83); --radius-4xl: 2rem; --color-blue-300: oklch(79.91% .111 242.35); --text-6xl--letter-spacing: -3.36px; --color-golden-600: oklch(77.64% .1686 65.1); --color-success-950: oklch(17.26% .0316 155.98); --color-gray-300: oklch(77.52% .0109 261.78); --color-stone-25: oklch(99.4% .001 106.424); --color-primary-300: oklch(86.9% .004 56.366); --color-yellow-400: oklch(85.2% .199 91.936); --font-mono: "Geist Mono",monospace; --color-primary-800: oklch(25.6% .006 34.298); --color-slate-300: oklch(86.9% .022 252.894); --color-overlay-background: oklch(100% 0 0); --color-primary-500: oklch(55.4% .014 59.397); --color-gray-500: oklch(60.22% .0195 264.42); --color-info-700: oklch(67.85% .1628 54.48); --text-base--line-height: 24px; --color-stone-650: oklch(40.4% .01 73.615); --color-brand-electric-blue: oklch(65.39% .1893 252.74); --color-green-500: oklch(66.8% .1093 143.52); --text-2xl--letter-spacing: -.96px; --color-primary-700: oklch(37.4% .01 73.594); --color-panel-background: oklch(100% 0 0); --text-9xl--line-height: 84px; --color-white: #fff; --color-gray-400: oklch(69.07% .0149 258.36); --color-blue-400: oklch(72.15% .1521 248.14); --color-slate-400: oklch(70.4% .04 256.788); --color-pink-50: oklch(97.08% .0169 349.48); --color-stone-900: oklch(20.6% .005 67.543); --radius-sm: .25rem; --color-yellow-300: oklch(90.5% .182 98.111); --font-weight-bold: 700; --color-brand-sunshine-golden: oklch(91.33% .1487 96.54); --color-brand-support-gray: oklch(97.61% 0 0); --color-brand-pink-rose: oklch(80.93% .0841 31.78); --color-gray-100: oklch(94.94% .0013 286.37); --color-emerald-200: oklch(92.46% .1174 162.55); --color-golden-700: oklch(67.85% .1628 54.48); }

Build a landing page in the visual style of Dust Tt. Reference design system (extracted from the live site): - Palette: #3a85f4, #0c84bc, #6cbcfc, #668e80, #c6a699 - Typefaces: Geist - Macrostructure: Ecosystem Index Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/dust-tt--home-about