Vibe Coding Part 3: The Design System That Makes Everything Look Premium

Why Design Systems Matter in Vibe Coding

When you're vibe coding with AI, the biggest risk isn't broken code — it's inconsistent design. AI generates each component independently. Without rules, you end up with 47 shades of blue and buttons that look like they're from different websites.

A design system fixes this. It's the set of rules that makes everything look like it was built by the same team, even when AI generated every line.

Here's the exact system we built for SAVAH — and how you can steal it.

The 60-30-10 Color Rule

This is the single most important design rule we follow. Every page, every component, every state:

• 60% neutrals — White (#FFFFFF), grays, near-black (#0F172A) for backgrounds and text
• 30% brand color — One blue (#2563EB) for navigation, links, icons, prices, secondary buttons
• 10% accent — One orange (#F97316) for the single most important action per view

That's it. No gold accents. No green highlights. No pink decorative elements. One blue, one orange, rest neutrals.

Why This Works

The 60-30-10 rule eliminates decision fatigue. When you're vibe coding and the AI asks (implicitly) "what color should this button be?" — you already know. Secondary actions get blue. The primary CTA gets orange. Everything else is neutral.

We enforce this with CSS custom properties:

• --brand-secondary = #2563EB (blue)
• --brand-accent = #F97316 (orange)
• --accent-hover = #EA580C (darker orange for hover states)

Every component references these tokens. No hardcoded colors. No exceptions.

Power Words: The Vocabulary of Sales

This isn't just about design — it's about language. Every word on the site follows strict rules:

Words We Never Use

• "Descuento" → We say "oferta"
• "Barato" → We say "valor"
• "Promoción" → We say "oportunidad limitada"
• "Compra ahora" → We say "no pierdas esta oportunidad"
• "El mejor" → We say "reconocido"

Why Power Words Matter

Words like "discount" and "cheap" trigger skepticism. Words like "oferta" and "valor" trigger opportunity. The product is the same. The price is the same. The framing changes everything.

This applies to badges too. A badge that says "-23% OFF" with a real retail price is honest. A badge that says "-50% OFF" with an inflated price is lying. We never inflate retail prices.

Consistent Spacing with Tailwind

We use Tailwind's spacing scale religiously. No custom margins. No random pixel values. Everything maps to the scale:

• Gaps: 4, 6, 8, 12, 16 (never 5, 7, 13)
• Padding: Consistent per component type
• Section spacing: py-16 to py-24 for major sections

The AI generates consistent code because the rules are explicit. When you tell the AI "use gap-6 between cards" every time, it learns the pattern.

Dark Mode Done Right

Dark mode isn't just inverting colors. It's a specific palette:

• Background: Near-black (#0F172A), not pure black (#000000)
• Surface: Slightly lighter (#1E293B)
• Text: White for headings, gray-300 for body
• Brand colors: Slightly brighter in dark mode for contrast

We use CSS custom properties that swap automatically based on the user's system preference. No toggle needed — it just works.

How to Build Your Own Design System

1. Pick 3 colors. One neutral-dominant, one brand, one accent. That's it.
2. Create CSS tokens. Never hardcode colors in components.
3. Define spacing rules. Use an existing scale (Tailwind, Material, etc.).
4. Write power words down. Create a vocabulary list. Reference it in every prompt.
5. Enforce with AI prompts. Tell the AI: "Follow the 60-30-10 rule. Use --brand-secondary for links, --brand-accent for CTAs."

The design system is the guardrail that keeps vibe coding output consistent. Without it, you get chaos. With it, you get a brand.

The Result

After implementing this system, our design consistency went from "random collection of components" to "coherent brand." Every page looks like it belongs to the same site. Every button has the right color. Every word follows the vocabulary.

That's the power of a design system in vibe coding: it turns AI-generated code into a product.