You’re Transfixed By
That Mesmerizing Simulacra
A Fantastical Design System Filled With Illusory Whimsy
Simulacra Loading
The Simulacra is still coming through to your dimension, and there’s many missing and unfinished pieces. Have fun exploring while The Wizard continues to bring the magic to you!
Ethos
Details about the brand
Hi there!
The design system behind One Quest is an illusory and whimsical one. Currently, it’s created using the Gutenberg Blocks editor and the Create Block Theme plugin as I learn about WordPress and build my first web experience with it. I’m familiar with building systems within Figma, Framer, and other similar tools as well. The WordPress Blocks Themes and Gutenberg editor definitely need some big improvements like true components, variants, overrides, and more, but it’d a decent starting place and works okay for now.
The concept behind it is to highlight the illusion and mimicry of digital products. It will continuously evolve with me and my brand as I keep learning and growing which will continue to deepen the illusory nature of digital products. Is anything actually real? Is everything an illusion? Who really knows…… 🧐
simulacrum
/sim-yew-lack-rum/
simulacra
plural
noun/adjective/whatever
1
something that looks like or represents something else
2
an insubstantial form or semblance of something
Inspiration
Words
Some words that inspired the theme:
Illusion, whimsy, trickster, imp, disguise, imitation
Words
One Quest is:
Whimsical, playful, fresh, vibrant, fantastical, organized, simple, minimal, systematic
One Quest is not:
Traditional, sterile, boring
Music
The lyrics that inspired the name 😍
Everything good must end
But we can live again
In the glass simulacra
Walkway Blues
M83
Walkway Blues
M83
"Everything good must end
But we can live again
In the glass simulacra"
Begin The Epic Simulacra Story
-
One Quest Story Intro
One Quest is my personal brand but it’s more than that. It’s also my digital identity and the beginning of a redefined digital experience and system.
-
One Quest Story (Part I)
Glimmer/Style?
Details about this section
Color Tokens
Loosely based on Material Design naming patterns with some modifications to match my style and system. All colors have been carefully selected by me. Currently there’s only a light theme since WordPress doesn’t support multiple color sets yet. I’m also trying to build the most minimal color system I can without restricting myself too much. It’s an experiment and I’ll keep refining.
Colors
Primary
Primary
#FFB22E
On Primary
#32F800
7.69:1 Constrast
AA
AAA
Primary Container
#FFCF98
On Primary Container
#562E00
8.18:1 Contrast
AA
AAA
Secondary
Secondary
#5706D1
On Secondary
#F1EAFD
7.62:1 Constrast
AA
AAA
Secondary Container
#D7C7F0
On Secondary Container
#3A1576
8.59:1 Contrast
AA
AAA
Tertiary
Tertiary
#9C079E
On Tertiary
#FFFFFF
WCAG Contrast
7.14:1
AA
AAA
Tertiary Container
#F3B8F4
On Tertiary Container
#6A006B
Contrast Ratio
7.1:1
AAA
Tertiary Container
#F3B8F4
On Tertiary Container
#6A006B
7.1:1*
AA
AAA
Danger/Calamity/Peril/Doom
Danger
#FF6D48
Error
#ED3C10 (Original error color)
On Danger
#1A0400
7.09:1 Constrast
AA
AAA
Danger Container
#D7C7F0
On Danger Container
#3A1576
8.59:1 Contrast
AA
AAA
Warning/Caution/Forewarning/Heed
Warning
#ED3C10 (Original error color)
On Danger
#F1EAFD
7.67:1 Constrast
AA
AAA
Danger Container
#D7C7F0
On Danger Container
#3A1576
8.59:1 Contrast
AA
AAA
Victory/Triumph
Warning
#ED3C10 (Original error color)
On Danger
#F1EAFD
7.67:1 Constrast
AA
AAA
Danger Container
#D7C7F0
On Danger Container
#3A1576
8.59:1 Contrast
AA
AAA
Surfaces
Surface Bright
Surface Bright
#FFF9F0
On Surface
#241700
16.75:1 Contrast Ratio
Surface Bright
#FFF9F0
On Surface Dim
#57482D
8.46:1 Contrast Ratio
Surface
Surface
#FFF3E3
On Surface
#241700
16.01:1 Contrast Ratio
Surface
#FFF3E3
On Surface Dim
#57482D
8.09:1 Contrast Ratio
Surface Mid
Surface Medium
#FFEEDA
On Surface
#241700
15.44:1 Contrast Ratio
Surface Medium
#FFEEDA
On Surface Dim
#57482D
7.8:1 Contrast Ratio
Surface Dark
Surface Medium
#FFE3BF
On Surface
#241700
14.18:1 Contrast Ratio
Surface Medium
#FFE3BF
On Surface Dim
#57482D
7.16:1 Contrast Ratio
*All contrast checks were done in 2025 with the WebAIM Contrast Checker found here.
Typography/Glyphs
Definitely need to tighten up this system. It’s very loosely based on Material because that’s the system I’m most familiar with, but even they don’t seem to have a super robust typography system.
Fonts?
This section could be highlighting all the fonts simply to show them all in the same space without specific scale or use cases.
Scale?
This section could highlight the fonts applied to their different default elements including scale, weight, size, etc. maybe?
Spacing & Radii
I would probably say this is based on Material Design loosely as well, but I’m not totally sure about that. Something to look into maybe.
Spacing
the spacing system of One Quest is descriptive and generally leans towards the more spacious end. We don’t use words like XS or XL to describe sizes. Instead we use this scale:
- Tiny
- Small
- Medium
- Regular
- Large
- Huge
- Massive/Ginormous
Spacing
More spacing stuff?
Radii
Radii for One Quest is one of the most unique styles. Although there may be deviances at times, the primary and default radii prioritizes a bit of playfulness. It does this through alternating corners instead of all 4 corners matching. It’s still systematic, consistent and intentional though. For example, the top left and bottom right corners are by default matching and the bottom left and top rright are also matching. This creates that playfulness. It adds a touch of whimsy and at times just a bit of an edge that might feel off but isn’t.
Radii
More radii stuff?
Components/Bits/Parts/Pieces/Artifacts
Details
Buttons
What are all the button variables to organize and display?
- Style (Tonal, Filled, Outlined?)
- Color
- Shape
- Size
- Type (standard, toggle, icon, FAB, groups, split?)
Standard Buttons
Small
Standard
Large
Icon Buttons
Primary
Small Size
Primary
Primary
Standard Size
Primary
Style
Primary
Size
Large
Detail
Primary
Huge Size
Primary