Skip to content
Auto Genius Help Center home
Auto Genius Help Center home

Colors, Typography, and Layout Tokens

Overview

Marketplace uses design tokens to control colors, typography, and layout styling across your site. Auto Genius manages these tokens for you and applies them consistently using CSS variables.

This page describes the theme variables that are available and what they affect on your site.

Color tokens

Marketplace uses a swatch-based system.

  • Swatches are named colors.
  • Themes assign swatches to semantic roles.
  • Components reference semantic roles, not hard-coded hex values.

Base color roles

These are the defaults used across most pages:

  • Background: the page background color
  • Text: the default body text color
  • Link: the default link color
  • Heading: heading text color
  • Subheading: subheading text color
  • Border: default border color

Brand and system roles

These colors are used for primary UI actions and standard states:

  • Primary, secondary, tertiary
  • Info
  • Success
  • Warning
  • Danger
  • Error

Button roles

Button colors are defined separately so they remain readable and consistent:

  • Primary button background
  • Primary button text
  • Secondary button background
  • Secondary button text

Input and form roles

These tokens control form styling:

  • Input background
  • Input text
  • Input placeholder text
  • Input error color

Navigation roles

These tokens affect header navigation:

  • Navbar background
  • Navbar text
  • Navbar link

Aside roles

These tokens are used for experiences like side filters:

  • Aside background
  • Aside text
  • Aside link

Footer roles

These tokens control footer styling:

  • Footer background
  • Footer text
  • Footer link

Card roles

These tokens are used for cards such as vehicle cards and media cards:

  • Card background
  • Card title
  • Card text
  • Card border

What to request from Auto Genius

If you want to change site-wide colors, you typically provide:

  • Brand primary and secondary colors
  • Any required state colors
  • Example screenshots or brand guidelines

Auto Genius will map those colors into the semantic roles so they apply consistently across modules.

Typography tokens

Typography is controlled through font role slots. Each slot includes:

  • Font family
  • Font size
  • Weight
  • Line height
  • Style
  • Text transform
  • Letter spacing

Base text roles

  • Normal: the default body text
  • Label: used for labels and UI callouts
  • Info: used for supporting information text
  • Monospace: used for code-like contexts

Type scale roles

These roles create a consistent scale across headings and content:

  • Super hero
  • Hero
  • Extra large
  • Large
  • Medium
  • Small
  • Extra small

Component-specific roles

These roles ensure UI text stays consistent:

  • Button
  • Input
  • Primary navigation
  • Secondary navigation
  • Mobile bottom navigation
  • Bottom navigation for small screens

What to request from Auto Genius

If you want typography changes, you typically provide:

  • Preferred font family or brand typeface
  • Guidance for headings and body text tone
  • Any accessibility constraints for sizing and contrast

Layout and spacing tokens

Layout tokens define the spacing and sizing rhythm of the site.

Spacing and padding

Common tokens include:

  • Grid gaps between cards and modules
  • Content padding between large sections
  • Section padding on mobile and desktop
  • Header padding and navigation item padding
  • Footer padding
  • Button padding and input padding
  • Card padding variants

Borders

Border tokens control:

  • Border widths for sections, cards, buttons, and inputs
  • Border radius values for sections, cards, photos, buttons, and inputs

Shadows and focus styles

Shadow tokens control:

  • Card elevation and hover states
  • Modal and bottom sheet shadows
  • Navigation shadow on scroll
  • Input focus rings and error focus styling

Image ratios

Ratio tokens control how images crop and scale:

  • Vehicle photo carousel ratio
  • Content image ratios
  • Vehicle card photo ratio
  • Location card photo ratio

Maximum content width

A max width token controls how wide content can grow on large screens.

How these tokens affect inventory pages

The theme system applies to SRPs and VDPs.

Examples:

  • Vehicle card styling uses card tokens, spacing tokens, and typography roles.
  • Filter and aside styling uses aside tokens.
  • Buttons and form inputs use the button and input token sets.

Notes on customization

Clients do not edit token values directly. Auto Genius applies changes by:

  • Updating swatches and theme role assignments
  • Adjusting typography roles
  • Adjusting layout tokens
  • Adding small project-specific CSS overrides when needed
Powered by Plain