The first decision a brand makes about how it looks is the color a stranger uses to recognize it.
The mental test is the cocktail-party question. "What color is Patagonia?" Forest green. "What color is Tiffany?" The robin's-egg blue. "What color is Google?" Blue, red, yellow, green — and the answer takes a beat because there are four. The brands that get a one-word answer to that question have a head start the brands that get a paragraph don't. The one-word answer doesn't come from picking a "primary color" in a design doc; it comes from refusing to balance the palette and making one color do the heavy lifting.
I auditioned the candidates on real surfaces. Forest green felt natural — it picks up the agent-team metaphor, the calculator-on-a-farm illustration, the bootstrapper-handbook reference. The problem was that forest green is the green every developer-tools brand reaches for. GitLab uses it. Vercel's marketing variants have used it. Anything in the operating-system-for-builders shelf sits on forest green. Picking it meant queueing up behind a dozen identical brands.
What landed was the one that disagreed with everyone else in the category:
Honey-lemon yellow. The one Microapp is known by.
#FFE234. Bright, warm, hard to mistake for somebody else's brand. Every hero surface, every OG card, every favicon disc, every t-shirt and sticker carries it. The yellow is the cocktail-party answer. Green is the action accent — used inside tool pages and content — but yellow is the signature. The signature gets one job and never trades it away for variety.
The transferable why: a balanced palette is a forgettable palette. Pick the one color the brand will be known by; let every other color be a supporting role. The category you're in already has its conventional palette — and the conventional palette gives you a free thirty-percent recognition penalty before you've drawn anything. Disagree on purpose. Pick the color that's wrong for the category you'd otherwise blend into.
Locked 2026-05-06 · #FFE234 · the signature color
The second decision was about fonts. Three families, one job each — and the discipline to never reach outside.
The temptation in any design system is to grow the type stack as the surfaces grow. A serif for editorial. A condensed sans for compact UI. A handwritten font for the friendly bits. Each addition is defensible in isolation; together they turn the brand into a font sampler. The voice fragments along the type. Microapp gets three families. No fourth. Not for "just this one page."
Plus Jakarta Sans is the display voice — loud, confident, slightly geometric, the kind of typeface that looks at home both as a 96-pixel chapter title and as a 14-pixel button label. Inter is the body voice — quiet, neutral, present, the typeface that disappears so the words can do the work. JetBrains Mono is the label voice — used for eyebrow labels, section numbers, locked-on dates, the small monospace texture that gives a page the feel of a passport stamp or a price tag.
Display, body, mono. One family each. No fourth.
Each family carries one role across every surface. A chapter title is Plus Jakarta Sans, full stop. A paragraph is Inter, full stop. A date in a sidebar is JetBrains Mono, full stop. The brand stays singular because the type stays singular. The fonts load with font-display: optional — if the font is cached, it shows; if not, the system font reads in its place until the brand font arrives. No flash, no layout shift, no waiting for the network.
The transferable why: a type system gets ten times more value from discipline than from variety. Most design systems start with three families and end with seven because adding a fourth always feels harmless at the moment of adding it. The cost compounds at the brand level — every page now has to decide which family to use, and the answer can drift. Pick the smallest set you can defend; never grow the set without retiring one.
Locked 2026-05-06 · Plus Jakarta Sans · Inter · JetBrains Mono · font-display: optional
The third decision is the one the codebase enforces hardest. The palette lives in one file.
The honest history is that the palette didn't always live in one file. The early site had hex literals sprinkled across components — color: #FFE234 in one widget, background: #fff8d6 in another, border: #f4c842 in a third. The brand looked consistent at human eyeball distance and was a nightmare to evolve. A rebrand or a single color tweak would have meant grepping across two hundred files and praying nothing was missed.
The fix took a single afternoon and several months of discipline to enforce. All twenty-two brand colors live as CSS variables in src/styles/global.css, declared inside @theme. Every other file references them by name — var(--color-brand-yellow), var(--color-brand-cream), var(--color-brand-green). A test in tests/brand-palette.test.ts scans the codebase for raw hex literals outside global.css and fails CI if it finds one.
One file. One rebrand.
The benefit isn't theoretical. A real visual experiment — the yellow rollout, the green-action-accent experiment, the page-pattern color audit — each shipped as a one-file change to global.css, no other file touched. The brand rotates around a center the codebase agrees on, instead of leaking across a hundred decisions no one wrote down.
The transferable why: the variables you can name from anywhere are the variables you can change everywhere. Hex literals inside component code are the equivalent of magic numbers inside a function — they work until they need to change, at which point they cost more to find than to fix. Centralize at the brand level; let every consumer reference by name. The cost of the indirection is negligible; the cost of not having it is paid every time the brand evolves.
Locked 2026-05-03 · global.css @theme · CI gate tests/brand-palette.test.ts
The last decision is the small one that gives the whole site a fingerprint. The hard offset shadow.
Most cards, buttons, and badges on the modern web sit flat. CSS blurred shadows, gentle gradients, the Material-design / Apple-design polish that became the default sometime around 2014. The look is fine. It's also identical across ten thousand brands. A flat card with a soft shadow is the visual equivalent of an airline customer-service script — correct, professional, instantly forgettable.
The version Microapp uses is the opposite: a hard offset shadow, no blur, brand-yellow, sitting three pixels down and three pixels right of every card and button. The look comes from band poster art, riso prints, and the Casio-watch / Penguin-paperback aesthetic the brand keeps coming back to. It says "made by a person with an opinion" the way the blurred shadow says "made by a UI library."
3px offset, no blur, brand-yellow. Nothing on the site is purely flat.
Every card on every page wears it. Every badge wears it in a darker variant. Every button wears a smaller version when it's the page's primary action. The shadow is small enough that nobody notices it consciously and consistent enough that a member who sees it on the homepage, the tool page, and the book recognizes the same hand at work. The visual fingerprint isn't the shadow itself — it's the fact that the shadow is the same everywhere.
The transferable why: brand fingerprints come from the boring detail repeated everywhere, not the flashy detail used once. The Apple chrome, the Stripe gradient, the Patagonia label sewn on the outside — each is a small repeating element doing all the recognition work. Pick the small repeating detail your brand will carry across every surface. Variety dilutes it; consistency compounds it.
Locked 2026-05-06 · hard offset shadow · 3px · brand-yellow · every card on every page
That's the look. One signature color, three font families, one source of truth for hex, one shadow you'll see everywhere. Everything else is downstream of those four decisions.