Kentcdodds
Split Studio
Loading
Wesbos
Warm, textured paper with clean, geometric type—a softly structured, approachable clarity.
Click any value to copy. Roles are suggestions, not gospel.
- #f1bd0doklch(82.2% 0.166 88)Dominant
- #81610coklch(51.2% 0.101 85)Surface
- #f1e0cboklch(91.5% 0.034 73)Ink
- #a39d8doklch(69.7% 0.024 90)Accent
- #ded3cboklch(87.3% 0.016 59)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h2 | radnika | 40px | 400 | 1.5 | 0 | Aa Bb Cc |
| h3 | radnika | 23px | 400 | 1.5 | 0 | Aa Bb Cc |
| body | HCo Operator Mono | 20px | 400 | 1.15 | 0 | Aa Bb Cc |
:root {
--color-dominant: #f1bd0d;
--color-surface: #81610c;
--color-ink: #f1e0cb;
--color-accent: #a39d8d;
--color-detail: #ded3cb;
}
/* CSS variables exposed by source */
:root {
--borderSize: calc(20px / 2);
--size: 20px;
--light: #ffffff;
--blackGrit: url(/assets/blackgrit-DRAnU1qK.webp);
--yellow: #ffc600;
--baseFont: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
--darkBlue: #00112f;
--black: #000000;
--radnika: "radnika", fallback, Inter, Helvetica, Arial, sans-serif;
--blue: #193549;
--operator-mono: "HCo Operator Mono";
--white: #ffffff;
--lightGray: #d8d8d8;
--whiteGrit: url(/assets/whitegrit-D_d8Ws2A.png);
--imGoingToFaint: #fbfbfb;
--dark: #000000;
--lightGrey: #d8d8d8;
--maxWidth: 1200px;
}Drop-in prompt
Build a landing page in the visual style of Wesbos.
Reference design system (extracted from the live site):
- Palette: #f1bd0d, #81610c, #f1e0cb, #a39d8d, #ded3cb
- Typefaces: radnika, HCo Operator Mono
- Macrostructure: Split Studio
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/wesbos-com
