# Matteroffact Fr · Design system migration spec

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

> This site is a masterclass in anti-design, using extreme typography and raw HTML-style borders to create a highly memorable, artistic portfolio.

## 1. Identity DNA

Matter of Fact operates like a stripped-back gallery where large-scale typography is the primary exhibit. Interaction is reduced to essential, boxed triggers, and the entire system is built on a strict monochrome foundation that refuses decorative distraction.

**One-liner:** A minimalist French creative studio portfolio that relies entirely on massive typographic scale and stark black-and-white contrast.
**Keywords:** creative agency · minimalism · typography-driven · artistic · direct
**Analogy:** A stripped-back gallery where large-scale typography is the primary exhibit and interaction is reduced to essential, boxed triggers.

## 2. Color

The color system is an exercise in absolute restraint, employing a strict monochrome palette. Black text and borders sit on a pure white background, using only grayscale for necessary visual hierarchy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#a0a0a0` | secondary text |
| `--muted` | `#c0c0c0` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strict monochrome with black text and borders on a pure white background, using grayscale for visual hierarchy.

The principle is one of stark, binary contrast where color serves no purpose beyond legibility and structural emphasis.

## 3. Typography

The typographic voice is defined by the uniform use of the FreeSans family, maintained at a constant regular weight of 400. This choice prioritizes neutral, grotesque clarity over character, allowing scale alone to create hierarchy and impact.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 160px | 0.9 | 400 | -2px | Massive, screen-filling typographic statements and navigation labels |
| h1 | 36px | 1.2 | 400 | 0 | Secondary headings and navigation links |
| body | 22.5px | 1.2 | 400 | 0 | Standard text, navigation items, and subheadings |

**Type rules:**
- Use the FreeSans family for all UI and typographic elements
- Maintain a font weight of 400 for all text
- Keep line height tight at 1.2 for body and subheadings

## 4. Spacing

Spacing follows a loose, four-pixel grid rhythm, with heavy, deliberate padding applied to boxed elements to create visual tension.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 18 / 24 / 32 / 48 / 64 px
- **Rhythm:** Loose, based on a 4px grid with heavy emphasis on 18px and 45px padding for boxed elements.

## 5. Surfaces

Surfaces are defined by absence; there are no shadows or elevation, creating a completely flat plane. Depth is conveyed exclusively through the application of solid, three-pixel black borders around interactive elements.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Solid 3px black borders used exclusively for boxed UI elements like buttons and navigation links.

## 6. Layout

The layout skeleton is asymmetric and edge-aligned, rejecting centered compositions. Massive typographic blocks push aggressively against the viewport boundaries, while boxed navigation anchors itself in the corners.

- **Container max:** 1920px
- **Grid:** 12 columns, gutter 18px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric, edge-aligned layout with large typographic blocks pushing against the boundaries and corner-positioned boxed navigation.

## 7. Motion & Interaction

Motion is minimal and strictly functional, serving only to acknowledge interaction states. Transitions are confined to simple changes in color, padding, and opacity, executed with a consistent, brisk timing.

- **Durations:** micro 200ms · small 250ms · medium 1000ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - transitions on all properties
  - opacity fading
  - color changes

- **Hover:** Triggered on clickable boxed elements, likely changing text color or border color.
- **Click:** Standard pointer cursor on interactive elements.
- **Transition:** Smooth 0.2s to 0.25s transitions on color and padding properties.
- **Keyboard:** Not visibly distinct, relies on standard browser focus states.

## 8. Voice & Don'ts

The editorial voice is direct, unfiltered, and slightly confrontational, matching the raw visual presentation. Headlines employ playful, repetitive wordplay, while functional elements remain stark and devoid of visual flair.

- **Tone:** Direct, unfiltered, and slightly confrontational.
- **Headline style:** Playful, massive typography using rhyming or repetitive words (Fact, Fake, Tab, Hack).
- **CTA style:** Bare, functional, and devoid of visual flair.
- **Avoid:** Gradients / Soft shadows / Rounded corners / Bright accent colors / Decorative icons

### Don'ts
- ❌ don't use rounded corners — screenshot shows sharp, 0px rectangular corners on all buttons and elements
- ❌ don't apply drop shadows — screenshot shows completely flat, borderless UI with no elevation
- ❌ don't use colored backgrounds — screenshot shows a strictly pure #ffffff white background
- ❌ don't use decorative sans-serifs with distinct features — screenshot shows a uniform, neutral grotesque-sans
- ❌ don't center-align all text — screenshot shows aggressively left-aligned and right-aligned typography
- ❌ don't use bold font weights — screenshot shows all text strictly set to a regular font weight of 400

The system deliberately rejects gradients, soft shadows, rounded corners, bright accent colors, and decorative icons as part of its core identity.

## System Prompt (paste into AI tool)

```
Matter of Fact is a minimalist French creative studio portfolio that prioritizes raw typographic scale over traditional UI polish. The design is built on a strict black-and-white palette using #000000 ink on #ffffff backgrounds, with a neutral FreeSans typeface maintained at a constant 400 weight. Navigation and interactive elements are reduced to stark, 3px solid black bordered boxes, rejecting all modern embellishments. Critical don'ts: never use rounded corners (the UI is entirely sharp-edged), never apply shadows or gradients (the aesthetic is completely flat), and never use bold font weights (all text remains regular). The layout relies on massive, asymmetric typography to guide the user's eye, creating an expressive and intentionally unpolished feel that feels both raw and highly curated.
```