A design system concept, mocked for a personal-finance app's onboarding

Context

Product and UI design engagements almost always start the same way: a founder has a rough idea of the flow but no system to build it consistently. We put this concept together to show what that first design pass looks like — using a finance-app onboarding flow as the example, since it's a good stress test (lots of form fields, trust-sensitive copy, several screens in a row).

The approach

Before any screen gets designed, we define the system it'll be built from — colour tokens, a type scale, spacing, and the core components (buttons, inputs, cards). Screens then get assembled from that system rather than styled one at a time, which is what makes a handoff to engineering fast instead of a long back-and-forth.

What we built

A token set (colour, type, radius, spacing), a small component library (buttons in two variants, inputs, tags, nav items), and an onboarding flow built entirely from those pieces — step indicator, form screens, and a confirmation state. Exported as handoff-ready specs: exact spacing, states, and the Tailwind config the tokens map to.

What this demonstrates

• A token-first design process that produces a system, not just a set of screens
• Handoff specs an engineering team can build from without guessing
• The same design practice behind our Product & UI design service

No real fintech client is behind this — it's a concept build. Have a flow you need designed? Start a project.