# Julienrenau · Design system migration spec

> Source: https://julienrenau.com  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of minimalist portfolio design, using typography and whitespace to create a strong visual hierarchy.

## 1. Identity DNA

The Julien Renau portfolio operates like a well-made technical drawing: every element serves a clear purpose, and nothing is ornamental. It is a stark, high-contrast environment where advanced creative technology projects are presented with the precision of their own source code. The design itself becomes a testament to the technical craft it showcases.

**One-liner:** A stark, typographic portfolio for a creative technologist, emphasizing technical expertise through minimal design.
**Keywords:** portfolio · creative technologist · webgl · minimal · technical
**Analogy:** A minimalist, high-contrast digital portfolio showcasing advanced creative technology projects.

## 2. Color

Color is used with extreme restraint, reduced to a monochromatic palette of dark ink on a light grey ground. This stark duality ensures maximum readability and directs all focus to the content and its technical substance.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EBEBEB` | main background |
| `--ink` | `#272727` | body text |
| `--muted` | `#898989` | placeholder |
| `--line` | `rgba(39,39,39,0.15)` | divider |

**Color principle:** Extreme restraint; monochromatic palette with high contrast for readability.

The principle is one of absolute restraint, where the absence of color becomes the defining aesthetic choice.

## 3. Typography

Typography carries the entire voice of the system, using Founders Grotesk for all text to maintain a clean, technical consistency. Headlines are set tight and bold, creating a confident, declarative hierarchy that feels both professional and direct.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 45px | 1.0 | 500 | -0.5px | Hero headline and project titles |
| body | 16px | 1.0 | 400 | 0 | General body text and navigation |

**Type rules:**
- Use Founders Grotesk for all text elements.
- Maintain tight line-heights for headlines.
- Use bold weight (700) for emphasis and metadata.

## 4. Spacing

A strict vertical rhythm governs the page, punctuated by large, deliberate blocks of whitespace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Strict vertical rhythm with large whitespace blocks.

## 5. Surfaces

Depth is communicated not through shadows, but through clear borders and the stark contrast between surface and text. Simple 1px borders provide the only separation, creating a flat, architectural feel.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** 1px solid borders using primary ink color for separation.

## 6. Layout

The layout follows an asymmetric grid, a deliberate imbalance that feels considered and dynamic. Generous whitespace and stark horizontal rules carve the canvas into distinct, readable sections.

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

**Skeleton:** Asymmetric grid with large whitespace and horizontal rules.

## 7. Motion & Interaction

Motion is minimal and purposeful, used only to signal interactivity and state changes with subtlety. Transitions are smooth and quick, ensuring the interface feels responsive without becoming distracting.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle hover transitions on interactive elements.
  - Horizontal scrolling or sliding for project galleries.

- **Hover:** Subtle color or opacity changes.
- **Click:** Direct navigation to project details.
- **Transition:** Smooth transitions for state changes.
- **Keyboard:** Standard keyboard navigation support.

## 8. Voice & Don'ts

The editorial voice is professional, concise, and technical, using short descriptive titles and minimal calls to action. It avoids all playful or informal language, letting the work speak with quiet authority.

- **Tone:** Professional, concise, and technical.
- **Headline style:** Short, descriptive titles with em-dash separators.
- **CTA style:** Minimal, text-based calls to action.
- **Avoid:** Avoid decorative elements or illustrations. / Avoid bright or saturated colors. / Avoid complex layout structures. / Avoid playful or informal language.

### Don'ts
- ❌ Don't use decorative illustrations — screenshot shows stark text and photography only.
- ❌ Don't use bright accent colors — screenshot shows a monochromatic palette.
- ❌ Don't use rounded corners — screenshot shows sharp, rectangular elements.
- ❌ Don't use drop shadows — screenshot shows flat, border-based design.
- ❌ Don't use complex navigation — screenshot shows simple text links.
- ❌ Don't use playful fonts — screenshot shows a clean, grotesque sans-serif.

The system deliberately forgoes decorative illustrations, bright accents, rounded corners, and complex navigation to maintain its stark, focused integrity.

## System Prompt (paste into AI tool)

```
This is a minimalist portfolio for a creative technologist, using a stark, high-contrast monochromatic palette (ink #272727 on background #EBEBEB) with a single grotesque-sans typeface (Founders Grotesk). The layout is asymmetric with large whitespace blocks and horizontal rules separating sections. Key features include large, bold typography for project titles, text-based navigation, and a complete absence of decorative elements or shadows. Critical donts: avoid bright accent colors, rounded corners, and playful language. Positioning is professional and technical, emphasizing WebGL and Unity projects.
```