Skip to main content
Uplup Logo
CustomizationQuiz Builder

Quiz Styling & Themes – Customize Your Quiz | Uplup

Create visually stunning quizzes that match your brand. Uplup ships with 24 preset themes, an AI Theme Studio for generating custom themes from a prompt, plus complete control over colors, fonts, and backgrounds.

Table of Contents

Accessing Design Settings

  1. Open your quiz in the builder
  2. In the left sidebar, click the Design accordion to expand it
  3. Use Choose Theme to open the Theme Library, or adjust colors, fonts, and layout directly

Theme Library

Uplup includes 24 preset themes covering everything from playful trivia looks to corporate assessments. Open the Theme Library by clicking Choose Theme inside the Design accordion.

All 24 Preset Themes

  • Default, Vibrant Pink, Professional Blue, Nature Green, Minimal Gray, Warm Orange
  • Midnight Dark, Sunset Gradient, Ocean Breeze, Royal Purple, Cherry Blossom, Forest Moss
  • Tech Neon, Vintage Cream, Ice Crystal, Autumn Harvest, Candy Shop, Corporate Slate
  • Tropical Paradise, Lavender Dreams, Golden Hour, Deep Space, Rose Garden, Mint Fresh

Theme Categories

The left rail of the Theme Library lets you filter by category:

  • All Themes, Artistic, Bold & Vibrant, Classic, Corporate
  • Dark Themes, Education, Elegant, Futuristic, Luxury
  • Material Design, Minimal, Modern, Nature Inspired, Pastel Dreams
  • Playful, Retro & Vintage, Seasonal, Surveys & Research

AI Theme Studio

Need a specific look? Open the Theme Library and click Build Theme with AI. Describe what you want (for example, “calm forest green for a wellness quiz” or “high-contrast neon for a tech assessment”) and Uplup generates a complete, ready-to-apply theme. You can also save your current styling as a reusable custom theme via Save Current Style.

Color Customization

The Design accordion exposes the core color slots you’ll edit most often:

  • Background – the quiz canvas color
  • Text – question and answer text
  • Button and Button Text – CTA styling
  • Accent – progress bar, highlights, focus states

Feedback Colors

Quizzes also let you customize correct/incorrect feedback colors so right answers feel rewarding and wrong answers feel clear without being harsh.

  • Correct: background highlight, checkmark, border
  • Incorrect: background highlight, X mark, border

Typography

  • Font family – pick from a curated set of Google Fonts (Inter is the default)
  • Text size – slider for base body size
  • Weight – regular, medium, or bold

Recommended Fonts for Quizzes

  • Trivia / Fun: Poppins, Nunito, Quicksand
  • Professional: Inter, Open Sans, Roboto
  • Educational: Lato, Source Sans Pro

Backgrounds

Background Types

  • Color – single solid color background, picked from the color picker.
  • Photo – upload a custom photo as the background.

Those are the two background options exposed in the Style tab. Patterns and gradients are not separate background types in the styling controls (some preset themes ship with their own gradient look, but it is not a user-selectable background type).

Image Background Tips

  • Use subtle images that don’t distract from questions
  • Add a color overlay for readability
  • Ensure text contrast is sufficient (WCAG AA minimum)

Quiz-Specific Styling

Layout

Switch between three layout modes in the Design accordion: Card (boxed question card), Clean (minimal, no card), and Split (image on one side, question on the other). Button shape can be set to Round or Square.

Progress Bar

  • Style: bar, steps, or percentage text
  • Color: match accent or pick a custom color
  • Position: top or bottom

Answer Options

  • Display Style: Classic, Card, or Button
  • Hover effects: color change, scale, shadow

Timer Display

  • Position: top corner or alongside the progress bar
  • Style: a single Show timer toggle (no style options)
  • Warning colors: change color when time runs low

Results Page

  • Score display: large, prominent styling
  • Pass / Fail: custom colors for each outcome

Related Articles