Design systems for vibe coders
You don't need to be a designer to ship a beautiful product. You need three decisions made on day one.
Decision 1 — One typeface
Pick one sans-serif and stick with it across the whole app. Two weights — regular and medium. Headings are bigger, not different. The temptation to pair fonts is the single biggest reason vibe-coded apps look amateur.
Decision 2 — A real color palette
One background, one foreground, one accent. Plus a neutral scale. That's it. The AI will try to give you seven colors; tell it to use four.
The prompt: “Use only these colors anywhere in the app: bg #0a0a0a, fg #ffffff, accent #7CFFB2, and a zinc neutral scale. Anything else is a mistake.”
Decision 3 — Space, not borders
Beginners use borders to organize. Designers use space. Tell Lovable to default to generous padding and remove decorative borders unless they communicate structure. Suddenly your app looks like it costs $40/month.