Colours, fonts and logo
Each theme comes with its own colours and fonts. You can change them to match your company, and add your logo. This page is for website editors (admins with Website editor switched on).
- Open Website → Theme, then press Change colours, fonts and logo.
- Under Colour sets, press one of the theme’s ready-made sets. The preview changes straight away.
- Or change single colours under Or pick each colour (see the table below).
- Check Easy to read? Every line must be green.
- Under Fonts, choose the Heading and text fonts. The first one is the theme’s own (theme default).
- Your changes save by themselves and stay a draft. Press Publish to show them on your live site.
On a phone, switch between Colours and fonts and Preview at the top of the page.
To go back to the theme’s own colours and fonts, press Reset to the theme’s colours.
The words on your main button, and the colours of your main and WhatsApp buttons, are set on a different screen: see Site settings (the Buttons card).
Add your logo and get matching colours
Section titled “Add your logo and get matching colours”- Under Logo, choose or upload your logo.
- Press Suggest colours from my logo. theopsroom picks a colour set that matches your logo. The suggestion is always easy to read.
- Change any colour you don’t like, then Publish.
Easy to read?
Section titled “Easy to read?”theopsroom checks five kinds of text against what’s behind them. Each line shows Easy to read (green) or Hard to read (red) and a number such as 4.5 : 1. The number must be 4.5 or more.
A site with any red line can’t be published. Press Fix it for me on a red line: theopsroom changes that text colour to the nearest colour that is easy to read.
Design a logo with AI
Section titled “Design a logo with AI”No logo yet? Let AI draw one. It is on the same page, under Design a logo with AI.
- Check Company name. It starts as your site’s name. Change it if you like.
- Optional: under Describe your logo, type your idea, for example “a parcel and an arrow, modern, navy”.
- Optional: press a style. Press it again to switch it off. Line is thin outlines. Solid is filled shapes. Rounded is soft and friendly. Monogram uses your initials.
- Press Design my logo. You can leave the page while it works. The options wait for you.
- You get 4 options. Each one shows a version for light pages and a version for dark pages.
- Press Use this logo under the one you like.
The AI draws the symbol. Your company name is written in your site’s heading font.
If your theme can be recoloured, you also see Also use its colours for my site. Leave it ticked to match your site’s colours to the logo. Untick it to keep your colours.
Use this logo adds two pictures to your Pictures (light and dark), and sets your logo and your logo on dark pages in the draft. Nothing is live until you press Publish.
Good to know:
- You get 5 logo rounds a day. A new round replaces the options from the last one.
- Options are kept for 24 hours. After that, design again.
- Short names work best — a long name gets very small in the header.
- A name in Chinese or Thai gives a logo with a symbol only, with no name next to it. Emoji in the name are left out.
- Your site must have a free spot in Pictures. Delete pictures you no longer use if it is full.
| What you see | Why | What to do |
|---|---|---|
| “Enter your company name (1 to 60 characters).” | The name is empty or too long. | Type a shorter name. |
| “The AI is already working on your site.” | Another AI job is running. | Wait a minute, then try again. |
| “You’ve used today’s 5 logo rounds. Try again tomorrow.” | You used all 5 rounds today. | Come back tomorrow. |
| “The AI couldn’t draw a logo from that. Try other words.” | The AI had nothing usable. | Change your description or style. |
| “The AI didn’t answer. Try again.” or “The AI stopped. Try again.” | The AI was slow or failed. | Press Design my logo again. |
| “Those options have expired. Design again.” | They are more than 24 hours old. | Design again. |
| “This website already has … pictures. Delete some you no longer use, then try again.” | Pictures is full. | Delete some pictures, then press Use this logo. |
| “Wait for your changes to save, then try again.” | Your edits are still saving. | Wait a moment, then try again. |
What each colour means
Section titled “What each colour means”| Colour | Where it shows |
|---|---|
| Page background | Behind the page. |
| Cards and panels | Behind cards and boxes. |
| Main text | Headings and most words. |
| Secondary text | Smaller, quieter words. |
| Buttons and highlights | Buttons and highlighted parts of the page. |
| Text on buttons | Words on buttons and highlights. |
| Small labels | Small labels, such as the short words above some headings. |
| Lines and borders | Lines between parts of the page. |
If something goes wrong
Section titled “If something goes wrong”| What you see | Why | What to do |
|---|---|---|
| “Some text would be hard to read: …. Change the colours, or press Fix it for me.” | A line under Easy to read? is red. | Press Fix it for me on each red line, then Publish again. |
| Suggest colours from my logo greyed out, “Add a logo to get colours that match it.” | There’s no logo yet. | Add a logo under Logo first. |
| “We couldn’t read colours from that logo” | The logo file couldn’t be read. | Try another copy of the logo (PNG or JPEG). |
| “This theme is no longer available — pick one on Theme.” | Your theme was taken out of the list. | Press Open Theme and pick another theme. |