Applies to: Core, Advanced, Enterprise
The Quote & Cut colour settings control the main palette used by the frontend quote form.
You can find these settings from:
Quote & Cut → Styles → Plugin Colour Palette
Available colour settings #
Quote & Cut includes colour settings for:
- Primary Accent.
- Secondary Accent.
- Background.
- Card Background.
- Primary Text.
- Secondary Text.
- Border Colour.
- Success Colour.
- Danger Colour.
- Preview Effect Colour.
Primary Accent #
The Primary Accent colour is used for important actions, highlights, and key UI accents.
It commonly affects items such as:
- Main action buttons.
- Active highlights.
- Important visual accents.
Default value:
#ff7618
Secondary Accent #
The Secondary Accent colour is used for secondary actions and supporting UI accents.
Default value:
#2d3748
Background #
The Background colour controls the overall background used by the Quote & Cut frontend UI.
Default value:
#f4f7f6
Card Background #
The Card Background colour controls panel and card backgrounds.
Default value:
#ffffff
Primary Text #
The Primary Text colour controls main headings and body text.
Default value:
#1a202c
Secondary Text #
The Secondary Text colour controls hints, descriptions, captions, and supporting labels.
Default value:
#4a5568
Border Colour #
The Border Colour controls borders and dividers.
Default value:
#e2e8f0
Success Colour #
The Success Colour is used for success states and positive status messages.
Default value:
#38a169
Danger Colour #
The Danger Colour is used for errors, warnings, and problem states.
Default value:
#e53e3e
Preview Effect Colour #
The Preview Effect Colour is used by the animated part preview effect while a price calculation is running.
Leave this blank if you want the preview effect to use the Primary Accent colour.
Hover colours #
Quote & Cut automatically creates hover colours from your selected palette.
These hover colours are generated by making the relevant colour slightly darker.
You do not need to set separate hover colours manually.
Choosing a good palette #
For best results:
- Use a strong Primary Accent for main actions.
- Keep Card Background readable against the page Background.
- Make sure Primary Text has strong contrast.
- Use Secondary Text for helper copy, not important warnings.
- Use a clear Danger Colour for errors.
- Use a clear Success Colour for completed states.
Accessibility tip #
Check that text is easy to read against the background colours you choose.
Avoid low-contrast combinations, such as pale grey text on a white card or bright text on a bright background.
Saving colours #
After changing colours, click:
Save Styles
Then check the live preview and the frontend quote form.
Continue to: Customising Typography.
