# Jun Works · Design system migration spec

> Source: https://jun.works  ·  Curated by OpenDesign  ·  en

> Worth including as an excellent example of restrained, typography-focused design that achieves visual impact through scale, spacing, and refinement rather than color or decoration.

## 1. Identity DNA

The Jun Works system is built like a high-end printed portfolio book: every element serves the content, and the design itself becomes a quiet act of curation. It achieves its presence not through addition, but through rigorous subtraction, leaving only the essential architecture of type and space.

**One-liner:** A minimalist typography-focused personal portfolio showcasing graphic design work.
**Keywords:** typography · minimalist · portfolio · clean · personal
**Analogy:** A high-end printed portfolio book with clean typography and generous whitespace.

## 2. Color

The color system is a deliberate void—a strict monochromatic palette of pure black on white that functions as a neutral field for typographic expression. By forgoing all accent colors, the system forces hierarchy and focus to be established solely through scale, weight, and spacing.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strictly monochromatic, using only black and white to emphasize typography and content.

The governing principle is that contrast is the only required visual tool, and any introduction of hue would dilute the typographic narrative.

## 3. Typography

The typographic voice is singular and authoritative, using a clean grotesque-sans like Neue Haas Grotesk for all text. A consistent, unweighted 400 font-weight and tight letter-spacing for large display text establish a formal, refined tone.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 54px | 1.1 | 400 | -2px | Hero text and main introductory paragraph |
| body | 13px | 1.3 | 400 | 0 | Metadata and smaller details |

**Type rules:**
- Use Neue Haas Grotesk or similar grotesque-sans for all text
- Maintain a tight letter-spacing of -2px for large display text
- Use font-weight 400 consistently across all elements

## 4. Spacing

Spatial rhythm is defined by generous, deliberate padding, creating a consistent and breathable field around major content sections.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous padding of 45px around major sections, creating a spacious, breathable layout.

## 5. Surfaces

Depth is achieved through absence, not simulation—the design is completely flat, with no shadows or gradients. Borders become the primary tool for defining interactive boundaries, rendered as solid, pill-shaped forms.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** 4px solid black for buttons and interactive elements, using pill-shaped (border-radius: 129.6px) corners.

## 6. Layout

The layout skeleton is a single, centered column that provides a focused reading channel. Generous padding and strict left alignment create a strong vertical axis, framing the content with substantial whitespace.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Single-column centered layout with large type, generous padding, and a strict left alignment for text.

## 7. Motion & Interaction

Motion philosophy is one of minimal, functional feedback rather than performance. Transitions are smooth and applied to all properties on interactive elements, providing subtle confirmation of user actions.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Hover transitions on links and buttons using 'all' property

- **Hover:** Custom cursor change and subtle transitions on interactive elements.
- **Click:** Standard pointer behavior.
- **Transition:** Smooth transitions on all properties for interactive elements.
- **Keyboard:** Standard tab navigation supported.

## 8. Voice & Don'ts

The editorial voice is professional and concise, mirroring the visual restraint. It is a system of curation, where the primary act is selecting what to leave out.

- **Tone:** Professional, concise, and highly refined.
- **Headline style:** Large, bold, and tightly spaced grotesque-sans text.
- **CTA style:** Pill-shaped buttons with thin black borders and clean text.
- **Avoid:** Avoid decorative elements / Avoid unnecessary colors / Avoid complex layouts

### Don'ts
- ❌ Don't use multiple colors — screenshot shows strict black and white monochrome palette.
- ❌ Don't use decorative fonts — screenshot shows clean grotesque-sans typography throughout.
- ❌ Don't use drop shadows — screenshot shows completely flat design elements.
- ❌ Don't use square corners on buttons — screenshot shows pill-shaped (999px radius) buttons.
- ❌ Don't use heavy font weights — screenshot shows consistent font-weight of 400.
- ❌ Don't use tight spacing — screenshot shows generous padding (45px) around content sections.

What this system deliberately omits—color, decorative type, shadows, complex layouts—is as defining as what it includes.

## System Prompt (paste into AI tool)

```
This is a minimalist typography-focused personal portfolio for a graphic designer. It uses a strictly monochromatic palette of pure black (#000000) on pure white (#FFFFFF). The typography is exclusively grotesque-sans, specifically Neue Haas Grotesk, with large display text set at 54px with -2px letter-spacing and font-weight 400. Layout is single-column with generous 45px padding. Interactive elements use pill-shaped buttons with 4px solid black borders. Critical donts: avoid any color beyond black and white, avoid decorative typefaces, avoid drop shadows, avoid square corners on buttons, avoid heavy font weights, and avoid tight spacing. The design emphasizes content through refined typography and generous whitespace.
```