Bolt app design tips: 9 changes that make a bolt.new site look designed
Specific prompts and settings to take a Bolt app past the template look, from tokens and fonts to layout, icons, copy and publishing.
Bolt gets you from idea to deployed app faster than almost anything. Its default output also has a recognisable look: a dark or white page with a blue-to-purple gradient headline, Inter, Lucide icons in tinted squares, and a hero with two rounded buttons. Here are nine changes, in order of impact, with prompts that work in Bolt's chat.
1. Edit the Tailwind theme, not individual classes
Bolt projects nearly always have a tailwind.config.js (or .ts) and an index.css. If you change colours component by component, Bolt will reintroduce indigo-600 the next time it generates something. Change the theme once:
Edit tailwind.config so the theme has these custom colors and remove reliance on default palette colors:
colors: { paper: '#f3f1ea', ink: '#14211b', muted: '#5d675f', accent: '#1f6f4a', soft: '#d9e6d3', line: '#cfd3c6' }
Then replace every bg-indigo-*, bg-purple-*, bg-blue-*, text-slate-*, text-gray-*, from-*/to-* gradient class in the project with the new tokens. Do not change any logic.
That palette is the "ledger" green we use for finance tools. Swap in your own.
2. Change the font in two places
Fonts live in index.html (the Google Fonts link) and in tailwind.config (fontFamily). Ask for both explicitly:
Add Google Fonts "Instrument Serif" (400, italic) and "IBM Plex Sans" (400, 500, 600) to index.html. In tailwind.config set fontFamily.display = ['Instrument Serif', 'serif'] and fontFamily.sans = ['IBM Plex Sans', 'sans-serif']. Use font-display on h1, h2 and h3. Remove Inter.
More pairings: best fonts for vibe-coded apps.
3. Kill the gradient headline
bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-purple-600 is a Bolt signature. Replace it with solid ink and, if you want emphasis, one italic word in the accent colour:
In the hero, remove the gradient text effect. The headline is solid text-ink. Wrap the single most important word in <em> styled italic, font-weight 400, text-accent.
4. Give the hero a real layout
Rebuild the hero as a left-aligned two-column layout on desktop (text left, product screenshot right, screenshot has a 1px ink border and no rounded corners). Headline 64px desktop / 40px mobile, tight leading. One primary button; the secondary action becomes a text link with an underline. Remove the badge pill above the headline.
If you don't have a screenshot yet, take one of your own app's main screen. A real UI beats any illustration.
5. Swap icon squares for something quieter
Bolt loves <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center"><Zap/></div>. Ask it to remove the containers and most of the icons:
In the features section, remove the colored icon containers. Keep at most one small icon per feature, inline before the title, 18px, stroke-width 1.5, color text-muted. Remove icons entirely where the title already says it.
6. Vary the section rhythm
Generated pages are often a stack of identically padded sections, each a centered heading plus a grid. Mix it up: a full-bleed band in the accent colour for the call to action, a two-column section with the heading on the left, a single wide screenshot. Ask for one change at a time and look at the preview between prompts.
7. Write the words yourself
Bolt's placeholder copy ("Transform your workflow with AI-powered insights") gets shipped surprisingly often. Write your headline, subhead and button labels, then paste them in:
Replace the hero copy with exactly this text, no other changes:
Headline: Bookkeeping for people who hate bookkeeping
Subhead: Connect your bank, snap receipts, and get a clean monthly report your accountant will actually thank you for.
Button: Connect your bank
8. Check the published site, not just the preview
Publish to *.bolt.host and test on a phone. Things that look fine in the preview pane often overflow at 390px. Also remove the "Made with Bolt" badge if your plan allows it, set a favicon and <title>, and add an Open Graph image.
9. Save your rules so Bolt keeps them
Create a DESIGN.md at the project root with your tokens, fonts, radius and the banned list (no gradients, no glass, no emoji icons, no pill buttons). Then start UI prompts with "Follow DESIGN.md." The Cursor rules guide has a full template you can reuse for Bolt.
A quick before/after
Here's a typical Bolt hero for a meal-planning app, and what the prompts above turn it into.
Before: dark slate background, "Revolutionize Your Meal Planning" in a blue-to-purple gradient, centered, two rounded buttons ("Get Started" and "Learn More"), and below it three cards with a Utensils, Clock and Heart icon in light-blue squares.
After: cream background (#eef0e8), headline "Dinner, planned by Sunday night." in Fraunces, left-aligned, with "Sunday" in terracotta italic. Subhead: "Pick five recipes, get one shopping list sorted by aisle, and cook without checking your phone." One ink button, "Plan this week", and a text link "See a sample week". On the right, a screenshot of the actual weekly plan with a 1.5px border. Features become a numbered list with no icons.
Same app, same code, about six prompts. Nothing about the product changed except how much it looks like someone cared.
Check your score
Scan your bolt.host URL to see which tells remain, with fix prompts for each. You can also see how other Bolt apps score on the Slop Leaderboard, and run through the pre-launch design checklist before you share the link anywhere.
FAQ
Does Bolt use Tailwind?
Usually, yes. Most Bolt projects are Vite + React + Tailwind, often with Lucide icons. That's why changing the Tailwind theme config is the highest-leverage edit.
How do I stop Bolt from undoing my design changes?
Put your design rules in the project's prompt/knowledge settings or a DESIGN.md file at the repo root and tell Bolt to read it before every UI change.
Can I edit the code directly instead of prompting?
Yes, and for tokens it's often faster. Open tailwind.config and index.css in the code view and edit the values yourself.