Fintech SaaS site and product dashboard
A fintech marketing site that survives compliance review
/ Overview
A fintech startup had a design they loved and no engineering capacity to build it. We turned a licensed design system into a production marketing site and dashboard shell, with a component library their own developers now build features on top of.
Discuss a build like this/ Project Details
Project: Fintech SaaS site and product dashboard
Client: Under NDA — reference available on request
Industry: Fintech & financial services
Engagement: Design build-out & front-end engineering
Built on: Revio (fintech SaaS design template) by finlaystudio, licensed via UI8
/ Challenge
Financial services sites carry constraints most marketing sites do not — every claim needs review, disclosures must appear in specific places, and nothing can be vague. The design also had to become a real component library rather than a set of pages, because the client planned to keep building after handover.
/ Provided Services
Design-to-code build
The licensed design rebuilt as a documented component library with tokens for colour, spacing and type — not a one-off page build. Every component ships with usage notes and props.
Compliance structure
Disclosure blocks, risk statements and rate displays built as locked components with required fields, so mandated content cannot be edited out by mistake.
Handover to the in-house team
Storybook documentation, a written architecture guide and two pairing sessions, so their developers extend the system rather than fight it.
/ Solution
We built the design as a typed component library first and assembled pages from it, so the system was the deliverable and the pages were a by-product. Compliance-sensitive regions were made into dedicated components with locked structure, so a marketer editing copy cannot accidentally remove a required disclosure.
/ Tech stack
Next.js & React
Server rendering for the marketing pages and fast client transitions into the dashboard, with a shared component library across both.
TypeScript
Component props are typed, which is what stops a compliance block being rendered without its required disclosure text.
Headless CMS
Marketing copy is editable by the client's team within the constraints of the component system, so layouts stay intact.
/ Client's Feedback
We had the design and no way to build it. They delivered a component system rather than a set of pages. Our two developers have shipped four features on it since without asking us for help.
Daniel Osei
Head of Product at Fieldstack
