Brand Resources — Logo, Colours & Type

01 — Logo

Light background

Dark background

02 — Colour Palette

Paper #ECEAE0 ⎘ Copied

Ink #2A2A28 ⎘ Copied

Ink Mid #3C3C3A ⎘ Copied

Accent #3454D1 ⎘ Copied

Sage #9BC1BC ⎘ Copied

03 — Typography

Display — Anton

Games &
Tools

Anton · Regular · Google Fonts

UI / Labels — Barlow Condensed

Free Browser Games

Barlow Condensed · 600–900 · Google Fonts

Body — Barlow

Pick something fun. Free browser games and useful mini-tools — all playable in your browser with no downloads required.

Barlow · 400 / 600 · Google Fonts

Nav / Chips — Barlow Condensed

Games Active Tools

Barlow Condensed · 700 · letter-spacing 2–4px

04 — Halftone Dot Patterns

Highlight — 1px dot

Midtone — 2.2px dot

Shadow — 4.5px dot

05 — Buttons

Primary — main call to action (e.g. "Start Game", "Begin the Month")

Secondary — lower-emphasis actions (e.g. "Try Again", "Back to Games")

Pill — compact toggle/selector (e.g. year picker, filters)

All three share the same hover language: primary swaps to the accent blue, secondary and pill invert to a solid ink fill. Radius is a consistent 4px (999px for pills), never fully square or fully round.

06 — Cards & Panels

Hard panel — poster style (nav cards, page frames)

2px ink border + offset shadow

Square corners, a solid 2px ink border, and a flat 2px/2px offset shadow with no blur. Used for the homepage nav cards and the outer page frame.

border: 2px solid — shadow: 2px 2px 0

Soft card — in-game UI (stat cards, housing options)

Faint tint + low-opacity border

A 4% ink-tinted background, a 20%-opacity 1.5px border, and a 6–8px radius. Used inside games and tools for stat cards, option lists, and result tiles.

bg: rgba(ink,0.04) — border-radius: 6–8px

Rule of thumb: the hard panel is for page-level structure (the halftone/tabloid identity), the soft card is for content living inside a game or tool screen, where a heavy border would compete with the UI.

07 — FAQ Accordion

Built with native <details>/<summary> — no JavaScript required, keyboard- and screen-reader-accessible by default. Used for per-game/tool FAQs and the "About" read-more panels.

Do these accordions need JavaScript?

No. They're native <details> elements, styled with a soft card border and a coloured triangle marker. Click or tap the summary line, or focus it and press Enter/Space.

Where are they used across the site?

Every game and tool page uses this exact pattern for its FAQ or sourcing section — for example, the year-by-year sourcing breakdown on the Minimum Wage Survivor game, and the Legal & FAQ panel in Crypto Empire.

Using the Brand Assets

Everything on this page — the logo, palette, type, and dot patterns — is free to use with attribution.

Display — AntonA high-contrast condensed typeface used for the wordmark and titles.

UI — Barlow CondensedWeights 600–900, used for labels and navigation.

Body — BarlowWeights 400 and 600, used for all body copy.

Dot patternsPure CSS radial-gradients — no images, scales to any size or colour.