---
name: Ryanstephen
description: "This site is worth including as an excellent example of a portfolio that uses minimal UI to let the experimental work speak for itself."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  secondary: "#404040"
  neutral: "#8b8b94"
  line: "rgba(0,0,0,0.1)"

typography:
  body:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"
  body-large:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 10px
  md: 10px
  lg: 10px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 20px
  xl: 24px
  2xl: 32px
  3xl: 40px

---

## Overview

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

*A clean, digital gallery of experimental interface work*

## Colors

Strict neutral palette that lets the project imagery dominate

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#404040`)** — uses `ink-soft` token
- **Muted (`#8b8b94`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

## Layout

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

*Rhythm:* Generous whitespace separates the biography from the image grid

## Elevation & Depth

- Borders: none

## Shapes

- `sm`: 10px
- `md`: 10px
- `lg`: 10px
- `pill`: 999px

## Components

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

## Do's and Don'ts

**Don't:**
- 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)

---

## System Prompt (paste into AI agent)

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