CURATED · OPEN · FREE

Jun Works

A minimalist typography-focused personal portfolio showcasing graphic design work.

TypographyCleanCurationRestraintEditorial

↓ Download design system (3 MB)Open in OpenDesign

Visit: https://jun.works

📦 Browse pack contents →

Identity DNA

typographyminimalistportfoliocleanpersonal

A high-end printed portfolio book with clean typography and generous whitespace.

Color

#000000Ink

#FFFFFFBG

rgba(0,0,0,1.0)Line

Strictly monochromatic, using only black and white to emphasize typography and content.

Typography

grotesque-sans

display54px · 400
body13px · 400

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

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous padding of 45px around major sections, creating a spacious, breathable layout.

Surfaces

sm · 4px

md · 8px

lg · 12px

pill · 999px

4px solid black for buttons and interactive elements, using pill-shaped (border-radius: 129.6px) corners.

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

Hover transitions on links and buttons using 'all' property

Custom cursor change and subtle transitions on interactive elements. · Standard pointer behavior.

Components

button Pill-shaped buttons with 4px solid black borders, black text on white background, and generous internal padding.
card No cards, content is presented as continuous text blocks or lists.
chip Pill-shaped tags (e.g., #creative, #branding) with thin black borders.
input No visible inputs, primarily static content.
hero Large, bold introductory text block with tight letter-spacing, left-aligned, dominating the viewport.

Voice & Don'ts

Tone Professional, concise, and highly refined.
Headlines Large, bold, and tightly spaced grotesque-sans text.
CTAs Pill-shaped buttons with thin black borders and clean text.

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.
Avoid: Avoid decorative elements
Avoid: Avoid unnecessary colors
Avoid: Avoid complex layouts

Inside the pack — real screenshots

Jun Works — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko