# Martin Laxenaire Fr · Design system migration spec

> Source: https://www.martin-laxenaire.fr  ·  Curated by OpenDesign  ·  en

> This site is a prime example of a creative, experimental portfolio that breaks traditional web design rules to make a strong visual impact.

## 1. Identity DNA

The Martin Laxenaire portfolio operates less as a traditional agency website and more as a kinetic proof of concept. It functions as a vibrant, interactive art piece where the design system itself—the bold type, the geometric bursts—is the primary exhibit of the designer's creative methodology.

**One-liner:** A high-energy, typographically bold portfolio for a creative web designer.
**Keywords:** playful · experimental · creative · agency · bold
**Analogy:** A creative agency portfolio that feels like a vibrant, interactive art piece.

## 2. Color

The color system is built on a foundation of stark, high-contrast monochrome. Over this disciplined base, vibrant accents of green, brown, and yellow are deployed as energetic punctuation within geometric patterns.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#121212` | body text |
| `--muted` | `#9D968E` | placeholder |
| `--line` | `rgba(18, 18, 18, 1)` | divider |

**Color principle:** High-contrast monochrome base with vibrant, multi-colored geometric accents.

This approach ensures clarity is never sacrificed for expression, keeping the focus on bold, confident gesture.

## 3. Typography

Typography is treated as a structural, sculptural element. An extended grotesque sans-serif dominates large display settings, its width and tight spacing creating a graphic, almost architectural presence, while a standard grotesque sans-serif provides clear, readable body copy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 167px | 1.2 | 700 | -2px | hero headline |
| heading-lg | 105px | 0.85 | 700 | -1px | large section titles |
| heading-md | 63px | 0.85 | 700 | 0px | medium section titles |
| body-lg | 31px | 1.2 | 400 | 0px | body text |
| body-md | 21px | 1.2 | 400 | 0px | small body text |

**Type rules:**
- Use extended grotesque sans-serif for large display text.
- Use standard grotesque sans-serif for body copy.
- Apply tight letter-spacing to display text.
- Use uppercase transformation for most text elements.

## 4. Spacing

Spacing follows an 8px base grid, but its application prioritizes generous padding and breathing room over dense information packing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** An 8px base grid with generous padding for breathing room.

## 5. Surfaces

Surfaces are defined by thick, 2px black borders on interactive elements and a subtle, deep shadow for elevation. This creates a clear hierarchy of depth without resorting to heavy, illustrative bevels.

- **Radius:** sm 4px · md 8px · lg 21px · pill 999px
- **Shadows:**
  - 0px 4px 24px rgba(18, 18, 18, 0.1)
- **Borders:** 2px solid black for interactive elements and borders.

## 6. Layout

The layout skeleton is anchored by a full-viewport hero section, designed for a massive, central typographic statement. This is followed by a dynamic multi-column grid for project showcases, allowing for expressive composition.

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

**Skeleton:** A full-viewport hero section with a massive central text block, followed by a multi-column grid for projects.

## 7. Motion & Interaction

Motion is a core expressive tool, not mere decoration. Smooth, high-ease-out transitions govern element appearances, while parallax, scaling effects, and interactive geometric backgrounds create a layered sense of energy and playfulness on scroll and interaction.

- **Durations:** micro 220ms · small 350ms · medium 500ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth, high-ease-out transitions for element appearances.
  - Parallax and scaling effects on scroll.
  - Interactive geometric background elements.

- **Hover:** Scale and color transitions on interactive elements.
- **Click:** Active states with immediate visual feedback.
- **Transition:** Smooth 0.35s ease-out transitions for transforms and opacity.
- **Keyboard:** Standard focus indicators for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, direct, and intentionally playful. Headlines are short, impactful, and frequently uppercase, matching the system's bold visual posture.

- **Tone:** Confident, playful, and highly creative.
- **Headline style:** Short, impactful, and often all-caps.
- **CTA style:** Direct and action-oriented, using pill-shaped buttons.
- **Avoid:** boring layouts / muted colors / traditional serif fonts / small text / standard grid-only layouts

### Don'ts
- ❌ Don't use a standard, narrow sans-serif for headlines — screenshot shows wide, extended grotesque fonts.
- ❌ Don't use small, dense body text — screenshot shows large, readable text with generous line-height.
- ❌ Don't use a muted or dark color palette — screenshot shows a bright white background with vibrant green, brown, and yellow accents.
- ❌ Don't use sharp, square corners for UI elements — screenshot shows heavily rounded corners (21px radius).
- ❌ Don't use thin, subtle borders — screenshot shows thick 2px black borders for buttons and cards.
- ❌ Don't use traditional, horizontal-only layouts — screenshot shows a dynamic, overlapping typographic hero.

The system deliberately avoids boring layouts, muted palettes, traditional serif typography, small text, and standard grid-only compositions.

## System Prompt (paste into AI tool)

```
This is a creative agency portfolio for a web designer, characterized by a bold, playful, and experimental aesthetic. The design uses a high-contrast monochrome base with vibrant geometric accents. Key colors include pure white (#FFFFFF) for the background and near-black (#121212) for text and borders. The typography features extended grotesque sans-serif for headlines and a standard grotesque sans-serif for body copy, both often used in uppercase. Critical don'ts: avoid narrow fonts, muted palettes, small text, sharp corners, thin borders, and standard grid-only layouts. The site emphasizes motion, interaction, and a non-traditional approach to web design.
```