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

# Maëlan Le Meur · Design System

> Quiet contrast, oversized type, and purposeful design.

**Theme:** dark · **Industry:** portfolio · **Source:** https://maelanlemeur.com/ · **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 French graphic designer’s portfolio built around oversized typography, precise grid lines, and a warm dark canvas. A restrained palette frames a long project list before the page resolves into a pale, quiet credits footer.

## North star

Let oversized, precise typography and hairline grid rules define the page, keeping colour and decoration deliberately restrained.

## Overview

The page uses a warm, near-black canvas as its continuous ground, allowing pale ivory typography and fine grid rules to carry the composition. A muted brown band distinguishes the selected-work area, while the light footer creates a deliberate final contrast. Typography is the primary visual material: PP Neue Montreal appears in a regular weight, from compact uppercase labels to extremely large, unembellished display words. The opening sequence treats the name and professional disciplines as oversized, staggered typographic panels. Subsequent sections use repeated vertical and horizontal rules to divide statements, geometric motifs, and a compact project index. The layout is spacious in its overall rhythm but intentionally dense within the portfolio table. Project imagery and motion sit within the brown work section, acting as a supporting showcase rather than competing with the typographic identity. Keep the surface treatment flat, with borders and alignment doing the structural work.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Parchment Ivory | `#eee9cc` | `--color-parchment-ivory` | brand | Primary display and body text, geometric marks, and light footer canvas. |
| Roasted Umber | `#1e1915` | `--color-roasted-umber` | neutral | Dominant page canvas and navigation background. |
| Earth Brown | `#674825` | `--color-earth-brown` | surface | Selected-work section background and subtle structural border accent. |
| Muted Black | `#111111` | `--color-muted-black` | semantic | Measured muted footer text; use sparingly against the pale footer surface. |

### Semantic aliases

`--color-canvas` → `#1e1915` (Roasted Umber) · `--color-surface` → `#eee9cc` (Parchment Ivory) · `--color-surface-2` → `#674825` (Earth Brown) · `--color-text` → `#eee9cc` (Parchment Ivory) · `--color-text-muted` → `#111111` (Muted Black) · `--color-border` → `#674825` (Earth Brown) · `--color-accent` → `#674825` (Earth Brown)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#eee9cc` | `#1e1915` | 14.24:1 | AAA |
| `#eee9cc` | `#674825` | 6.78:1 | AA |
| `#111111` | `#1e1915` | 1.08:1 | fail |
| `#111111` | `#eee9cc` | 15.43:1 | AAA |
| `#111111` | `#674825` | 2.28:1 | fail |
| `#674825` | `#1e1915` | 2.1:1 | fail |
| `#674825` | `#eee9cc` | 6.78:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| PP Neue Montreal | `--font-body` | webfont | 400 | Display typography, headings, body copy, navigation, labels, and links throughout. | DM Sans |

- **PP Neue Montreal:** Regular weight throughout; large mixed-case display, with compact labels and links set uppercase.

### Type scale — Custom (ratio ≈ 1.817, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 317px | 400 | 1 | 0 | — | PP Neue Montreal | Oversized opening name and profession typography. |
| h1 | 225px | 400 | 1 | 0 | — | PP Neue Montreal | Primary hero name and major page statements. |
| h2 | 115px | 400 | 0.95 | 0 | — | PP Neue Montreal | Large section statements and project-area display heading. |
| h3 | 57.5px | 400 | 1 | 0 | — | PP Neue Montreal | Secondary headings and prominent portfolio titles. |
| h4 | 26px | 400 | 1 | 0 | — | PP Neue Montreal | Compact section and project headings. |
| body | 16px | 400 | 1.2 | 0 | — | PP Neue Montreal | Introductory statements, supporting copy, and project descriptions. |
| caption | 15px | 400 | 1.2 | 0 | uppercase | PP Neue Montreal | Small uppercase metadata and discipline labels. |
| link | 15px | 400 | 1 | 0 | uppercase | PP Neue Montreal | Uppercase portfolio and navigation links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 12, 17, 20, 40, 50, 60 px.
- Section rhythm 210px · element gap — · card padding — · max content width 1400px.

A spacious page composition extends to a measured maximum width of 1400px. The hero uses full-width typographic bands, with alternating left and right alignment divided by thin rules. A repeated column grid structures the statement and geometric-mark sections; the audience and supporting-copy areas remain aligned to the same visual system. Selected work shifts to a brown surface and presents a broad media area above a dense, ruled project index. The measured section gap is generous, while content within the project list is compact. A single-column pale footer closes the page.

## Shape & elevation

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

The page is predominantly flat, with no measured shadows or gradients. Thin, low-contrast rules divide the hero bands, grid cells, and project rows. Section backgrounds—not raised cards—provide separation; preserve the crisp, planar feel and avoid decorative layered effects.

## Imagery

The opening is intentionally typography-led rather than image-led. The portfolio section contains project imagery and two measured videos, presented as part of a broad showcase and supported by a tabular project listing. Treat project visuals as varied client work, not as a single consistent product photography style; keep their presentation anchored by the brown section and clean grid.

## Components

### Typographic hero bands

Full-width oversized words alternate alignment across dark panels, separated by fine horizontal rules; small discipline labels sit opposite the display text.

### Grid statement panel

Large ivory introductory copy crosses a column grid on the dark canvas, with vertical and horizontal hairlines visible through the composition.

### Geometric mark strip

Simple ivory rectangular and circular forms sit in ruled grid cells, echoing the page’s restrained visual language.

### Selected-work showcase

A brown work section combines project media with a broad, oversized section title and a compact project index.

### Project index

A dense, ruled list organizes project name, description, and year in aligned columns; keep labels small and legible.

### Credits footer

A pale ivory closing section groups contacts, credits, and site attribution with dark text and minimal ornament.

### Measured component styles

- **Primary button**: background #eee9cc · text #eee9cc · border 1px solid #eee9cc · radius 50% · padding 0px · 400 16px PP Neue Montreal
- **Secondary button**: transparent background · text #eee9cc · border 1px solid #eee9cc · radius 50% · padding 0px · 400 16px PP Neue Montreal
- **Link** (“EN VOIR PLUS”): transparent background · text #eee9cc · radius 40px · padding 15px 25px · 400 15px PP Neue Montreal · uppercase
- **Navigation item** (“Maëlan VOUS VOUS RÉALISATIONS RÉALISATIO”): background #1e1915 · text #eee9cc · radius 0px · padding 0px · 400 16px PP Neue Montreal

## Do

- Use the measured palette exactly.
- Make typography the primary visual material.
- Separate content with fine grid rules.
- Alternate hero text alignment across bands.
- Reserve brown for the selected-work surface.
- Keep project metadata compact and orderly.

## Don't

- Do not introduce unmeasured colours.
- Do not add shadows or gradients.
- Do not use rounded card-based layouts.
- Do not make every heading the same scale.
- Do not let imagery overpower the typography.
- Do not crowd the spacious section rhythm.

## Agent prompt

Build a new page in the visual style of Maëlan Le Meur’s portfolio. Use Roasted Umber (#1e1915) as the main canvas, Parchment Ivory (#eee9cc) for prominent typography and geometric details, and Earth Brown (#674825) to distinguish the selected-work area. Keep Muted Black (#111111) limited to footer text where appropriate. Use a clean, regular sans serif close to PP Neue Montreal, with exceptionally large display words, understated supporting copy, and compact uppercase labels. Structure the page with full-width typographic bands, thin grid rules, alternating alignment, and spacious section transitions. Present any work as a restrained gallery or project index rather than card UI. Use flat surfaces, precise alignment, and minimal decoration; avoid shadows, gradients, extra colours, and ornamental effects.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-width dark hero made of alternating oversized typographic bands and fine horizontal rules. | Scroll-led introduction, Discipline labels | Oversized type, Alternating alignment, Hairline dividers |
| 2 | other | Large statement aligned across a repeated column grid on the dark canvas. | Brand introduction, Visual pause | Grid lines, Large text, Minimal contrast |
| 3 | other | Single-column transition area with simple forms arranged in ruled grid cells. | Visual interlude | Geometric shapes, Thin rules, Ivory on dark |
| 4 | other | Large left-aligned audience statement within a spacious dark section. | Audience identification, Scroll continuation | Oversized heading, Open space, Grid alignment |
| 5 | feature-split | Supporting copy arranged in aligned text areas on the dark canvas. | Value proposition, Reassurance | Small body text, Thin dividers, Open layout |
| 6 | gallery | Spacious dark transition leading into the brown portfolio section. | Section transition | Open space, Typographic lead-in |
| 7 | product-showcase | Brown portfolio surface with a broad media region and a ruled, multi-column project index. | Browse work, Project metadata | Brown section band, Media showcase, Compact ruled rows |
| 8 | footer | Pale, full-width closing area with contact, credits, and attribution content. | Contact links, Credits | Light canvas, Dark text, Minimal rules |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--wp-block-synced-color: #7a00df;
--wp-block-synced-color--rgb: 122,0,223;
--wp-bound-block-color: #7a00df;
--wp-editor-canvas-background: #ddd;
--wp-admin-theme-color: #007cba;
--wp-admin-theme-color--rgb: 0,124,186;
--wp-admin-theme-color-darker-10: #006ba1;
--wp-admin-theme-color-darker-10--rgb: 0,107,160.5;
--wp-admin-theme-color-darker-20: #005a87;
--wp-admin-theme-color-darker-20--rgb: 0,90,135;
--wp-admin-border-width-focus: 2px;
--wp--preset--font-size--normal: 16px;
--wp--preset--font-size--huge: 42px;
--wp--preset--color--black: #000000;
--wp--preset--color--cyan-bluish-gray: #abb8c3;
--wp--preset--color--white: #ffffff;
--wp--preset--color--pale-pink: #f78da7;
--wp--preset--color--vivid-red: #cf2e2e;
--wp--preset--color--luminous-vivid-orange: #ff6900;
--wp--preset--color--luminous-vivid-amber: #fcb900;
--wp--preset--color--light-green-cyan: #7bdcb5;
--wp--preset--color--vivid-green-cyan: #00d084;
--wp--preset--color--pale-cyan-blue: #8ed1fc;
--wp--preset--color--vivid-cyan-blue: #0693e3;
--wp--preset--color--vivid-purple: #9b51e0;
--wp--preset--font-size--small: 13px;
--wp--preset--font-size--medium: 20px;
--wp--preset--font-size--large: 36px;
--wp--preset--font-size--x-large: 42px;
--wp--preset--spacing--20: 0.44rem;
--wp--preset--spacing--30: 0.67rem;
--wp--preset--spacing--40: 1rem;
--wp--preset--spacing--50: 1.5rem;
--wp--preset--spacing--60: 2.25rem;
--wp--preset--spacing--70: 3.38rem;
--wp--preset--spacing--80: 5.06rem;
--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
```

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