Pick colours and fonts that work

Colour: five rules

1. Start with one brand colour. Take it from something real: your logo, your shopfront, your product, a photo you love. One colour you chose beats five the AI picked.
2. Build a small palette around it. You need a background, a text colour, your brand colour, one accent and a muted text colour. Plus red for errors and green for success. That's it.
3. Use 60-30-10 as a rough guide. About 60% background, 30% secondary (text, surfaces, images), 10% brand and accent. Accents work because they're rare. See it below.
4. Hit the contrast numbers. Body text needs a contrast ratio of at least 4.5:1 against its background. Large text (24 px and up, or about 19 px bold) and things like input borders and icons need at least 3:1. These come from WCAG, the web accessibility standard.
5. Never use colour alone to mean something. About 1 in 12 men has some colour vision deficiency. Underline links in text, and pair red errors with an icon or words.

Four palettes that already pass

Each one is checked: text on background, white text on the brand colour, and the brand colour as link text on the background all pass 4.5:1. The small page in each card shows how the four colours work together. Tell your AI the hex codes or use them as a starting point.

• Fresh bread dailyOpen from 7am, Tuesday to SundayOrder now

  Warm café

  Background #FBF7F2, text #2B2118, brand #9C4A1A, accent #E8B04B.

  Text 14.8:1. White on brand 6.2:1. Brand on background 5.8:1. Dark text on the accent 8.1:1.

• Design for small teamsBranding, websites and printSee our work

  Clean studio

  Background #FFFFFF, text #111827, brand #0F766E, accent #F59E0B.

  Text 17.7:1. White on brand 5.5:1. Brand on background 5.5:1. Dark text on the accent 8.3:1.

• Physio you can trustSame-week appointmentsBook a visit

  Calm and trusted

  Background #F5F8FA, text #1E293B, brand #2563EB, accent #10B981.

  Text 13.7:1. White on brand 5.2:1. Brand on background 4.9:1. Dark text on the accent 5.8:1.

• Live music, every FridayDoors at 7. Free entry.Get tickets

  Bold poster

  Background #FFF1E6, text #1F1300, brand #C1121F, accent #003049.

  Text 16.5:1. White on brand 6.2:1. Brand on background 5.6:1. White on the navy accent 13.8:1.

Small tweak that helps: instead of pure black and flat grey, use a very dark version of your brand colour for text and a tinted grey for muted text. The page looks more finished.

The 60-30-10 rule

This is a rough guide, not a law. Most of the page is quiet, some of it is structure, and a tiny part gets your attention. That's why a single red button works. Here it is in the café palette.

Background cream, text and surfaces dark brown, accent yellow. Brand colour sits within the 10%.

If you can't tell where to look on your page, you've probably used the accent too often.

Tints and shades

You don't need ten colours. Make lighter and darker versions of the ones you have: a faint tint of the brand colour for card backgrounds, a darker shade for hover. CSS can mix them for you.

• Make tints and shades with color-mix(), for example color-mix(in srgb, var(--brand) 12%, white) for a soft background and color-mix(in srgb, var(--brand) 85%, black) for hover. Don't add new brand colours.Copy

Check the contrast again after mixing. A tint is a new background, and your text still has to pass on it.

Error and success colours

Forms need a red for problems and a green for things that worked. Pick dark ones, because pale red text on white fails the same test as pale grey.

• Error: a deep red such as #B42318 on white, with an icon or the word "Error" so colour isn't the only signal.
• Success: a deep green such as #1E5B34 on white, again with an icon or text.
• Keep them separate from your brand. If your brand is red, errors still need to look different. Add an icon or a border.

Both example colours pass 4.5:1 on white. Recheck them against your own background.

Dark mode

A dark theme isn't your light theme turned inside out. Inverting colours gives you harsh, glowing text and washed-out brand colours. Treat it as its own design.

• Off-black background, such as a very dark version of your brand colour, rather than pure #000000.
• Off-white text, not pure white. It's easier on the eyes at night.
• Soften the brand colour. Strong, saturated colours look harsh on dark. Use a lighter, less saturated version.
• Recheck every contrast pair. A pass in light mode says nothing about dark mode.
• Follow the visitor's setting with the prefers-color-scheme media query, or skip dark mode if you don't want to maintain two themes.

• Add a dark theme using prefers-color-scheme. Don't invert the colours: use an off-black background, off-white text and a softened brand colour. Recheck every contrast pair and list the ratios.Copy

Check for colour blindness

You can preview your site the way people with colour vision deficiencies see it, free, in the browser you already have.

1. Open your published site in Chrome and open its developer tools (right-click, then Inspect).
2. Open the Rendering panel. Use the three-dot menu, then More tools, then Rendering.
3. Choose "Emulate vision deficiencies" and try each type. Can you still tell links from text, errors from success and the active tab from the others?

Fonts: five rules

1. Two families at most. One for headings, one for body text. Or one family in two weights, which is the safest choice of all.
2. Contrast the pair. Pair a serif with a sans-serif, or a characterful display font with a plain one. Two similar fonts look like a mistake.
3. Body text does the real work. Pick it for readability: 16 to 18 px, line height around 1.5 to 1.7, lines of about 45 to 75 characters.
4. Load only what you use. Every weight is another download. Two or three weights in total is plenty, and it keeps the site fast.
5. Make headlines fit on phones. Big display fonts often overflow a narrow screen. Ask for sizes that scale with the screen.

See the font types

These four use fonts already on your device, so you see a close cousin of each type. They are not the exact fonts from the pairings below, which you'd load separately.

Six pairings that are hard to get wrong

All are free on Google Fonts, so any AI can use them.

Pairing tip: try the palette and the pairing together. Warm café with Fraunces and Source Sans 3. Calm and trusted with DM Sans. Bold poster with Bricolage Grotesque.

A type scale that fits

A type scale is a short list of sizes where each step is a fixed multiple of the one before. Pick a base size of 16 to 18 px and a ratio between 1.2 and 1.25. A ratio of 1.25 with an 18 px base gives about 18, 22, 28, 35 and 44 px.

Big sizes need to shrink on phones. The CSS function clamp() does that: it takes a smallest size, a size that grows with the screen, and a largest size.

• Set the main headline with font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem) so it scales between phone and desktop without breaking words.Copy

What makes a font readable

• A generous x-height. That is the height of the lowercase letters like "x" and "e". Taller lowercase letters stay clear at small sizes.
• Letters that can't be confused. Capital I, lowercase l and the number 1 should look different. Check "Il1" in your font. Same for 0 and O.
• Normal weight for body text. Don't use thin weights (below 400) for paragraphs. Thin strokes break up on small screens.
• Line height about 1.5. Tight lines are tiring. 1.5 to 1.7 suits body text.
• Left-aligned, not justified. Justified text creates uneven gaps between words and makes lines hard to follow.
• No paragraphs in capitals. All-caps is fine for a short label, but slow and shouty for sentences.

Variable fonts

A normal font family ships one file per style: regular, bold, italic and so on. A variable font puts a whole range of weights in a single file, so you can use 400, 500 and 700 for the price of one download.

• One file, many weights. Fewer requests, and any weight in between is available.
• Only load the axes you use. Some variable fonts also vary width, slant or optical size. Each extra axis makes the file bigger. If you only need weight, ask for weight only.

The file must also be small. Variable fonts are not automatically lighter than two static files, so check the size.

Load fonts without jumps

Web fonts can make a page flash or jump while they arrive. A few settings prevent most of it.

1. Use WOFF2. It's the compressed font format every current browser supports.
2. Include the files in your site instead of loading them from another service. One less outside request, and nothing to break.
3. Set font-display. swap shows text straight away in a fallback font, then switches. optional avoids the switch on slow connections, and the font is used on the next visit.
4. Preload one key file. Preload the font used by your main headline or body text, not all of them.
5. Match the fallback. Use a fallback font adjusted with size-adjust so letters take up about the same space. Then the swap barely moves the page.

• Self-host the fonts as WOFF2, subset to the characters I use, with font-display: swap, one preloaded file and a fallback font matched with size-adjust so the page doesn't shift when fonts load.Copy

Layout jumps count against your page's CLS score. See Make your AI site fast and accessible.

The system font stack

"System fonts" means the font already on each visitor's device: San Francisco on Apple, Segoe UI on Windows, Roboto on Android. Nothing to download, so it's the fastest option, and it looks clean everywhere. In CSS it's a list of fallbacks, called a font stack.

They look different on every device, which is part of the charm. If you need the exact same look everywhere, load a web font instead.

Two AI traps

• The purple gradient. A purple-to-blue gradient on the hero and buttons is the most common AI default. It says "template", not "you". Choose a brand colour from something real.
• Inter everywhere. Inter is a good font, which is why AI tools reach for it every time. Use it by choice, not by default. Ask for the pairing you picked.

• No purple or blue gradients. Don't default to Inter. Use only the palette and fonts I give you.Copy

The prompt

Restyle the site with this palette and type:
Colours (as CSS variables): background [hex], text [hex], brand [hex], accent [hex]. Derive a muted text colour and a border colour from the text colour, plus an error red and a success green that pass contrast. Make tints and shades with color-mix().
- Use the brand colour for the main button and links; the accent for at most a few highlights (about 10% of the page).
- Check every text and background pair: at least 4.5:1 for body text, 3:1 for large text, icons and input borders. List the ratios and fix any that fail.
- Underline links inside paragraphs. Never use colour alone to show meaning.
- No purple or blue gradients.
Type: headings in [font], body in [font] (or the system font stack). Load only the weights you use, as self-hosted WOFF2, with font-display: swap.
- Body 18 px, line height 1.6, max line length about 65 characters, no justified text.
- A type scale with ratio 1.25. Headline sizes use clamp() so they fit on a 320 px screen without breaking words awkwardly.

Launch it

Look at the result on your phone outdoors, where contrast problems show up fast. When it reads well there, run through the launch checklist, then paste Launch my site on PageLemon.com into the chat and share your link.