EA Logo Customizer

The problem Jenna brought to us was a familiar one: Electronic Arts had just launched new branding, and instead of that new brand showing up consistently, it was fragmenting almost immediately. Unapproved logo variations were spreading across lunchrooms, Slack blasts, and email footers. The “creativity” was getting out of hand, and her team didn’t have the capacity to review every request. The brand was being eroded not by bad intentions, but by people just trying to get things done without a clear, easy path to the right assets.

The answer wasn’t more brand guidelines — it was making the correct thing the easiest thing.

How it works

We built a web-based logo generator that pairs the rules of the new logo structure with the immediacy of self-service. You type in your team or department name, pick your logo variant (Employee Community or Digital Sub-Brand), and the tool outputs your logo in three approved color ways, ready to export as transparent PNG or SVG. The whole thing is password-protected with a custom login page — the first time I’d built one from scratch — so it stays internal without requiring any IT infrastructure. It lives on Netlify, which means it can be transferred to EA’s own account whenever they’re ready.

Why it scales

What I find compelling about this pattern is how it shifts the bottleneck. Before, the constraint was designer availability — someone always had to touch an asset before it could go out. Now the constraint is the tool itself, which means the brand rules are baked in and enforced automatically. Anyone who needs a logo for a press release, a presentation, an event badge, or an email signature can generate the right one in under a minute. The design team gets their time back, and the brand stays consistent across every context where it shows up.

That’s the real value of building tools like this: you’re not just solving today’s request, you’re removing an entire category of future requests.

Applying this to your project

1. Clone the whole repo as-is — there’s no build step, package manager, or bundler here. You need: index.html, script.js, style.css, check-auth.js, netlify.toml, the netlify/functions/auth.js function, the login/index.html page, and the assets/fonts + assets/images folders. Discard apple-touch-icon.png, favicon*.png/ico if you have your own brand favicons.

2. No API keys needed, but you must set your own password. Open netlify/functions/auth.js and replace the hardcoded string 'jennarulz' (line 28) with your own password — right now it’s committed in plain text to source control, so at minimum move it to a Netlify environment variable (process.env.SITE_PASSWORD) instead of leaving it in the code.

3. Swap the branding: replace the two SVGs in assets/images/ (EA_Logo_SubBrand.svg and Medallion.svg) with your own logo marks, and drop your own font files into assets/fonts/ (replacing ElectronicArtsDisplay-Regular.otf/-Bold.otf). Update the @font-face blocks and font-family references in both style.css and login/index.html, and change the hardcoded blue #255AF6 (appears in both files) to your brand color.

4. The critical integration point is the DIMENSIONS object at the top of script.js — this hardcodes pixel widths, font sizes, letter-spacing, and margins for each logo “mode” (employee and subbrand). If your logo has different proportions or you swap in a different font, you’ll need to redo these numbers by trial and error in the browser — they were tuned by eye against this specific SVG and this specific font’s metrics. Same goes for the SVG_SOURCES object, which points at the two logo files, and TEXT_CONTENT, which controls placeholder/default text per mode.

5. Non-obvious gotchas:

   • There is no build process — this is deployed as static files directly, so any change to script.js/style.css is live immediately with no compile step to catch errors.
   • The text-width measurement in checkTextWidth() re-loads the OTF font file via opentype.load() on every keystroke (debounced 300ms) rather than caching it — fine for a two-font tool, but worth caching if you add more fonts or styles.
   • PNG/SVG export both re-fetch() the logo SVG file and do a string replace on fill="white" to recolor it — if your replacement logo SVG uses a different fill value (e.g. currentColor or a hex code instead of literal white), the color-swap for the black/white/brand-color exports will silently fail.
   • Auth is a single shared cookie (netlifyAuth=true, 24hr expiry) with no per-user identity — it’s a single shared password, not real authentication, so don’t treat this as suitable for anything needing audit trails or multiple user accounts.
   • The Netlify redirect rules in netlify.toml gate every route behind the cookie except /login — if you add new pages/routes, they’ll automatically be protected too, but make sure any new public assets (like a new favicon path) aren’t accidentally blocked.