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

# Josh Warner · Design System

> A quiet dark canvas for vivid, crafted work

**Theme:** dark · **Industry:** portfolio · **Source:** https://joshwarner.design/ · **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._

Josh Warner’s portfolio pairs a restrained, near-black interface with large, atmospheric project imagery. Clear typographic hierarchy and understated controls keep attention on the work across design, branding, and art.

## North star

Keep the interface nearly black and typographically quiet so large, carefully framed artwork remains the strongest visual voice.

## Overview

The page uses a near-black canvas (#0f0f0f) throughout, with charcoal panels (#1a1a1a) separating the portrait-led navigation and full-width project visuals from the surrounding dark field. Bright text (#f0f0f0) carries the main message and concise labels; muted gray (#b8b8b8) softens secondary lines, including the second line of the hero statement. The measured type system uses Inter Display Regular at a consistent regular weight, with generous scale contrast between headline and body. Layout favors broad, image-led bands rather than boxed cards: a large hero composition introduces the designer, followed by stacked case-study imagery and a compact four-column skills overview. Spacing creates breathing room without decorative separators. Small pill-shaped navigation and availability treatments sit over or beside the work, while a light hiring button provides a crisp, high-contrast action. The warm gold lettering and earthy photographic tones belong to the hero artwork, not the interface palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Black | `#0f0f0f` | `--color-studio-black` | brand | Continuous page canvas behind the hero, case studies, skills overview, and footer. |
| Soft Chalk | `#f0f0f0` | `--color-soft-chalk` | neutral | Primary text and the light hiring button fill. |
| Quiet Gray | `#b8b8b8` | `--color-quiet-gray` | neutral | Muted secondary text, including subdued lines in the hero and supporting copy. |
| Charcoal Layer | `#1a1a1a` | `--color-charcoal-layer` | surface | Dark pill and surface treatments for navigation and the compact identity link. |

### Semantic aliases

`--color-canvas` → `#0f0f0f` (Studio Black) · `--color-surface` → `#1a1a1a` (Charcoal Layer) · `--color-text` → `#f0f0f0` (Soft Chalk) · `--color-text-muted` → `#b8b8b8` (Quiet Gray)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f0f0f0` | `#0f0f0f` | 16.82:1 | AAA |
| `#f0f0f0` | `#1a1a1a` | 15.27:1 | AAA |
| `#b8b8b8` | `#0f0f0f` | 9.66:1 | AAA |
| `#b8b8b8` | `#1a1a1a` | 8.77:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Display Regular | `--font-body` | webfont | 400 | Page-wide interface and content typography, from hero statement to project labels and skills copy. | Inter |

- **Inter Display Regular:** Regular weight throughout; sentence case with restrained, slightly open body tracking.

### Type scale — Augmented Fourth (ratio ≈ 1.414, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 400 | 1 | 0 | — | Inter Display Regular | Primary hero statement introducing product design and art. |
| h2 | 32px | 400 | 1.2 | 0 | — | Inter Display Regular | Secondary headings for project and skills content. |
| body | 20px | 400 | 1.25 | 0.04em | — | Inter Display Regular | Introductory copy, project descriptions, and skills explanations. |
| caption | 16px | 400 | 1.56 | 0.04em | — | Inter Display Regular | Compact navigation, project labels, availability, and supporting metadata. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 60 px.
- Section rhythm 60px · element gap 10px · card padding — · max content width 1416px.

The page uses a broad, centered composition with a measured maximum width of 1416px and full-bleed media that nearly spans the viewport. The hero places its statement beside or over the artwork, with navigation distributed across the top edge and a short introduction below. Case studies then form a single-column vertical sequence of large image bands. A later skills overview switches to four text columns. Comfortable spacing and a measured 60px section gap separate major content groups; smaller gaps keep compact labels and controls together.

## Shape & elevation

- Radius: button `8px` · media `4px` · link `9999px` · xs `4px` · sm `8px` · pill `9999px`
- Shadow `md` (section): `rgba(0, 0, 0, 0.5) 0px 1px 10px -2px`
- Shadow `md-2` (link, other): `rgba(0, 0, 0, 0.16) 0px 0px 10px 0px`

The page is mostly flat: dark canvas and image bands provide the structure, without prominent borders or card outlines. Small pill controls sit above the canvas with restrained shadowing. Preserve depth through image composition and subtle layering, not stacks of UI panels or heavy shadows.

## Imagery

Large, cinematic project images dominate: the hero combines sculptural driftwood, metallic lettering, and a dark studio scene, while case studies show app and dashboard mockups in atmospheric settings. Imagery spans nearly the full content width and keeps its own photographic color and contrast. Warm browns and golds are prominent inside the artwork but should not become interface accents.

## Components

### Top navigation

Compact charcoal pills sit across the top: a portrait and name at left, section links near center, and a contact control at right.

### Hero artwork

A full-width, dark studio composition anchors the first viewport, paired with a concise two-line statement and small availability indicator.

### Hiring action

Small light button uses #f0f0f0 fill, 8px radius, and compact padding; keep its footprint modest beside the intro copy.

### Case-study bands

Four large, single-column image sections carry small case-study and coming-soon labels over photographic project mockups.

### Skills overview

A brief introduction precedes four aligned text columns covering product design, graphic design, type design, and 3D art.

### Identity link

A small rounded charcoal link combines a portrait with the designer’s name and uses a soft, restrained shadow.

### Measured component styles

- **Primary button** (“Hire me”): background #f0f0f0 · text #0000ee · radius 8px · padding 6px 14px · 400 12px sans-serif
- **Link** (“Projects”): transparent background · text #0000ee · radius 40px · padding 4px 16px · 400 12px sans-serif

## Do

- Use #0f0f0f as the dominant page canvas.
- Let large project imagery lead each major section.
- Use #f0f0f0 for primary text and the hiring action.
- Reserve #b8b8b8 for secondary copy.
- Keep navigation and metadata compact and pill-shaped.
- Use regular-weight Inter-style typography with clear scale contrast.

## Don't

- Do not turn warm image colors into interface accents.
- Do not add heavy card borders or stacked panel treatments.
- Do not crowd the hero artwork with competing controls.
- Do not use bold display typography where regular weight is measured.
- Do not break the project sequence into a dense card grid.
- Do not introduce gradients or extra palette colors.

## Agent prompt

Build a designer-portfolio page that follows Josh Warner’s restrained, image-led visual language. Use Studio Black (#0f0f0f) as the continuous canvas, Soft Chalk (#f0f0f0) for primary text and the hiring action, Quiet Gray (#b8b8b8) for secondary copy, and Charcoal Layer (#1a1a1a) for subtle navigation surfaces. Set type in regular-weight Inter or a close substitute, with a clear headline-to-caption hierarchy. Place compact pill navigation above a cinematic, wide hero image; follow it with a short intro, vertically stacked full-width project imagery, and a four-column skills overview. Keep interface decoration sparse, corners softly rounded, and spacing comfortable. Preserve colors inside supplied artwork rather than borrowing them for controls. Avoid heavy borders, gradients, and dense card layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Top pill navigation over a full-width hero composition, with statement, availability, and short intro beneath. | section navigation, availability indicator, hire CTA | dark canvas, large cinematic image, floating pill controls, light button |
| 2 | product-showcase | Single-column, wide case-study image with small labels overlaid near the upper edge. | case-study preview, coming-soon status | full-width media, compact overlay labels, dark framing |
| 3 | product-showcase | Single-column showcase centered on a wide desktop display mockup. | case-study preview, coming-soon status | full-width media, compact overlay labels, dark framing |
| 4 | product-showcase | Single-column, wide photographic image featuring a handheld mobile interface. | case-study preview, coming-soon status | full-width media, compact overlay labels, light photographic background |
| 5 | product-showcase | Single-column, wide warm-toned image with a centered phone mockup. | case-study preview, coming-soon status | full-width media, compact overlay labels, warm artwork |
| 6 | footer | Dark, spacious closing area with a short intro, hiring link, and four columns of skills copy. | hire CTA, skills overview | four-column text layout, muted supporting copy, open dark canvas |

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