Bits

Components, Component Variants, Spacing, Radii

Spacing

Radii

Components

Variants

Spacing

The spacing system of One Quest is descriptive and generally leans towards the more spacious end. It’s one of the most basic things in the simulacra as it’s based on the very common 8px/1rem scale. I love this scale and things it’s both easy to use and very pleasing aesthetically. We don’t use words like XS or XL to describe sizes. Instead we use this scale:

Tiny
Small
Medium
Regular
Large
Huge

Examples/Details

Example 1

Example 2

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.

Intro

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 matching diagonal corners rather than all 4 corners matching radii. This creates that playfulness while still being systematic, consistent and intentional. It adds a touch of whimsy and at times just a bit of an edge that might make you think…”huh”. I hope you’ll enjoy those moments of curiosity and wondering.

Examples/Details

Example 1

Example 2

Bits

What are all the bit types I use so far? Which ones can I create better fantasy/whimsy names for?

Buttons
Icon Buttons
Button Group
Chips?
Badges
Cards?
Images (or is this more a “style” thing?)
Toolbars
Toggle/Switch/???
Scrolls/Dialog/Banner/???

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

For button styles I’d like to use words like “simple”, “bold” or “vibrant” instead of things like text and filled (I think it matches the branding and descriptors I want to use better, but I’ll keep exploring).

Bold?

Button