Archdaily
Ecosystem Index
Loading
Theatlantic
Cool, stark geometry—crisp sans-serifs on a muted, subtly-shaded grey expanse.
Click any value to copy. Roles are suggestions, not gospel.
- #dd412foklch(60.1% 0.196 30)Dominant
- #227894oklch(53.6% 0.089 224)Surface
- #f0d3c3oklch(88.7% 0.039 51)Ink
- #7d7066oklch(55.4% 0.022 60)Accent
- #c0d4b1oklch(84.6% 0.052 132)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | Graphik | 24px | 700 | 1.15 | 0 | Aa Bb Cc |
| h3 | AGaramondPro | 38px | 400 | 1.16 | 0 | Aa Bb Cc |
| body | Times | 16px | 400 | 1.15 | 0 | Aa Bb Cc |
| caption | Graphik | 13px | 400 | 1.25 | 0.25px | Aa Bb Cc |
| button | Graphik | 14px | 400 | 1.15 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #dd412f;
--color-surface: #227894;
--color-ink: #f0d3c3;
--color-accent: #7d7066;
--color-detail: #c0d4b1;
}
/* CSS variables exposed by source */
:root {
--article-sharekit-background: #f7f7f7;
--reach-accordion: 1;
--nav-border-color-light: #c1c1c1;
--nav-border-color-dark: #9b9b9b;
--nav-expanded-background: #f7f7f7;
--article-injector-ad-background: #f7f7f7;
--article-image-loading-placeholder-color: #c0ccda;
--nav-expanded-background-accent: #fff;
--paywall-background: #fff;
--nav-collapsed-background: #fff;
--sa-uid: '0-6fc02185-88bd-524d-60b4-9cc843565ffd';
}Drop-in prompt
Build a landing page in the visual style of Theatlantic.
Reference design system (extracted from the live site):
- Palette: #dd412f, #227894, #f0d3c3, #7d7066, #c0d4b1
- Typefaces: Graphik, Times
- 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/theatlantic-com
