Your style

80% of design is spacing and text sizes. The color and the font matter, but they matter much less than white space, visual hierarchy, and consistency.

Because of that a minimal website is your best choice. A clean, simple website looks intentional. A "creative" website made by someone who isn't a designer looks like a "creative" website made by someone who isn't a designer. The less you do, the better it will look.

One color, plus black and white

You need just one color for it to look good enough.

How to pick the color

1. Go to any color picker (Google "color picker", one shows up right in the search results)
2. Pick a color you like. That's it. There's no secret science. Blue doesn't "communicate trust" more than green does. Pick something that feels right and that you can read against a white background
3. Use that color only for important things: CTA buttons, links, accents. Not for backgrounds, not for all headings.

Your entire palette

• Background: white (or a warm white like #FAFAFA if pure white feels too clinical)
• Main text: black or very dark grey (#1A1A1A or #111111)
• Secondary text: medium grey (#6B7280 or similar)
• Accent color: the one you picked. Use it sparingly

Dark mode

We need to talk about this for a second. A lot of vibe-coded websites come out in dark mode because AI tends to default to it and it looks "cool" at first glance. The problem is that dark mode is much harder to get right than light mode. Bad contrast, wrong greys, glowing text. I would suggest you stay with a white background, because it seems more elegant. Unless your product is for engineers, then just go with dark mode.

Choose one font

Pairing fonts is a skill that takes designers years to develop, so just stick to one font.

Here are 4 fonts that always work, are free, and you can't go wrong with:

Inter - The most used font in modern web design. Clean, readable, neutral. If you don't know what to pick, pick Inter and never think about it again. It works for headings, body text, buttons, everything.

DM Sans - A bit softer and friendlier than Inter. Good choice if your product has a warmer tone. Very readable even at small sizes.

Space Grotesk - Has more personality than the first two. Slightly quirky letter shapes that give character without being eccentric. Good if you want to look "tech but not cold."

Instrument Sans - The most recent of the four. Modern, well-balanced, with a quiet elegance. If you want something that feels fresh without being trendy, this works.

Go to Google Fonts, search each of these four names, type your headline in the preview field, and pick the one that feels right. There's no wrong answer among these four.

A tip I'd give you is to download the fonts and serve them from your own site, not from Google Fonts. The second option usually slows down websites and it's not necessary.

I'm going to spend more time on this than on colors or fonts, because this is genuinely the thing that separates amateur-looking websites from professional ones. And it's the thing most people completely ignore.

Text sizes

A simple system that works for almost every website:

• Hero headline: 48-64px on desktop, 32-40px on mobile
• Subheading: 18-20px
• Section titles: 32-40px on desktop, 24-28px on mobile
• Body text: 16-18px
• Small text (captions, footer): 14px

Hierarchy works when the visitor can instantly tell what's important and what's secondary. If everything is the same size, nothing stands out. If the headline is big and the subheading is clearly smaller, the eye knows where to go.

A very common mistake: making body text too small. If your body text is 14px or smaller, people on mobile will struggle to read it.

Margins and padding

Rule 1: use more space than you think you need.If you think 40px between two sections is enough, try 80px. Feels like too much? It's probably just right.

Rule 2: be consistent.If you use 80px between the hero and the problem section, use 80px between every section. If you use 16px between a title and the paragraph below it, use 16px everywhere.

Rule 3: content should never touch the edges.On desktop, your content should have generous side margins. Most modern websites use a max content width between 1000px and 1200px, centered. On mobile, 20-24px of padding on each side.

Alignment

Align everything to the left or to the center. Pick one and stick with it for the whole page. The hero section can be centered, but body text is almost always better left-aligned (it's easier to read).

Don't mix left and center alignment in the same section. It looks like a mistake, even if you did it on purpose.

Icons

We covered images in Step 0 (short version: don't use stock photos, don't use AI images, be very careful with your own photos). But you might want some visual elements to break up the text. Icons are the answer.

Where to find good ones:

• Lucide (lucide.dev): The cleanest icon set around. Thin, consistent lines. Over 1,400 icons. If you pick one set, pick this one.
• Phosphor Icons (phosphoricons.com): More style options than Lucide (regular, bold, thin, fill, duotone). Same quality level.
• Heroicons (heroicons.com): Made by the Tailwind CSS team. Two styles: outline and solid. Smaller set but enough for most websites.

The rules for using icons well:

1. Same size. If one icon is 24px, all icons in that section are 24px. Mixed sizes look like a bug.
2. Same weight. If you use icons with thin lines (stroke width 1.5 or 2), all icons should have the same line thickness. Mixing an outline icon with a solid one is one of those things where the visitor thinks "something feels off" without knowing why.
3. Same color. Icons can be your accent color or your dark text color. Pick one and use it for all of them. Multi-colored icons scattered across the page look like stickers.
4. Same set. Don't mix icons from Lucide and Phosphor. They have slightly different styles. The human eye notices these differences even when you can't name them.

Showing your product

If your product has an interface, a dashboard, or anything visual, a screenshot is the best possible image for your website. It's real, it's specific, and it tells the visitor "this is an actual product, not a landing page for something that doesn't exist yet."

A few tips for screenshots that don't look terrible:

• Use realistic example data, not "Lorem ipsum" or "Test 123"
• If the interface has unfinished parts, screenshot only the best section
• Put the screenshot in a browser or device mockup
• Don't enlarge the screenshot until it gets pixelated. Take the screenshot on a 4K monitor if you want it to be very crisp.

‍

Now let's make sure your website doesn't suck before it goes live