Flat surfaces, playful details

TPG’s game surfaces can be loud. Technical documentation has a different job: help someone form a reliable mental model and find the next useful link.

The docs and blog use the same visual vocabulary with the volume turned down.

Keep the reading surface quiet

Long-form content sits on warm white, surrounded by a restrained cool background. Borders define hierarchy. Shadows are shallow and functional. The page does not ask decoration to compete with code, tables, or links.

Color still carries personality in smaller doses: a coral eyebrow, a mint category chip, an amber illustration block, or a chunky outlined call to action.

Spend contrast where it matters

Navigation, headings, code, and inline links need dependable contrast. Muted copy should still be readable rather than fading into the background for the sake of softness.

Focus states are part of the visual system too. A rounded control should have a rounded, visible focus ring; skip links should appear immediately when keyboard navigation begins.

Let shape do some of the work

Slightly generous radii connect the content site to the party-game product without turning every paragraph into a bubble. A few blocky illustrations reference game pieces and screens while staying abstract enough to avoid becoming product screenshots.

The result should feel like the same host welcoming a different audience: still warm, still recognizable, and ready to explain something precisely.