itch.io Inspired Brand Book
Design Blueprint · v1.0 · inferred

The itch.io Inspired
design system.

Pink-red indie game marketplace — itch.io's DIY storefront for game-jam creators and tiny weird games.

pink-redindieDIYgamingmarketplacechaotic
#2563EB
primary
01

Foundations

Logomark

itch.io Inspired

Disk + wordmark. Always pair with at least 8px of clearspace. Use #2563EB background or invert for dark surfaces.

Voice

  • +pink-red
  • +indie
  • +DIY
  • +gaming
  • jargon-as-drama
  • hype
  • FOMO

Design principles

  • Content first. Chrome second.
  • Brand accent does the heavy lifting.
  • Generous whitespace, calm hierarchy.
  • Mono for numbers, sans for prose.

Vibe · inspired by itch.io

itch.io's bright pink-red (#FA5C5C) and slightly chaotic dark surfaces feel proudly DIY. Every page can be themed by its creator, so the brand IS the variability. Built for game jams, asset packs, and tiny indie games that wouldn't survive Steam's gates.

Comparable to: itch.io, Game Jolt, Gumroad (broader)

02

Color system

Primary scale

50
mix
100
mix
200
mix
300
mix
400 ★
#2563EB
500
mix
600
mix
700
mix
800
mix

Neutrals

White
#FFFFFF
Bg
#FFFFFF
Surface
#F7F8FA
Border
#E5E7EB
Muted
#6B7280
Ink
#0F172A

Semantic

Success
#10B981
Warning
#F59E0B
Danger
#EF4444
Info
#60A5FA

Brand accents

Primary
#2563EB
Secondary
#7C3AED
Accent
#10B981
Highlight
#F59E0B
03

Typography

Display · 64 / 0.95 / -0.03 / 800
Pink-red indie game marketplace — itch.io's DIY storefront for game-jam creators and tiny weird games.
H1 · 44 / 1.05 / -0.03 / 700
Designed for clarity.
H2 · 30 / 1.15 / -0.02 / 700
Built to ship fast.
H3 · 20 / 1.3 / -0.01 / 700
Real-time observability for every layer.
Lead · 18 / 1.55 / 400
A friendly intro paragraph that sits below a hero headline and explains the value in plain language.
Body · 15 / 1.55 / 400
Standard body copy. Most page content sits at this size. Generous line height keeps long passages readable, and the typeface reads as pink-red.
Caption · 12 / 1.4 / 500 · uppercase
Section label · metadata · table headers
Mono · 13 / 1.5 / 500
// sample

Weights

Light 300 Regular 400 Medium 500 Semibold 600 Bold 700 Extrabold 800
04

Tokens · spacing, radius, shadow

Spacing

1 · 4px
2 · 8px
3 · 12px
4 · 16px
6 · 24px
8 · 32px
12 · 48px
16 · 64px

Radius

2 · sm
6 · md
8 · lg
12 · xl
16 · 2xl
∞ · pill

Shadow

sm
card
lift
05

Components

Buttons · variants

Buttons · sizes

Buttons · with icon

Form controls

This value isn't valid.

Precision

Advanced

Anonymous metrics

Help improve the product.

Slider

200

Total iterations. Use 0 to run unlimited.

Dropdown menus

Closed (trigger)

Open

Account
Profile
Workspace · itch-io-inspired
Settings
Keyboard shortcuts ⌘K
Sign out

Badges & tags

Active Pro Done Beta Deprecated New Running Live v1.0.0 itch-io-inspired

Avatars

JR
DK
AL
MP
SL
JR
DK
AL
+4
DK

KPI cards

Active users

12,402 ▲ +12.4%

Conversion

3.8% ▲ +0.4 pp

Revenue

$48.2k ▲ +18%

vs. last period

Churn

2.1%

this month

Feature cards

Data tokens

One source of truth: colors, type, spacing, radius, shadow. Generated artifacts derive from a single JSON.

Components

Buttons, inputs, cards, tables, alerts — every recipe keyed to the brand's CSS variables.

Observability

Real-time charts, status, and KPIs. Live data layouts that survive long sessions and dense tables.

Complex card · domain object

Running #itch-io-inspired-482

Live deployment · production cluster

Started 14m ago · 7.5k / 12k steps · ETA 9m

Loss

1.04

Throughput

2,412

Memory

14.2 GB

Learning rate

5e-5

62%7,520 / 12,000

Pricing cards

Free

For tinkering and learning.

$0/ month
  • 1 project
  • Community support
  • Open-source core
Most popular

Pro

For serious work.

$49/ month
  • Up to 10 projects
  • Priority support
  • Advanced features

Enterprise

For teams at scale.

Custom
  • Unlimited everything
  • Dedicated success
  • SLA + SSO + audit

Data table

Recent activity

42
ID Name Status Metric Owner Updated
#482production-deploy Running1.04
JR
Jon R.
14m ago
#481data-pipelineDone0.87
DK
Daniel K.
2h ago
#480backfill-2026Paused1.22
AL
Alex L.
5h ago
#479notificationsFailed
MP
Maya P.
1d ago
#478scratchDraft
JR
Jon R.
2d ago
Showing 1–5 of 42

Alerts & banners

Deployment complete.

All checks passed. Live in production after 14m 28s.

Memory approaching limit.

14.2 / 16 GB used. Consider scaling up before the next batch.

Run #479 failed.

CUDA out of memory at step 312. View logs for full stack trace.

New version available.

v1.1.0 dropped today. Drop-in compatible with your current config.

Pro

Unlock unlimited projects, priority support, and the full team workspace.

Tabs

Underline

Pill (segmented)

Chip filter

Modal / dialog

Confirm deployment?

itch.io Inspired v1.0 will go live to production. Estimated 14 minutes.

$ itch-io-inspired deploy --tag v1.0 --env production

Toasts

Run started

#482 · production cluster

!

Checkpoint saved

step-7000.bin · 2.1 GB

Tooltips

Hover me Tooltip on top
With shortcut Save⌘S
Branded Recommended

Progress & loaders

Linear

Build62%
Download28%
Memory89%

Circular

62%

Processing

7,520 of 12,000

ETA 9m 22s

Skeleton

Code & terminal

main.ts TS
import itch from "itch-io-inspired"

const result = await itch.deploy({
  env: "production",
  tag: "v1.0",
  timeout: 3600,
})

// Deploy in seconds
● ~/itch-io-inspired $ zsh
$ itch-io-inspired deploy --tag v1.0
  ✓ Validated config (4.0K)
  ✓ Resolved dependencies (24)
  ⚡ Starting deployment…

  step    elapsed  status
  ────    ───────  ──────
  0500    0:14     ✓
  1000    0:28     ✓
  7520    9:22     ← live

Charts

Throughput

requests / sec

7d

Loss

live run

▼ 0.38

Allocation

  • Compute 9.2G
  • Storage 3.2G
  • Network 1.8G

Empty state

No items yet

Kick off your first project to see it appear here. We'll keep you posted as things happen.

Breadcrumbs & pagination

06

Patterns · app shell

Dashboard

Good afternoon, Jon

Active users

12,402

Active

3

Churn

2.1%

Recent activity

07

Usage · do & don't

Do
  • Use #2563EB for one primary action per view.
  • Reserve mono for numbers, code, and identifiers.
  • Keep cards on surface, page on background.
  • Maintain consistent corner radius across components.
Don't
  • Don't stack more than one primary CTA per fold.
  • Don't use the primary color for long-form body text.
  • Don't drop heavy shadows everywhere — let surfaces breathe.
  • Don't mix mono and sans in the same heading.

Best for

  • Indie game marketplaces
  • Creator-customizable storefronts
  • Pay-what-you-want digital products

Avoid for

  • Enterprise B2B
  • Premium consumer apps
08

Accessibility

Contrast ratios. WCAG AA target ≥ 4.5 for body text, ≥ 3 for large text or UI components.

Foreground Background Contrast Use
#0F172A#FFFFFF17.85 · AAABody, headings
#6B7280#FFFFFF4.83 · AASecondary text
#2563EB#FFFFFF5.17 · AABrand actions (button bg)
#FFFFFF#2563EB5.17 · AABrand button (text on primary)
#EF4444#FFFFFF3.76 · AA LargeDanger states