# Pierrerousseau Info · Design system migration spec

> Source: https://pierrerousseau.info  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of brutalist web design, using extreme typographic scale and a stark layout to create a powerful artistic statement.

## 1. Identity DNA

Pierrerousseau Info operates with the logic of a brutalist art gallery catalog, where the design is not a container for content but the content itself. Its stark, monochrome world is built on a foundation of extreme typographic scale and a raw, unadorned grid.

**One-liner:** A stark, monochrome portfolio site using extreme typographic contrast and a grid-based image layout.
**Keywords:** Minimalist · Brutalist · Experimental · Artistic
**Analogy:** A brutalist art gallery catalog

## 2. Color

The color system is deliberately reductive, using only black, white, and a neutral gray to ensure nothing competes with the typographic and photographic drama. This strict monochrome palette frames the work with institutional neutrality.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#dddddd` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#9d968e` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strict monochrome with extreme typographic scale.

The governing principle is absolute restraint, allowing scale and contrast to create all necessary hierarchy and emphasis.

## 3. Typography

The type voice is formal and monumental, built on a stark contrast between a massive, tightly leaded didone-serif display font and a small, utilitarian monospaced body text. Every piece of text is set in uppercase, transforming language into a series of graphic forms.

- **Display:** didone-serif
- **Body:** monospaced
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 124px | 0.8 | 400 | -2px | Headlines and large text blocks |
| body | 13px | 1.3 | 400 | 0.38px | Body text and captions |

**Type rules:**
- All text is uppercase.
- Headlines use a very large, tight leading.

## 4. Spacing

Spacing follows an irregular, content-driven rhythm dictated by the sheer mass of the typographic scale rather than a conventional vertical or horizontal grid.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Irregular spacing dictated by the massive typographic scale.

## 5. Surfaces

Surfaces are flat and borderless, with shadows and cards entirely absent from the visual vocabulary. The composition relies solely on the interplay of typography and imagery against a plain field.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** None visible, purely typographic and image-based.

## 6. Layout

The layout skeleton is an open grid where text and images interact directly, with no visible containers, cards, or dividing lines to soften their collision. The structure is felt through alignment and negative space, not delineated by borders.

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

**Skeleton:** A grid of text and images with no visible containers or cards.

## 7. Motion & Interaction

Interaction and motion philosophy is one of minimal, almost incidental feedback. The only transitions are subtle opacity changes on hover or state change, applied with a quick 0.3-second ease-in-out timing.

- **Durations:** micro 220ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Subtle opacity transitions on hover or state change.

- **Hover:** Opacity change
- **Click:** Navigation
- **Transition:** Opacity 0.3s ease-in-out
- **Keyboard:** Standard tab navigation

## 8. Voice & Don'ts

The editorial voice is formal and artistic, treating headlines as major compositional elements. It avoids playful language, rounded shapes, and bright colors, committing fully to its austere, exhibition-like tone.

- **Tone:** Formal and artistic
- **Headline style:** Massive, uppercase, tightly leaded serif text.
- **CTA style:** None visible
- **Avoid:** Playful language / Rounded shapes / Bright colors

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, rectangular elements.
- ❌ Don't use bright accent colors — screenshot is strictly monochrome.
- ❌ Don't use small, friendly typography — screenshot features massive, aggressive display type.
- ❌ Don't use traditional navigation bars — screenshot relies on typographic layout.
- ❌ Don't use drop shadows — screenshot uses flat, stark composition.
- ❌ Don't use mixed case in headlines — screenshot is entirely uppercase.

The system deliberately forgoes traditional navigation bars, bright accent colors, and any friendly or rounded visual cues, refusing to soften its raw, typographic stance.

## System Prompt (paste into AI tool)

```
This is a stark, minimalist portfolio site with a brutalist aesthetic. The palette is strictly monochrome (#000000 on #ffffff and #dddddd). Typography is the primary design element, featuring a massive didone-serif display font (~124px) with extremely tight leading, contrasted with a small monospaced body font (LL Mono Book Web). Critical donts: avoid rounded corners, bright accent colors, and playful tones. The layout is grid-based but not confined by containers, creating a raw, open feel. Interactions are minimal, relying on simple opacity transitions. Position the site as an experimental, artistic portfolio or editorial project.
```