---
title: "Martin Laxenaire design system"
variant: extended
source: https://www.martin-laxenaire.fr/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/martin-laxenaire-fr)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Martin Laxenaire · Design System

> A playful portfolio built around bold, interactive work.

**Theme:** light · **Industry:** portfolio · **Source:** https://www.martin-laxenaire.fr/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A bright, restrained portfolio canvas makes a vivid, oversized typographic video the focal point. Compact navigation and a small progress indicator frame the experience as an interactive journey.

## North star

Keep the interface quiet and spacious so one expressive, interactive media centerpiece commands attention.

## Overview

The page uses a clean white canvas and near-black typography to keep the interface quiet around a central, full-bleed-feeling video composition. The opening artwork is a radial burst of saturated colors behind oversized, slanted display lettering; these colors belong to the embedded creative work rather than the core interface palette. MonumentExtended UltraBold carries the visual voice through large, uppercase display text, while Swiss provides restrained interface and supporting text. The header stays compact: the name sits at the upper left and a small outlined progress pill at the upper right. Generous open space around the central media gives the artwork room to dominate without adding decorative UI. Measured pale green appears in the footer rather than the visible opening canvas. The overall strategy is deliberately sparse, using contrast, motion, and a single vivid media focal point instead of cards, gradients, or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Near Black | `#121212` | `--color-near-black` | neutral | Primary text, navigation, and thin outlines including the progress indicator. |
| Pale Leaf | `#e9f9d9` | `--color-pale-leaf` | surface | Measured light green canvas color used in the footer, not the visible opening screen. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and open space around the hero media. |
| Warm Ink | `#181513` | `--color-warm-ink` | neutral | Minor measured text shade; not a defining interface color. |
| Soft Charcoal | `#201a16` | `--color-soft-charcoal` | neutral | Minor text shade from sampled content, not a defining interface color. |
| Deep Umber | `#251d17` | `--color-deep-umber` | neutral | Minor warm text shade sampled within content. |
| Dark Cocoa | `#2d2119` | `--color-dark-cocoa` | neutral | Minor warm text shade sampled within content. |
| Roasted Brown | `#36261c` | `--color-roasted-brown` | neutral | Minor warm text shade sampled within content. |
| Earth Brown | `#3f291e` | `--color-earth-brown` | neutral | Minor warm text shade sampled within content. |
| Walnut Ink | `#4c3122` | `--color-walnut-ink` | neutral | Minor warm text shade sampled within content. |
| Leather Brown | `#5d3925` | `--color-leather-brown` | accent | Warm accent sampled in text; not a primary interface highlight. |
| Cedar Brown | `#6e422a` | `--color-cedar-brown` | accent | Warm accent sampled in text; use sparingly outside artwork. |
| Copper Brown | `#804b2e` | `--color-copper-brown` | accent | Warm accent sampled in text; not a defining UI color. |
| Burnished Clay | `#965634` | `--color-burnished-clay` | accent | Minor warm shade from sampled content, not a core interface color. |
| Amber Clay | `#b16e3b` | `--color-amber-clay` | accent | Minor warm shade sampled in content; visual artwork may contain related hues. |
| Golden Ochre | `#c0843f` | `--color-golden-ochre` | accent | Minor warm shade sampled in content; not used as a primary UI accent. |

### Semantic aliases

`--color-canvas` → `#e9f9d9` (Pale Leaf) · `--color-surface` → `#ffffff` (Gallery White) · `--color-text` → `#121212` (Near Black) · `--color-border` → `#121212` (Near Black) · `--color-accent` → `#5d3925` (Leather Brown) · `--color-accent-2` → `#6e422a` (Cedar Brown) · `--color-accent-3` → `#804b2e` (Copper Brown)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#121212` | `#e9f9d9` | 16.96:1 | AAA |
| `#121212` | `#ffffff` | 18.73:1 | AAA |
| `#5d3925` | `#e9f9d9` | 9.15:1 | AAA |
| `#5d3925` | `#ffffff` | 10.11:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| MonumentExtended UltraBold | `--font-body` | webfont | 400 | Oversized hero display and uppercase section headings | Bowlby One SC |
| Swiss | `--font-swiss` | webfont | 400 | Navigation, interface labels, and supporting text | Inter |

- **MonumentExtended UltraBold:** Use as heavy, expansive display lettering; uppercase forms and tight line stacking create the signature impact.
- **Swiss:** Measured as a serif generic but visually restrained; use regular weight with concise interface copy.

### Type scale — Major Third (ratio ≈ 1.25, base 104.5px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 104.5px | 400 | 0.85 | 0 | uppercase | MonumentExtended UltraBold | Oversized uppercase display lettering anchoring the opening hero artwork. |
| caption | 21px | 400 | 1.2 | 0 | uppercase | MonumentExtended UltraBold | Compact uppercase supporting labels and secondary interface text. |
| nav | 21px | 400 | 1.2 | 0 | uppercase | MonumentExtended UltraBold | Header name and navigation or progress-related interface labels. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 4, 8, 10, 21, 42, 63, 67, 157 px.
- Section rhythm 63px · element gap 21px · card padding — · max content width 925px.

A single broad white canvas centers attention on a large media composition, with a compact header aligned to opposite top corners. The measured content max width is 925px; the screenshot shows the artwork centered with generous white margins. The opening viewport is visually sparse and media-led, without visible cards or column-based content blocks. Use comfortable spacing and clear separation between interface chrome and the hero. A measured section gap of 63px and element gap of 21px suggest a deliberate rhythm, not a dense dashboard.

## Shape & elevation

- Radius: button `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.35s cubic-bezier(0.215, 0.61, 0.355, 1)` on interactive elements.

The visible interface is predominantly flat: white canvas, black text, and simple outlined controls. No measured shadows or gradients define the design. Layering comes from the embedded artwork itself, where lettering overlays the radial burst, rather than from raised cards. Keep borders crisp and minimal; the progress control is outlined in dark ink.

## Imagery

The hero is a video-led graphic rather than conventional photography: a radial burst of colored wedges sits behind bold, slanted lettering. The artwork is framed as a centered rectangular composition with rounded lower corners visible in the screenshot. Treat its vivid reds, greens, yellows, and warm tones as content imagery, not as the site’s interface palette. Motion and interactive progression are part of the experience.

## Components

### Compact identity header

Place the uppercase site name at the upper left, with generous surrounding white canvas and no enclosing bar.

### Progress pill

A small outlined, fully rounded control at the upper right displays the current completion percentage in dark text.

### Hero media

Center a large video composition with vivid radial artwork and prominent slanted display lettering.

### Interactive progress experience

Use interaction to reveal or unlock additional content, with completion status presented as a concise interface cue.

### Outlined action button

Measured button styling uses dark text, a 2px dark border, uppercase text, and a pill-like radius.

### Measured component styles

- **Primary button** (“0%”): transparent background · text #121212 · border 2px solid #121212 · radius 16.2233px · padding 4.1px 8.1px · 400 16.2233px Swiss · uppercase
- **Navigation item** (“MARTIN LAXENAIRE 0% 0% COMPLETE Interact”): transparent background · text #121212 · radius 0px · padding 0px · 400 20.9333px Swiss

## Do

- Keep the page canvas bright white and visually quiet.
- Use Monument-style heavy display lettering for expressive hero text.
- Give the central media generous breathing room.
- Keep navigation and progress controls compact.
- Use near-black for text and crisp outlines.
- Treat vivid colors as artwork unless the page evidence shows otherwise.

## Don't

- Do not turn the interface into a dense dashboard.
- Do not use shadows to create card-heavy elevation.
- Do not make the artwork palette the default UI palette.
- Do not crowd the hero with explanatory copy.
- Do not replace the restrained header with a large navigation bar.
- Do not invent extra palette colors or measured dimensions.

## Agent prompt

Build a new portfolio page in the style of Martin Laxenaire’s homepage. Use a Gallery White (#ffffff) canvas, Near Black (#121212) text and outlines, and a compact header with identity at left and a small outlined progress pill at right. Make one centered, expressive media composition the hero: oversized, slanted uppercase display lettering over vivid graphic artwork. Keep artwork colors inside the media rather than spreading them across interface surfaces; Pale Leaf (#e9f9d9) is appropriate only for a footer-like band. Use MonumentExtended UltraBold or a close heavy display substitute for hero typography and restrained Swiss-like sans-serif interface text. Preserve generous whitespace, flat surfaces, crisp borders, and simple interaction cues. Avoid card grids, shadows, gradients, and dense supporting copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Compact header above a centered, large media composition on a white canvas. | completion progress indicator, interactive content unlocking | minimal header, outlined progress pill, oversized display typography, full-width-feeling video |

## Source CSS custom properties (selected)

```css
--light-color: #fff;
--dark-color: #121212;
--background-color: #fff;
--foreground-color: #121212;
--base-font-size: calc(calc(100vw/1920*(16*.5)/16 + (1 - .5)*(16*1px)/16 + 100vh/1080*(16*.8)/2/16 + (1 - .8)*(16*1px)/2/16)*16);
--text-font: "Swiss",serif;
--display-font: "MonumentExtended UltraBold",Arial,sans-serif;
--light-display-font: "MonumentExtended Regular",Arial,sans-serif;
--height-space: 15rem;
--small-font-size: .85rem;
--tiny-font-size: .775rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/martin-laxenaire-fr