# Merci-Michel · Design system migration spec

> Source: https://www.merci-michel.com  ·  Curated by OpenDesign  ·  en

> This site is a great example of a high-end creative portfolio, using typography and immersive media to establish a strong, premium brand identity.

## 1. Identity DNA

The Merci-Michel system is built as a cinematic stage, where the studio's work performs against immersive backdrops. Its identity DNA is a deliberate fusion of high-contrast monochrome with rich, dynamic media, creating a sense of privileged access into a creative workshop.

**One-liner:** A premium creative studio website featuring bold serif typography over immersive, animated backgrounds.
**Keywords:** gamification · creative · experiential · brand · playful
**Analogy:** A high-end creative agency website that blends elegant serif typography with immersive, colorful 3D and cinematic backgrounds to showcase their work.

## 2. Color

The palette is a study in contrast, using stark white text to command attention over dark, immersive, or color-rich backgrounds. This approach treats color not as a fixed swatch, but as a variable environment that frames the content.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#ffffff` | body text |
| `--line` | `rgba(255,255,255,0.2)` | divider |

**Color principle:** High-contrast and immersive, using white text over full-screen, dynamic, dark, or colorful backgrounds.

The principle is clarity through opposition: light typographic elements must always stand legible against the atmospheric depth of the imagery.

## 3. Typography

Typography is the system's defining voice, pairing the elegant authority of a **didone serif** for display with the structured honesty of a **monospace** font for body copy. All text is rendered in uppercase with generous letter spacing, creating a formal, intentional rhythm across both navigation and paragraphs.

- **Display:** didone-serif
- **Body:** monospace
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 70px | 1.0 | 400 | normal | Hero main title 'MERCI-MICHEL' |
| display-italic | 64px | 1.2 | 400 | normal | Hero subtitle 'digital gamification studio' |
| body | 16px | 1.5 | 400 | 1px | Body copy and paragraph text |
| caption | 12px | 1.2 | 400 | 1px | Navigation links and small labels |
| micro | 11px | 1.3 | 400 | 1px | UI elements and footer text |

**Type rules:**
- All text is uppercase with wide letter spacing for navigation and body copy.
- Display type uses a mix of standard didone serif and italicized variants.
- Body text uses a monospace font for a technical, structured feel.

## 4. Spacing

Spatial rhythm is dictated by full-viewport sections and centered content blocks, creating a generous, breathing layout that prioritizes focus over density.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible, driven by full-screen sections and centered content blocks.

## 5. Surfaces

The surface language avoids shadow and ornament, relying instead on **thin, semi-transparent white lines** as delicate separators and underlines. This minimal intervention maintains visual focus on the immersive background content.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Thin, semi-transparent white lines used as separators and underlines.

## 6. Layout

The layout skeleton is built on full-screen hero sections, where centered text content sits atop dynamic backgrounds. This structure creates a series of immersive, cinematic moments rather than a traditional scrolling column.

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

**Skeleton:** Full-screen hero sections with centered text content, often overlapping dynamic backgrounds.

## 7. Motion & Interaction

Motion serves the cinematic atmosphere, employing smooth fade-in and transform transitions that feel deliberate and elegant. Staggered animations and parallax-like effects on background elements add depth without distracting from the core message.

- **Durations:** micro 300ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth fade-in and transform transitions for page elements.
  - Parallax-like effects on background images or 3D elements.
  - Staggered animations for text and UI components.

- **Hover:** Subtle opacity changes or smooth transitions.
- **Click:** Immediate response with smooth state changes.
- **Transition:** Smooth, high-easing cubic-bezier curves for most property changes.
- **Keyboard:** Standard focus states, though primarily designed for visual and pointer interaction.

## 8. Voice & Don'ts

The editorial voice is confident and creative, articulated through bold serif headlines and understated, monospace calls-to-action. It avoids the noise of loud colors and rounded forms in favor of sharp, typographic precision.

- **Tone:** Confident, creative, and professional.
- **Headline style:** Bold, elegant serif typography, often mixed with stylized italics.
- **CTA style:** Understated, uppercase, monospace text links.
- **Avoid:** Loud or neon colors / Playful, rounded sans-serif fonts / Complex grid layouts / Busy or cluttered backgrounds / Bright, flat UI components

### Don'ts
- ❌ Don't use sans-serif fonts for headlines — screenshot shows elegant didone-serif display type.
- ❌ Don't use bright, solid background colors — screenshot shows dark, cinematic, or richly illustrated backgrounds.
- ❌ Don't use rounded corners on UI elements — screenshot shows sharp edges or fully circular pills.
- ❌ Don't use lowercase for body copy — screenshot shows widespread uppercase with letter spacing.
- ❌ Don't use a grid-heavy layout with multiple columns — screenshot shows centered, full-width content blocks.
- ❌ Don't use small, cramped spacing — screenshot shows generous white space and full-viewport sections.

It deliberately does not pursue playfulness through rounded corners, bright flat UI, or sans-serif fonts, reserving those choices for different contexts.

## System Prompt (paste into AI tool)

```
This is a premium creative studio website for a digital gamification agency. It features a high-contrast aesthetic with white text over immersive, dark, and colorful 3D backgrounds. The typography is a mix of elegant didone serif for display and monospace for body copy. The layout is centered and spacious, focusing on large, full-screen hero sections. Key colors are #000000 and #ffffff, with rich blues, reds, and pinks in the background media. Critical donts: do not use sans-serif for headlines, do not use solid bright backgrounds, do not use rounded corners, do not use lowercase text, do not use grid-heavy layouts, and do not use cramped spacing.
```
