# Aristide Benoist · Design system migration spec

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

> Worth including for its extreme typographic scale, sophisticated dark aesthetic, and motion-focused interaction patterns.

## 1. Identity DNA

The design system for Aristide Benoist operates like a cinematic film reel projected in a darkened gallery, where each element is a carefully composed frame. It is a system built for an independent developer's portfolio, where motion and interaction are the primary narrative devices, and photographic craftsmanship is the subject matter.

**One-liner:** A dark, motion-focused developer portfolio with extreme typographic scale and photographic grids.
**Keywords:** independent developer · motion · interaction · portfolio
**Analogy:** A cinematic film reel in a dark gallery, showcasing visual craftsmanship.

## 2. Color

The palette is a study in monochromatic restraint, grounded by a deep charcoal foundation. A primary sage ink provides the textual voice, while a singular golden accent punctuates key moments of interaction.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#1e1e1e` | main background |
| `--bg-soft` | `#1a1a1a` | card background |
| `--bg-quiet` | `#000000` | quiet area |
| `--ink` | `#bacbc2` | body text |
| `--ink-soft` | `#bacbc2` | secondary text |
| `--muted` | `#cc9933` | placeholder |
| `--line` | `rgba(186, 196, 184, 0.2)` | divider |

**Color principle:** Deep monochromatic dark mode with a primary light sage ink and occasional golden accents.

The principle is absolute chromatic discipline: only two primary ink colors and their tints are permitted against the solid dark field.

## 3. Typography

The typographic voice is defined by extreme scale and stark contrast. A slab-serif commands the massive display roles, while a clean grotesque-sans provides the grounded, functional text for paragraphs and metadata.

- **Display:** slab-serif
- **Body:** grotesque-sans
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 337.5px | 0.75 | 400 | -8px | Massive hero typography for abstract text. |
| h1 | 257.5px | 1.0 | 400 | -1px | Secondary large-scale display text. |
| body | 16px | 1.4 | 400 | 0px | Standard paragraph text. |
| caption | 10px | 1.0 | 400 | 0.2px | Footer links and metadata. |

## 4. Spacing

Spacing is governed by a strict 4px rhythm, establishing a clear visual cadence from the macro layout down to micro padding within navigation and contact zones.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 20 / 24 / 30 / 48 / 64 / 96 px
- **Rhythm:** A clear rhythm of 4px increments, with generous padding in navigation and contact areas.

## 5. Surfaces

The interface has zero perceptible depth; it is a flat, graphic plane. All definition comes from hard-edge, 1px borders and sharp, unforgiving corners that carve the canvas into discrete fields.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Hard-edge borders and sharp corners are used throughout, with a prominent 1px bottom border on the 'ABOUT' link.

## 6. Layout

The layout skeleton is a full-screen dark canvas. Its central element is a horizontal carousel of vertical photographic images, flanked by pinned, minimal navigation.

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

**Skeleton:** Full-screen dark canvas with a centered horizontal carousel of vertical images and pinned navigation elements.

## 7. Motion & Interaction

Motion is applied with the precision of a film editor's cut, not as decoration. All interactive elements transition smoothly over 0.5 seconds using a consistent cubic-bezier curve for color and background shifts.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - smooth color and background transitions on interactive elements

- **Hover:** Subtle color changes with 0.5s cubic-bezier transitions.
- **Click:** Immediate navigation with no visible active state.
- **Transition:** Smooth 0.5s transitions for color and background properties.
- **Keyboard:** Standard tab navigation is supported for all interactive links.

## 8. Voice & Don'ts

The editorial voice is minimalist and sophisticated, speaking through uppercase, tightly tracked headlines and understated call-to-action text. It avoids all decorative flourish to let the photographic and typographic work speak for itself.

- **Tone:** Minimalist, sophisticated, and professional.
- **Headline style:** Uppercase, massive, high-impact display typography with tight negative tracking.
- **CTA style:** Understated, uppercase text links, often with a simple underline or arrow.
- **Avoid:** Avoid decorative icons / Avoid unnecessary borders / Avoid multiple background colors

### Don'ts
- ❌ Don't use soft drop shadows — screenshot shows completely flat, hard-edged design.
- ❌ Don't use rounded corners — screenshot shows sharp 0px radius on all elements.
- ❌ Don't use a wide variety of colors — screenshot shows a restricted palette of dark background and sage ink.
- ❌ Don't use small, timid display text — screenshot shows massive typography dominating the viewport.
- ❌ Don't use busy background patterns — screenshot shows solid dark fills and photographic content.
- ❌ Don't use overly complex navigation — screenshot shows a minimal 'ABOUT' link with a simple underline.

The system deliberately forgoes soft shadows, rounded corners, decorative icons, and busy background patterns, committing fully to its sharp-edged, cinematic purity.

## System Prompt (paste into AI tool)

```
This is a dark, motion-focused developer portfolio for Aristide Benoist. The design DNA is built on a deep monochromatic dark background (#1e1e1e) with light sage ink (#bacbc2) and occasional golden accents (#cc9933). It features extreme typographic scale using a slab-serif for display and a grotesque-sans for body text, with tight negative tracking on massive headlines. The layout is minimalist and cinematic, often centering a horizontal carousel of vertical black-and-white photographs. Critical design constraints: avoid any use of rounded corners, do not add decorative drop shadows or complex patterns, and never use more than two primary ink colors. Transitions should be smooth, using a 0.5s cubic-bezier timing function.
```