Archdaily
Ecosystem Index
Warm, muted desert hues, clean sans-serif, spacious and quietly contemplative.




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 | ui-sans-serif | 18px | 400 | 1.6 | 0 | Aa Bb Cc |
| h2 | ui-sans-serif | 18px | 600 | 1.33 | 0 | Aa Bb Cc |
| body | ui-sans-serif | 15px | 400 | 1.6 | 0 | Aa Bb Cc |
| button | ui-sans-serif | 15px | 400 | 1.6 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #d49a52;
--color-surface: #94600c;
--color-ink: #f4fcf2;
--color-accent: #9b784e;
--color-detail: #a4bcc9;
}
/* CSS variables exposed by source */
:root {
--color-border-opacity: rgba(0,0,0,.12);
--text-s-font-size: 13px;
--color-gray-800: #555;
--text-m-font-size: 14px;
--color-blue-dark: #006aff;
--text-m-line-height: 1.42857;
--text-xs-line-height: 1.33333;
--color-backdrop-bg: rgba(0,0,0,.4);
--color-pink-dark: #e04c4c;
--text-s-line-height: 1.53846;
--color-facebook: #1877f2;
--color-red-dark: #df4927;
--color-white: white;
--color-green-dark: #37a866;
--color-gray-400: #d1d1d1;
--color-gray-700: #767676;
--color-gray-600: #aaa;
--color-xitter: black;
--color-pinterest: #e60023;
--color-gray-100: #f5f5f5;
--spacing-unit: 4px;
--color-gray-200: #eee;
--color-red: #e25c3d;
--color-black: #111;
--color-green: #3cb46e;
--color-blue: #007fff;
--text-xs-font-size: 12px;
--color-pink: #f15151;
--heading-xxl-font-size: 72px;
--heading-xl-line-height: 1.08333;
--root-stacking-context-drawers: 5;
--heading-xxs-font-size: 18px;
--heading-xxs-font-weight: 600;
--root-stacking-context-brief-topnav: 1;
--sidebar-width: 64px;
--heading-xs-font-size: 20px;
--root-stacking-context-sub-nav-sticky: 2;
--heading-l-font-weight: 700;
--heading-m-font-weight: 700;
--heading-xs-font-weight: 600;
--heading-xl-font-size: 48px;
--placeholder-background-color: #f4f4f4;
--heading-m-line-height: 1.28571;
--heading-m-font-size: 28px;
--root-stacking-context-mobile-sidebar: 4;
--heading-xxl-line-height: 1.05556;
--heading-xs-line-height: 1.4;
--link-transition: color .1s/**/ease-in-out,opacity .1s/**/ease-in-out;
--heading-l-line-height: 1.2;
--heading-s-font-size: 24px;
--nav-block-padding: 12px;
--root-stacking-context-main-topnav: 3;
--gradient-alpha: 0.5;
--nav-height: 64px;
--button-border-radius: 8px;
--heading-l-font-size: 40px;
--transition-speed-base: .1s;
--nav-inline-padding: 24px;
--heading-s-line-height: 1.33333;
--heading-xxl-font-weight: 700;
}Drop-in prompt
Build a landing page in the visual style of Unsplash.
Reference design system (extracted from the live site):
- Palette: #d49a52, #94600c, #f4fcf2, #9b784e, #a4bcc9
- Typefaces: ui-sans-serif
- 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/unsplash-com