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

# Nathan Riley · Design System

> A quiet editorial frame for immersive visual work

**Theme:** light · **Industry:** portfolio · **Source:** https://www.nrly.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._

Nathan Riley’s portfolio pairs a restrained monochrome interface with an expansive mosaic of atmospheric creative work. Oversized editorial lettering gives the identity a focal point, while the surrounding imagery carries most of the colour and visual energy.

## North star

Keep the interface quiet and typographic so a varied, art-directed image mosaic remains the main event.

## Overview

The page uses a white canvas and dark charcoal typography as a quiet frame for a dense, image-led portfolio. A modular mosaic fills the viewport, mixing varied rectangular crops with narrow white gutters; a blush-toned central tile gives the oversized italic name a distinct stage. The measured palette is intentionally spare: #ffffff supports the canvas and #393939 carries the text and inverse surfaces. The varied pinks, greens, stone tones and blues visible in the screenshot belong to the portfolio imagery, not a broader interface palette. Typography contrasts a very large, light display treatment with compact uppercase supporting copy. The layout feels spacious in its overall rhythm despite the packed gallery, with generous separation between major content groups. Small pill-shaped contact and social links sit over a portfolio image near the lower edge, keeping navigation secondary to the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Canvas and narrow gutters between portfolio images; it also appears in small pill links and measured muted text. |
| Soft Charcoal | `#393939` | `--color-soft-charcoal` | neutral | Primary typography and inverse surface colour, including compact text on the blush identity tile. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#393939` (Soft Charcoal) · `--color-text` → `#393939` (Soft Charcoal) · `--color-text-muted` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#393939` | `#ffffff` | 11.55:1 | AAA |
| `#ffffff` | `#393939` | 11.55:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| font2 | `--font-body` | webfont | 400 | Uppercase supporting copy, profile link, and contact or social labels. | Montserrat |
| font1 | `--font-display` | webfont | 300 | Oversized display name on the central identity tile. | Cormorant Garamond |

- **font1:** Light weight; very large italic editorial lettering with tight negative tracking.
- **font2:** Regular weight; compact uppercase text with tight tracking and short line-height.

### Type scale — Custom (ratio ≈ 17.593, base 13.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 237.5px | 300 | 0.8 | -0.04em | — | font1 | Large editorial name anchoring the central portfolio tile. |
| body | 13.5px | 400 | 1.1 | -0.025em | uppercase | font2 | Uppercase biography, profile link, and compact contact labels. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 2, 16, 23, 29, 38 px.
- Section rhythm 242px · element gap — · card padding — · max content width —.

Build the page around a full-width, multi-column mosaic of rectangular image tiles, with the screenshot’s varied tile widths and heights creating an irregular rhythm rather than a uniform card grid. Place the name and short biography inside a central tile, not in a separate conventional hero band. Keep slim white gutters visible between images. Contact and social links can overlay a lower image tile. The composition is visually dense, while the measured section rhythm is spacious; do not invent a max-width value or fixed spacing system beyond the measured data.

## Shape & elevation

- No box shadows measured: the page is flat.

The measured system records no shadows, gradients, or component radii. Keep the interface essentially flat: separate images with white gutters rather than cards, outlines, or drop shadows. Let the mosaic’s crop, contrast, and overlap-like alignment create depth; the rounded contact pills are visible in the screenshot but their measured radius is unavailable.

## Imagery

Use a varied portfolio of atmospheric interiors, landscapes, architecture, objects, and 3D compositions. Images are presented as edge-to-edge rectangular tiles with differing crop and aspect ratios, separated by white gutters. The screenshot has a soft, textured, slightly grainy finish and subdued natural colours; treat these as artwork-specific, not as required interface colours.

## Components

### Portfolio mosaic

A tightly composed field of image tiles with varied rectangular dimensions and thin white gutters; artwork supplies nearly all colour.

### Identity tile

A blush-toned image tile featuring the oversized italic Nathan Riley name, compact uppercase introduction, and a profile link.

### Contact and social pills

Small white pill-shaped labels placed over a lower portfolio image, including email and social destinations.

### Supporting copy

Short uppercase biography text set in compact lines beneath the display name.

### Profile link

A concise uppercase profile call-to-action within the identity tile, visually subordinate to the name.

### Measured component styles

- **Link** (“EMAIL HEY@NRLY.CO HEY@NRLY.CO EMAIL”): transparent background · radius 0px · padding 0px 16px · 400 16px font2 · uppercase

## Do

- Let portfolio imagery dominate the first viewport.
- Use #ffffff for the canvas and image gutters.
- Use #393939 for clear, restrained interface text.
- Reserve oversized type for the identity tile.
- Keep supporting copy uppercase and compact.
- Vary tile proportions to create an editorial mosaic.

## Don't

- Do not turn the mosaic into uniform product cards.
- Do not add interface colours beyond the measured palette.
- Do not treat artwork colours as brand colours.
- Do not add shadows or decorative borders.
- Do not let navigation compete with the gallery.
- Do not invent unmeasured spacing or radius values.

## Agent prompt

Create a new creative portfolio page in Nathan Riley’s image-led editorial style. Use #ffffff as the canvas and as the narrow separators between a varied mosaic of rectangular portfolio images; use #393939 for interface typography. Build the page around artwork, not a conventional hero: arrange images in an irregular grid of different widths and heights, with a distinctive identity tile containing a large, light italic display name, compact uppercase introduction, and understated profile link. Use a restrained font pairing: an elegant editorial serif for display and a clean sans serif for small uppercase labels. Keep contact and social links compact and secondary, optionally overlaid on an image. Preserve a flat presentation without measured shadows or gradients, and do not turn the artwork’s colours into new interface tokens.

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