18 Design Resources for Lovable & Bolt.new in 2026

Lovable and Bolt.new ship fast, but speed without design constraints produces the same purple-gradient dashboards everyone else gets. These 18 resources give you fonts, tokens, components, and reference layouts you can paste into prompts so your generated UI looks intentional — not like a template factory output.

Why Lovable and Bolt need design inputs

Both tools excel at scaffolding React apps from natural language. What they lack is taste. They default to Inter, rounded cards, and safe SaaS patterns unless you give them something sharper to copy from.

The fix is not more prompting tricks. It is feeding the agent concrete design artifacts: a type scale, a color palette, a component library, or a full page reference with a DESIGN.md spec. The resources below are grouped by what they solve — typography, color, components, inspiration, and agent-ready templates.

Typography and fonts

1. Geist — Vercel's sans-serif family reads clean at small sizes and works well in dark-mode dashboards. Mention the font explicitly in your Lovable prompt: "Use Geist for UI and Geist Mono for code."

2. Instrument Sans — A slightly warmer alternative to Inter. Good for marketing pages generated inside Bolt when you want personality without going decorative.

3. Google Fonts pairing guide — Not a font itself, but the pairing suggestions help you write two-font stacks into your prompt instead of letting the agent pick randomly.

4. Utopia fluid type calculator — Generates clamp-based type scales. Paste the CSS custom properties into your project instructions so headings and body text scale properly on mobile.

Color and tokens

5. OKLCH Color Picker — OKLCH makes perceptually even palettes. Define five tokens — background, surface, border, foreground, accent — and paste them as CSS variables in your first Bolt message.

6. Realtime Colors — Preview full UI themes live. Screenshot a palette you like and attach it to your Lovable chat as a visual anchor.

7. Radix Colors — Pre-built scales for light and dark mode. Reference specific Radix steps in prompts: "Use gray-1 through gray-12 for surfaces, indigo-9 for primary actions."

8. Tailwind CSS color docs — Both platforms output Tailwind-heavy code. Knowing the default palette names lets you steer the agent with precise class names instead of vague "make it blue."

Icons and illustration

9. Lucide Icons — The de facto icon set for shadcn-style React apps. Tell the agent "Lucide only, 16px stroke, no emoji icons."

10. Heroicons — Solid alternative when you want slightly heavier icon weight for marketing sections.

11. Phosphor Icons — Flexible weight system (thin through bold). Useful when your Bolt app needs icons that match a specific visual density.

12. Undraw — Open-source illustrations with customizable accent colors. Better than letting the agent hallucinate SVG art.

Component libraries and UI kits

13. shadcn/ui — Both Lovable and Bolt frequently generate shadcn-compatible components. Point the agent at specific blocks: "Use shadcn Card, Dialog, and DataTable patterns."

14. Tailwind UI — Paid, but the free application UI examples are worth studying. Describe layout patterns from their marketing sections rather than copying code verbatim.

15. Aceternity UI — Animated components for hero sections. Use sparingly — one motion element per page, not twelve.

Inspiration and reference layouts

16. Mobbin — Real mobile and web app screenshots. Screenshot a flow you want, attach it, and describe what to keep vs. change.

17. Land-book — Landing page gallery filtered by industry. Useful when Bolt generates yet another generic hero with a centered headline and two buttons.

18. Agent's Design gallery — Curated agent-ready UI templates with DESIGN.md specs and prompts built for tools like Lovable and Bolt. Each template includes typography, color tokens, component patterns, and copy direction — paste the spec into your chat instead of describing design from scratch.

How to use these resources in practice

Do not dump 18 links into one prompt. Pick three to five artifacts that match your project and front-load them in your first message.

A workable pattern:

1. Set tokens first — Paste OKLCH or Radix color variables and a type scale from Utopia.
2. Name the component library — "Build with shadcn/ui and Lucide icons."
3. Attach one reference — A Mobbin screenshot, a Land-book landing page, or a template from the Agent's Design gallery.
4. Constrain motion — "One hover transition per section, 200ms ease, no parallax."
5. Iterate in small diffs — Change one design dimension per follow-up message, not everything at once.

Lovable vs. Bolt: where each tool shines

Need	Lovable	Bolt.new
Full-stack app with auth	Strong	Moderate
Marketing landing page	Moderate	Strong
Supabase integration	Built-in	Via prompt
Design system enforcement	Needs explicit tokens	Needs explicit tokens
Iteration speed	Fast chat loop	Fast chat loop

Both tools respond well to the same design inputs. The difference is project type, not design approach.

What to avoid

• Vague aesthetic words — "Modern, clean, professional" tells the agent nothing. Use font names, hex values, and component references.
• Competing references — Do not attach a brutalist portfolio and a soft SaaS dashboard in the same prompt.
• Default purple gradients — Explicitly ban them: "No purple-to-blue gradients, no glassmorphism on every card."
• Over-animation — Bolt and Lovable love adding framer-motion to everything. Cap it early.

Quick-start prompt template

Copy this into your first Lovable or Bolt message and fill in the brackets:

Design system for this project:
- Font: [Geist / Instrument Sans / your choice]
- Colors: [paste CSS custom properties from OKLCH or Radix]
- Icons: Lucide, 16px stroke
- Components: shadcn/ui patterns
- Border radius: [4px / 8px / 0px]
- Shadows: [none / subtle / spec value]
- Motion: 200ms ease, hover opacity only

Constraints:
- No purple gradients
- No emoji icons
- No lorem ipsum — use realistic placeholder copy
- Spacing on 4px grid

Build: [describe your page or feature]
Reference: [attach screenshot or link to template]

This front-loads every design decision the agent would otherwise guess wrong.

Building a reusable resource stack

If you ship frequently with Lovable or Bolt, maintain a personal resource folder:

design-resources/
├── tokens.css        ← your OKLCH or Radix color variables
├── type-scale.css    ← Utopia-generated clamp values
├── prompt-base.md    ← the quick-start template above
└── references/       ← Mobbin screenshots, gallery templates

Paste tokens.css and type-scale.css into new projects. Attach one reference image per session. You are not starting from zero every time — you are applying a proven stack to a new brief.

Designers who treat vibe coding like a toolchain, not a slot machine, ship faster and iterate less.

Start with a template, not a blank prompt

The fastest path to non-generic UI in Lovable or Bolt is starting from a structured design spec rather than inventing one mid-chat. Browse the Agent's Design gallery for templates with DESIGN.md files you can paste directly into your session — typography, tokens, components, and layout patterns already defined.

Your app will still be unique. The spec gives the agent guardrails so it spends tokens on your features instead of re-deciding what "good design" means every time.