Design system

Spar reads your site's theme and saves its visual style: colors, fonts, and how buttons, inputs, cards, and badges look. Generated test variations reuse these styles so they match the rest of your site. You'll find them under Settings > Design system.

If the page says No design system data, click Refresh branding and Spar will detect your styles. This takes a few minutes, so check back later.

What you can edit

Each card has the captured values plus a preview of how they look together.

• Colors: primary, secondary, accent, background, and text.
• Typography: the heading font and body font.
• Button styles: padding, border radius, and border width, plus separate settings for the primary and secondary button and their hover states.
• Input styles: padding and borders, with separate colors for the normal and focused state.
• Card styles: background, border, shadow, padding, and margin.
• Badge styles: size, font, and colors, plus named badge types (such as a sale badge) with their own colors.

Change anything that's wrong and save with the bar at the bottom of the page. New variations use the updated values.

Refresh from your site

If you change your theme, click Refresh branding at the top of the page. Last synced shows when Spar last read your styles. Check the values once the refresh finishes.