For the first nine months we shipped against a Stripe-inspired design doc — soft navy headings, signature purple, blue-tinted multi-layer shadows, light-weight display type. It was beautiful in Figma. In production, no operator I watched used the product the way the design implied they would.
We rebuilt the whole frontend in two weeks around a different premise: we are not a luxury brand, we are a dense tool that competes for screen-real-estate against spreadsheets and IDEs.This post is a working note on what changed and why, in case it's useful to anyone weighing the same trade.
What we noticed
Three things kept showing up in user testing:
- Operators didn't scroll dashboards. They scanned them, in 2-3 second bursts, looking for something specific. Big airy cards with generous padding wasted that scanning bandwidth.
- Every time we put a number in a chart, someone copied it into a separate spreadsheet to do their actual analysis. The chart was a teaser; the table was the work.
- Heavy users complained about distance — they wanted ⌘K, j/k, and inline editing, and they were annoyed by every modal we forced them through.
These weren't edge cases. They were the same shape of feedback we'd hear in every demo: people who buy this kind of tool are operators, and operators want a workbench, not a window display.
What we kept from the old system
Three things, deliberately:
- The orange accent. We'd picked it almost by accident, but it became the only thing in the product that felt like ours. Now it has a stricter job — signal, never decoration.
- The 4–6px radius range. Bigger pill-shaped buttons read as consumer-y; this constrained range reads as engineered.
- The product taxonomy: workspace → product line → channel. The old visual language was wrong, but the IA was right.
What we replaced
Almost everything else.
Type
Geist Sans for narrative; JetBrains Monofor everything that's data — IDs, timestamps, paths, status, numbers. The mono/sans ratio sits at roughly 30/70. We give mono a +3% size compensation so it visually aligns with sans on the same line.
We also threw out per-component pixel sizes and built an 11-step rem scale that responds to a single root font-size rule. On a 27" 2K display the UI gets ~3% denser; on a 32" 4K it gets ~19% larger. No per-breakpoint rewrites.
Color
Out: blue-tinted shadows, navy headings, two purple accents. In: warm neutrals (#FAFAF7, #F5F5F2, #E8E8E4), one warm near-black (#0E0E0C), one orange (#E8530E), and four dim status colors. The whole palette fits on one screen.
Loading
We retired every spinner. Anything that takes more than ~800ms now narrates itself as a timestamped log. The onboarding flow especially benefits — instead of a static “Analyzing…” pill, you watch the system identify your industry, your market, your audience, and your competitors line by line.
[14:02:01] GET https://kolect.ai
[14:02:02] 200 ok · parsing dom + og + sitemap
[14:02:04] industry detected: creator agency
[14:02:05] market detected: us, uk
[14:02:07] searching competitors across 3 query classes…
[14:02:11] found 14 candidates · 7 high-confidenceThe waiting time is the same. The perceived intelligence isn't.
Keyboard
⌘K is the spine of the new product. Every action sits one keystroke away. Settings is a config-file editor where double-click means edit, Esc cancels, Enter commits. Tables navigate with j/k; selections toggle with Space.
It's the first tool I've used where I want to memorize the shortcuts.— operator, week 2 of beta
What it cost
Two weeks of focused engineering, a complete rewrite of every dashboard view, a brief period where the landing page and the product looked like two different brands (the landing followed a few days later), and the discomfort of admitting publicly that the previous direction was wrong.
Worth it. The product is faster to use, faster to ship into, and unmistakably more itself.
What we'd do differently
- Define the design system in actual code, not in a long markdown document. Our old
DESIGN.mdwas a 320-line essay about Stripe's aesthetic that nobody on the team referenced when shipping. The new one is a 600-line living spec that maps directly to tokens inglobals.cssand is updated every time we add a primitive. - Pick the aesthetic from how users actually use the product, not from what looks good on a Dribbble shot. We had the user interviews; we just hadn't let them rewrite the design brief.