风格库/个人作品集/Maëlan Le Meur

Maëlan Le Meur

以克制对比与巨幅字体传达设计理念Quiet contrast, oversized type, and purposeful design.

深色主题个人作品集graphic designer portfolio homepage极简编辑风深色字体主导网格布局原网页 maelanlemeur.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Maëlan Le Meur 首屏

这是法国平面设计师的个人作品集,以巨幅字体、细密网格线和暖调深色画布构成鲜明视觉。克制的配色贯穿项目列表,页面最终以浅色背景和简洁署名收尾。

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

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.

配色

点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。

品牌色
表层色
中性色
功能色
页面底色 · Roasted Umber表层 · Parchment Ivory表层 2 · Earth Brown主文字 · Parchment Ivory次要文字 · Muted Black描边 · Earth Brown强调 · Earth Brown
文字背景对比度WCAG
#eee9cc Parchment Ivory#1e1915 Roasted Umber14.24:1AAA
#eee9cc Parchment Ivory#674825 Earth Brown6.78:1AA
#111111 Muted Black#1e1915 Roasted Umber1.08:1不达标
#111111 Muted Black#eee9cc Parchment Ivory15.43:1AAA
#111111 Muted Black#674825 Earth Brown2.28:1不达标
#674825 Earth Brown#1e1915 Roasted Umber2.1:1不达标

字体

字号阶梯:Custom(比例约 1.817,正文 16px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

PP Neue Montreal

网络字体 · 字重 400 · 占比 100%
免费替代:DM Sans

Display typography, headings, body copy, navigation, labels, and links throughout.

角色示例字号字重行高字距
特大标题
Oversized opening name and profession typography.
Maëlan Le Meur
317px40010
一级标题
Primary hero name and major page statements.
Maëlan Le Meur
225px40010
二级标题
Large section statements and project-area display heading.
Maëlan Le Meur
115px4000.950
三级标题
Secondary headings and prominent portfolio titles.
Maëlan Le Meur
57.5px40010
四级标题
Compact section and project headings.
The quick brown fox 敏捷的狐狸
26px40010
正文
Introductory statements, supporting copy, and project descriptions.
The quick brown fox 敏捷的狐狸
16px4001.20
辅助文字
Small uppercase metadata and discipline labels.
The quick brown fox 敏捷的狐狸
15px4001.20
链接
Uppercase portfolio and navigation links.
The quick brown fox 敏捷的狐狸
15px40010

间距与布局

基准单位 4px · 密度:宽松

210px版块间距
—元素间距
—卡片内边距
1400px内容最大宽度
12px
17px
20px
40px
50px
60px

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.

圆角与层次

按钮 · 50%
链接 · 9999px

没有测到阴影:页面是扁平的,层次靠底色和描边区分。

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.

组件

下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。

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.

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.

页面版块

共 8 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • 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.

✕ 不该做

  • 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.

给 AI 的提示词

想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。

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.

相似风格

Maëlan Le Meur 设计系统 — 配色、字体与 DESIGN.md | Design DNA