Find a reference app for your design system (instead of designing from scratch)
When I started Muse Otter, I almost fell into the classic trap: spending 3 weeks designing a design system from scratch.
Colors. Fonts. Spacing. Border radius. Shadows. Buttons. Cards. Inputs. Modals.
Alone. Without a designer. With a 30-day MVP deadline.
And then I did something that saved me weeks: I found a reference app.
The problem: designing alone is a time sink
If you’re a dev launching an app, you know the situation. You can code. You can even write “beautiful” code. But design?
You spend 2 hours choosing between 3 shades of blue. You change the font 4 times. You create a card, then redo it because it “doesn’t look pro.” You browse Dribbble, get discouraged.
And in the end, your app looks like a Frankenstein of UI trends that don’t hold together.
The real problem isn’t that you lack design talent. It’s that you don’t have a coherent reference.
The method: find a reference app
The idea is simple. Instead of starting from zero, you find an existing app — not necessarily in your niche — whose style matches what you want for your product.
Not to copy. To have a clear direction.
What to look for in a reference app
- The overall feeling: pro? playful? minimal? premium?
- The color palette: warm, cool, neutral tones?
- Typography: modern sans-serif, elegant serif, technical mono?
- Density: spacious or compact?
- Components: how are cards, buttons, and navigation designed?
You don’t copy screens. You extract the design principles and apply them to your product.
My example: Muse Otter inspired by Qonto
For Muse Otter, an AI coaching app, I wanted a premium but accessible feeling. Not the “gamified startup” style like Duolingo. Not the “enterprise corporate” style either.
I looked for apps that had that “serious product that’s pleasant to use” feeling. And I found Qonto.
Qonto is a fintech for business financial management. Nothing to do with AI coaching. But their design system checked every box:
| Criterion | What Qonto gave me |
|---|---|
| Palette | Cream/beige tones with dark accents — premium without being cold |
| Typography | Clean sans-serif, clear hierarchy |
| Cards | White background, subtle borders, light shadows |
| Spacing | Airy, breathable — not overloaded |
| Feeling | Pro but human. Serious without being boring |
Qonto even publicly documented their design system approach and their brand identity — which helped me understand the choices behind the pixels.
How to find your own reference app
Step 1: define the feeling in 3 words
Before searching, ask yourself: “What feeling should my app give?”
Examples:
- “Premium, calm, trust” → look at fintech apps (Qonto, Revolut, N26)
- “Fun, energetic, young” → look at social/gaming apps (Duolingo, Discord)
- “Minimal, technical, precise” → look at dev/tool apps (Linear, Notion, Raycast)
- “Warm, health, caring” → look at wellness apps (Headspace, Calm)
Step 2: explore outside your niche
This is the key point. Don’t only look at direct competitors. If you’re building a fitness app, getting inspired by the best fitness app will just produce a clone.
Look at apps in other domains that have the feeling you want. That’s where originality comes from.
Step 3: extract the design system
Open the reference app and note:
- Colors: capture the 4-5 main colors (use a color picker)
- Typography: identify the font (WhatFont, Fontanello)
- Spacing: note recurring margins/paddings (8px, 16px, 24px…)
- Components: screenshot the cards, buttons, inputs, navigation
- Radius: are corners sharp, slightly rounded, or very rounded?
Step 4: adapt, don’t copy
Take the principles, change the colors to match your brand, adjust the font, and build your own components following the same proportion and spacing rules.
Your app will have the same level of consistency as an app with a 10-person design team — without spending weeks in creative exploration.
Why this works
Consistency from day 1
The biggest problem with apps designed by devs isn’t ugliness — it’s inconsistency. A rounded button here, a square one there. Three text sizes following no logic. Colors changing from screen to screen.
With a reference app, every design decision has an answer: “How do they do it in the reference app?”
Speed
At Qonto, adopting Figma and a centralized design system reduced their workload by 30%. And that’s a team of professional designers.
For a solo dev, the impact is even bigger. Instead of debating with yourself on every visual choice, you have a reference. You move forward.
The instant “pro” look
Users don’t know why an app “looks pro.” But their brain detects consistency — or the lack of it. An app that follows a unified design system, even a simple one, immediately gives an impression of quality.
Mistakes to avoid
Don’t pick an app that’s too complex as a reference. Spotify’s design system works for Spotify because they have 200 designers. Pick a model at your scale.
Don’t copy features, copy style. The reference app is for design, not product. Your app solves a different problem.
Don’t stay locked to a single app. You can take cards from Qonto, navigation from Linear, and colors from Headspace. The idea is to have references, not a bible.
Don’t confuse inspiration with plagiarism. Changing colors and fonts is enough to create your own identity. It’s the design principles (spacing, hierarchy, density) you’re borrowing — not the pixels.
My process now
For every new project:
- I define the feeling in 3 words
- I spend 30 minutes exploring apps (not Dribbble shots — real apps I install and use)
- I pick 1-2 reference apps
- I extract the constants: colors, font, radius, spacing
- I build my Flutter components following those constants
- In 2-3 hours, I have a working design system
Result: a consistent, pro-looking app, ready for MVP. No Figma. No designer. No 3 wasted weeks.
Building an app that looks good isn’t about artistic talent. It’s about method. And the most effective method I’ve found is to not reinvent the wheel.
Find the app that already has the feeling you want. And get inspired.