A complete quiz application design system — from splash screen to results review. Purple-to-pink gradient identity, white floating cards on lavender backgrounds, large question numbering, color-coded answer states, and a full timer system. Every screen a user sees during a quiz flow, fully designed.
What Is Quiz App UI?
Quiz App UI is a complete design system for timed, scored quiz applications. It covers every screen a user encounters — from the brand splash through mode selection, quiz information, active questions with timers, completion screens, and final results review. Every design decision is optimized for one condition: the user is under time pressure and needs to focus.
The style name in the design community is "Quiz App UI" or "Assessment App Design" — a well-established pattern used by Kahoot, Quizlet, and countless educational SaaS products. The defining visual identity is the purple-to-pink gradient paired with white floating cards on a soft lavender background.
The Vibe
Focused intensity. Vibrant and clean.
The gradient communicates energy and urgency without anxiety. The white cards create cognitive separation — when the question is on the card, the brain focuses on the card. The large question number (01/08) tells users exactly where they are. The timer is always visible but never intrusive. Every element is where users expect it, every time.
Screen System
Splash (Screen 1)
A full-gradient brand moment. No interaction required — just the logo on the gradient. Auto-transitions in 1.5 seconds. Sets the color expectation for the entire app.
Mode Select (Screen 2)
The first real decision. Two mode cards (or more) presented as selectable tiles. One is pre-selected (highlighted with the brand border). A Continue button advances when a selection is made.
Quiz Info (Screen 3)
A summary screen before the pressure begins. Shows total questions, total possible score, and time settings. The START button is prominent. This is the last moment of calm before the timer starts.
Active Question (Screen 4)
The most important screen. Gradient background signals "you're in the quiz now." The white card holds everything. Question number is large (40-48px) to provide immediate orientation. Timer is top-right, always visible. Answer options are generously sized for easy clicking/tapping.
Completion / Time Up (Screens 6 & 7)
Minimal screens. One icon, one message, one button. The icon changes based on outcome: checkmark for completion, stopwatch for timeout. Both lead to the same results screen.
Results Review (Screen 5)
The most complex screen. Shows aggregate score at top, then every question reviewed with correct/wrong states. Correct answers are green, wrong answers are pink. The user can see exactly what they got right and where they failed. Retry button bottom-right.
Design Rules (Deep Dive)
The Gradient Has Two Jobs
On the splash and question screens, the gradient is the background — it creates the "quiz in progress" atmosphere. On buttons, it is the action signal — every gradient element is clickable. This dual role works because the gradient is always full-bleed on backgrounds and always button-shaped on CTAs. There is no ambiguity.
Answer Option Design
Answer options are the most interacted-with element in the quiz. They need to be: large enough to tap on mobile (minimum 48px height), clearly differentiated when selected, and immediately resetable when a new option is chosen. The letter label (A., B., C.) provides quick visual anchoring. The border-only selected state (no background fill during active quiz) keeps the focus on reading, not on visual confirmation.
The Question Number as Psychological Tool
The large 01 with a smaller /08 is not just a progress indicator — it is a psychological anchor. Users who see 01/08 feel differently than users who see a progress bar at 12%. The numbered format communicates: "this is manageable, there are exactly 8 questions." It reduces anxiety and increases perceived control.
Timer Placement and States
The timer must be visible at all times during the quiz but must never become the primary focus. Top-right of the question card is the canonical position — close enough to notice peripherally, far enough not to distract. The three-state color system (purple → pink → red) gives users a traffic-light warning system that works subliminally before they consciously check the time.