# Match your quiz to your brand

> Choose a starting look, your theme's font and your colors, so the quiz feels like part of your store.

Source: https://help.attravo.com/product-quiz/articles/match-your-quiz-to-your-brand
Updated: 2026-10-06

A quiz that looks like your store feels trustworthy, and shoppers finish what they trust. Each quiz has its own look, set in its **Style** section, and the live preview shows every change.

## Start from a preset

1. Open the quiz and select **Style**.
2. Under **Theme**, choose a **Preset**: **Modern light**, **Modern dark**, **Minimal** or **Editorial**.

![Theme, with Preset highlighted, then Font, Or type a font family and Corner radius](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/26c6b449-14c5-4b56-862b-ad70599c7b2b/style-1-theme-50c35c09fc.webp#w=1342&h=900)

Picking a preset replaces the quiz's colors, font and corners with the preset's. Change any of them afterwards.

![Switching presets and watching the preview restyle](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/26c6b449-14c5-4b56-862b-ad70599c7b2b/style-3-presets-ea666d3a3f.mp4#w=2400&h=1800)

## Choose the font and corners

| Setting | What it does |
| --- | --- |
| **Font** | **Match my theme (recommended)**, your theme's own fonts, or a common web font such as Inter, Poppins or Playfair Display. |
| **Or type a font family** | Any font your theme already loads. Blank matches your theme. |
| **Corner radius** | How rounded the quiz card, answers and buttons are, from 0 to 40 pixels. |

New quizzes start with Inter. Choose **Match my theme** to use the font your store already uses.

## Set the colors

Under **Colors**, select a swatch or type a color code.

![Colors: Background, Text, Headings, Accent, Buttons, Button text, Button shadow, Borders, Highlight and Highlighted text](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/26c6b449-14c5-4b56-862b-ad70599c7b2b/style-2-colors-d9d468eb62.webp#w=1342&h=1428)

| Color | Where it shows |
| --- | --- |
| **Background** | Behind the quiz and its answers. |
| **Text** | Answers and body text. |
| **Headings** | Questions and results headings. Empty matches **Text**. |
| **Accent** | The progress bar, picked answers and focus. |
| **Buttons** and **Button text** | The main buttons. |
| **Button shadow** | A hard shadow behind buttons, for a raised look. |
| **Borders** | Around answers, fields and cards. |
| **Highlight** | The marker behind words you wrap in double equals signs. |
| **Highlighted text** | The color of highlighted words. Set it for a solid marker, such as white text on your accent. |

Colors that show **Default** follow the quiz's other colors. **Reset to default** puts one back.

## Set a brand color for new quizzes

1. Open **Settings** in the app.
2. Under **Brand**, set **Brand color**, then select **Save**.

![Brand, with Brand color highlighted beside a sample question](https://xprvgpfulbcxrftgyppu.supabase.co/storage/v1/object/public/help-media/5d8df30e-32a3-4311-b03c-158adc08841b/26c6b449-14c5-4b56-862b-ad70599c7b2b/style-0-brand-color-87493b4437.webp#w=2028&h=808)

New quizzes use it for their accent and buttons. Quizzes you already have keep their own colors.

## On phones

Quizzes fit any screen. On phones, answers stack to fit, the email step's image moves above the form, and a step-by-step set's total stays pinned to the bottom. Use **Phone** in the live preview to check. See [What shoppers see](https://help.attravo.com/product-quiz/articles/what-shoppers-see.md).

For the full-page quiz, step-by-step results and education boxes, see [Style full-page quizzes and results](https://help.attravo.com/product-quiz/articles/style-full-page-quizzes-and-results.md).