Styling

The Styling card controls the colours and button radius of the white label's frontend. Colours are stored on the white label's settings.colors object as RGB values and applied throughout the application as CSS variables. Any colour left empty falls back to the Harmoney default.

A live Samples preview on the right of the card shows buttons, links, chips, toggle switches and status messages rendered with the current colours, so you can see the effect before saving.

Setting a colour

Each colour has a square swatch. Click it to open the colour picker (RGB; transparency is disabled). A ? in the swatch means the colour is unset and the Harmoney default is in use. The × next to a swatch clears the colour back to that default. Recently used colours are remembered as presets in the picker.

Accessibility (colour contrast)

Harmoney checks each colour's contrast against the colours it is shown on top of. When a colour does not reach the minimum WCAG AA non-text ratio of 3:1, an error icon appears next to it; hovering the icon shows the confronted colours and their measured contrast ratio.

Level	Minimum ratio	Applies to
AA non-text / AA large text	3:1	UI components, graphical objects, large text
AA normal text	4.5:1	Normal body text
AAA large text	4.5:1	Large text (enhanced)
AAA normal text	7:1	Normal text (enhanced)

Colour reference

Base

Field	Styles
primary	Primary brand colour
secondary	Secondary brand colour
text	Default text colour
backgroundFill	Page background fill

Buttons

There are three button types — primary, secondary and tertiary — each with a background, text and border colour, in both a normal and a hover state. The field path is buttons.<type>.<part>.<state>.

Field pattern	Styles
buttons.<type>.background.<state>	Button fill
buttons.<type>.text.<state>	Button label
buttons.<type>.border.<state>	Button border

For example, buttons.primary.background.hover is the primary button's fill colour while hovered.

Links

Field	Styles
links.normal	Link colour
links.hover	Link colour on hover

Header

Field	Styles
header.fill	Header background
header.text	Header text
header.border	Header border / separator line

Sidebar

Field	Styles
sidebar.primary	Sidebar background
sidebar.text	Sidebar text
sidebar.register	Sidebar register section
sidebar.activeFlowstep.primary	Active flow step background
sidebar.activeFlowstep.text	Active flow step text

Status messages

Field	Styles
statusMessages.info.border	Info status-message border
statusMessages.generic.border	Generic status-message border

Button radius

Field	Styles
radius	Border radius applied to buttons. A free-text CSS value, e.g. 4px. Cleared with the × button.

Actions

The card footer provides the following actions:

Action	Effect
Save	Persists the colours and reloads the page so the changes take effect.
Undo	Reverts unsaved changes back to the last saved colours.
Reset	Resets all colours to the Harmoney system defaults.
Copy settings	Copies the current colours as JSON to the clipboard.
Import settings	Opens a modal where you can paste a colours JSON and apply it.