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

# Magnetism · Design System

> Quiet monochrome frames bold, immersive creative work.

**Theme:** light · **Industry:** agency · **Source:** https://magnetism.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._

Magnetism presents its Paris creative agency through a restrained monochrome shell and an expansive, image-led portfolio. Oversized uppercase typography, fine dividers, and generous breathing room keep attention on each project.

## North star

Keep the interface quiet and typographic so full-bleed client work becomes the page’s visual event.

## Overview

The page uses a pale grey canvas (#ececec) as a continuous backdrop, with near-black (#222222) typography providing the main contrast. Dark charcoal (#343434) appears in subdued interface or inverse contexts, while light grey (#cccccc) is reserved for delicate rules and separators. The visual identity is intentionally quiet: the bright blues, warm tones, and other saturated hues belong to client imagery rather than the agency’s core palette. TT Hoves Pro Trial carries the oversized, widely tracked uppercase wordmark and compact labels; NeueMontreal provides a softer voice for selected headings. A wide, open masthead leads into a sequence of full-bleed project images and video, interrupted by fine caption bands. The overall page stays flat and spacious, with generous vertical gaps and minimal container decoration. Lower sections return to small editorial text, ruled project rows, and an open, restrained footer.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#222222` | `--color-studio-ink` | neutral | Primary wordmark, headings, navigation, body copy, and project captions. |
| Gallery Mist | `#ececec` | `--color-gallery-mist` | surface | Continuous page canvas and the pale bands surrounding project media. |
| Charcoal Veil | `#343434` | `--color-charcoal-veil` | semantic | Muted or inverse interface and text contexts; keep it subordinate to the main ink. |
| Soft Rule | `#cccccc` | `--color-soft-rule` | neutral | Fine section, caption, and footer dividers against the pale canvas. |

### Semantic aliases

`--color-canvas` → `#ececec` (Gallery Mist) · `--color-surface` → `#343434` (Charcoal Veil) · `--color-text` → `#222222` (Studio Ink) · `--color-text-muted` → `#343434` (Charcoal Veil) · `--color-border` → `#cccccc` (Soft Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#222222` | `#ececec` | 13.47:1 | AAA |
| `#222222` | `#343434` | 1.28:1 | fail |
| `#343434` | `#ececec` | 10.54:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| TT Hoves Pro Trial | `--font-body` | webfont | 400, 500, 300 | Wordmark, navigation, labels, captions, and most body copy. | Manrope |
| NeueMontreal | `--font-display` | webfont | 400 | Selected secondary headings, providing contrast to the dominant geometric sans. | DM Sans |

- **TT Hoves Pro Trial:** Use regular and light weights; display and micro-label styles favor uppercase with conspicuous tracking.
- **NeueMontreal:** Measured at regular weight; retain natural case and open, readable line spacing.

### Type scale — Major Third (ratio ≈ 1.245, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 27px | 400 | 1 | 0.22em | uppercase | TT Hoves Pro Trial | Large uppercase masthead or primary display statement. |
| h2 | 24px | 400 | 1.5 | 0 | — | NeueMontreal | Secondary editorial heading, such as a section introduction. |
| h3 | 20px | 400 | 1.5 | 0.1em | uppercase | TT Hoves Pro Trial | Uppercase project or section title. |
| body | 14px | 300 | 1.5 | 0 | — | TT Hoves Pro Trial | Agency description and supporting project or service copy. |
| caption | 10px | 400 | 1 | 0.22em | uppercase | TT Hoves Pro Trial | Tiny uppercase labels beneath project imagery. |
| nav | 27px | 400 | 1 | 0.22em | uppercase | TT Hoves Pro Trial | Prominent uppercase primary navigation. |
| eyebrow | 10px | 400 | 1 | 0.22em | uppercase | TT Hoves Pro Trial | Small uppercase section markers and introductory labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 8, 12, 14, 16, 24, 32, 36, 48, 64, 80, 180 px.
- Section rhythm 64px · element gap — · card padding — · max content width 1312px.

A wide desktop canvas uses a measured page maximum of 1312px, with content aligned to a consistent outer frame. The masthead is spacious and asymmetrical: an oversized wordmark dominates, while compact introductory copy and navigation sit beneath or alongside it. Selected work follows as a long, single-column sequence of full-bleed media, with compact label bands and occasional supporting portfolio tiles. Large measured section gaps create deliberate pauses. The lower project list and footer remain open and editorial rather than card-based.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s linear` on interactive elements.

The measured interface is flat, with no recurring shadows, gradients, or rounded card treatment. Separate content through whitespace and thin light-grey rules rather than raised containers. Media can visually layer through cropping and full-bleed placement, but the surrounding page remains calm and unembellished.

## Imagery

Client work supplies the page’s color and visual drama: campaign photography, product imagery, film stills, and video. Project media is broad and immersive, often extending edge to edge, while supporting work appears in paired tiles. Keep image treatment faithful to each project rather than applying a unifying brand filter. Captions sit in restrained pale strips, allowing imagery to remain the focus.

## Components

### Masthead

Oversized uppercase Magnetism wordmark on the pale canvas, supported by concise agency copy and compact navigation.

### Primary navigation

WORKS, ABOUT, BOUTIQUE, and CCØ appear as spaced, tracked uppercase links without button styling.

### Featured project

Full-bleed image or video followed or accompanied by a narrow label band naming the work category and client.

### Portfolio tiles

Supporting client work uses paired image tiles with fine dividers and small uppercase captions.

### More projects list

Editorial project rows align project name, work type, and year, using hairline separators instead of cards.

### Footer

Open contact and social area with agency details, emblem or wordmark, and a fine bottom rule.

### Measured component styles

- **Link**: transparent background · text #222222 · radius 0px · padding 0px · 400 16px TT Hoves Pro Trial
- **Navigation item** (“WORKS”): transparent background · text #222222 · radius 0px · padding 0px · 400 27px TT Hoves Pro Trial · uppercase

## Do

- Use #ececec as the primary page canvas.
- Set essential text and navigation in #222222.
- Let oversized, tracked uppercase typography define the masthead.
- Showcase portfolio work with wide, immersive media.
- Separate content with whitespace and #cccccc hairlines.
- Keep project captions compact and uppercase.

## Don't

- Do not turn client-image colors into the agency palette.
- Do not add decorative gradients or shadows.
- Do not place every project inside a rounded card.
- Do not crowd the masthead or section transitions.
- Do not use heavy backgrounds behind ordinary copy.
- Do not make the navigation resemble prominent CTA buttons.

## Agent prompt

Build a new page in Magnetism’s restrained Paris-agency style. Use Gallery Mist (#ececec) as the continuous canvas and Studio Ink (#222222) for the wordmark, navigation, and primary copy. Reserve Charcoal Veil (#343434) for subdued contexts and Soft Rule (#cccccc) for fine separators. Use a geometric sans such as Manrope for widely tracked uppercase display text, navigation, and compact labels; use a quieter sans for selected editorial headings. Keep the layout broad, spacious, and asymmetrical, with a strong typographic masthead and generous section pauses. Make project photography or video the main source of color and visual energy; do not filter it into brand colors. Favor full-bleed media, small caption bands, simple ruled project rows, and a flat interface without ornamental cards, shadows, or gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Oversized wordmark with concise agency copy and compact navigation across an open pale canvas. | Primary navigation, Selected-work cue | Oversized uppercase wordmark, Tracked microcopy, Open whitespace |
| 2 | gallery | A full-bleed featured campaign image or video with a narrow category and client caption. | Featured work link, Media-led browsing | Edge-to-edge media, Slim caption band |
| 3 | gallery | Full-bleed feature media, followed in the broader portfolio flow by paired project tiles. | Project link, Portfolio discovery | Immersive video or image, Small uppercase labels |
| 4 | gallery | A full-width campaign showcase with a compact label strip and adjoining portfolio imagery in the page flow. | Project link, Sequential browsing | Full-bleed video, Fine caption divider |
| 5 | video | Wide showreel media spanning the section, with a narrow title and brand caption. | Play or view showreel, Agency storytelling | Large video frame, Minimal caption band |
| 6 | other | A short editorial statement sits alone within an expansive pale section. | Brand positioning | Small text block, Generous whitespace |
| 7 | product-grid | Section heading and introduction lead into an orderly project list with aligned details and hairline rules. | Project discovery, Scan project type and year | Editorial rows, Fine horizontal separators |
| 8 | footer | Open footer composition with agency identity, Paris contact details, and a fine lower navigation band. | Contact link, Social links, Legal navigation | Sparse multi-part layout, Thin rules, Small uppercase labels |

## Source CSS custom properties (selected)

```css
--ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--ease-out-expo: cubic-bezier(0.19,1,0.22,1);
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
--column-spacing: 1.5rem;
--transition-duration: .8s;
--layout-columns-gap: calc(1vw*0.83333);
--bg-color: #ececec;
--text-color: #222;
--accent-bg-color: #ececec;
--accent-border-color: #ececec;
--accent-color: #ececec;
--accent-bg-hover-color: #ccc;
--accent-border-hover-color: #ccc;
--accent-hover-color: #ececec;
```

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