QuestUI Design System

QuestUI Design System mockup preview
Click to expand

QuestUI is a fantasy-inspired, ornate, RPG-styled design system built for RPG game interfaces and fantasy gaming platforms. Rich golds, deep reds, and royal purples evoke the grandeur of medieval kingdoms and enchanted realms. Every element carries a sense of weight and craftsmanship, from the decorative serif headlines to the warm golden glows that frame interactive components.

Primary Gold#CA8A04
Secondary Deep Red#991B1B
Tertiary Royal Purple#581C87
Background#1A0F0A
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayCinzel · 40px · Bold

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

H1Cinzel · 32px · Bold

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

H2Cinzel · 24px · SemiBold

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

H3Cinzel · 20px · SemiBold

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

H4Cinzel · 16px · Regular

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

Body LGSpectral · 18px · Regular

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

BodySpectral · 16px · Regular

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

Body SMSpectral · 14px · Regular

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

CaptionSpectral · 12px · Medium

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

CodeFira Code · 14px · Regular

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

Spacing

Base: 8px

QuestUI is a fantasy-inspired, ornate, RPG-styled design system built for RPG game interfaces and fantasy gaming platforms. Rich golds, deep reds, and royal purples evoke the grandeur of medieval kingdoms and enchanted realms. Every element carries a sense of weight and craftsmanship, from the decorative serif headlines to the warm golden glows that frame interactive components.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

FilterFilter ActiveStatus SuccessStatus WarningStatus Error

Elevation & Depth

sm
DEFAULT
md
lg
glow

Do's & Don'ts

Do

Use Cinzel for all headings and UI labels to maintain the medieval, ornate character
Apply the gold glow shadow to interactive elements in their active/selected state for a magical feel
Use the dark brown palette (#1A0F0A, #2C1A10, #3D2517) for layered depth -- never pure black
Leverage Royal Purple (#581C87) sparingly for rare, legendary, or magical elements
Add top-border accents in gold to signify important cards or quest headers
Use uppercase letter-spaced text on chips and small labels for an inscribed, carved quality

Don't

Use modern, flat design patterns; QuestUI thrives on texture, borders, and layered surfaces
Mix in sans-serif fonts; the dual-serif stack (Cinzel + Spectral) is essential to the fantasy tone
Use bright white (#FFFFFF) for text; #F5E6D3 parchment color ensures thematic consistency
Over-animate UI transitions; subtle fades (300ms) are preferred to maintain gravitas
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.4 KB
Downloads 1
bold dark gaming playful premium

Use with MCP

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

Don't have the MCP? Install it here