---
name: Jun Works
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 54px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

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

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```