SpoedMarktplaats Design System

One source of truth for a marketplace that had none.

Alejah Sardiniola

available for work

SpoedMarktplaats Design System — screen 1

SpoedMarktplaats connects people to tradespeople — plumbers, electricians, roofers — when something breaks and the clock is running. The app already existed. It already had users. What it didn't have was a system. I built one: a semantic, light + dark, token-driven foundation extracted straight from the screens already in production, then rebuilt the entire surface on top of it. Primitives, semantic color roles, spacing, radii, typography, shadows, and motion — all of it as typed TypeScript constants. One file. One source of truth.

The problem

The client shipped first and structured never. They built a mobile app without a design system, and it showed on every screen. Buttons that didn't match. Spacing picked by feel. Six different greys doing the job of one. Light mode that worked and dark mode that didn't. Every new feature made it worse, because there was nothing to build against — just guesses stacked on older guesses. The UI looked inconsistent because it was inconsistent. And inconsistent UI is inconsistent UX. Users feel that even when they can't name it.

The solution

I started where the truth was — the existing screens. I audited all 52 of them, pulled every color, spacing value, and radius that was actually in use, and turned that mess into a clean token layer. Raw primitives at the bottom. Semantic roles on top — surface.primary, text.muted, urgency.critical — so a screen never references a hex code, only intent. Warm neutral foundation, chartreuse and flame as the two brand signals, a strict 4px grid, and an iOS-grade type and shadow scale. Then I rebuilt the component library against it: base components like Button, Input, and Card, plus the signature pieces that make this app what it is — UrgencyTimer, JobCard, BidCard. Light and dark resolve from the same tokens automatically. Chartreuse stays the same hex in both, on purpose.

What was built

Token-driven foundation in a single tokens.ts — primitives → semantic roles → components
Full light + dark theming that resolves from shared semantic tokens, no duplicated styles
Complete color audit extracted from 52 live production screens
4px spacing grid with semantic insets and gap aliases for consistent rhythm
iOS-grade type scale (SF Pro), 7-step ink-tinted shadow system, and motion tokens
Signature components: UrgencyTimer that shifts color as a job nears expiry, JobCard, BidCard
Trade-specific system: SectorPill, FsBadge verification, BoostFlame for paid boosts
Documented showcase site — screen inventory, redesigned mockups, component library, token report

Tech stack

React NativeTypeScriptDesign TokensFigmaTabler IconsNext.js (documentation site)

Impact

The app went from 52 one-off screens to one system that drives all of them. Dark mode stopped being a liability and started being free. New features now start from tokens instead of guesses — which means they ship faster and look like they belong. The client got more than a fresh coat of paint. They got the thing that should have existed before the first screen was ever built: a foundation that holds.

Reflections

Here's what this project hammered home: a design system isn't decoration you add at the end. It's the strategy you should have started with. The client didn't have an ugly app — they had an unstructured one, and structure is what users actually feel. The real work wasn't picking prettier colors. It was making one decision once, naming it, and never having to make it again. Build the system first. Everything after moves at the speed of it.

Interested in building something similar?

Get in touch

alejah.t.sardiniola@gmail.com

← back to works