QuizForge Design System

QuizForge Design System mockup preview

Click to expand

QuizForge is a playful, competitive, and gamified design system built for quiz apps, flashcard tools, and test preparation platforms. It channels the excitement of game shows and the satisfaction of leveling up into a cohesive visual language. Bold yellow energy, electric purple accents, and refreshing cyan create an environment where learning feels like play and every correct answer triggers a dopamine hit.

Primary#EAB308

Secondary#9333EA

Tertiary#06B6D4

Surface Base#FFFFFF

Headline

Aa

Search

Body

Aa

Label

Aa

Label

Color Palette

Typography

h1Righteous · 40px · normal

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h2Righteous · 30px · normal

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h3Righteous · 24px · normal

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

h4Righteous · 20px · normal

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

bodyInter · 16px · normal

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

smInter · 14px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

xsInter · 12px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

monoSpace Mono · 14px · normal

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

QuizForge is a playful, competitive, and gamified design system built for quiz apps, flashcard tools, and test preparation platforms. It channels the excitement of game shows and the satisfaction of leveling up into a cohesive visual language. Bold yellow energy, electric purple accents, and refreshing cyan create an environment where learning feels like play and every correct answer triggers a dopamine hit.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Elevation & Depth

shadow-sm

shadow-md

shadow-lg

shadow-xl

shadow-focus

shadow-correct

shadow-wrong

Do's & Don'ts

Do

Animate answer feedback immediately -- when a user selects an answer, show a correct (green glow) or incorrect (red shake) animation within 200ms; delayed feedback kills engagement.

Make scores visually prominent -- display current score, streak count, and rank with large typography and bold color at the top of every quiz screen.

Show streak indicators -- fire/flame animations, multiplier badges, and consecutive-correct counters are core motivators; keep them always visible during play.

Use timers that inform without terrifying -- display countdown timers with a color gradient (teal to yellow to red) rather than abrupt alarm states.

Celebrate achievements -- confetti bursts, star animations, and level-up modals should mark milestones like perfect scores, completed decks, and new ranks.

Don't

Don't punish wrong answers harshly -- show the correct answer with a brief explanation rather than a stark red 'WRONG' screen; learning is the goal.

Don't hide the explanation -- after each question, provide a short rationale for the correct answer; quiz apps without explanations frustrate learners.

Don't make the timer the entire experience -- timed modes should be optional or clearly labeled; anxiety-driven UX harms learning retention.

Don't use auto-advance without warning -- if questions advance automatically after selection, show a brief pause (1-2s) so the user can read feedback.

Don't overwhelm the home screen -- present a clear 'Start Quiz' or 'Continue' action prominently; save statistics and settings for secondary tabs.

Don't neglect colorblind users -- correct/incorrect feedback must use icons (checkmark/X) in addition to green/red color changes.

Chef

License MIT

Uploaded yesterday

Version v1

File size 7.2 KB

Downloads 0

bold education light mobile-app playful

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/quizforge and implement it in my code

Don't have the MCP? Install it here