Jens Bosman
Marquee Hero
Loading
Clay Boan — Multidisciplinary Designer
Deep charcoal expanse, stark black edges, bold gothic script—a sculpted, weighty presence.
Click any value to copy. Roles are suggestions, not gospel.
- #7e7e80oklch(59.4% 0.003 286)Dominant
- #bcbcbdoklch(79.6% 0.001 286)Surface
- #414142oklch(37.6% 0.002 286)Ink
- #84848coklch(61.6% 0.012 286)Accent
- #bbbbbcoklch(79.2% 0.001 286)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Aeonik Pro | 25px | 500 | 1.4 | 0 | Aa Bb Cc |
| h2 | Aeonik Pro | 13px | 500 | 1.4 | 0 | Aa Bb Cc |
| body | Aeonik Pro | 13px | 500 | 1.4 | 0 | Aa Bb Cc |
| button | Aeonik Pro | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 1440px
:root {
--color-dominant: #7e7e80;
--color-surface: #bcbcbd;
--color-ink: #414142;
--color-accent: #84848c;
--color-detail: #bbbbbc;
}
/* CSS variables exposed by source */
:root {
--color-white: #fff;
--font-f-emeritus-display: "Emeritus Display";
--color-tundora: #424242;
--color-placeholder: #f5f5f7;
--color-jumbo: #86868b;
--color-black: #0e0e0e;
--font-f-aeonik-pro: "Aeonik Pro";
--ease-in-out-quad: cubic-bezier(.455,.03,.515,.955);
--vh: 9px;
--ease-out-cubic: cubic-bezier(.215,.61,.355,1);
--ease-in-out-cubic: cubic-bezier(.645,.045,.355,1);
--ease-out-quad: cubic-bezier(.25,.46,.45,.94);
--ease-none: cubic-bezier(.25,.25,.75,.75);
--ease-out-quart: cubic-bezier(.165,.84,.44,1);
--ease-in-out-quart: cubic-bezier(.77,0,.175,1);
}Drop-in prompt
Build a landing page in the visual style of Clay Boan — Multidisciplinary Designer.
Reference design system (extracted from the live site):
- Palette: #7e7e80, #bcbcbd, #414142, #84848c, #bbbbbc
- Typefaces: Aeonik Pro
- Macrostructure: Marquee Hero
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/clayboan-com
