Chapter 4 · about 10 minutes
Make it yours
Five choices, not thirty settings. Comet deliberately does not let you move everything a pixel at a time — that is how non-designers end up with a site that looks wrong on phones. Pick five things and the rest is handled.
Why some settings are missing
Comet hides settings that do not apply to your layout rather than greying them out. If you cannot find “sidebar width”, it is because the shape you picked has no sidebar. Change the shape and it appears. Nothing is broken and nothing is locked.
Choose the shape of the page
This is the skeleton every page sits in — where the menu goes and how wide the content runs. Five to choose from. You can change it later and every page follows along, so do not agonise.
Alongside the shape are a handful of small switches — whether the menu sticks to the top as you scroll, how many columns the footer has, how tight the spacing is, how round the corners are. Defaults are sensible. Change them later, if ever.
Choose the colours
Comet's whole theme is six colours: page background, text, panel surface, borders, your brand colour, and the text that sits on top of the brand colour. Everything else — the lighter and darker shades, the hover states, the shadows — is worked out from those six.
Start with a ready-made palette. There are several, each already checked so the text is readable against the background.
Six swatches, in the order Comet lists them: background, text, surface, border, brand, on-brand.
If none of the presets fit, “Custom” gives you six colour pickers. Six — not a hundred and two. Change the brand colour first; it is the one people notice.
You choose whether your site is light, dark, or follows the visitor's own device setting. You can also let visitors switch it themselves with a button.
Choose the lettering
Pick a font pairing — one typeface for headings, one for body text, already matched. There are three. Every one of them is built from lettering the visitor's own computer or phone already has, so your site downloads no font files at all.
| Pairing | How it reads |
|---|---|
| Grotesk | One clean modern sans-serif for both headings and body. Plain, current, hard to get wrong — the default. |
| Editorial | Serif headings above sans-serif body text. Slightly magazine; good when you want headings to feel written rather than typed. |
| Humanist | An older-style serif throughout. Warm and bookish, and the kindest of the three to a long page of reading. |
Why there is nothing to download
Each pairing is a short list of typefaces, best first, and the visitor's device simply uses the first one it already has — San Francisco on a Mac or iPhone, Segoe on Windows, Roboto on Android. This is a deliberate choice, not a shortcut: your words are on the screen in the very first paint, with no blank second while a file arrives and no jolt as the page re-flows around a font that turned up late.
It also means your site never asks Google or anyone else for fonts. It loads faster, it works if the visitor is behind a strict firewall, and no third party learns who visits you. And it is why the list is three good pairings rather than a thousand.
The exact letter shapes therefore differ a little between a Mac, a Windows PC and a phone. That is expected. Each pairing was picked to look right on all three rather than perfect on one at everybody else's expense.
Upload your logo and your favicon
Two pictures, both optional but both worth doing.
- Logo — appears in the header on every page. A PNG with a transparent background looks best. If you do not have one, leave it empty and Comet uses your site title as text, which is perfectly respectable.
- Favicon — the tiny picture on the browser tab, and the icon if someone saves your site to their phone's home screen. A square image, simple enough to read at the size of a fingernail. Your logo mark without the words usually works.
Drag the files onto the upload box. They are stored in the media folder on
your own host — not in your database — and Comet makes the smaller versions it needs. Files
up to 64 MB are accepted, which is far more than any logo needs.
Write your site title and description
Two short pieces of text that do more work than anything else on this page.
- Site title — the name of your site. It shows in the browser tab, in search results, and as the heading of a shared link. Use the name people actually call you.
- Description — one sentence, about 150 characters, saying what the site is for. This is the grey line underneath your name in Google results, and the preview text when someone shares your link on Facebook or WhatsApp.
Write them as a sentence a human would say out loud. “Riverside Yoga — small classes for beginners in central Newcastle, seven days a week.” Not a list of keywords.
One thing that is not a choice: the header and footer
Your header and footer are set once, here, and appear on every page. They are not building blocks you drop onto a page. This is on purpose: it is how you avoid ending up with twelve pages carrying twelve slightly different headers, which is the single most common way a small site starts to look homemade.
Check before you move on
Comet's preview panel is showing your colours, your lettering and your logo, and the settings screen has stopped showing unsaved changes.
If you now open your site's public address in a private window and it still looks like the default, that is correct and not a fault — visitors see the last version you published, and you have not published yet. That is exactly what chapter 5 is about.