# Yannickgregoire Nl · Design system migration spec

> Source: https://yannickgregoire.nl  ·  Curated by OpenDesign  ·  en

> A unique example of brutalist web design that successfully merges terminal aesthetics with modern interactive patterns.

## 1. Identity DNA

This design system operates like a hacker's terminal meets high-fashion editorial—a space where stark functionality and curated visual impact coexist. It is built for a creative developer whose work demands both technical precision and bold, experimental presentation. Every element, from the rigid monospace typography to the single neon accent, reinforces this dual identity.

**One-liner:** A brutalist interactive portfolio for a creative developer, utilizing terminal aesthetics and keyboard-driven navigation.
**Keywords:** brutalist · terminal · interactive · creative developer · experimental
**Analogy:** A hacker's terminal meets high-fashion editorial

## 2. Color

The palette is a study in absolute contrast: pure black and white form the entire visual field, with a single neon green (#00FFA8) serving as the sole accent for focal points and interactive highlights. This strict limitation forces clarity and makes every instance of color carry significant weight.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#000000` | placeholder |
| `--accent` | `#00FFA8` | single accent |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Stark high-contrast monochrome with a single neon green accent for focal points.

The principle is deliberate restraint; color is not decoration but a functional signal within a monochrome framework.

## 3. Typography

Typography is exclusively uppercase and monospaced, using LT Terminal Mono to establish a technical, unambiguous voice. This choice strips away traditional typographic hierarchy in favor of a uniform, code-like presentation where scale and positioning define importance.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 74px | 1.0 | 400 | 0px | Main title headers |
| heading | 37px | 1.2 | 400 | 0px | Section titles |
| body | 24.74px | 1.2 | 400 | 0px | Standard text |
| caption | 14.84px | 1.2 | 400 | 0px | Secondary text |

**Type rules:**
- All text is strictly uppercase
- Primary typeface is LT Terminal Mono (monospace)
- No variable font weights used

## 4. Spacing

Spacing follows a strict grid alignment, using prominent whitespace as an active structural element rather than passive filler.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict grid alignment with prominent whitespace

## 5. Surfaces

Surfaces are flat and unadorned, defined solely by sharp 1px black borders on interactive elements and panels. There are no shadows or gradients; depth is communicated through layout position and the stark border treatment alone.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid black on interactive elements and panels

## 6. Layout

The layout skeleton is an asymmetric grid that accommodates floating terminal windows and large blocks of ASCII art. This structure rejects traditional balanced compositions for a more dynamic, collage-like arrangement that feels both chaotic and precisely controlled.

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

**Skeleton:** Asymmetric grid with floating terminal windows and ASCII art blocks

## 7. Motion & Interaction

Motion philosophy treats interaction as a terminal session: navigation is keyboard-driven, and animations are functional, not decorative. Transitions are smooth but purposeful, like text rendering in a command line, reinforcing the interface's technical character.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Keyboard-driven navigation with smooth scroll
  - Terminal-style text animations
  - Sliding window transitions

- **Hover:** Background color inversion or accent color highlight
- **Click:** Immediate visual feedback with terminal-style sound effects
- **Transition:** Smooth background transitions over 0.5s
- **Keyboard:** Full keyboard navigation support (arrow keys, page up/down)

## 8. Voice & Don'ts

The editorial voice is technical, direct, and slightly cryptic, mirroring the tone of a developer's documentation or a system log. It avoids all conversational warmth, using command-like prompts and stark headlines to communicate with authority.

- **Tone:** Technical, direct, and slightly cryptic
- **Headline style:** Large monospace uppercase with ASCII art
- **CTA style:** Simple command-like prompts
- **Avoid:** Conversational language / Decorative elements / Soft or rounded aesthetics

### Don'ts
- ❌ don't use serif fonts — screenshot shows strict monospace typography
- ❌ don't add rounded corners — screenshot shows sharp rectangular elements
- ❌ don't use soft shadows — screenshot shows flat design with hard borders
- ❌ don't use conversational UI patterns — screenshot shows terminal-like command prompts
- ❌ don't add decorative illustrations — screenshot shows ASCII art only
- ❌ don't use multiple accent colors — screenshot shows single green accent (#00FFA8) only

It deliberately forgoes all decorative illustration, conversational UI, and soft aesthetics to maintain its uncompromising terminal brutalism.

## System Prompt (paste into AI tool)

```
This is a brutalist portfolio site for a creative developer, using terminal aesthetics with LT Terminal Mono font. Key colors are #FFFFFF background, #000000 text, and #00FFA8 accent. Critical don'ts: no serif fonts, no rounded corners, no soft shadows, no conversational UI, no decorative illustrations beyond ASCII art. The site uses keyboard-driven navigation with smooth transitions, creating an interactive terminal experience.
```
