Archdaily
Ecosystem Index
Cool, stark geometry; deep charcoal shadows embrace clean, assertive sans-serif clarity.




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 | Barlow | 48px | 700 | 1.13 | -0.4px | Aa Bb Cc |
| h2 | Barlow | 30px | 700 | 1.2 | -0.4px | Aa Bb Cc |
| h3 | Barlow | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | Barlow | 14px | 400 | 1.5 | 0 | Aa Bb Cc |
:root {
--color-dominant: #d93030;
--color-surface: #701414;
--color-ink: #eb9393;
--color-accent: #877474;
--color-detail: #bcbcbc;
}
/* CSS variables exposed by source */
:root {
--clr-fern: #096;
--clr-ash: #adadad;
--clr-tangerine: #e63900;
--clr-caramel: #cc7d00;
--clr-lunar: #ebebeb;
--clr-slate: #707070;
--clr-azure: #06f;
--clr-twitter-press: #338be7;
--clr-metacritic-red: red;
--clr-megaman: #2b65d9;
--clr-blackgrape: #323656;
--clr-sky: #5cb4ff;
--clr-obsidian: #111;
--clr-twitter-rest: #55acee;
--clr-sangria: #9d0000;
--clr-white: #fff;
--clr-smog: #d7d7d7;
--clr-turquoise: #00afbf;
--clr-twitter-hover: #77cdf5;
--clr-offwhite: #f4f5f7;
--clr-arctic: #d9e5fa;
--clr-charcoal: #333;
--clr-vanilla: #fcf2cf;
--clr-blush: #fadcdc;
--clr-facebook-hover: #4c8cc7;
--clr-teal: #1e6875;
--clr-mint: #e5f4ef;
--clr-latte: #ffefe5;
--clr-amazon-music-rest: #008dd1;
--clr-cement: #999;
--clr-forest: #00703d;
--clr-graphite: #666;
--clr-silver: #ccc;
--clr-lemonade: #fff9e5;
--clr-centibillion-bg: #f1f1f1;
--clr-metacritic-yellow: #fc3;
--clr-rose: #fbe9e9;
--clr-squash: #ecad00;
--clr-amazon-music-press: #0076c8;
--clr-postbox: #d92323;
--clr-fog: #e3e3e3;
--clr-jade: #00ad7a;
--clr-facebook-press: #203c7d;
--clr-sunflower: #ffc900;
--clr-platinum: #f9f9f9;
--clr-mineshaft: #222;
--clr-navy: #005399;
--clr-amazon-music-hover: #00a4da;
--clr-facebook-rest: #3664a2;
--clr-black: #000;
--clr-aero: #e9effb;
--clr-pistachio: #8fbf00;
--clr-submarine: #b6c0bf;
--clr-magenta: #c09;
--clr-anchor: #9da9a8;
--clr-carrot: #f90;
--clr-aubergine: #433377;
--clr-merigold: #fb0;
--clr-soot: #2c2c2c;
--clr-indigo: #3636d9;
}Drop-in prompt
Build a landing page in the visual style of Last Fm.
Reference design system (extracted from the live site):
- Palette: #d93030, #701414, #eb9393, #877474, #bcbcbc
- Typefaces: Barlow, a
- 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/last-fm