Peakdesign
Feature Stack
Loading
Itch
Deep charcoal clarity—geometric sans-serifs on a stark, binary canvas.
Click any value to copy. Roles are suggestions, not gospel.
- #df381eoklch(59.5% 0.207 32)Dominant
- #3b2c18oklch(30.5% 0.039 73)Surface
- #eeb334oklch(80.1% 0.150 82)Ink
- #947d7aoklch(61.0% 0.029 27)Accent
- #d2c69doklch(82.6% 0.056 94)Detail
Read off the live site. Treat it as reference, not a recipe.
| Role | Family | Size | Weight | Leading | Tracking | Sample |
|---|---|---|---|---|---|---|
| h1 | Lato | 32px | 700 | 1.4 | 0 | Aa Bb Cc |
| h2 | Lato | 15px | 900 | 1.4 | 0 | Aa Bb Cc |
| body | Lato | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
| button | Lato | 13px | 400 | 1.4 | 0 | Aa Bb Cc |
Max content width 500px
:root {
--color-dominant: #df381e;
--color-surface: #3b2c18;
--color-ink: #eeb334;
--color-accent: #947d7a;
--color-detail: #d2c69d;
}
/* CSS variables exposed by source */
:root {
--itchio_body_color_light: #606060;
--itchio_border_color: #dadada;
--itchio_input_focus_color: #361275;
--itchio_bg_color: #fff;
--itchio_body_color_lighter: #858585;
--itchio_warning_bg: #fffdbd;
--itchio_brand_color: #40434E;
--itchio_edge_border_color: #cdcdcd;
--itchio_body_color_gray: #767676;
--itchio_gutter_width: 40px;
--itchio_white_back: #fff;
--itchio_input_border_color: #cdcdcd;
--itchio_body_color: #222;
--itchio_light_highlight: #FFF0F0;
--itchio_gray_back: #F4F4F4;
--itchio_body_color_med: #434343;
--itchio_target_bg: #D7FCAF;
}Drop-in prompt
Build a landing page in the visual style of Itch.
Reference design system (extracted from the live site):
- Palette: #df381e, #3b2c18, #eeb334, #947d7a, #d2c69d
- Typefaces: Lato
- Macrostructure: Feature Stack
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/itch-io--updates-a-new-itchio-logo
