Style Settings

Customising the visual appearance of your checkout — colours, font, and border radius.

Preset Styles

Preset styles fill all settings with a single click. Individual changes can be made on top of a preset.

Style	Description
Default	Blue-grey palette with rounded corners. Verkkokurssikassa's default appearance.
Neutral	Black-and-white, bold palette without rounded corners.

Asetus	Tyyppi	Kuvaus
Font	Select	The typeface used across the entire checkout.
Border radius	Slider	The corner rounding radius of elements in rems. 0 = sharp corners, 1.5 = fully rounded.

Each colour can be set to a custom value or reset to the preset's default.

Colour	Purpose
Background	The checkout's main background colour.
Background dark	Alternating background colour, e.g. in the sidebar area.
Border	The border colour of fields, cards, and dividers.
Foreground	The primary text colour.
Primary	The main colour for buttons and highlights.
Primary foreground	Text on top of the primary colour, e.g. in buttons.
Secondary	Background colour for secondary elements.
Secondary foreground	Text on top of the secondary colour.
Accent	Colour for hover states and highlights.
Accent foreground	Text on top of the accent colour.
Muted	Secondary background colour, e.g. in tables.
Muted foreground	Secondary text colour, e.g. descriptions and supporting text.
Card	Background colour of card elements.
Card foreground	Text on top of cards.
Green	Colour for success states, such as confirmations.
Green foreground	Text on top of the green colour.
Destructive	Colour for error messages and destructive actions.