The Basic Design System Your App Needs To Not Feel Random

If every new screen in your app feels like a fresh improv session, you do not need more creativity. You need a few decisions you stop renegotiating.

A basic design system for an indie app is just that. A small set of defaults you reuse so the whole thing feels like one product.

The Idea

Big teams get style guides and massive libraries. You get something much lighter. Your goal is simple. Make future you stop asking “Which gray is this” and “How big should this heading be” every single time.

Once a few base rules are in place, your app stops feeling random even if you are still building it on nights and weekends.

Step One. Pick A Core Typography Stack

Typography is where most of the “this feels like one thing” comes from.

Pick:

• One font for headings and body.
• Three or four text sizes you will actually use, such as page title, section title, body, and small.
• Clear rules for where each style shows up.

For example. Page titles always use the largest size and a heavier weight. Section titles use the next size down. Body text stays one size everywhere. If you keep changing sizes and weights on every screen, the app starts to feel like a collage.

Step Two. Choose A Small Color Set

You do not need a twelve color palette with naming conventions that sound like paint chips.

Start with:

• One main brand color for primary actions.
• A simple neutral scale for backgrounds, borders, and text.
• One feedback color for success or error states if you need it.

Decide how each color behaves.

• Primary color is for main buttons and key highlights.
• Neutrals handle backgrounds and text.
• Feedback colors only show up when something went right or wrong.

If you use every color for everything, nothing feels intentional.

Step Three. Standardize Spacing And Layout

Random spacing is a fast way to make your app feel messy even if the colors and type are fine.

Pick a spacing scale you reuse. Something like 4, 8, 12, 16, 24, 32. Use those values for padding inside cards, gaps between form fields, and margins between sections.

Then pick a max width for main content so things do not stretch edge to edge in one view and float in a tiny box in another. You do not need a perfect grid system. You just need to stop eyeballing every gap.

Step Four. Define A Few Reusable Components

Your app probably uses the same building blocks over and over. Focus on the small set that shows up everywhere.

• Buttons.
• Text inputs and text areas.
• Cards or panels.
• Alerts or banners.

Decide what each looks like in its normal state, hover state, focused state, and disabled state. Pick “the one way” you style a primary button. Then stick to it.

Every time you introduce a slightly different button or input “just for this screen,” you chip away at the sense of one coherent product. Just don't do it.

Step Five. Write A One Page “How We Use It”

You do not need a fancy site or a thick PDF. Create a single page in your notes, docs, or repo that says:

• Here are our text styles and where they go.
• Here are our colors and what they are for.
• Here are our core components with screenshots or code snippets.
• Here are a couple of layout examples for typical screens.

This is less about documentation for a team and more about guardrails for future you when you are tired and trying to finish something.

Step Six. Use It As A Filter, Not A Cage

The point of a basic design system is not to lock you into boring forever. Most of the time, you follow the system by default. If a new pattern actually deserves a tweak or a new component, you add it on purpose, not by accident.

Ask one question before you invent something new.

“Is this a new pattern we will reuse, or am I just being inconsistent.”

If it is a real pattern, fold it into the system. If not, match what you already have.

Your app does not need a perfect design system to feel good. It just needs you to stop redesigning the basics on every screen. Make a few decisions once. Then go back to shipping.