Archdaily
Ecosystem Index
Cool, data-driven clarity: crisp sans-serif, muted teal and warm terracotta, spacious grid.




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 |
|---|---|---|---|---|---|---|
| h1 | Mona Sans | 52px | 600 | 1.2 | 0 | Aa Bb Cc |
| body | Mona Sans | 16px | 400 | 1.75 | 0 | Aa Bb Cc |
| button | Arial | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
:root {
--color-dominant: #d79d27;
--color-surface: #7e6423;
--color-ink: #d65e70;
--color-accent: #716cb7;
--color-detail: #bcc3ab;
}
/* CSS variables exposed by source */
:root {
--sl-input-placeholder-color-disabled: hsl(240 5.2% 33.9%);
--iti-icon-color: #555;
--sl-line-height-dense: 1.4;
--sl-color-yellow-200: hsl(52.8 98.3% 76.9%);
--iti-path-flags-1x: url(/assets/vite/assets/flags-ed164ab3.webp);
--sl-color-gray-200: hsl(240 5.9% 90%);
--sl-color-emerald-900: hsl(164.2 85.7% 16.5%);
--sl-color-teal-950: hsl(176.5 58.6% 11.4%);
--sl-color-emerald-800: hsl(163.1 88.1% 19.8%);
--sl-color-yellow-400: hsl(47.9 95.8% 53.1%);
--sl-panel-border-width: 1px;
--aa-base-z-index: 9999;
--sl-color-yellow-700: hsl(35.5 91.7% 32.9%);
--sl-tooltip-line-height: 1.4;
--sl-color-neutral-500: hsl(240 3.8% 46.1%);
--sl-color-amber-700: hsl(26 90.5% 37.1%);
--iti-flag-count: 244;
--zi-playbook-notice: calc(calc(9996 + 1) - 1);
--sl-color-fuchsia-800: hsl(295.4 70.2% 32.9%);
--sl-color-amber-600: hsl(32.1 94.6% 43.7%);
--sl-color-pink-950: hsl(336.2 65.4% 15.9%);
--sl-input-placeholder-color: hsl(240 3.8% 46.1%);
--sl-color-danger-200: hsl(0 96.3% 89.4%);
--sl-spacing-3x-small: .125rem;
--sl-input-height-small: 1.875rem;
--aa-panel-border-color-alpha: .3;
--sl-line-height-loose: 2.2;
--sl-color-orange-500: hsl(24.6 95% 53.1%);
--iti-arrow-padding: 7px;
--sl-input-focus-ring-offset: 0;
--sl-tooltip-arrow-size: 6px;
--sl-input-spacing-medium: 1rem;
--sl-transition-fast: .15s;
--sl-color-amber-100: hsl(48 96.5% 88.8%);
--sl-color-green-50: hsl(138.5 76.5% 96.7%);
--sl-color-sky-800: hsl(201 90% 27.5%);
--sl-color-blue-500: hsl(217.2 91.2% 59.8%);
--site-nav-search-height: 56px;
--sl-color-emerald-100: hsl(149.3 80.4% 90%);
--aa-scrollbar-width: 13px;
--sl-input-border-width: 1px;
--sl-color-success-800: hsl(142.8 64.2% 24.1%);
--aa-input-icon-size: 20px;
--btn-text-color-hover: #fff;
--sl-input-filled-background-color-hover: hsl(240 4.8% 95.9%);
--sl-font-serif: Georgia, "Times New Roman", serif;
--zi-filter: 1000;
--sl-spacing-x-small: .5rem;
--sl-input-help-text-font-size-large: 1rem;
--sl-z-index-toast: 950;
--sl-color-rose-300: hsl(352.6 95.7% 81.8%);
--sl-letter-spacing-looser: .15em;
--sl-color-lime-50: hsl(78.3 92% 95.1%);
--sl-overlay-background-color: hsl(240 3.8% 46.1% / 33%);
--aa-selected-color-rgb: 179, 173, 214;
--sl-transition-slow: .5s;
--aa-overlay-color-alpha: .4;
--sl-color-amber-200: hsl(48 96.6% 76.7%);
--sl-input-color-hover: hsl(240 5.3% 26.1%);
--sl-shadow-x-small: 0 1px 2px hsl(240 3.8% 46.1% / 6%);
}Drop-in prompt
Build a landing page in the visual style of Dribbble.
Reference design system (extracted from the live site):
- Palette: #d79d27, #7e6423, #d65e70, #716cb7, #bcc3ab
- Typefaces: Mona Sans, Arial
- 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/dribbble-com--search-card