# 19 86 Fr · Design system migration spec

> Source: https://19-86.fr  ·  Curated by OpenDesign  ·  en

> This site is an excellent reference for bold typographic scale and the use of massive, overlapping numerals as a graphic texture.

## 1. Identity DNA

This design system is a precision instrument, constructed with the exactitude of a Swiss watchmaker. It operates as a minimalist architectural portfolio, where the structure itself—the rigorous grid, the bold typographic scale—becomes the primary visual statement.

**One-liner:** A minimalist architectural studio portfolio using extreme typographic scale and rigorous tabular structure.
**Keywords:** Architectural Portfolio · Studio · Precision · Refined · Bold Typography
**Analogy:** A precision instrument displaying structured projects with architectural clarity.

## 2. Color

The palette is a deliberate act of subtraction, using only pure black (#000000) and pure white (#ffffff). This absolute monochrome establishes the foundational principle: the content, not the decoration, provides all visual interest.

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

**Color principle:** Absolute monochrome with black text and borders on a pure white background.

The principle is uncompromising: color exists only as a binary of structure and void, leaving the typographic elements to carry all weight.

## 3. Typography

Typography is handled with the category of a humanist sans, using a regular weight of 400 to maintain a uniform, quiet voice. The system employs extreme scale contrast, with massive display numbers up to 490px functioning as graphic watermarks against the tabular text.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 490px | 1.0 | 400 | -10px | Large background watermark numbers |
| body | 24px | 1.2 | 400 | 0px | Tabular list text and headers |

## 4. Spacing

The rhythm is measured and consistent, built upon a 24px horizontal padding and a strict 1px vertical rule between list items.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 24px horizontal padding and 1px vertical rhythm between rows.

## 5. Surfaces

Surfaces are defined with architectural clarity, completely flat and devoid of simulated depth. Borders are exclusively 1px solid #000000 horizontal lines, creating a precise, tabular division of space.

- **Radius:** sm 0px · md 0px · lg 0px · pill 50px
- **Borders:** 1px solid #000000 horizontal lines separating list items

## 6. Layout

The layout skeleton is a full-width tabular list, where each row is a discrete, bordered unit. This list is overlaid by giant typographic numbers, creating a layered composition of structure and graphic texture.

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

**Skeleton:** Full-width tabular list with a massive typographic watermark overlay

## 7. Motion & Interaction

Motion philosophy is one of subtle, functional punctuation. Transitions are limited to smooth opacity fades and max-height expansions, guiding interaction without ornament.

- **Durations:** micro 250ms · small 300ms · medium 800ms
- **Easing:** `linear`
- **Patterns:**
  - opacity fade
  - max-height expansion

- **Hover:** Pointer cursor on rows indicating clickability
- **Click:** Row expansion or navigation to project detail
- **Transition:** All properties transition smoothly
- **Keyboard:** Standard list navigation

## 8. Voice & Don'ts

The editorial voice is authoritative and highly structured, mirroring the architectural precision of the layout. It communicates through a bold typographic hierarchy and minimal interactive cues, avoiding all playful or decorative elements.

- **Tone:** Authoritative, architectural, and highly structured
- **Headline style:** Massive, overlapping typographic numbers used as a graphic element
- **CTA style:** Subtle interactive rows with minimal visual noise
- **Avoid:** Playful elements / Bright accent colors / Drop shadows / Decorative icons

### Don'ts
- ❌ Don't use drop shadows — screenshot shows completely flat 2D surfaces
- ❌ Don't use accent colors — screenshot shows a strict monochrome black-and-white palette
- ❌ Don't use heavy font weights — screenshot shows uniform regular weight across all text
- ❌ Don't use decorative elements — screenshot relies entirely on typography and thin 1px lines
- ❌ Don't use rounded containers — screenshot uses sharp edges and straight horizontal rules
- ❌ Don't clutter the interface — screenshot maintains generous white space and a strict grid

The system deliberately avoids drop shadows, accent colors, heavy font weights, and decorative icons, relying instead on the purity of its grid and typography.

## System Prompt (paste into AI tool)

```
This is a refined architectural studio portfolio characterized by extreme typographic scale and rigorous monochrome structure. The design relies on a pure white background with solid black typography and 1px black horizontal rules. Key colors are #ffffff (bg) and #000000 (ink/text/borders). The typography uses a humanist-sans category (Store_Norske) at a regular weight of 400, featuring massive display numbers up to 490px used as a watermark over tabular lists. Critical constraints: never introduce accent colors or gradients, avoid rounded corners or drop shadows, and maintain the strict tabular grid. The layout is fully responsive but maintains the core tabular DNA, using 24px horizontal padding. Components are minimal, focusing on clean rows and a custom dropdown menu.
```