Where we started
Version one borrowed its colors from our games' interfaces: neutral blacks, item-rarity colors, and a cyan-to-gold gradient on every button. Each piece made sense on its own. Together they looked like every other dark landing page, with an all-caps label over every heading and a rounded box around every block of text.
The fix started with a palette from an earlier project I worked on, which had a personality ours was missing:
- Matte black
#222222 - Mint
#3eb489 - Matte red
#b33f40 - Light blue
#64aef2 - Gold
#e9c66d - Cream
#e8e0d6
We kept its spirit: matte colors, a mint that means "go", and a red that isn't a warning light. Then we pushed it toward one image.
The idea: a chalkboard on a CRT
Our games are retro-futurist: CRT type, scanlines, synthesized sound. The site needed a surface that felt like that world. A chalkboard is the right one: dark, slightly green, a little dusty, and made for writing on. So the black became slate, a green-tinted black, and the white became chalk, a warm off-white that never goes to pure white.
- Slate 950
#0a0d0c - Slate 900
#0f1312 - Slate 800
#1a201e - Slate 600
#34403b - Chalk 300
#adb0a6 - Chalk 100
#ecebe2
Four accents, three strengths
On top of the slate sit four accents: mint, sea blue, matte red, and gold. Each comes in three strengths, and each strength has one job:
- Matte is for text and surfaces: links, buttons, labels.
- Neon is only for light: glows, the focus ring, the little status lamps. If it's neon, it's emitting.
- Soft is a translucent mix for tints and fills, made in CSS with
color-mix()from the matte color, so there are no extra hex values to keep in sync.
- Mint
#4fbf93 - Mint neon
#6dffc4 - Sea
#6cb4d4 - Sea neon
#8ae6ff - Matte red
#c4554d - Red neon
#ff6f61 - Gold
#e2a54c - Gold neon
#ffc56b
Each accent also has a role, so color always means something. Mint means "do this": links and primary buttons. Gold is warmth: Loaf's glow, step numbers, subheadings in long reads. Sea is the keyboard focus ring and marks open-source projects. Red flags what's new.
Gold also does a second job. Loaf is a warm loaf of bread, and the slate is a cool green-black. Warm against cool is the oldest contrast trick there is, and it's why the mascot jumps off the page without a frame around it.
Measured, not eyeballed
Dark palettes fail on readability more than anything else, so every color used for text was checked against the slate background with the WCAG contrast formula. AA, the usual bar, needs 4.5 to 1 for body text.
| Color | Used for | Contrast on slate |
|---|---|---|
| Chalk 100 | Headings, emphasis | 15.6 : 1 |
| Chalk 300 | Body text | 8.5 : 1 |
| Chalk 400 | Captions, labels | 5.6 : 1 |
| Mint | Links | 8.2 : 1 |
| Slate on mint | Primary button text | 8.6 : 1 |
| Red neon | "New" labels | 6.9 : 1 |
Two colors don't make the cut, and the rules keep them away from text: Chalk 500 (3.5 : 1) is only used for the slashes between tags, and matte red (4.2 : 1) never carries words. That's why the "New" label uses the neon red instead.
Type
Headings stay in VT323, a font built from old terminal lettering, and the main reason this site looks like it's on a monitor. Body text moved from a narrow "gamer" display font to IBM Plex: Plex Sans for reading and Plex Mono for labels and code. Plex was designed for IBM, which makes it the typeface of the machines retro-futurism is nostalgic for, and it's far easier to read at paragraph length.
Habits we dropped, and two we kept
Rebuilding the palette was a chance to look at everything else that made the first version feel generic. Some patterns were dropped:
- All-caps labels over every heading. A heading can introduce its own section.
- Pill-shaped tags. Tags are now one line of monospace text,
Roguelite / Pixel art / Turn-based, like terminal output. No pill, no padding to center. - Gradient buttons that lift on hover. Buttons are sentence case with tight corners, solid mint for the main action, and they change color, not position.
- A box around everything. Most content now sits on the slate, separated by single hairline rules.
Two signatures from the first version stayed, on purpose. The floating pill nav is still there, with Loaf as its logo and a mint power lamp that gently pulses. And the neumorphic pillow cards stayed, but only for things that should feel like objects you could pick up: the games, the devlog posts, and the "at a glance" panels. Each pillow's inner edge echoes its outer shadow, light on the top-left and dark on the bottom-right, by just two pixels, so the edge reads as rounded instead of cut.
The small stuff
A few details hold it together: our gameplay redrawn live as ASCII behind the homepage hero, CRT scanlines over everything at 5% opacity, square LED "lamps" instead of round status dots, and text that highlights in mint when you select it. None of them are noticeable on their own. Remove them all and the site goes back to looking like a template.