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

# Charlie · Design System

> A stark black canvas for expressive motion and type

**Theme:** dark · **Industry:** portfolio · **Source:** https://charlielemaignan.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._

Charlie’s portfolio pairs a near-black canvas with a bold custom wordmark and a long, image-led grid of graphic design work. Restrained navigation and footer typography let the vivid, varied project artwork provide nearly all the color and visual rhythm.

## North star

Keep the interface nearly monochrome and let large, distinctive type and project artwork carry the visual impact.

## Overview

The page is built on a nearly uninterrupted #000000 canvas, with #ffffff reserved for the expressive custom Charlie wordmark, navigation labels, borders, and other key text. #838383 appears as subdued footer copy rather than a competing brand accent. The opening is deliberately sparse: a small centered pill navigation sits above an oversized typographic mark, followed by generous black space before the portfolio grid begins. The grid is the visual engine of the page, displaying varied graphic design and typography projects as colorful, high-contrast tiles against black gutters. These artwork colors belong to individual projects, not the site’s core palette. NeueHaas provides clean sans-serif navigation and supporting text, while the display lettering is custom and highly geometric. The overall layout feels editorial and gallery-like: consistent grid placement gives structure, while each artwork brings its own scale, color, and typographic character. The footer returns to compact, quiet navigation and metadata.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Black | `#000000` | `--color-gallery-black` | brand | Page canvas and uninterrupted backdrop around the hero, project gallery, and footer. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Hero wordmark, navigation text, outlined controls, and primary text. |
| Quiet Grey | `#838383` | `--color-quiet-grey` | neutral | Muted footer metadata and secondary supporting text. |

### Semantic aliases

`--color-canvas` → `#000000` (Gallery Black) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#838383` (Quiet Grey) · `--color-border` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#838383` | `#000000` | 5.54:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NeueHaas | `--font-body` | webfont | 400, 700 | Navigation, links, headings, body copy, captions, and footer text. | Inter |

- **NeueHaas:** Use clean sans-serif forms with measured regular and bold weights; text is generally sentence case, with no notable tracking.

### Type scale — Custom (ratio ≈ 4.243, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 360px | 400 | 0.7 | -0.075em | — | Brasparz Variable | Oversized custom lettering forming the hero wordmark. |
| h1 | 40px | 700 | 1.08 | 0 | — | NeueHaas | Bold section or page headings where present. |
| body | 20px | 400 | 1.25 | 0 | — | NeueHaas | Project labels and supporting portfolio text. |
| caption | 19px | 400 | 1.32 | 0 | — | NeueHaas | Compact supporting labels and footer details. |
| button | 19px | 400 | 1.32 | 0 | — | NeueHaas | Short labels inside pill-shaped navigation controls. |

OpenType features in use: `"calt", "case", "liga", "ss01", "ss02"`, `"ss01" 0`.

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 7, 16, 20, 30, 50, 55, 59 px.
- Section rhythm 59px · element gap 30px · card padding — · max content width 1306px.

The page uses a centered, gallery-like composition on a black canvas, with the measured content max width of 1306px. The hero wordmark and pill navigation are centered, while the long portfolio grid occupies the main scroll area and aligns project tiles into repeated columns. Generous black gutters separate artworks and preserve their individual framing. The opening has pronounced negative space; the footer compresses back into a three-column row. Overall density is comfortable, with a strong contrast between sparse introduction and image-rich gallery.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.1s ease-out` on interactive elements.

The interface is flat: there are no measured shadows or gradients. Strong contrast, black negative space, and thin white pill borders define the controls. Project images sit directly against the canvas with clear gutters rather than elevated cards or layered panels.

## Imagery

The gallery consists of graphic design and typography project images, including poster-like compositions, experimental lettering, and vivid color treatments. Tiles retain their individual artwork palettes and proportions against the black page rather than adopting a unified image filter. The first viewport also shows a security restriction notice, which is not representative of the portfolio’s visual system; follow the full-page gallery for the intended content style.

## Components

### Pill navigation

Centered row of rounded controls labeled Work, Type, and About; white outlines and text, with the active Work control filled white and set in black text.

### Hero wordmark

Large white custom display lettering centered beneath navigation; its distinctive segmented letterforms function as the primary visual anchor.

### Project gallery

Long, multi-column collection of graphic and typographic project images. Keep the surrounding canvas black and allow each tile’s artwork to retain its own palette.

### Project links

White NeueHaas links identify projects and may include a concise open-case-study action; avoid adding card-like surfaces.

### Footer navigation

Repeats the compact Work, Type, and About pill controls above a restrained footer row.

### Footer metadata

Copyright, email contact, and coding credit appear in a sparse three-column arrangement, with muted secondary text.

### Measured component styles

- **Primary button** (“Work”): background #ffffff · text #000000 · border 2px solid #ffffff · radius 100px · padding 7.1px 20px · 400 19.008px NeueHaas
- **Secondary button** (“Type”): transparent background · text #ffffff · border 2px solid #ffffff · radius 100px · padding 7.1px 20px · 400 19.008px NeueHaas
- **Link** (“Dekmantel Motion & Sound → Open case stu”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px NeueHaas

## Do

- Use Gallery Black (#000000) as the dominant canvas.
- Reserve Paper White (#ffffff) for key text and outlined controls.
- Let project artwork supply its own colors.
- Center the hero mark and primary navigation.
- Use rounded, thinly outlined navigation pills.
- Keep the footer compact and visually quiet.

## Don't

- Do not introduce new interface accent colors.
- Do not place project images inside raised cards.
- Do not crowd the hero with supporting copy.
- Do not treat artwork colors as brand palette colors.
- Do not add gradients or decorative shadows.
- Do not make footer metadata compete with the gallery.

## Agent prompt

Build a new creative portfolio page in Charlie’s style. Use Gallery Black (#000000) for the dominant canvas, Paper White (#ffffff) for primary text and thin pill-control outlines, and Quiet Grey (#838383) only for subdued secondary metadata. Center a compact row of rounded navigation pills above an oversized, custom-feeling typographic display mark. Keep the opening sparse, then give the work a long, multi-column gallery whose images retain their own colors and compositions; do not tint them to match the interface. Use a clean NeueHaas-like sans serif for labels and supporting text, with strong, expressive display lettering for the hero. Keep the layout flat, use clear black gutters between projects, and finish with a restrained three-part footer. Avoid shadows, gradients, colored UI accents, and card surfaces.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with pill navigation above a large custom wordmark on black. | Primary section navigation, Strong brand identification | Outlined pill controls, Inverted active pill, Oversized display lettering |
| 2 | footer | Compact three-column footer with repeated navigation and contact details. | Repeat section navigation, Direct email contact | Pill navigation, Muted metadata, Sparse text columns |

## Source CSS custom properties (selected)

```css
--grid-gap: 2.09vw;
--spacing01: calc(370vw*100/1440);
--spacing02: calc(525vw*100/1440);
--spacing03: calc(660vw*100/1440);
--spacing04: calc(208vw*100/1440);
--spacing05: calc(260vw*100/1440);
--spacing06: calc(80vw*100/1440);
--spacing07: calc(34vw*100/1440);
--spacing08: calc(434vw*100/1440);
--spacing09: calc(144vw*100/1440);
--spacing10: calc(197vw*100/1440);
--spacing11: calc(262vw*100/1440);
--spacing12: calc(545vw*100/1440);
--spacing13: calc(829vw*100/1440);
--spacing14: calc(1172vw*100/1440);
--spacing15: calc(1658vw*100/1440);
--spacing16: calc(125vw*100/1440);
--spacing17: calc(105vw*100/1440);
--spacing18: calc(103vw*100/1440);
```

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