This article covers: Changing the entire site color, font, and button roundness.
This is not the backend light/dark mode (that is the top bar 'Backend Style' or Default Appearance in Basic Settings).
Backend path: Website → Website Style (/admin/settings/appearance). By default, only owners have access. The bottom bar Save Settings will write the changes; most changes on the canvas are previews (with a short delay for automatic application), refreshing will revert to the last saved appearance.
How is it different from 'Header and Footer'?
| Setting | What it Manages |
|---|---|
| Website Style (this page) | Paint: Colors, Fonts, Roundness, Density, and Shadows |
| Header and Footer | How to arrange at the entrance: Components, Menus. See Header and Footer Overview |
1. Color Combinations
Block title Color Combinations. Choose a preset that will bring in five colors at once: Primary Brand Color, Secondary Color, Page Background, Main Text, Highlight Color.
Default combination names include: Minimal Gray, Clear Blue Gray, Warm Paper Beige, Coral Ink White, Mint Fresh, Rose Gray Pink, Fog Blue Paper White.
After selecting Custom Colors, you can click the color block to open the color palette or enter #RRGGBB. Leaving it blank will use the theme package/default.
The page background of the default color palette is white; color deviations lean towards auxiliary colors/emphasis colors. If you want a dark background, please use custom colors to set the background yourself (and ensure sufficient text contrast).
Where are the brand primary color and emphasis color used?
| Color | Used in Frontend |
|---|---|
| Brand Primary Color | Buttons, links, checkmark icons, and other clickable areas |
| Emphasis Color | Decorative highlights: subtitles above block titles (for general blocks; when overlaid on photos, change to follow the light/dark text of that block for clarity), recommended labels and plan names for pricing schemes, numbers for data and countdowns, step numbers and timeline nodes, left side lines of quotes, icon frames for feature cards, etc. |
When no emphasis color is set, these areas will match the brand primary color. The emphasis color will be used for small text, so please choose a dark color that is clear on a white background; lighter colors (such as light blue, light yellow) are more suitable for auxiliary colors on the logo.
The emphasis colors for Warm Paper Beige and Mint Fresh have been darkened for better clarity in small text. Websites that previously applied these two combinations will not automatically change colors; to switch to the new emphasis colors, please click the color combination again (which will also bring back the other four colors of that combination), or in custom colors, only change the emphasis color: Warm Paper Beige #b45309, Mint Fresh #047857.
The top bar can also quickly switch color combinations (not fully synchronized with the form); still based on Save Settings.
2. Font Pairing
Font Pairing dropdown; you can select "(Do not use pairing)".
Advanced options can expand Custom Font Stack, filling in title/body fonts separately.
3. Button Appearance
Button Appearance: Square / Moderate / Rounded / Capsule feel, or Custom Value to fill in Button Corner Radius (px).
4. Appearance and Texture / Quick Apply
Quick Apply adjusts density, shadow, transition, and hover at once: Minimal Flat, Soft Standard, Emphasized Layers, or Custom Combination to expand details.
| Details | Option Concepts |
|---|---|
| Block Density | Compact / Comfortable / Loose |
| Card Shadow | None / Soft / Heavy Shadow |
| Page Transition | Only visible when actually changing pages |
| Hover Intensity | When the mouse hovers over messages / pricing cards, etc. |
| Entrance Animation | Mainly when scrolling in at desktop width; mobile and editor iframe same-page preview may not play |
How to verify
- After saving, open the front end without traces; the button color should match the brand's main color; sub-labels, price recommendation tags, etc. should match the emphasis color.
- View the comparison on mobile and desktop once each (check if the text is still clear, especially for the sub-labels in emphasis color).
- Check if the header logo still matches the new background color; if not, change the Logo.
Common Issues
| Situation | What to do |
|---|---|
| Adjusted and refreshed but returned | It's just a preview, you haven't clicked Save Settings yet. |
| Editor cannot access | Please have the owner change it. |
| Dark text on a dark background is unclear | When customizing colors, also adjust Main Text and Page Background. |
| Sub-label color is too light | The sub-label uses emphasis color, please change to a darker emphasis color. |
| Want a button to use a different color | The secondary buttons on the first screen and CTA banner can be changed individually, see Full Screen Page Editor. |