Ideas made
tangible.
Design, craft, and a healthy
dose of curiosity.
PRSN / DESIGN SYSTEM / 01
A little structure.
A lot of
The quiet layer around a world of ideas.
Two ways to see it. One shared language for everything I make.
01 / THE LIVING SYSTEM
Make yourself at home.
Try a different feeling
prsn / studio
Live previewIdeas made
PLAY / 01
↗Design Prix
TYPE WITH CHARACTER↗
Aa 123
DM SansRegular / Medium
Quiet modeLess movement. Same possibility.
A space for design, craft, and possibility.
YOUR IDEAS, IN GOOD COMPANY.
THE SIGNATURE DETAILS
A little light. A lot of character.
Light that feels alive.
Glass you want to touch.
01 / LIQUID GLASS
Light follows the journey64%
A lens. A reflection. A little light.
A flowing reflection, a single soft edge, and the original luminous glow. Reserved for moments you can touch.
02 / AVATAR & CONTACT
A person behind
the pixels.
Tap the avatar. Say hello.
A small introduction.
A portrait avatar opens an acrylic contact card with a role and introduction, email, LinkedIn, a résumé, and a one-click copy action.
PRESENCE / SIX EXPLORATIONS
Good company. Anywhere.
A pointer with a person attached.
Six ways to make it your own.
Sample collaborators · Visual mockups, not live presence.
Choose Preview motion to see them float.
Brand gradients
Daylight: teal → cyan. After hours: cyan → live green.
Paul Parson · Design leadership. Hands-on craft.
--prsn-accent-gradientText accents use a separate contrast gradient. Daylight pairs deep teal #07505A with forest teal #145B50 so small text remains readable on light scene backgrounds. After hours retains cyan to live green.
--prsn-accent-text-gradient02 / FOUNDATIONS
Depth in every light.
Warm neutrals create depth.
Color earns its place.
Space to think
An 8px rhythm, with 4px for the finer things.
Soft around the edges
A familiar shape at every scale.
12 / Control
16 / Card
24 / Canvas
∞ / Pill
FROM THE WORKBENCH
Real paints.
Real tokens.
Five pigments, mixed to the system.
The same lime lives on the devices.
Obsidian and graphite ground After hours. Teal carries Daylight, cyan carries After hours, and live green marks the physical controls. The bottle labels are shorthand for the CSS tokens below.
03 / TYPOGRAPHY
Say less. Mean more.
DM Sans for UI and body. DM Serif Display for room welcomes.
Geist Mono for metadata.
ROOM WELCOME / 400
Welcome to the Studio.
DISPLAY / 64 · 500
Room for possibility.
HEADING / 48 · 500
A practice in motion.
TITLE / 24 · 500
Little experiments. Lasting ideas.
BODY / 16 · 400
A portfolio is a place to explore. Keep the words clear,
the controls familiar, and the work at the center.
LABEL / 11 · 400
SELECTED WORK / DESIGN · CRAFT · POSSIBILITY
CODE / 13 · 400
--prsn-bg: #171717;04 / COMPONENTS
The useful little things.
Real controls. Shared styles.
Go ahead, press something.
Actions
01One primary action per moment. Always a clear next step.
Navigation
02Human experiences.
Product and experience design, with people at the center.
Play as exploration.
Four independent games. Four little worlds to explore.
A practice shaped by curiosity.
Design, craft, and the possibilities in between.
Inputs & choices
03Feedback & states
04Ready to explore◷ In progress! Needs attention
Color supports a message. It never carries it alone.
Disclosure
05A little more context
Reveal detail when it helps. Let the work lead, then make room for the story behind it.
How should motion feel?
Quick to acknowledge, soft to settle. Every interaction also works with reduced motion.
Dialogs & empty states
06Room for the next idea.
Every experiment starts somewhere.
ROOM CONTROLS
A place for each control.
Camera and Settings
Room settings
Selected views share a backplate and accent icon. Settings opens 12px above the toolbar. Gentle Motion follows you across the site, and Device tilt appears on compatible devices.
Explore menus
Workbench rows highlight physical objects on hover or keyboard focus. Office project rows use company icons. In portrait up to 800px wide, the shared header opens its navigation from a circular Menu button.
08 / IN THE ROOM
Let the world do the talking.
A quiet interface.
A scene with something to say.
prsn / studioEnter the studio ↗
A SPACE FOR WHAT COMES NEXTCome see what’s
Explore the arcade ↗Come see what’s
taking shape.
01 / ANCHORKeep navigation in predictable places.
02 / CONTRASTUse scene-appropriate text color and reserve acrylic for controls and panels.
03 / RESTRAINTSave the color for the work itself.
09 / THE WAY WE MAKE
A shared system.
Room for personality.
Quiet surfaces. Clear words. Playful details.
Useful motion. A generous amount of space.
prsn — design notes⌘
# A shared language for the portfolio
design / Daylight & After hours
canvas / Ivory or charcoal
voice / Curious. Clear. Human.
One system. Plenty of possibility.
Read DESIGN.md, then make something worth exploring.