DESIGN
The stuff we're made of

A little
rough around
the edges.

The living Mister Pop design system. Real components, shared colors, and a little paper under everything.

PALETTE

Three colors.
Plenty of personality.

Blue leads in the dark. Coral warms the light. Yellow marks the things worth noticing. Change the theme above to compare.

Select a swatch to copy its current hex value.

SURFACES

Paper with
a past life.

Crinkles, grain, and torn edges. These are the same assets and paper components used across the site.

themeMISTER POP / PAPER STOCK
texture="theme"
theme-accentMISTER POP / PAPER STOCK
texture="theme-accent"
blackMISTER POP / PAPER STOCK
texture="black"
whiteMISTER POP / PAPER STOCK
texture="white"
blueMISTER POP / PAPER STOCK
texture="blue"
redMISTER POP / PAPER STOCK
texture="red"
checkerboardMISTER POP / PAPER STOCK
texture="checkerboard"
dotsMISTER POP / PAPER STOCK
texture="dots"
halftoneMISTER POP / PAPER STOCK
texture="halftone"
EMPHASIS

Stick something
worth saying.

A yellow strip, uneven edges, level lettering. The shape varies; the voice stays recognizable.

Your way inNow & nextA crowd can share a secretPOPMake it yours →
TRAVELER

A little character.
One continuous journey.

He starts as a dot, slips out of the type, and finds his next place as you scroll. The traveler connects the page without asking you to stop exploring.

Give him somewhere to go.

Mark a period, a word, or an empty graphic with data-pop-target. He visits those stops in document order, borrowing their color, size, and shape. Refresh for a different route.

Let the page have depth.

Use data-pop-traveler-content on the content region and data-pop-traveler-foreground on cards or controls that should sit in front. He can peek through the gaps between them.

Motion is optional.

Reduced-motion preferences and unsupported browsers keep the original content in place. The moving copy is decorative; the real words stay in the document for assistive technology.

TYPOGRAPHY

Loud headlines.
Clear conversations.

Display / tight and heavy

Something
is nearby.

Label / uppercase

The world has another layer. Go find it.

Body text gives the idea room to breathe. Keep it direct, human, and easy to read.

Details / metadata / tokens
COMPONENTS

Built to be used.

Shared @mr/pop components, rendered here directly. Changes in the package appear here too.

Actions

Navigation symbols

explorer
experience
place
drop
asset
partner
blog
marketplace
moderation
overview
PLAYGROUND

Try another layer.

Explore the web paper component, then inspect the data shape used by native WorldSheet textures. The native sheet supplies its own geometry.

Make room for wonder

Your world.
Your surface.

Paper today. Something entirely different tomorrow.