---
title: "Ryan Stephen design system"
variant: extended
source: https://ryanstephen.co/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/ryanstephen-co)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ryan Stephen · Design System

> A quiet canvas for a hands-on design practice

**Theme:** light · **Industry:** portfolio · **Source:** https://ryanstephen.co/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A restrained portfolio homepage pairs a brief designer introduction and contact links with a dense, three-column collection of visual work. The white canvas and subdued typography keep attention on the varied project imagery.

## North star

Keep the interface quiet and let a well-aligned, image-led portfolio carry the visual personality.

## Overview

The page uses a pure white canvas as a quiet frame for the portfolio rather than introducing decorative section bands or prominent brand accents. Dark gray body text carries the designer introduction, while a softer gray distinguishes the contact links without turning them into buttons. Typography is system-ui throughout, set at the measured 16px size and medium weight; compact line spacing makes the introductory paragraph feel like a concise caption. The desktop composition places that introduction in a narrow left column beside a three-column gallery, aligning text and imagery at the top. A generous measured section gap and comfortable density preserve open space around the otherwise active collection. Media tiles have softly rounded corners, while the work itself supplies the page’s color: interface screens, objects, environments, and experimental visuals remain photographic and varied. These image colors are project content, not additional brand palette colors.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Page canvas and uninterrupted background around the introduction and portfolio gallery. |
| Soft Ink | `#404040` | `--color-soft-ink` | neutral | Primary text color for the designer introduction and other dark text. |
| Quiet Gray | `#8b8b94` | `--color-quiet-gray` | neutral | Muted contact-link text, including Email, Twitter, and LinkedIn. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#404040` (Soft Ink) · `--color-text-muted` → `#8b8b94` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#8b8b94` | `#ffffff` | 3.38:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| system-ui | `--font-body` | system | 500 | Body copy and contact links. | Inter |

- **system-ui:** Measured at 16px, weight 500, 1.2 line height, and neutral tracking; sentence case.

### Type scale — Major Third (ratio ≈ 1.25, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 16px | 500 | 1.2 | 0 | — | system-ui | Designer introduction and supporting portfolio text. |
| link | 16px | 500 | 1.2 | 0 | — | system-ui | Inline contact links below the introduction. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 15, 20, 32, 40, 100 px.
- Section rhythm 40px · element gap 20px · card padding — · max content width —.

The desktop page is a single, open composition: a narrow introduction column sits to the left of a three-column media grid. The text and first gallery row share a top alignment, with no visible navigation or boxed content sections. Images repeat in consistent rows, creating a compact gallery beside the short introduction. Measured spacing uses a 4px base unit, with 20px element gaps and 40px section rhythm; the overall density reads comfortable. No maximum content width was measured, so avoid imposing a decorative container treatment.

## Shape & elevation

- Radius: media `10px` · xs `10px`
- No box shadows measured: the page is flat.

The page is visually flat: measured data reports no shadows, and the screenshot shows no elevated cards or layered panels. White space separates content, while the project images themselves define the grid. Media corners use the measured 10px radius; no borders or surface treatments are needed.

## Imagery

The gallery is built from rounded-corner project images, predominantly photographs of phones, interface prototypes, objects, and environments. Images retain their individual color and content rather than following one uniform filter or art direction. The screenshot’s brighter colors belong to the portfolio work, not the site palette; preserve varied project imagery against the white page.

## Components

### Introduction

A compact paragraph in #404040 introduces the designer, practice, location, and current role. It occupies the left column beside the gallery.

### Contact links

Email, Twitter, and LinkedIn appear as understated inline text links in #8b8b94 beneath the introduction, without button backgrounds.

### Portfolio gallery

A three-column sequence of project images sits to the right of the introduction and continues down the page.

### Media tile

Each image is presented directly on the white canvas with the measured 10px media radius, without a card border or shadow.

### Measured component styles

- **Link** (“Email”): transparent background · text #8b8b94 · radius 0px · padding 0px · 500 16px system-ui

## Do

- Use white as the page-wide canvas.
- Keep introductory copy short and left-aligned.
- Place contact links directly below the introduction.
- Build the work area as a consistent three-column image grid.
- Use the measured 10px radius on media.
- Let each project image retain its own colors.

## Don't

- Do not add prominent colored section backgrounds.
- Do not turn simple contact links into filled buttons.
- Do not add shadows or card borders.
- Do not treat image colors as brand palette colors.
- Do not add oversized headings absent from the reference.
- Do not crowd the gallery with decorative labels.

## Agent prompt

Build a new portfolio page in Ryan Stephen’s quiet, image-led style. Use Gallery White (#ffffff) as the canvas, Soft Ink (#404040) for primary copy, and Quiet Gray (#8b8b94) for understated text links. Set body and link text in system-ui, 16px, weight 500, with 1.2 line height. On desktop, align a concise introduction and its inline contact links in a left column beside a three-column gallery; keep the gallery visually dominant and let it continue down the page. Use comfortable spacing, including the measured 20px element gap and 40px section rhythm where appropriate. Give media the measured 10px corner radius. Avoid borders, shadows, colored panels, and button styling for simple links. Preserve the natural variety of project imagery without turning its colors into interface accents.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | gallery | Short introduction and contact links in a left column, alongside a three-column image gallery. | Concise designer introduction, Inline contact links, Scrollable work collection | White canvas, Three-column media grid, Rounded image corners |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/ryanstephen-co