Choose Colors and Fonts Guide

Step-by-step guide: Choose color schemes + fonts that match your brand style

Step 1) Define your brand “vibe” in 5 words

Pick 5 adjectives that describe how your brand should feel.
Examples:

  • Modern, clean, premium, calm, trustworthy

  • Bold, playful, youthful, energetic, friendly

  • Elegant, classic, refined, timeless, luxe

Write them down—this becomes your filter for every choice.

Step 2) Choose your “brand personality lane”

Pick one main lane (you can blend later, but start with one):

  • Minimal & modern (simple, lots of white space)

  • Bold & loud (high contrast, strong colors)

  • Warm & friendly (soft colors, rounded fonts)

  • Luxury & premium (dark tones, elegant serif)

  • Earthy & natural (greens, browns, organic tones)

  • Tech & futuristic (cool tones, sharp sans fonts)

Step 3) Start with 1 primary brand color

Your primary color is the one people will remember most (logo, headers, key buttons).

How to pick it quickly:

  • If you want trust → blues

  • If you want energy/action → reds/oranges

  • If you want growth/healthy/natural → greens

  • If you want premium/luxury → black/gold/deep purple

  • If you want calm/clean → muted neutrals + soft accent

Rule: Pick one primary color first before adding anything else.

Step 4) Add 2 supporting colors (secondary + accent)

You want a simple palette that’s easy to apply everywhere.

A strong basic palette usually includes:

  • Primary (main brand color)

  • Secondary (supports primary; used in sections/backgrounds)

  • Accent (used sparingly for CTAs, highlights, sale tags)

Rule: Accent color = small doses (buttons, links, badges).

Step 5) Choose 2–3 neutrals (background + text)

Neutrals make your brand look professional and readable.

Pick:

  • Background: white or off-white (or very dark if doing dark mode)

  • Main text: near-black (not pure black) or near-white on dark

  • Border/light gray: for lines, cards, subtle backgrounds

Step 6) Sanity-check your colors with a “3-screen test”

Mock your colors on 3 common places:

  1. Website header + button

  2. Product page (text + background + price)

  3. Instagram post or ad tile

Ask:

  • Does it feel like the 5 words from Step 1?

  • Is the button color obvious?

  • Does anything feel “too loud” or “too dull”?

Fonts

Step 7) Pick a font style that matches the vibe

Use these match-ups:

  • Modern/Clean/Tech → Sans-serif (simple, crisp)

  • Luxury/Classic → Serif (high-end, editorial)

  • Friendly/Playful → Rounded sans or soft display font (use carefully)

  • Bold/Street/Edgy → Strong display font (headlines only)

Rule: Most brands should start with sans-serif unless you’re intentionally going luxury/editorial.

Step 8) Use the “2-font system” (don’t overcomplicate)

Choose:

  • Font #1: Heading font (H1/H2 titles)

  • Font #2: Body font (paragraphs, product descriptions)

Optional:

  • Font #3: Accent (VERY limited: quotes, badges, logo text)

Rule: 2 fonts is ideal for most brands.

Step 9) Check readability before you commit

Make sure:

  • Body font is easy at 16px–18px

  • Headings are clear and not overly stylized

  • You can read it quickly on mobile

Quick rule:

  • If it looks “cool” but takes effort to read → don’t use it for body text.

Step 10) Decide your font “tone settings”

These choices change the vibe a lot:

  • Bold headings = confident, modern

  • Light headings = elegant, premium

  • Tight spacing = serious, editorial

  • More spacing = airy, calm, modern

Keep it consistent.

Step 11) Create your mini brand style kit (save this)

Write this down and reuse everywhere:

Colors (hex codes):

  • Primary:

  • Secondary:

  • Accent:

  • Background:

  • Text:

  • Light gray/border:

Fonts:

  • Headings:

  • Body:

  • Button/CTA style: (same as headings or body)

Usage rules:

  • Accent only for: buttons, links, badges

  • Primary for: headers, icons, key highlights

  • Body text always: text color on background color

Step 12) Apply the “consistency rule”

Once chosen, apply your style kit to:

  • Website theme

  • Logo + favicon

  • Social graphics templates

  • Email headers

  • Product listing templates

Consistency makes a small brand look big.

Quick “safe” starter combos (works for most brands)

If you want simple, clean, and professional:

  • Palette: navy (primary) + light gray (secondary) + teal or orange (accent)

  • Fonts: clean sans heading + clean sans body (different weights)