Base44 design: how to make your app look designed

To make a Base44 app look designed, give it values instead of moods: a hex color for every theme role, a type scale, a spacing ladder and motion written as curves and durations, saved once in Custom Instructions so every prompt follows them. Base44 builds the rest. It turns a plain-language description into a full app, frontend, backend, database, user accounts and payments, and since June 2025 it has belonged to Wix.

Its own docs already point this way. The prompt guide lists being too vague as the first common mistake and asks you to go further than clean or modern. The example prompts across its docs then stop one step short, at phrases like soft gray backgrounds and a short duration.

This guide takes that last step and turns each of those phrases into a number. Where a step needs a paid plan, Base44's docs say so and so does this guide. The cards below show what a full specification produces.

What Base44 gives you to design with#

Base44 offers four places to set the look, and knowing which does what saves credits. All of these are documented in its design guide:

• Theme panel: the app's global color roles, such as background, foreground, primary, secondary, card and popover, each set by hex, plus the fonts, including uploaded TTF, OTF, WOFF or WOFF2 files up to 5 MB.
• Edit mode: one element at a time, with colors, font and size from 12 to 128, margin and padding in pixels, corner radius, opacity and any Tailwind class. Manual edits use no credits.
• The AI chat: layouts and redesigns. Discuss mode plans without changing anything, and for some requests the AI offers visual options to choose from.
• Custom Instructions: rules the AI follows on every prompt, set under More options on the app's main version.

Under the hood, apps are React built with Vite and styled with Tailwind, and npm packages such as framer-motion can be installed through the chat. On the Builder plan and above you also get a workspace design system shared across apps, a choice of model, GitHub sync and code export.

At the time of writing, plans run from free, with 25 message credits a month, through Starter at $20 a month or $16 billed yearly, to Builder at $50 a month or $40 yearly, and on up to Pro and Elite. The free plan allows up to five message credits a day, so on it, plan in Discuss mode, where a message typically uses about 0.3 credits, before you build.

Why Base44 apps end up looking alike#

Every Base44 app starts from the same place: React, Tailwind and a theme of named color roles. When the prompt says a modern dashboard for a dog-walking business, the model fills every decision you did not make with its default, and its defaults are the same for everybody who used the same words. That is the mechanism behind every AI site looking the same, and it applies to apps exactly as it does to sites, and to every builder in Bolt's category.

Base44's docs show it without meaning to. Their light and dark mode example asks for near black backgrounds, light text, and subtle borders. It is a sensible brief, and near black still covers #0A0A0A, #111827 and #18181B, three different apps with three different moods. An adjective is a range, and a model picks from the middle of it.

Writing louder does not narrow the range, which is why prompting harder does not work. A value does. Here is what that looks like on the public front of three apps, each built from a full specification:

Write the rules down before the first screen#

Do the first four steps before you ask for a single page. Every prompt afterwards inherits them, and the first two are where most of the look is decided.

1. Write the brief into Custom Instructions#

Base44's Designing with AI page recommends a persona and a design brief, written once. Write yours with values, and save it under More options, Custom Instructions, one rule per line:

Design rules for every change:
- Colors come only from the theme roles. Never hardcode a hex in a component.
- Type scale, ratio 1.25 from 16px: 13, 16, 20, 25, 31, 39, 49. No other sizes.
- Spacing only from 4, 8, 12, 16, 24, 32, 48, 64, 96 px.
- Radius 12px on cards, 8px on inputs, 999px on pills and tags.
- One easing for every transition: cubic-bezier(0.22, 1, 0.36, 1).
- Durations: 160ms hover, 240ms toggles, 420ms panels and page entry.
- Under prefers-reduced-motion: opacity changes only, no movement.

These rules are what design tokens for AI-built sites look like in a form a chat box can hold. Custom Instructions apply on the main version only, so set them before you start working on branches.

2. Put hex values in the Theme panel#

Open the Theme panel, click each role, type the hex into the picker, click Apply, then Save & Apply. A warm light theme and its dark pair:

Foreground on background measures 16.44:1 in light and 16.09:1 in dark. White text on the light primary measures 5.09:1, so primary buttons pass at body size; on the dark primary use #0E0F12 text, at 6.82:1. If some components ignore the new theme, Base44's docs suggest asking the chat to sync the theme with the colors the app actually uses.

Fix the type, the spacing and the radius#

Colors set the mood; type and spacing set whether the app reads as designed. Both are quick to fix by hand once the values are chosen.

3. Fix the type#

Pick two faces at most, one for headings and one for everything else, in the Fonts tab. If there is no Fonts tab, the docs give the prompt: ask the chat to add theme font variables. Then state the scale once in the chat:

• H1: 49px, line height 1.05, tracking -0.02em
• H2: 31px, line height 1.15, tracking -0.01em
• Body: 16px, line height 1.55
• Small and labels: 13px, line height 1.4, tracking 0.01em

Edit mode's size dropdown runs from 12 to 128. Where it lacks an exact step, its Tailwind class field takes one, such as text-[31px], so you can correct a stray heading by hand without spending a credit.

4. Fix spacing and radius#

Edit mode takes margin, padding and radius in pixels, so the ladder from step 1 maps straight onto it. Use 24px inside cards, 16px between related fields, 48px between sections of a dashboard, and 96px between sections of the public landing page. Keep the three radii from the brief and nothing else: mixed radii are the fastest way to make an app look assembled from parts.

Add motion last#

Base44's docs give the order in one line: add motion after you are happy with colors, layout and typography. Motion on a weak layout only makes the weakness move.

5. Write motion as curves and durations#

The docs' example asks the AI to fade in each page with a short duration and make primary buttons gently grow on hover. Here is the same request as values, using framer-motion, which Base44 installs from the chat:

Install framer-motion. Then, across the app:
- Page entry: opacity 0 to 1, y 12px to 0, 420ms, ease [0.22, 1, 0.36, 1].
- Lists: the same entry with a 40ms stagger, first 8 items only.
- Primary button: hover scale 1.02 over 160ms; press scale 0.98 over 120ms.
- Cards: hover translateY -2px with one shadow step, 160ms.
- Use useReducedMotion(): if true, opacity only, no movement.

Inside the app, keep it that quiet. A dashboard people open forty times a day should feel fast before it feels animated.

Give the public page media and a full specification#

An app's screens should be calm. Its public landing page is where it earns a second look, and that takes one strong idea and an art direction to hold it.

6. Give the landing page one real asset#

That idea is usually a piece of media: a loop behind the headline, a character or an object. Base44 can generate short videos from the chat on Starter and above, at one extra message credit each. For a hero loop, Thanor's animated backgrounds page has looping clips of landscapes, abstract light, characters and objects; copy a clip's URL and tell the chat exactly how it plays:

Hero: full-bleed video, autoplay muted loop playsinline, object-fit cover,
with the first frame as poster. Gradient overlay from transparent at 40%
to #0E0F12 at 100%. Headline 49px on mobile, 96px from 1024px wide.

The video background guide covers file size and the mobile fallback. Two pages built around a single piece of media and a small interactive idea:

7. Hand the public page a full specification#

For the landing page, the strongest brief is a complete art direction rather than a list of rules. Each design in the Thanor library comes with one: a long, exact prompt holding the palette in hex, the type faces and scale, the spacing, the easing curves and durations, the section order, every interaction and hosted media the page uses.

Paste it in Discuss mode first and ask for a plan, as Base44's docs suggest, then build in Build mode one section at a time. On the Builder plan you can pick the model for that work, Claude Opus 5.5 or Gemini 4 Argon among them; on lower plans Auto chooses. If you plan in Claude or Cursor before you build, the Thanor MCP lets the assistant search the library and pull a design's art direction there, without the clipboard.

Mistakes that keep a Base44 app generic#

Each of these is easy to make and cheap to fix:

• Adjectives in place of values. Make it more premium moves the app toward the median of premium. Name the hex, the size and the curve.
• Restyling everything in one prompt. The docs advise stating the scope: the whole app, one page or one element. Redesign page by page.
• Glass on every surface. Base44's own glassmorphism prompt limits it to overlays and side panels, and says not to apply it to all cards.
• Hardcoded colors. A component with its own hex ignores the theme. The first rule in step 1 prevents it, and a sync prompt repairs it.
• Motion before structure. It is the docs' own tip, and it holds: settle layout and type first.
• A third typeface. Two faces carry an app. A third usually means a heading and a body face were never chosen properly.

The same method works for anything you build by prompt, from a vibe-coded site that does not look vibe-coded to a 3D website built with Claude. If you also use Lovable, the Lovable prompts guide applies the same idea there, and SaaS website design examples show more app fronts specified this way.

Copy one full specification into your app#

Open Vesperion and copy its prompt; it is free with an account. Read how it writes the palette, the type scale and the timing, and use that format for your own Custom Instructions in step 1. When you have found the design that fits your app, paste its prompt into Base44's Discuss mode and ask for a plan for your landing page; one reply shows how much more a model does with values than with adjectives. The rest of the designs are in the library.