# Victoiredouy · Design system migration spec

> Source: https://victoiredouy.com  ·  Curated by OpenDesign  ·  en

> This site serves as an excellent example of extreme typographic scale and restraint, demonstrating how massive display type can define an entire aesthetic without relying on color or imagery.

## 1. Identity DNA

The design system for Victoiredouy operates like a high-contrast black-and-white editorial magazine, where massive, condensed display type becomes the primary graphic element. It is a stark, typographic portfolio that relies on the weight and scale of its letterforms to create visual impact against a deep black background.

**One-liner:** A stark, typographic portfolio or editorial site featuring massive display headings against a deep black background.
**Keywords:** editorial · minimalist · typography-driven · high-contrast
**Analogy:** A high-contrast black-and-white editorial magazine with oversized, condensed display type.

## 2. Color

The palette is a strict, high-contrast monochrome scheme built entirely around deep black and near-white, with subtle grey for secondary elements. This binary approach ensures maximum editorial impact and places all visual emphasis on typographic form.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--bg-soft` | `#000000` | card background |
| `--bg-quiet` | `#000000` | quiet area |
| `--ink` | `#FAFAFA` | body text |
| `--ink-soft` | `#DCDCDC` | secondary text |
| `--muted` | `#767676` | placeholder |
| `--line` | `rgba(220, 220, 220, 1.0)` | divider |

**Color principle:** Strict monochrome palette using near-black backgrounds and near-white text for maximum contrast and editorial impact.

The guiding principle is to maintain a severe, high-contrast foundation that allows the typography to dominate without competition from color.

## 3. Typography

Typographic voice is defined by a dramatic contrast between massive, tightly tracked condensed display type and the utilitarian clarity of Space Mono for body text and navigation. The system uses uppercase transforms for navigation and labels, reinforcing the severe, editorial tone.

- **Display:** condensed-grotesque-sans
- **Body:** monospaced
- **Mono:** monospaced

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 177px | 0.85 | 400 | -5.3px | Massive, screen-filling display headings |
| heading | 54px | 1.0 | 400 | -1px | Section headings |
| body | 15px | 1.5 | 400 | 0.3px | Standard body text and navigation |

**Type rules:**
- Use Space Mono for body text and navigation.
- Use a condensed grotesque sans for massive display headings.
- Apply tight negative tracking to large display text.
- Use uppercase transform for navigation and certain labels.

## 4. Spacing

Spacing rhythm is loose and varied, with significant vertical padding that separates major sections and gives the massive typography room to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Loose and varied, with significant vertical padding separating major sections.

## 5. Surfaces

Depth is communicated through minimal means: a subtle, dark shadow provides lift, while a faint, light border delineates interactive states. Borders are thin and used primarily for functional separation, maintaining the overall flat, graphic quality.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 1px 2px rgba(0,0,0,0.5)
  - 0px 0px 0px 1px rgba(250,250,250,0.1)
- **Borders:** Thin 2px borders used primarily for interactive states and subtle separation.

## 6. Layout

The layout skeleton consists of full-width columns designed specifically to accommodate extremely large typography. These clean, spacious structures provide the framework for the oversized display elements that define the site's aesthetic.

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

**Skeleton:** Full-width columns designed to accommodate extremely large typography.

## 7. Motion & Interaction

Motion is smooth and refined, applied only to functional state changes with specific cubic-bezier easing. Transitions on background-color, opacity, and transform properties are precise and understated, avoiding any decorative animation.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color transitions on interactive elements.
  - Eased opacity and transform transitions for UI state changes.

- **Hover:** Subtle color or background-color shifts on interactive elements.
- **Click:** Standard active states.
- **Transition:** Smooth background-color and color transitions with a 0.1s duration.
- **Keyboard:** Standard focusable elements.

## 8. Voice & Don'ts

The editorial voice is minimalist and severe, conveyed through massive, tightly tracked display headlines and understated monospaced call-to-action labels. Every element is chosen to maintain a stark, unadorned typographic focus.

- **Tone:** Minimalist and severe.
- **Headline style:** Massive, tightly tracked, condensed uppercase display type.
- **CTA style:** Understated monospaced text labels.
- **Avoid:** Colorful gradients / Rounded corners / Drop shadows on text / Playful or decorative elements

### Don'ts
- ❌ Don't use rounded corners — screenshot shows sharp, zero-radius edges.
- ❌ Don't use vibrant accent colors — screenshot shows a strict monochrome palette.
- ❌ Don't use light or serif display fonts — screenshot shows heavy, condensed sans-serif display type.
- ❌ Don't use generous line-height for headings — screenshot shows tightly packed, almost touching display lines.
- ❌ Don't use wide letter-spacing for display text — screenshot shows tight, negative letter-spacing.
- ❌ Don't use drop shadows on text — screenshot shows flat, high-contrast typography.

The system deliberately avoids all playful or decorative elements, including colorful gradients, rounded corners, and drop shadows on text, in favor of raw, high-contrast type.

## System Prompt (paste into AI tool)

```
This design is a minimalist, typography-driven editorial site characterized by stark black-and-white contrast and massive, condensed display headings. The primary palette relies strictly on deep black (#000000) for backgrounds and near-white (#FAFAFA) for text, with subtle grey (#DCDCDC, #767676) for secondary elements. Typography is the dominant feature, utilizing a condensed grotesque sans for oversized display type and a monospaced font (Space Mono) for body text and navigation. Layouts are clean and spacious to accommodate large text scales. Critical prohibitions include avoiding rounded corners, vibrant accent colors, drop shadows on text, and wide letter-spacing for display headings.
```
