CURATED · OPEN · FREE

Ryanstephen

A portfolio showcasing digital, spatial, and fluid interface design through a clean photo grid.

PortfolioMobile UIExperimentalPhotographicStudio

↓ Download design system (20 MB)Open in OpenDesign

Visit: https://www.ryanstephen.co

📦 Browse pack contents →

Identity DNA

Product DesignerPrototyperSpatial InterfacesFluid InterfacesMicrosoft

A clean, digital gallery of experimental interface work

Color

#000000Ink

#404040Ink soft

#ffffffBG

#8b8b94Muted

rgba(0,0,0,0.1)Line

Strict neutral palette that lets the project imagery dominate

Typography

humanist-sans

body12px · 400
body-large16px · 400

Spacing

4px

8px

16px

20px

24px

32px

40px

100px

Generous whitespace separates the biography from the image grid

Surfaces

sm · 10px

md · 10px

lg · 10px

pill · 999px

none

Layout

1400container

3columns

24pxgutter

768 / 1024breakpoints

Sticky left column for bio, scrolling right column for image grid

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

transition: all 0.2s ease

Pointer cursor on images and links · Standard link behavior

Components

button Simple text links (Email, Twitter, LinkedIn)
card Rounded photo thumbnails in a dense grid
hero Biography text block

Voice & Don'ts

Tone Professional, direct, understated
Headlines Simple biographical statement
CTAs Plain text links

don't use complex layouts — screenshot shows a simple sticky sidebar + scrolling grid
don't add decorative shadows — screenshot shows images with no drop shadows
don't use drop shadows on containers — screenshot shows flat image cards
don't use colorful accents — screenshot shows purely neutral black/white/gray palette
don't use decorative borders — screenshot shows borderless elements
don't use complex typography — screenshot shows simple sans-serif font at two sizes
don't use heavy background colors — screenshot shows solid white (#ffffff)
Avoid: Marketing jargon
Avoid: Buzzwords
Avoid: Emojis

Inside the pack — real screenshots

Ryanstephen — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

A minimal portfolio site for a product designer and prototyper. The design uses a clean white (#ffffff) background with black (#000000) text and gray (#8b8b94) accents for links. Typography is a simple sans-serif (humanist-sans category) at 12px for body and 16px for links. The layout features a sticky left column for biographical text and a scrolling right column containing a 3-column grid of rounded photo thumbnails (10px radius). Critical donts: do not add complex layouts, avoid drop shadows on containers, do not use colorful accents, avoid decorative borders, do not use complex typography, and do not use heavy background colors.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko