From Defaults to Polish: How I’m Building Melora

When I started working on Melora, I decided not to over-engineer the design from day one. Instead, I’m focusing on functionality first, and gradually layering in polish as the product takes shape.

Here’s the approach I’m taking so far.

Step 1 — Starting with the defaults

I scaffolded the app using shadcn/ui and its default theme.

• Buttons, inputs, cards, dialogs—all straight from the library.

• No custom colors or typography tweaks.

• Just enough structure to move fast and keep things consistent.

This gave me a working baseline without slowing down on design decisions.

Step 2 — Shipping the core flows

Right now, I’m building the essentials first:

• Onboarding & authentication

• Dashboard

• The create/edit flow (Melora’s core value)

• Settings

These screens use mostly unmodified components. They’re not flashy, but they’re functional, and that’s the point at this stage.

Step 3 — Polishing in layers

Once the main flows feel right, I’m making targeted improvements:

Spacing & rhythm

• Defining a base spacing unit (4px).

• Keeping layouts consistent and breathable.

Typography system

• Setting heading scales and weights.

• Establishing a clear hierarchy for readability.

Color & states

• Introducing a primary brand color.

• Ensuring hover, focus, and disabled states feel consistent.

Radius, elevation, motion

• Standardizing border radii.

• Simplifying shadows to two levels.

• Adding subtle transitions where it makes sense.

Step 4 — Hardening the components

As I go, I’m refining the pieces users interact with the most:

• Buttons with solid/outline/ghost variants.

• Forms with consistent error handling.

• Dialogs and sheets with proper accessibility.

• Empty states that are helpful, not just blank.

Step 5 — Accessibility and performance

I’m keeping usability in mind while iterating:

• Checking color contrast ratios.

• Making sure everything works with just a keyboard.

• Lazy-loading non-critical routes.

• Optimizing icons and assets.

Step 6 — Locking in tokens

Once the design feels stable, I’m encoding decisions into tokens:

• Colors, spacing, typography, radius, shadows, motion.

• Mapping them back to shadcn variables for consistency.

This will make the design system resilient as Melora grows.

The journey so far

Melora is moving from “default but functional” → “clean, branded, and resilient.”

By starting with defaults, focusing on core flows, and layering polish deliberately, I’m able to keep momentum while still shaping a solid design foundation.

💡 If you’re building something similar:

• Start with defaults.

• Validate flows before spending time on polish.

• Layer design decisions systematically, and encode them in tokens once stable.

That’s how I’m building Melora—fast, focused, and scalable.

Image from Dan Cristian Pădureț on Unsplash