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.
Download .md

License MIT
Uploaded yesterday
Version v1
File size 7.2 KB
Downloads 0

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