A dense, utilitarian indie-game marketplace on a warm light-grey #f4f4f4 canvas: the entire site is one humanist sans (Lato) with hierarchy from weight (400 body, 700 headings, 900 uppercase section heads) rather than scale — the largest text is only 32px. A single bright red is the whole brand: #da2c49 for the logo and #ff2449 for every link, hashtag tag, price and the 0px-radius primary button, while blue #34a0f2 is functional only (discount badges and the 3px focus ring). Controls are near-square (3px dominant radius, nothing past 4px, no pills), outline buttons carry a 2px #dadada border, and structure is thin borders and faint shadows (rgba(0,0,0,.15) 0 0 2px) over fade-only opacity 0.2s motion with no animation library. Reads as an indie bazaar — content-dense and unpretentious, colour rationed to the game artwork and the one red accent.
Browse itch.io in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: itch.io (live DOM, computed styles), 2026-07-31. Coverage: logged-out homepage (browse/featured grid). The main stylesheet is served from static.itch.io (cross-origin, sheetsBlocked:1), so §4 hover/active rules, §7 @keyframes and §10 breakpoints were unreadable from the DOM and are marked not captured with that reason. Transitions, the focus ring, shadows, borders and the full palette all came through from computed styles. Reality check: the queue hint ("brutalist indie, dense customisable theme") is half right. The chrome IS unusually dense and utilitarian, but it is neither brutalist nor colourful — it is a calm light-grey catalogue set entirely in one humanist sans (Lato) with a single bright red brand accent. The "customisable theme" is a real itch.io feature but it lives on the *creator's game pages* (each is themeable), not on this marketplace chrome, which is fixed.
itch.io reads like a well-run indie bazaar: a warm light-grey canvas packed edge-to-edge with game cards, a persistent left rail of tag lists, and a bright crimson brand mark doing almost all of the colouring. Nothing is decorative — every pixel is a link to a game, a price, or a tag. Depth is refused (subtle 1–2px shadows, thin hairlines), motion is limited to quick opacity fades, and the type is a single friendly grotesque held at heavy weights for structure. The result is high information density that still feels approachable rather than brutalist, because the letterforms are round and the accent is playful. It deliberately avoids hero imagery, gradients-as-decoration, and any second typeface. Feels: dense, utilitarian, indie, unpretentious.
| Token | Hex | Role / usage |
|---|---|---|
| ink | #222222 | primary text (620×) |
| ink-heavy | #434343 | uppercase section heads |
| muted | #858585 | secondary text / meta |
| faint | #606060 | tertiary meta |
| disabled-grey | #cccccc | faint labels |
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #f4f4f4 | page background (warm light grey) |
| surface | #ffffff | cards, nav, inputs |
| card-scrim | rgba(30,30,30,.9) | dark overlay on game-banner cards |
| scrim | rgba(0,0,0,.5) | image darkening layer |
| inset | rgba(35,35,35,.1) | soft insets / hover wells |
| Token | Hex | Role / usage |
|---|---|---|
| border-ctrl | #dadada | 2px control borders (Log in / Register) |
| border-frame | #ffffff | 2px white frame around dark game thumbnails |
| red-hairline | rgba(255,36,73,.4) | 1px red-tinted separators |
| Token | Hex | Role / usage |
|---|---|---|
| brand-red | #da2c49 | logo wordmark + brand mark |
| action-red | #ff2449 | links, tag hashtags, primary CTA fill, prices |
| info-blue | #34a0f2 | sale/discount badges and the focus ring |
| banner-slate | #495867 | featured-banner gradient anchor |
| banner-purple | #8866ae | YouTube/banner gradient wash |
Rules: red is the only brand colour — it owns the logo, every link, hashtag tags, prices and the primary button; never introduce a second decorative hue. Blue #34a0f2 is functional only (discount badges + focus), never a brand fill.
One family for the entire site: Lato (1231×; the real webfont, open on Google Fonts) plus icomoon for glyph icons. No serif, no mono anywhere. Hierarchy comes from weight (400 → 700 → 900) and case, not from a second face or large display sizes — the biggest text on the page is only 32px.
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Display / logo h1 | 32px / normal | 700 | normal |
| Section head h2 | 15px / normal | 900 | normal, UPPERCASE |
| Nav / button | 16px / normal | 700 | normal |
| Control (Log in) | 14px / normal | 700 | normal |
| Body / meta | 13–14px / normal | 400 | normal |
| Badge / eyebrow | 12px / normal | 700 | +0.6px, UPPERCASE |
Note: line-height computes to normal throughout (no explicit leading tokens). Emphasis is weight-driven; section heads jump to weight 900 uppercase.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.