Moderntreasury
Map / Diagram
Playful isometric bustle, candy-coated pastels, dense hand-drawn chaos on clinical white




Click any value to copy. Roles are suggestions, not gospel.
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h3 | trueSans | 24px | 400 | 1.33 | 0 | Aa Bb Cc |
| body | trueSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
| caption | trueSans | 14px | 400 | 1.43 | 0 | Aa Bb Cc |
| button | trueSans | 16px | 400 | 1.5 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #ce7f41;
--color-surface: #91dfe6;
--color-ink: #693d1b;
--color-accent: #649aa1;
--color-detail: #a3c8d5;
}
/* CSS variables exposed by source */
:root {
--color-white: #fff;
--text-2xl: 1.5rem;
--color-cream: #fffef4;
--text-4xl: 2.25rem;
--font-true-serif: "trueSerif", "trueSerif Fallback", Times New Roman, Georgia, serif;
--text-sm--line-height: calc(1.25 / .875);
--text-3xl--line-height: calc(2.25 / 1.875);
--text-6xl: 3.75rem;
--text-3xl: 1.875rem;
--color-black: #000;
--text-2xl--line-height: calc(2 / 1.5);
--color-green: #062d12;
--text-base--line-height: calc(1.5 / 1);
--spacing: .25rem;
--font-weight-medium: 500;
--background: #fffef4;
--text-6xl--line-height: 1;
--font-weight-semibold: 600;
--text-4xl--line-height: calc(2.5 / 2.25);
--text-sm: .875rem;
--font-true-sans: "trueSans", "trueSans Fallback", Arial, Helvetica, sans-serif;
--foreground: #062d12;
--text-base: 1rem;
--leading-tight: 1.25;
--tracking-tighter: -.05em;
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
--default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
--container-2xl: 42rem;
--tw-outline-style: solid;
--default-font-family: "trueSans", "trueSans Fallback", Arial, Helvetica, sans-serif;
--default-transition-duration: .15s;
--container-6xl: 72rem;
--tw-space-y-reverse: 0;
--container-3xl: 48rem;
--container-4xl: 56rem;
--default-mono-font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--tracking-tight: -.025em;
}Drop-in prompt
Build a landing page in the visual style of Zudo.
Reference design system (extracted from the live site):
- Palette: #ce7f41, #91dfe6, #693d1b, #649aa1, #a3c8d5
- Typefaces: trueSans
- Macrostructure: Map / Diagram
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/zudo-amsterdam