# itch.io — Marketing site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

| 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.

## 3. Typography Rules

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.

## 4. Component Stylings

Buttons (near-square, low radius):

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Primary CTA | #ff2449 fill / #fff text, 0px radius, ~36–50px, Lato 16/700 | not captured¹ | blue ring (below) | not captured¹ | not captured¹ |
| Outline (Log in / Register) | transparent / #222 text, 2px #dadada border, 3px radius, 30px, 14/700 | not captured¹ | blue ring | not captured¹ | not captured¹ |
| Nav link | transparent / #222 text, 4px transparent bottom-border, 16/700 | not captured¹ | — | — | — |
| Tag chip | transparent / #ff2449 text, 4px radius, ~27px, 14/400 | not captured¹ | — | — | — |

¹ Hover/active declarations live in the cross-origin static.itch.io stylesheet
and were unreadable. The captured house transition is `opacity 0.2s ease-in-out`
(links and cards fade), so hovers are opacity/underline shifts, not colour swaps.

Focus ring (captured from computed styles): **`rgb(52,160,242) 0 0 0 3px`** — a
3px solid blue #34a0f2 outer glow, zero offset. This is a real, on-brand focus
indicator (no anti-pattern).

Inputs: search field 30px tall, transparent/white bg, near-0 radius, 14px,
placeholder #222; padding `4px 0 4px 10px`.

Game card: white surface, thumbnail framed by a 2px #ffffff border on dark
banners, title in Lato 700, red hashtag tags beneath, 13px grey description, a
small price/FREE/WEB badge top-right and an optional blue "% OFF" badge.

Nav: fixed white bar — logo, primary links (Browse Games, Game Jams, Upload
Game, Developer Logs, Community), a full-width search field, then Log in +
Register outline buttons.

## 5. Layout Principles

Two-column shell: a ~200px left rail (Popular Tags, Browse, Games by Price,
social + blog) beside a wide fluid content column. The featured area is a single
full-width banner card; below it, "Latest Featured Games" is a 5-up responsive
grid of dense cards. Base spacing is tight (small 8–15px gaps); the page favours
fitting the maximum number of games above the fold over whitespace. Content
column runs edge-to-edge rather than to a narrow max-width.

## 6. Depth & Elevation

Radius scale is small and near-square: **3px dominant (138×)**, 2px (35×),
4px (28×); one `0 3px 3px 0` and 1px one-offs. Nothing is a pill.

Shadows (all subtle):

- `rgba(0,0,0,.15) 0 0 2px` — the workhorse card shadow (61×)
- `rgba(0,0,0,.15) 0 1px 4px` — slightly raised
- `rgba(255,255,255,.2) 0 0 0 1px` — white ring on dark game banners
- `rgba(255,255,255,.21) 0 0 1px inset` — inner rim on dark cards
- `rgb(52,160,242) 0 0 0 3px` — the blue focus ring

Borders do most of the structural work: 2px #ffffff frames, 2px #dadada
controls, 1px rgba(255,36,73,.4) red-tinted hairlines. Border-vs-shadow
philosophy: thin borders + faint shadows, never heavy elevation.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| opacity | 0.2s | ease-in-out | links, cards (house transition, 154×) |
| opacity | 0.2s | ease | secondary elements (72×) |
| all | 0.2s | ease | small controls (4×) |
| box-shadow | 0.1s | ease | focusable controls |

House transition: **`opacity 0.2s ease-in-out`**. No animation library detected
(no GSAP/Framer/Lenis/Rive/Lottie). @keyframes could not be read (they live in
the cross-origin stylesheet) — none were observed running at rest. `honours
reduced-motion`: not detected in the readable sheets. Nothing large moves; this
is a near-static, fade-only surface.

## 8. Backgrounds, Effects & WebGL

Flat solid surfaces plus a few functional gradient scrims over game banners:
`linear-gradient(to right, #495867, rgba(73,88,103,.8) 60%, rgba(162,135,192,.4))`
over the desktop-app banner image, and `linear-gradient(to right, #8866ae,
rgba(0,0,0,.6))` over the YouTube thumbnail. 2 raster background layers, no
grain, **no canvas/WebGL, no video, no backdrop-filter**. Atmosphere is the game
artwork itself, not CSS effects.

## 9. Do's and Don'ts

### Do
- Set everything in **Lato**; drive hierarchy with weight (400/700/900) and case.
- Reserve red (#ff2449 action / #da2c49 brand) for links, tags, prices and the
  primary CTA — the single accent.
- Keep radii tiny (3px) and controls near-square; use thin borders over shadows.
- Use the blue **#34a0f2** only for discount badges and the 3px focus ring.
- Pack content densely; prefer more cards over more whitespace.

### Don't
- Don't add a second typeface, a serif, or a mono.
- Don't use pills or large radii — nothing here rounds past 4px.
- Don't turn blue into a brand/link colour; red owns links.
- Don't introduce gradients as decoration — gradients only darken artwork.
- Don't reach for heavy shadows or hero imagery.

## 10. Responsive Behavior

| Breakpoint | What changes |
|---|---|
| not captured¹ | left rail collapses, grid reflows to fewer columns |

¹ The @media rules live in the cross-origin static.itch.io stylesheet and were
unreadable (sheetsBlocked:1). By observation the layout is fluid: the featured
grid steps from 5-up down to fewer columns and the tag rail collapses behind a
menu on narrow viewports. `darkSchemeBlocks: 0`, no dark toggle, 0 container
queries in the readable sheets — itch.io ships no dark theme for its chrome
(individual game pages are separately themeable by creators).

## 11. Agent Prompt Guide

- Canvas `#f4f4f4` · Text `#222222` · Muted `#858585` · Border `#dadada` · Accent `#ff2449`
- Font: Lato (400/700/900) · Body: 13–14px · Radius: 3px control / 3px card · Control height: 30–36px
- Focus: `0 0 0 3px #34a0f2` · Hover: opacity 0.2s fade (no colour swap captured)

<itch-io_design_language>
itch.io marketing is a dense, utilitarian indie-game marketplace on a warm
light-grey canvas (#f4f4f4) with white cards (#ffffff) and dark ink (#222222).
The entire site is one humanist sans, Lato, with hierarchy from weight
(400 body, 700 headings/buttons, 900 uppercase section heads) and case, not from
scale — the largest text is only 32px. A single bright red is the whole brand:
#da2c49 for the logo, #ff2449 for every link, hashtag tag, price and the primary
button (fill #ff2449, white text, 0px radius). Blue #34a0f2 is functional only —
discount badges and the 3px focus ring (`0 0 0 3px #34a0f2`). Controls are near
square (3px dominant radius, nothing past 4px, no pills), outline buttons carry a
2px #dadada border at 3px radius/30px, and structure is thin borders (2px #ffffff
card frames, red-tinted hairlines) over faint shadows (`rgba(0,0,0,.15) 0 0 2px`).
Spacing is tight and content-dense; motion is only `opacity 0.2s ease-in-out`
fades with no animation library. Feels: dense, indie, unpretentious, catalogue.
Avoid: a second typeface, serifs, pills or large radii, decorative gradients,
heavy shadows, hero imagery, or turning blue into a link/brand colour.
</itch-io_design_language>