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

# jun.works · Design System

> Expressive typography, restrained canvas, vivid work.

**Theme:** light · **Industry:** portfolio · **Source:** https://jun.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 pared-back portfolio pairs oversized black typography and outlined pill links with a spacious white canvas. Color enters primarily through richly art-directed project imagery, keeping the designer’s work at the center.

## North star

Keep the interface strictly black and white, using oversized tight-set type and open space to frame vivid, varied portfolio work.

## Overview

The page uses a strict white-and-black interface: white is the uninterrupted canvas, while black carries the logo, oversized introduction, links, headings and pill outlines. The measured palette contains only #ffffff and #000000; the many colors visible lower on the page belong to project artwork and should not be promoted into interface colors. A single Standard webfont family is used in large, regular-weight text, with tight negative tracking and compact line spacing that make the introduction feel like an editorial statement. The layout stays mostly left-aligned and open, then becomes image-led in the project portfolio, where variable image sizes and generous white gaps preserve each project’s distinct art direction. Rounded outlined pills organize contact and category links, while black-filled section labels punctuate otherwise unboxed content. There are no shadows or decorative gradients; typography, hairline-like outlines, whitespace and the work itself establish hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | The continuous page canvas and the whitespace separating biography, metadata, tags and project imagery. |
| Ink | `#000000` | `--color-ink` | neutral | Logo, large text, links, section-label fills and the strong outlines around contact and topic pills. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Ink) · `--color-border` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Standard | `--font-body` | webfont | 400 | Site-wide display, body, captions, buttons and links. | Inter |

- **Standard:** Regular weight throughout; tight negative tracking and compact line spacing. Use mixed case for prose and labels.

### Type scale — Minor Third (ratio ≈ 1.193, base 54.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 65px | 400 | 1.12 | -0.045em | — | Standard | Oversized opening biography and primary introductory statement. |
| body | 54.5px | 400 | 1.12 | -0.045em | — | Standard | Project descriptions, biography copy and service or client details. |
| caption | 45.5px | 400 | 1.12 | -0.054em | — | Standard | Compact supporting labels, credits and image-related details. |
| button | 54.5px | 400 | 1.15 | -0.045em | — | Standard | Large text inside outlined contact and social pills. |
| link | 54.5px | 400 | 1.12 | -0.045em | — | Standard | Prominent linked text for social profiles, tags and navigation. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 3, 5, 6, 9, 13, 18, 19, 26, 27, 45 px.
- Section rhythm 45px · element gap — · card padding — · max content width 1388px.

The page is predominantly a single, left-aligned column on a white canvas, with a wide measured maximum content width. The introduction spans much of the viewport; contact links sit below it, followed by a two-column services-and-clients area and a separate recognition list. Topic pills form a loose wrapping row. Project content continues as a long editorial feed with mixed image widths and generous gaps rather than uniform cards. Keep the section rhythm open and comfortable.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface is flat: measured data reports no shadows or gradients. Use the white canvas and black typography for the primary hierarchy. Rounded outlined pills and occasional black-filled labels supply the visible component edges; project images sit directly in the page flow, separated by whitespace rather than elevated cards.

## Imagery

Project imagery is the main source of color and includes identity systems, packaging, print, digital work and campaign applications. Images range from bright illustrated album artwork to vivid blue branding, photography and mockups. Preserve the individual artwork’s colors and aspect ratios; use varied, deliberate placement rather than adding a shared color treatment or uniform card frame.

## Components

### Wordmark and menu

Place the jun.works™ wordmark at the upper left and a simple three-line black menu icon at the upper right.

### Introductory biography

Set the designer bio as large, regular black text with tight tracking, compact leading and a wide line measure.

### Contact and social pills

Use white-filled, black-outlined rounded pills with black text for the email and social links.

### Section labels

Mark sections such as Services, Recognition and Projects with compact black-filled pills and white text.

### Topic tags

Present creative disciplines as individually outlined, rounded text links that wrap naturally across lines.

### Project feed

Pair project names and descriptions with art-directed images of varied widths, maintaining generous white separation.

### Measured component styles

- **Primary button** (“#creative”): transparent background · text #000000 · border 4px solid #000000 · radius 129.6px · padding 5.2px 18.1px 0px 19.4px · 400 54.432px Standard
- **Link** (“jun.works™”): transparent background · text #000000 · radius 0px · padding 0px · 400 54.432px Standard

## Do

- Keep the interface palette to #ffffff and #000000.
- Let project artwork provide its own color.
- Use large regular-weight typography with tight tracking.
- Align editorial copy predominantly to the left.
- Use outlined rounded pills for contact and topic links.
- Separate portfolio images with generous white space.

## Don't

- Do not add interface accent colors sampled from project images.
- Do not introduce shadows, gradients or elevated cards.
- Do not force all project images into a uniform grid.
- Do not replace the expressive large text with small corporate typography.
- Do not use filled bright-color buttons.
- Do not crowd the page with decorative interface elements.

## Agent prompt

Build a new page in the jun.works portfolio style. Use Gallery White (#ffffff) as the uninterrupted canvas and Ink (#000000) for text, links, outlines and occasional filled section labels; reserve all other colors for the content of project imagery. Use one regular-weight sans-serif such as Inter, with oversized editorial copy, tight tracking and compact line spacing. Keep content primarily left-aligned, with a spacious introduction, outlined rounded contact and topic pills, and simple black-filled section labels. Present projects as an open editorial feed with mixed image sizes and generous gaps, preserving each image’s original art direction. Keep the interface flat: no shadows, gradients or decorative card surfaces. Make navigation minimal and let typography and portfolio work establish hierarchy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, left-aligned introduction with wordmark and menu above; contact and social pills below. | email contact, social links, scroll cue | oversized typography, outlined pill links, minimal menu |
| 2 | other | Two-column services and clients, followed by a single recognition list. | scan service list, review client names, follow award links | black-filled section labels, plain text lists, outbound links |
| 3 | other | Open white section with no prominent text or controls. | visual transition | white canvas, generous whitespace |
| 4 | category-nav | Left-aligned category links arranged as a loose wrapping set of pills. | browse by discipline, category links | outlined pill links, black text, white background |
| 5 | content-feed | Long editorial project feed with descriptions and varied image sizes. | read project context, browse project images | black section labels, plain text descriptions, mixed image widths |
| 6 | gallery | Continued image-led portfolio flow with flexible sizing and broad white gutters. | browse visual applications | art-directed imagery, open image placement, white canvas |

## Source CSS custom properties (selected)

```css
--following-animation-duration: 450ms;
```

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