Step20

The brand kit and this website - built from code, no trackers

23 October 2026 · 4 min read

brandwebsitetooling

By 23 October the game had a name, a tagline, an approved logo and nothing to put them on. This step is about how the brand and this website came together in a day, and why the site is boring on purpose.

The logo is a human decision

The final logo was approved by the owner on 8 October and replaced every placeholder: the menu, the splash screen, the window icon, the trailer cards. We are careful with the wording: the logo is a human-approved asset, chosen and signed off by the owner, and everything in the brand kit is derived from that approved image. Earlier candidates exist, one first attempt at a brand system was rejected outright (it still sits in a folder named for it), and the tagline, "Some assembly required.", is the owner's, decided the same day as this step.

A 3D version of the logo exists too. It is a Blender scene, built and animated by script: a 13-second intro in six shots in which bricks drop onto studs, plates slide in and rounds slide into the channels of the lettering. We rendered it in Cycles on the AMD GPU (the card's HIP backend works in Blender) and, to compare, in EEVEE. At 4096 by 2731 pixels EEVEE took 52 seconds including shader compile; Cycles at 256 samples took 115. EEVEE is faster and its steel and brass came out much darker, because screen-space reflections only see what is on screen. The animated intro itself is rendered in EEVEE; Cycles was the comparison.

The brand kit

The brand kit lives in Docs/brand/identity/: a logo suite as vectors and PNGs (full colour, black, white, horizontal, stacked, an emblem), favicons, social images, store-page templates and a one-page brand guide. Most of it is drawn by scripts from the approved logo, which is the point: change the logo, rerun, and the files follow.

The top of the brand kit overview sheet: one approved logo, many forms.

The palette is small and has to be:

Name	Value	Used for
Night	#0B0F14	backgrounds
Panel	#111923	cards
Gold	#F6C744	the one action colour
Brand red	#B8180C	the logo's red
USA, RUSSIA, MARS	#3A7BFF, #E03A3A, #B85CF6	the three factions

Fonts: Orbitron for the interface, Barlow Condensed for headlines, Inter for text. All three are open source under the SIL Open Font Licence, and the licence files ship with the site.

This website

The site is static HTML, CSS and a small script. No framework, no cookies, no analytics, no third-party scripts, no web fonts fetched from anywhere else. The privacy page can say "no cookies, no trackers" because it is true.

One Python file, website/build_site.py, builds everything:

It pulls frames and clips from the real trailer captures with ffmpeg, so the pictures on the main pages are the brand kit or the game itself. The only AI-made pictures anywhere on the site are the cutscene frames in How It's Made, labelled as such.
It makes AVIF, WebP and JPEG sizes of each picture and subsets the fonts.
It writes every page, the sitemap, the RSS feed for How It's Made, the security headers and a zip ready to upload.

A full build takes about two minutes. --html rebuilds only the pages, styles and script in seconds. That is the mode that matters: when you are writing, you want to see the page now.

In a mobile test (default throttling, run locally) the home page scored 97 for performance and 100 for accessibility, best practices and SEO.

How It's Made, the section you are reading

This section is the newest part of the site. A step is a single markdown file with a few lines at the top: title, date, summary, tags and a hero picture. build_site.py --html picks it up, and the index, the RSS feed, the sitemap, the "Step N of M" plates (numbered from the date order, so nobody types them) and the previous and next links all regenerate. Adding a step means writing one file.

Every step is dated to the day its work happened, from our commit history and notes, and the steps are written afterwards. We say so on the index.

The mistake of the day

The kit's SVG logos had a bare ampersand in their titles. In XML an ampersand has to be escaped, so browsers refuse to show these files as images. Everything looked fine in a vector editor and showed nothing in a page. The builder now escapes it in the copies on the site; the originals are untouched.

What we would do differently

Choose the tagline before the logo. It decides what the page has to say.
Test the site in a browser before you trust the files. The ampersand bug was invisible until then.
Keep the site boring. Every dependency you do not have is a thing that cannot break on launch day.