Colors and styling in Vero2

Vero2 uses a global palette with direct color controls for components and blocks. Existing Vero color scheme setup instructions do not transfer directly to this system.

Set the global palette

Open Theme settings → Colors and configure the palette. Its background and foreground values supply defaults for page colors and many component controls. Then review Page layout for the page background and Typography for the page text color.

Start with the palette before adjusting individual components. Settings that remain connected to a palette value can follow later palette changes; an explicit color override should be checked separately.

Configure components

Review these groups in Theme settings:

• Buttons: primary and secondary backgrounds, text, borders, and hover colors.
• Input fields: backgrounds, text, and borders.
• Variant pickers: regular and selected option colors.
• Drawers: background, text, and border colors.
• Popovers and modals: background, text, border, and shadow controls.
• Badges: sale and sold-out colors.

Hover color fallbacks use palette contrast calculations. Test your chosen colors with real labels, images, transparent headers, selected variants, and keyboard focus rather than relying on the editor swatch alone.

Style blocks and brands

Sections and blocks can expose their own background, border, text, and surface controls. Use those to create local treatments after the global palette is established. Hat Lab and the Patch designer also have their own appearance controls.

Multi-brand stores should verify the header, brand badges, announcement bar, main footer, and footer utilities for every brand context. Existing Vero guides describe color scheme fields; do not assume those scheme IDs style Vero2. Ask 424 Solutions to review brand styling if a setting has no equivalent in your installed build.

Check readability

Test text over images, pale borders, disabled inputs, selected choices, and hover/focus states on desktop and mobile. Check long content and your store's active languages. If a color looks unexpected, inspect the component override before changing the global palette.