New brand colours and fonts across a Breakdance or Oxygen site (beta)
Change the site-wide colours, heading and body fonts and button style in the Breakdance or Oxygen 6 global settings, with screenshots before and after.
- Difficulty
- Intermediate
- Time
- about 20 min
- Works with
- Breakdance, Oxygen 6
My site is built with [Breakdance or Oxygen]. Show me its global settings: the colours, the heading and body fonts and the button style. Change them to [brand colours, e.g. #2B4C3F for the brand colour and buttons, #FAF6EF for the background] and [fonts, e.g. Lora for headings and Inter for text]. Leave everything else as it is. Before you change anything, take screenshots of [pages, e.g. the home page and a product page], show me the old and new values side by side and remind me that this changes every page at once. After my approval, take the same screenshots again.
Already connected?
If SAR is already in your AI app, this is enough:
Change the [Breakdance or Oxygen] global colours to [colours] and fonts to [fonts], with screenshots before and after.
What happens
- The AI app reads the design system: global colours, typography, buttons and containers, plus the variables and classes that may use them.
- It takes screenshots of the pages you named as they are now, and shows you each old value next to the new one.
- It changes only the settings you named; the rest stay as they are. Fonts are set by the names the builder knows them by.
- Global settings have no draft: the change reaches every page at once, so it is approved in SAR with your password. The builder keeps its own revision, and the CSS that depends on the settings is rebuilt.
- It clears the site's caches and takes the same screenshots again so you can compare. The change can be undone for 30 days.
Approvals involved
Worked out from the tools this recipe uses.
wordpress_get_breakdance_design_systemBreakdance or Oxygen design systemNonesar_screenshot_pageScreenshot a pageNonewordpress_save_breakdance_global_settingsChange Breakdance or Oxygen global settingsApproval and passwordwordpress_clear_cacheClear cachesNone
What you get
Your new colours and fonts on every page, with before and after screenshots to compare. Open the builder once to confirm.
Related recipes
- Design & builders · about 25 minA new Breakdance or Oxygen landing page, built as a draft (beta)Describe the page and get it as a draft made of Breakdance's own elements, styled for desktop, tablet and phone, with a preview link before it goes live.
- Design & builders · about 25 minAdd a pricing section to a Breakdance or Oxygen page (beta)Add a three-plan pricing section to a live Breakdance or Oxygen 6 page, built from the site's own elements in a draft copy you preview first.
- Design & builders · about 15 minReorder sections and change button texts on a Breakdance or Oxygen page (beta)Move sections up or down and rename buttons on a live Breakdance or Oxygen 6 page, element by element, in a draft copy you preview before it goes live.
Try it on your own site
Install the plugin, add SAR to your AI app and paste the prompt. Free to start.