# Charlielemaignan · Design system migration spec

> Source: http://charlielemaignan.com  ·  Curated by OpenDesign  ·  en

> This site is worth including as a prime example of an expressive, typography-driven portfolio that pushes creative boundaries while maintaining a clean, functional structure.

## 1. Identity DNA

This design system operates like a gallery space: the architecture provides a stark, high-contrast frame, while the expressive typographic works command the viewer's full attention.

**One-liner:** An experimental graphic design portfolio defined by massive, expressive typography and a stark high-contrast color palette.
**Keywords:** Expressive · Typographic · Experimental · Graphic Design · Portfolio
**Analogy:** A graphic designer's personal portfolio showcasing bold, experimental typography and vibrant, high-contrast visuals.

## 2. Color

The color system is built on a strict monochrome foundation of absolute black and white, functioning as a neutral canvas. This palette ensures that vibrant imagery from portfolio pieces becomes the primary source of color and visual interest.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--ink-soft` | `#838383` | secondary text |
| `--muted` | `#838383` | placeholder |
| `--line` | `rgba(255,255,255,1.0)` | divider |

**Color principle:** High-contrast monochrome base with vibrant, project-specific colors introduced through portfolio imagery.

The principle is restraint: color is supplied by the work itself, not the interface.

## 3. Typography

Typography is the primary voice, categorized into a **geometric-sans** for display and a **grotesque-sans** for body text. The system prioritizes massive, tightly tracked, and often custom-designed type that dominates the visual hierarchy.

- **Display:** geometric-sans
- **Body:** neue-haas-grotesk

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 360px | 0.7 | 700 | -18px | Hero logo and main portfolio display type |
| heading | 40px | 1.1 | 700 | 0px | Section headings and emphasis |
| body | 20px | 1.25 | 400 | 0px | Primary body text |

## 4. Spacing

Spacing follows a loose, centered rhythm, using generous whitespace to frame and emphasize large typographic elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Loose, centered layout with generous whitespace to emphasize large typographic elements.

## 5. Surfaces

Surfaces are defined by depth through isolation rather than decoration. Borders appear only as a deliberate 2px solid white stroke on pill-shaped buttons, with shadows entirely absent from the visual vocabulary.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** 2px solid #FFFFFF for pill buttons, otherwise no borders.

## 6. Layout

The layout skeleton is a full-width, vertically stacked sequence of centered sections. It is dominated by a large hero logotype and designed to give full-bleed prominence to project imagery.

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

**Skeleton:** Full-width, vertically stacked sections with centered content, dominated by a large hero logo.

## 7. Motion & Interaction

Motion philosophy favors subtlety and purpose, using smooth transitions to guide interaction without disrupting the static impact of the typography. The custom cursor serves as a persistent, playful signature element.

- **Durations:** micro 100ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.46, 0.45, 0.94)`
- **Patterns:**
  - Smooth transitions on interactive elements.
  - Custom cursor animation.

- **Hover:** Interactive elements feature smooth, subtle transitions over 0.3 seconds.
- **Click:** Immediate visual feedback.
- **Transition:** all 0.3s ease-out
- **Keyboard:** Standard focus navigation supported.

## 8. Voice & Don'ts

The editorial voice is experimental and boldly personal, matching the confidence of the display typography. It deliberately avoids generic corporate language and standard, uninspired design conventions.

- **Tone:** Experimental, bold, and highly personal.
- **Headline style:** Massive, tightly tracked, and often custom-designed display typography.
- **CTA style:** Clean, pill-shaped buttons with high-contrast outlines.
- **Avoid:** Generic or corporate language. / Standard, uninspired typography. / Cluttered or overly complex layouts. / Subtle or muted color palettes. / Conventional grid structures.

### Don'ts
- ❌ Don't use subtle colors — screenshot shows high-contrast black and white as the primary palette.
- ❌ Don't use standard web fonts — screenshot shows highly customized, expressive display type.
- ❌ Don't use sharp corners for buttons — screenshot shows consistent pill-shaped (border-radius: 999px) navigation elements.
- ❌ Don't clutter the layout with many elements — screenshot shows a sparse, centered layout focused on a single large visual.
- ❌ Don't use traditional grid layouts — screenshot shows a full-bleed, vertically stacked presentation of work.
- ❌ Don't use small, safe typography — screenshot shows massive, tightly tracked type that dominates the viewport.

What this system does not do is as defining as what it does: it forgoes subtle colors, standard fonts, sharp corners, cluttered layouts, and safe typography.

## System Prompt (paste into AI tool)

```
This is an experimental graphic design portfolio characterized by a stark, high-contrast monochrome base and massive, expressive typography. The design uses a black background (#000000) and white text (#FFFFFF) to create a bold visual impact. The primary font categories are geometric-sans for display elements and grotesque-sans for body text. Key interactive elements are pill-shaped buttons with white borders. The layout is sparse and vertically centered, focusing attention on large, custom-designed typographic logos. Critical donts: avoid using subtle or muted colors, avoid standard or generic typography, avoid sharp corners on buttons, avoid cluttered or complex layouts, avoid traditional grid structures, and avoid small, safe font sizes.
```