Access
Use a desktop browser (Chrome, Edge, Safari or Firefox). The editor works on a laptop screen; a wider monitor gives the preview more room.
The screen
Type a request or drop mockups
Colours · Text · Details · Fonts · Logo
updates as you change settings
Step by step
Log in
Open the editor link and enter the editor password. The dashboard loads in the preview on the right.
Make changes
Click a colour square to pick a colour, or type a hex code such as
#FFC212in the box next to it. Fonts are chosen from a menu; corner roundness is a slider.Settings tagged default are still the original creative skin. Click the × next to a setting to put it back to default.
Check every view
Use Desktop / Phone and the page menu to look at ECHO Score, Trends, Details and the other pages. Changes appear instantly but are not saved yet; a yellow dot on Save means you have unsaved changes.
Save to staging
The first time, click Save and give the look a name, e.g. "Navy option". After that, Save updates that same version. Want to try another direction without losing this one? Click Save as new… and name it. See Staging versions.
Click Open "…" ↗ to get the review link for the version that's open, and share it with anyone who needs to review it (they'll need the dashboard password).
Publish to live
When a look is approved, open it in the version picker, click Publish to live and confirm. The client site switches to that look, usually within a minute. Visitors who already have the page open see it on their next refresh.
Undo if needed
Undo last publish puts back the look that was live before. You can undo several publishes in a row. To go back to any older look, use History.
Staging versions
You can keep several looks on staging at the same time, for example "Navy option", "Warm option" and "Client round 2", and send each one to reviewers side by side.
- The yellow picker in the top bar shows which version you're editing. Choose another one to load it into the editor and preview.
- Save updates the version that's open. Save as new… keeps it and creates a new one from the current settings.
- Each version has its own review link: Open "…" ↗ opens it. The plain staging address always shows the most recently saved version.
- The × next to the picker deletes the open version. Its saves stay in History. You can keep up to 20 versions.
- Publish to live publishes the version that's open in the picker.
History
Every time you save, that save is kept, labelled with its staging version. Click History in the top bar to see the latest 40, newest first. Each one shows its name, when it was saved, a strip of its main colours and a short summary.
- Load brings a save back into the editor and preview. Then Save puts it into the open staging version, or Save as new… makes it a separate one.
- Publish sends that version straight to the live client site. Undo last publish still works afterwards.
- Latest save marks the newest save. Live now marks the one the client sees.
Dark mode
The dashboard has a dark mode as well as the normal light look. A first version, based on the current creative skin, is already built in. You can fine-tune every colour of it, and the logo, without touching the light look.
Switch the editor to Dark mode
Above the settings, click ☾ Dark mode. The preview turns dark and the colour settings now change the dark look only. Fonts, corners and layout are shared by both modes.
Fine-tune
Change any colour as usual. Settings marked default use the built-in dark look; × puts one back. Upload a Logo (dark mode) if your logo needs a light version on dark backgrounds.
Or let Ask AI do it
Drop in your dark-mode mockups and type "this is the dark mode". It measures the exact colours and fills in the dark set only. Typed requests work too: "make dark mode a bit warmer".
Turn it on for the client
Switch on Offer dark mode (top of the Dark tab), Save, then Publish to live. Visitors then get a sun/moon button in the header. On their first visit it follows their device's setting, and afterwards it remembers their choice.
Ask AI
The yellow panel at the top left takes instructions, not a conversation. Type what you want changed, or drop in mockups, and press Enter or Apply. It makes the changes, shows them in the preview, and saves them to the staging version that's open straight away. You'll see a short list of exactly what changed.
- Undo takes the change back, in the editor and on staging.
- Untick Save to staging next to Apply if you only want to try something in the preview. You can also say "just preview…" in the instruction.
- If something can't be done (layout, chart colours, font sizes), it says so in one line underneath.
From mockups
Drop a zip of mockups or JPG, PNG or WebP images onto the panel, or use + Mockups. The same kind of zip you sent for the original skin works. You can also click Import in the top bar and pick the zip; the AI starts on its own.
- Export screens at their real size, e.g. 1920 px wide for desktop, 390 px for phone. 72 ppi is fine.
- Include the screens that show the most colours: ECHO Score, Details and the password screen are a good set.
- Use flat colours where you can. The editor measures the exact colours in your images, so strong gradients or photo backgrounds make that less precise.
- Up to 12 images per request.
From a written request
Type what you want in plain words. Give hex codes and font names when they matter; otherwise the AI picks.
Driving the editor
The AI can also do the clicking for you. Mention it in the same request:
It never publishes to the live site: that's always your click.
Requests build on the current settings, so you can refine step by step: "a bit darker", "now try a lighter card colour". Shift + Enter starts a new line.
Settings reference
| Setting | What it changes | Original |
|---|---|---|
| Colours | ||
| Brand accent | Score circle, highlights, active tab, table headers, buttons | #FFC212 |
| Sidebar | Left menu background | #FFC212 |
| Sidebar text | Menu headings and items | #4D4D4D |
| Text on accent | Text that sits on the accent colour (score, tab labels, table headers) | #FFFFFF |
| Page background | Behind everything, including the "notch" of the active menu item | #FFFFFF |
| Card background | Panels and boxes | #F2F2F2 |
| Text | ||
| Headings | Page, card and header titles | #666666 |
| Body text | Normal text, notes, table text | #4D4D4D |
| Secondary text | Descriptions and small print | #7E7F81 |
| Big numbers | The E / C / H / O pillar scores | #656565 |
| Details | ||
| Header line | Thin line under the top header | #FFDF88 |
| Positive | Ticks and "good" badges | #3FA535 |
| Negative | Crosses and "risk" badges | #D2262E |
| Corner roundness | Card corners, 0–40 px (phone scales down automatically) | 26 px |
| Lines & borders | Dividers, card and table borders | #E2E2E2 |
| Layout | ||
| Header stays on screen | Logo and title stay at the top while the page scrolls | On |
| Menu stays on screen | Left menu stays put while the page scrolls; it scrolls by itself if it's taller than the window (desktop) | On |
| Menu width | Width of the left menu, 190–300 px (desktop) | 212 px |
| Logo size | Header logo width, 100–280 px (phone scales down) | 190 px |
| Max content width | Widest the page content gets on big screens, 1100–2400 px | 1700 px |
| Dark mode | ||
| Offer dark mode | Shows the light / dark switch to visitors of the live site | Off |
| Dark-mode colours | Every colour above has its own dark-mode value, set in the editor's Dark tab | Built-in dark look |
| Logo (dark mode) | Logo used on dark backgrounds | Lightened Ripple8 logo |
| Fonts & logo | ||
| Body font | All text. Choose from 21 Google Fonts | Plus Jakarta Sans |
| Heading font | Titles and big numbers | Plus Jakarta Sans |
| Logo | Replaces the Ripple8 logo in the header, on the password screen and in the sidebar footer (shown in a single dark tone there). PNG, JPG, WebP or SVG, up to 300 KB | Ripple8 logo |
Fonts available: Plus Jakarta Sans, Poppins, Inter, Montserrat, DM Sans, Manrope, Nunito Sans, Outfit, Raleway, Work Sans, Open Sans, Roboto, Source Sans 3, Rubik, Barlow, Archivo, Lato, Space Grotesk, Playfair Display, Merriweather, Lora.
What it can and can't change
You can change
- All the colours listed above
- Body and heading fonts
- Corner roundness
- Small layout changes: header and menu staying on screen, menu width, logo size, content width
- The logo
Still needs the dev team
- Bigger layout changes: moving, adding or removing sections
- Chart and AI-platform colours (Claude, Gemini, ChatGPT…), fixed so the data stays readable
- Font sizes and spacing
- Wording on the dashboard
For anything in the right-hand list, send a mockup or annotated screenshot to the account team as before.
Questions
- I saved, but the staging site still shows the old look.
- Refresh the page. Changes can take up to a minute to reach everyone, and a browser may show its stored copy for a moment first.
- "Open staging" asks for a password.
- That's the dashboard password, which is different from the editor password. Both were sent to you separately.
- How do I start over?
- Click Reset all. The preview goes straight back to the original creative skin; Save if you want to keep it. Nothing changes on the live site until you publish.
- Can I keep different versions?
- Yes. Use Staging versions to keep several looks side by side, each with its own review link, and every save is also kept in History. To keep a copy on your own computer as well, Export downloads the current settings as a small file, and Import loads one back.
- The AI result isn't quite right.
- Click Undo AI change, or keep the result and adjust single settings by hand. You can also reply with a follow-up request, such as "sidebar should be the darker navy from the mockup".
- Text has become hard to read.
- Check the text setting that sits on that colour: Text on accent for the score and tabs, Sidebar text for the menu. Aim for strong contrast between text and its background.
- I changed the font but the preview looks the same for a second.
- The new font downloads the first time you pick it. The preview switches as soon as it arrives, usually within a second or two.
- "Wrong password" or the editor logs me out.
- Passwords are case-sensitive. If it still fails, ask the account team; the password may have been changed.