# Jeen Yuhs · Design system migration spec

> Source: https://jeen-yuhs.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of brutalist, experimental web design that rejects traditional UI conventions in favor of a raw, digital archive aesthetic.

## 1. Identity DNA

This design system operates like a glitched VHS tape or the stark entrance to a brutalist digital exhibition. It is an archival portal that uses a monochrome palette and raw, distorted typography to create an uncompromising aesthetic.

**One-liner:** A stark, monochrome archival portal with a brutalist, glitched aesthetic and retro-digital typography.
**Keywords:** experimental · monochrome · raw · cinematic · digital-artifact
**Analogy:** a glitched VHS tape or a brutalist digital exhibition entrance

## 2. Color

The color system is a strict binary of pure black and white, eliminating all gradation. This absolute contrast is the foundational rule, creating a stark, high-impact visual field.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#767676` | placeholder |
| `--line` | `rgba(118, 118, 118, 1)` | divider |

**Color principle:** Absolute binary contrast; pure black and white only.

The principle is absolute binary contrast, using pure black and white only.

## 3. Typography

All typography is monospaced and strictly uppercase, creating a raw, archival voice. The type scale is functional, separating large glitched display characters from dense body text and small metadata labels.

- **Display:** monospace
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 200px | 1.0 | 400 | 0px | Large glitched numbers and entrance display |
| body | 18px | 1.11 | 400 | 0px | General body text and navigation |
| caption | 12.32px | 1.0 | 400 | 0px | Small metadata and UI labels |

**Type rules:**
- All text is strictly uppercase
- Monospace font family is used for all elements

## 4. Spacing

The spatial rhythm is built on a standard 4px base grid, providing a consistent structural foundation.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px base with generous padding in interactive elements.

## 5. Surfaces

Surfaces are defined by strict 2px solid borders with no border-radius, creating sharp, rectangular forms. The system rejects shadows entirely, relying on borders and the binary palette for all depth cues.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Strict 2px solid borders on interactive elements, no border-radius.

## 6. Layout

The layout skeleton is a full-screen black canvas, with centered content that emphasizes stark white elements. This composition forces a singular, dramatic focus on the core digital artifact or portfolio piece.

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

**Skeleton:** Full-screen black canvas with centered content, emphasizing stark white elements.

## 7. Motion & Interaction

Motion is abrupt and glitch-oriented, using fast, linear transitions to simulate digital artifacts and signal decay. The philosophy is one of sharp, intentional disruption rather than smooth, guided animation.

- **Durations:** micro 150ms · small 300ms · medium 800ms
- **Easing:** `linear`
- **Patterns:**
  - glitch-flicker
  - color-shift
  - digital-artifacting

- **Hover:** Inverts colors or triggers a digital glitch effect.
- **Click:** Triggers a micro-interaction or a glitch transition.
- **Transition:** Fast, abrupt transitions using 0.15s to 0.3s durations.
- **Keyboard:** Full keyboard navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is raw, archival, and experimental, matched by headlines that are often glitched or distorted. It is a system for curation that values stark statements over friendly guidance.

- **Tone:** raw, archival, experimental, uncompromising
- **Headline style:** Stark, monospaced, and often glitched or distorted.
- **CTA style:** Uppercase monospace text, often with a 2px border.
- **Avoid:** polished gradients / rounded corners / warm tones / friendly illustrations

### Don'ts
- ❌ Don't use soft shadows — the screenshot shows flat, borderless elements only.
- ❌ Don't use rounded corners — the screenshot shows strict rectangular shapes.
- ❌ Don't use multiple colors — the screenshot shows a strict black and white palette.
- ❌ Don't use sans-serif fonts — the screenshot shows exclusively monospace typography.
- ❌ Don't use lowercase text — the screenshot shows all text in uppercase.
- ❌ Don't use complex gradients — the screenshot shows solid black and white fills.

They deliberately do not use polished gradients, rounded corners, warm tones, or friendly illustrations.

## System Prompt (paste into AI tool)

```
Design for a brutalist, experimental digital archive or portfolio. Use a strict black and white palette with no accent colors. Typography must be monospace and uppercase. Layout should be stark and full-screen. Avoid all common UI flourishes like rounded corners, shadows, or gradients. Focus on raw, digital, and archival aesthetics with glitched or distorted elements. This system uses a black background (#000000) and white foreground (#FFFFFF). Typography is entirely monospace. Key constraints: no border-radius, no shadows, no lowercase text, and no multi-color palettes. The feel should be like a VHS tape or a retro terminal interface.
```