# Magnetism Fr · Design system migration spec

> Source: https://www.magnetism.fr/en  ·  Curated by OpenDesign  ·  en

> This site is a textbook example of a luxury agency aesthetic, utilizing extreme typographic scale and aggressive restraint to communicate prestige and confidence.

## 1. Identity DNA

The design system for Magnetism operates like its namesake analogy—a magnetic field. It is a structured, powerful force, defined not by decorative ornament but by a disciplined, high-contrast framework that draws attention through sheer typographic presence and spatial clarity.

**One-liner:** A Paris-based luxury creative agency combining strategy, art direction, and production.
**Keywords:** creative agency · luxury · paris · minimalist · magnetic
**Analogy:** A magnetic field—structured, powerful, and drawing you in.

## 2. Color

The color system is a study in restraint, employing a strictly monochromatic palette that prioritizes the contrast between a neutral light-gray ground and deep, near-black ink. This neutral stage is intentionally set to let bold typography and vibrant, full-bleed photography command the visual narrative.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ECECEC` | main background |
| `--ink` | `#222222` | body text |
| `--ink-soft` | `#343434` | secondary text |
| `--muted` | `#AAAAAA` | placeholder |
| `--muted-soft` | `#DBDBDB` | weak hint |
| `--accent` | `#1A5AFF` | single accent |
| `--line` | `rgba(229, 231, 235, 1)` | divider |

**Color principle:** Restrained, high-contrast palette that prioritizes bold typography and allows vibrant imagery to act as the primary accent.

The principle is one of disciplined contrast, where the background recedes to allow content—text and image—to assert its authority.

## 3. Typography

Typography is the system's primary structural element, utilizing a geometric sans-serif category for its clean, authoritative voice. The rules establish a clear hierarchy: massive, tight-led display faces for impact, contrasted against small, wide-tracked uppercase text for functional navigation and metadata.

- **Display:** geometric-sans
- **Body:** grotesque-sans
- **Mono:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 1.0 | 400 | -1px | Massive hero headlines |
| h1 | 27px | 1.35 | 400 | 5.94px | Section headers and titles |
| body | 16px | 1.5 | 400 | 0px | General reading text |
| small | 10px | 1.5 | 400 | 2.2px | Captions, metadata, and navigation |

**Type rules:**
- Use wide letter-spacing for uppercase UI and meta text
- Maintain tight leading for massive display typography
- All-caps is standard for navigation and category labels

## 4. Spacing

The rhythm is built on a standard 4px grid, but the system emphasizes generous vertical spacing to support large-scale layouts and maintain breathing room around monumental type.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Standard 4px grid with generous vertical rhythm for large-scale layouts.

## 5. Surfaces

Surfaces are rendered with absolute flatness, deliberately avoiding drop shadows to preserve a clean, two-dimensional plane. Separation between content blocks is achieved solely through thin, subtle borders.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - None
- **Borders:** Thin, subtle borders using rgb(229, 231, 235) to separate content blocks.

## 6. Layout

The layout skeleton is minimalist and top-heavy, designed to support massive typographic statements that often bleed to the viewport's edge. This rigid vertical structure pairs with full-width, cinematic imagery to create an immersive, editorial flow.

- **Container max:** 1440px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A minimalist, top-heavy layout featuring massive typography that often bleeds into or near the screen edges, paired with full-width cinematic imagery.

## 7. Motion & Interaction

Motion philosophy favors subtlety and refinement over spectacle, using smooth, slow-duration opacity fades for page elements. Scroll-triggered reveals for imagery are scale or reveal effects, never flashy transitions, ensuring the interface feels calm and considered.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth opacity fades and transitions for page elements
  - Subtle scale or reveal effects on scroll for imagery

- **Hover:** Subtle opacity changes or cursor shifts on text links.
- **Click:** Immediate visual feedback through opacity or minor shifts.
- **Transition:** All elements use a 0.5s cubic-bezier(0.19, 1, 0.22, 1) transition for a refined feel.
- **Keyboard:** Standard focus states for accessibility.

## 8. Voice & Don'ts

The editorial voice is confident, sophisticated, and authoritative, matching the visual system's precision. Headlines are all-caps and ultra-bold, often using single words to command the page, while calls-to-action remain understated with elegant, uppercase text and directional cues.

- **Tone:** Confident, sophisticated, and authoritative.
- **Headline style:** All-caps, ultra-bold, and expansive, often using single words to command attention.
- **CTA style:** Understated and elegant, using small uppercase text with directional arrows.
- **Avoid:** Loud or chaotic color schemes / Decorative or overly ornate typography / Cluttered layouts with excessive UI elements / Informal or casual language

### Don'ts
- ❌ Don't use colorful gradients — screenshot shows flat, solid backgrounds like #ECECEC instead
- ❌ Don't use rounded corners — screenshot shows sharp, 0px radius edges on all elements
- ❌ Don't use drop shadows — screenshot shows completely flat, shadow-free surfaces
- ❌ Don't use mixed-case headlines — screenshot shows aggressive use of uppercase textTransform across headers
- ❌ Don't use wide margins for headers — screenshot shows massive display type bleeding near screen edges
- ❌ Don't use vibrant UI buttons — screenshot shows minimalist, text-only navigation links with subtle arrows

What the system deliberately avoids—loud colors, rounded corners, casual language, and cluttered layouts—is as definitive a choice as what it includes, ensuring a consistent tone of premium restraint.

## System Prompt (paste into AI tool)

```
This is a high-end creative agency portfolio for Magnetism. The design is defined by extreme typographic contrast: massive geometric sans-serif headlines (like 'MAGNETISM') dominate the viewport against a restrained, neutral background (#ECECEC) and dark ink text (#222222). The layout is minimalist and spacious, letting large-format, cinematic photography drive the visual narrative. Navigation and metadata are handled through small, wide-tracked, uppercase grotesque-sans text. Interactions are smooth and understated, relying on 0.5s cubic-bezier opacity fades. Critical don'ts: never use rounded corners, drop shadows, or casual lowercase headlines. Always prioritize expansive white space and rigid alignment to maintain the premium, refined agency aesthetic.
```