# Ryanstephen · Design system migration spec

> Source: https://www.ryanstephen.co  ·  Curated by OpenDesign  ·  en

> This site is worth including as an excellent example of a portfolio that uses minimal UI to let the experimental work speak for itself.

## 1. Identity DNA

The Ryan Stephen portfolio operates like a clean, digital gallery, where the architecture of the interface is designed to disappear. Its strict minimalism ensures the experimental interface work itself remains the singular focus of the viewer's attention.

**One-liner:** A portfolio showcasing digital, spatial, and fluid interface design through a clean photo grid.
**Keywords:** Product Designer · Prototyper · Spatial Interfaces · Fluid Interfaces · Microsoft
**Analogy:** A clean, digital gallery of experimental interface work

## 2. Color

The color system is a study in restraint, using a monochromatic palette of white, black, and a single functional gray. This strict neutral hierarchy ensures the project imagery is the only source of visual complexity.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#404040` | secondary text |
| `--muted` | `#8b8b94` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Strict neutral palette that lets the project imagery dominate

The principle is clear: the interface provides the frame, not the artwork.

## 3. Typography

Typography is handled with a singular, humanist-sans voice, applied at a minimal two-tier scale. The type serves a purely informational role, with no decorative flourishes to compete with the photographic grid.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 12px | 1.6 | 400 | 0 | Main biography text |
| body-large | 16px | 1.6 | 400 | 0 | Link text |

## 4. Spacing

Generous whitespace establishes a deliberate rhythm, creating a clear visual separation between the biographical introduction and the dense project grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 20 / 24 / 32 / 40 / 100 px
- **Rhythm:** Generous whitespace separates the biography from the image grid

## 5. Surfaces

Surfaces are defined by absence, with no shadows or borders applied to any element. The cards are flat, rounded rectangles, relying on spacing and the background color to create separation.

- **Radius:** sm 10px · md 10px · lg 10px · pill 999px
- **Borders:** none

## 6. Layout

The layout skeleton is a two-column structure with a fixed anchor point. A sticky left column holds the biographical core, while a three-column grid on the right scrolls independently through the project work.

- **Container max:** 1400px
- **Paragraph max:** 300px
- **Grid:** 3 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Sticky left column for bio, scrolling right column for image grid

## 7. Motion & Interaction

Motion is treated as a subtle affordance rather than a feature. The system uses only brief, smooth CSS transitions to acknowledge hover states without adding unnecessary ceremony to the interface.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - transition: all 0.2s ease

- **Hover:** Pointer cursor on images and links
- **Click:** Standard link behavior
- **Transition:** All properties transition smoothly
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is professional and direct, mirroring the visual understatement. Headlines are simple biographical statements, and calls to action are plain text links, avoiding all marketing jargon.

- **Tone:** Professional, direct, understated
- **Headline style:** Simple biographical statement
- **CTA style:** Plain text links
- **Avoid:** Marketing jargon / Buzzwords / Emojis

### Don'ts
- ❌ 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)

The system deliberately forgoes complex layouts, decorative elements, and colorful accents to maintain its gallery-like purity.

## System Prompt (paste into AI tool)

```
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.
```
