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

# JP Works — About · Design System

> Quiet editorial clarity, anchored by a personal portrait.

**Theme:** light · **Industry:** portfolio · **Source:** https://jp.works/ · **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 page pairs a concise editorial headline with a central portrait and compact biography. White space, dark type, and a small social-link cluster keep attention on the person and their work.

## North star

Keep the page nearly white and editorially sparse, using one prominent portrait and precise dark typography as its focus.

## Overview

The page uses Gallery White (#ffffff) as an almost uninterrupted canvas, letting the portrait supply the warm beige and grey tones visible in the screenshots rather than treating them as brand colours. Ink (#111111) gives the headline and links a firm editorial presence; Midtone Grey (#464646) and Soft Grey (#757575) carry supporting copy at quieter levels. The headline uses Exposure, a distinctive display face with compact, slightly tightened letterforms, while Ppneuemontreal handles the clean supporting text and social labels. A spacious two-column composition places the headline at left, a tall portrait near the centre, and social links at right. Biography copy sits beneath the image, with substantial open space before the small footer mark. The layout feels deliberately sparse: no visible cards, coloured bands, decorative borders, or prominent buttons compete with the portrait. Keep the hierarchy calm and let alignment and whitespace do the work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Near-total page canvas and the uninterrupted background across both content and footer. |
| Reading Grey | `#464646` | `--color-reading-grey` | neutral | Primary supporting biography text, providing softer contrast than the headline. |
| Editorial Ink | `#111111` | `--color-editorial-ink` | brand | Headline and social-link text; the page's strongest typographic contrast. |
| Quiet Grey | `#757575` | `--color-quiet-grey` | neutral | Secondary muted copy, used sparingly for lower-emphasis text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#111111` (Editorial Ink) · `--color-text-muted` → `#464646` (Reading Grey) · `--color-text-subtle` → `#757575` (Quiet Grey)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#111111` | `#ffffff` | 18.88:1 | AAA |
| `#464646` | `#ffffff` | 9.44:1 | AAA |
| `#757575` | `#ffffff` | 4.61:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Ppneuemontreal | `--font-body` | webfont | 400, 500 | Supporting biography, social links, and smaller interface text. | Inter |
| Exposure | `--font-display` | webfont | 400 | Large editorial opening headline. | Cormorant Garamond |

- **Ppneuemontreal:** Measured weights 400 and 500; restrained sans-serif forms, with medium weight for body copy and links.
- **Exposure:** Measured regular weight; distinctive serif display character, with tight negative tracking on the headline.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28px | 400 | 1.2 | -0.03em | — | Exposure | Opening editorial statement at the upper left. |
| h2 | 22px | 400 | 1.5 | 0 | — | Ppneuemontreal | Secondary section headings, where present. |
| body | 14px | 500 | 1.43 | 0 | — | Ppneuemontreal | Biography paragraphs beneath the portrait. |
| caption | 11px | 400 | 1.4 | 0 | — | Ppneuemontreal | Small footer copyright and low-emphasis notes. |
| link | 14px | 500 | 1.43 | 0 | — | Ppneuemontreal | Social links, including Twitter/X and LinkedIn. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 8, 24, 28, 32, 48, 60, 84, 168 px.
- Section rhythm 84px · element gap 60px · card padding — · max content width 1392px.

A spacious two-column opening composition sits within a measured page maximum width of 1392px. The headline aligns to the left, the tall portrait occupies the central column, and compact social links sit to the right. Supporting biography aligns beneath the portrait rather than spanning the full page. The section rhythm is generous, with a large open area before the small footer mark and copyright line. Keep the density low and preserve the asymmetry; do not force the content into cards or a conventional centered hero stack.

## Shape & elevation

- Shadow `lg` (other): `rgba(0, 0, 0, 0.15) 0px 5px 38px 0px`

The page is predominantly flat: white canvas, dark text, and no visible card borders or section dividers. The measured shadow is not a defining feature of the screenshot and should not be introduced as a page-wide styling device. Keep layering limited to the photograph and any small floating support control if reproducing the captured interface.

## Imagery

One large, vertically framed portrait is the defining visual asset. The subject is seated against a warm, understated studio background, with natural floor and backdrop tones. Keep the photograph rectangular and unadorned, at substantial visual scale, with no added frame or decorative treatment. Its beige and grey hues belong to the photo, not the measured brand palette.

## Components

### Editorial headline

A regular-weight Exposure statement in dark ink, aligned left and broken into short lines.

### Portrait

Large, rectangular, vertically oriented studio photograph centered between headline and social links.

### Biography

Compact Ppneuemontreal paragraphs aligned below the portrait in muted grey.

### Social links

Simple text links such as Twitter/X and LinkedIn, set in dark sans-serif without visible button backgrounds.

### Footer mark

A small centered brand mark and subtle copyright line on the white canvas.

### Measured component styles

- **Link** (“Twitter/X”): transparent background · text #111111 · radius 0px · padding 0px · 500 14px Ppneuemontreal

## Do

- Use Gallery White (#ffffff) as the dominant canvas.
- Reserve Editorial Ink (#111111) for the headline and key links.
- Set the opening statement in an editorial serif display face.
- Keep the portrait large, vertical, and visually unframed.
- Align biography copy beneath the portrait.
- Use generous whitespace to separate content from the footer.

## Don't

- Do not add bright accent colours or coloured section bands.
- Do not turn text groups into cards.
- Do not add prominent borders or decorative dividers.
- Do not stretch biography copy across the whole page.
- Do not mistake warm portrait tones for brand colours.
- Do not crowd the headline, portrait, and social links together.

## Agent prompt

Build a new page in this restrained JP Works editorial portfolio style. Use Gallery White (#ffffff) for the canvas, Editorial Ink (#111111) for the display headline and links, and Reading Grey (#464646) or Quiet Grey (#757575) for supporting copy. Set the main statement in a refined serif display face with close, intentional tracking; use a clean sans-serif for biography and interface text. Compose an asymmetrical, spacious layout with a left-aligned headline, one prominent unframed portrait near the center, and a small social-link group to the right. Place concise biography copy beneath the image. Keep the page flat and avoid cards, strong borders, gradients, and decorative colour. Leave ample open space before a minimal footer mark and copyright.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric two-column opening with left headline, central portrait, right social links, and biography beneath the image. | prominent personal introduction, direct social links | editorial serif headline, large portrait, minimal link text, open white canvas |
| 2 | footer | Minimal footer on the same white canvas, with a small centered mark and copyright text. | copyright attribution, brand sign-off | small brand mark, subtle caption text |

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