How Themes Work

Overview

Marketplace themes are a design token system that controls the look and feel of your site. A theme defines your colors, typography, spacing, borders, shadows, and image ratios.

Themes are managed by the Auto Genius team. Your team does not edit the underlying theme document directly. This keeps the site consistent and prevents styling changes from breaking key experiences like inventory pages.

How a theme reaches your website

When a visitor loads your site, Marketplace resolves your project’s theme and injects it into the page before content renders.

At a high level:

1. Your project is identified by the domain being requested.
2. Marketplace loads the theme tokens for that project.
3. The tokens are compiled into CSS custom properties (CSS variables).
4. Those variables are injected into the page head.
5. All site components read from the variables.

This is why a theme update can change the look of the entire site consistently.

The theme system in three layers

1) Swatches (your color palette)

Swatches are the base color palette. A swatch is a named color that can be reused.

Swatches are classified into groups such as:

• Primary and secondary brand colors
• Light and dark shades
• Accent and state colors

2) Theme (your design tokens)

A theme assigns swatches to semantic roles such as background, text, buttons, navigation, and cards.

It also defines non-color tokens such as:

• Typography roles
• Spacing and padding values
• Border widths and border radii
• Shadows
• Image aspect ratios
• Max content width

3) Project theme assignment

A project can have one or more theme assignments.

Common assignment types include:

• Default: the primary theme applied to all traffic
• Override: a complete replacement theme for a specific scenario
• Variant: a percentage-based theme variant for testing

Projects can also apply a small CSS override layer for precise adjustments without changing the base theme.

What changes when a theme is updated

When Auto Genius updates your theme, the changes apply across the site consistently because components read from the same variables.

Examples of changes that can be made through themes:

• Brand colors and UI state colors
• Button shapes and spacing
• Card styling on inventory pages
• Typography scale across headings, body text, navigation, and buttons
• Layout spacing and maximum content width

Why Marketplace uses a token system

A token system makes design consistent, scalable, and maintainable.

It also protects critical pages like SRPs and VDPs from one-off styling changes that can cause readability, accessibility, or conversion issues.