After the starfield got its HDR overhaul and the warm Ember theme landed, the operator asked an uncomfortable question: why does the interface on top of it still look like every app an LLM has ever generated? With Claude Fable 5 only available to us until the end of July 7, we've been feeding it the big, open-ended jobs that suit a frontier model — and this was the biggest one yet: audit our typography and iconography, propose an identity that looks chosen, and then roll it across everything. The map, the panels, the tour, the blog, the weekly reports, the landing pages, even the share cards. This post is the story of that afternoon — and if you're reading it with a custom accent color set in EF-Map, the page you're looking at is already obeying it.
The tell
There's a look that people have learned to recognize in AI-built software: a clean sans-serif that's probably Inter, friendly rounded corners on everything, and the same stock icon set every generated UI ships with. None of it is wrong. It's what happens when nobody makes a choice — and nine months of incremental prompting, as we've admitted before, produces a lot of unmade choices.
So before touching anything, Fable 5 audited what we actually shipped. The findings were funnier than expected:
- EF-Map shipped zero webfonts. Not one. Windows users saw Segoe UI, Mac users saw SF Pro — the app's voice literally changed depending on your operating system.
- Inter — the archetypal AI-default font — was named in our CSS but never loaded. We had the default look requested and not even delivered.
- Five different monospace font stacks were declared across the codebase (Fira Mono, Roboto Mono, JetBrains Mono, SF Mono…), none of them shipped, all silently falling back to Consolas. The star-system labels on the map itself — the most-read text in the product — were rendering in a fallback font for essentially every user.
- The icons were stock Lucide at factory settings — 2px strokes, round caps, round joins. The friendly-rounded look of a thousand generated dashboards.
A proposal you could click
Rather than describing options in text, the model built an interactive design proposal — a self-contained page with the candidate fonts embedded in it, our real feature rail recreated pixel-for-pixel, and the same rail rendered three ways: stock icons, sharpened icons, and a bespoke set drawn specifically for EF-Map. Seeing the three side by side made the decision easy. The operator's verdict: don't pick a tier. Do all of them.
The type system that won: Chakra Petch for the interface voice — a squared industrial face that echoes bracketed HUD furniture without going full sci-fi cosplay — and IBM Plex Mono for data, because coordinates, distances and kill counts deserve tabular figures. Both self-hosted as latin subsets, about 60 KB total. Less than one screenshot, for a consistent voice on every OS.
Twenty-six icons drawn for the job
The icon work came in tiers. Tier zero was a genuinely satisfying trick: one CSS rule — stroke-linecap: square; stroke-linejoin: miter — re-machines every stock icon in the app from friendly-rounded to squared-off. (One gotcha the model caught: it has to be square, not butt, because the icon library draws its dots as zero-length paths that vanish with butt caps. The calculator would have lost its keys.)
The real prize is the bespoke set: twenty-six icons hand-drawn on a shared grammar — a 24px grid, 1.5px strokes, machined corners, one 45° chamfer per rectangular form, small filled shapes marking "live data." The killboard got a proper kill reticle instead of a trophy. Display Settings got console faders. Scout Reports got a radar sweep with a blip. Every tool in the library now has an icon that was drawn for that tool, and the grammar is documented in the source so icon twenty-seven will match.
Squaring nine months of corners
Committing to squared chrome exposed how much rounding a nine-month-old app accumulates. The main panels were easy — but then the operator's smoke test kept finding stragglers: the rotating tip pill, the live event ticker, the shoutbox, the helper status badge, the onboarding card, the Quick Tour popovers, the help panel's accordion sections. A half-migrated look is genuinely worse than either extreme, so the model swept the entire codebase: 475 radius replacements across roughly sixty files, with circles, spinners and slider tracks deliberately left round because a control's shape is information.
The estimate gap
When asked up front, the model quoted effort in human-shaped units: "about an hour" for the CSS rule, "half a day" for the fonts, "incremental background work" for the icon set. The whole thing — proposal, fonts, 26 icons, three squaring passes, and the site-wide rollout below — took about ninety minutes of wall-clock time. The estimates weren't wrong about the work; they were anchored on who usually does it. The real bottleneck was the operator looking at preview deployments and deciding what they liked.
Ember for everyone
Then the operator doubled down: if this is the identity, make Ember the default theme for everyone — new visitors and existing users alike, including people who had explicitly picked orange, blue or green. That's a spicier call than it sounds, and it's implemented as a one-time migration: your profile flips to Ember once, and any accent you choose afterwards sticks forever. Will everyone like it? Probably not. Can you get orange back in two clicks? Yes — Display Settings → Accent Color, exactly where it always was, hue slider included. We think it'll grow on you.
The 105 pages that never got the memo
Here's the thing about a project that grows one prompt at a time: the app got four accent themes and a hue slider, but the blog you're reading, the State of the Frontier reports, and a dozen landing pages were all frozen in the original orange — a hex code the app itself retired months ago — with a font declared that never loaded. They didn't follow your theme. They didn't follow any theme.
The fix is the part we're most pleased with. One shared stylesheet now carries the brand fonts and Ember defaults, and one tiny script — running before the page paints — reads the same saved preferences the map writes and re-skins the page to your accent. All four named themes work, and custom Ember hues work too: the model ported the app's exact color math (OKLCH to sRGB, gamut-clamped) into the script, so if you've dialed your Ember to teal or violet, the blog, the weekly reports and the FAQ all follow. A subagent swept the conversion across 105 static pages and patched the four generator templates so every future post and report comes out already speaking the language. If you have no preference saved, everything simply defaults to Ember.
Share cards in your colors
That sweep surfaced one more orphan: the share cards. Route cards, killboard snapshots, blueprint build sheets and the State of the Frontier social cards are drawn on a canvas — and a canvas can't read CSS variables, so they were all still stamping out the retired orange. They now resolve your accent at draw time. The practical effect is that when two players share route cards in a Discord channel, one might be amber and one might be teal — the cards carry their owners' colors, which feels right for a tool that's always been about personal choice.
Writing it down so it sticks
The last deliverable isn't visual at all. Everything above — the type tokens, the radius policy, the icon grammar, the theming contract, the rules for static pages and canvases — is now captured in a design-language document in the repository, linked from the instructions every future agent reads before touching the codebase. That matters for two reasons. First, regressions: the next time we ask a model to "add a panel" or "make a landing page," it will use the tokens and respect your theme instead of reintroducing Segoe and rounded corners. Second, family: EF-Map is one of several EF apps, and a written language is what lets the others adopt the same look without archaeology.
Nine months of unmade choices took an afternoon to unmake. The interesting part isn't that the model could draw icons or sweep 475 corner radii — it's that the whole loop (audit, propose, decide, implement, roll out, document) fit inside the window between two preview deployments. If something still looks off to you, it's now a one-line fix against a written standard instead of another unmade choice.
What's next
The identity ships to production alongside this post. Open the map and you'll land on Ember — give it a day before you judge it, and if it's not for you, your old accent is waiting in Display Settings. If you spot a corner we missed or a surface still speaking the old language, tell us in the shoutbox: it's a quick fix now that there's a standard to fix it against.
Related Posts
- Giving Our EVE Frontier Starfield HDR Stars with Claude Fable 5 — the starfield overhaul that made the old chrome look flat in the first place
- Refactoring a 19,846-Line Monolith with Claude Fable 5 — the first free-rein Fable 5 experiment, and the origin of the "audit before touching" habit
- Vibe Coding: Large-Scale LLM Development — how nine months of incremental prompting builds an app, and its unmade choices