---
title: "19–86 design system"
variant: extended
source: https://19-86.fr/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/19-86-fr)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# 19–86 · Design System

> An architectural portfolio reduced to type and space.

**Theme:** light · **Industry:** design · **Source:** https://19-86.fr/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

19–86 presents an architecture studio through a stark monochrome identity and an oversized numerical wordmark. The homepage pairs generous white space with a compact, finely ruled project index.

## North star

Let oversized, precise typography and generous white space establish the identity; keep project information quiet, aligned and monochrome.

## Overview

The visual identity is built from only two measured colours: white (#ffffff) forms the uninterrupted canvas, while black (#000000) carries the wordmark, navigation, project text and rules. The opening viewport is intentionally sparse: an enormous “19–86” sits alone on white, with no decorative colour or supporting copy competing for attention. A page overview reveals the contrasting project-list treatment: compact rows of text, delicate black horizontal separators and a small status mark at the far edge. Store Norske Ja Light supplies a restrained, contemporary typographic voice; the display scale makes the numerals feel architectural, while smaller repeated labels organize the work like a catalogue. The layout relies on open space around the identity and dense, orderly alignment in the index rather than cards, shadows or filled panels. Project imagery may appear in the portfolio, but it does not define the measured first viewport’s brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Studio Ink | `#000000` | `--color-studio-ink` | brand | Wordmark, navigation, project and link text, plus the fine horizontal rules organizing the project index. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | The dominant page canvas and open field surrounding the oversized black identity. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-border` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| store_norske_ja_light | `--font-body` | webfont | 400 | Display wordmark, body copy, navigation and project links | Manrope |

- **store_norske_ja_light:** Use the measured regular weight; oversized numerals are tightly tracked, while labels and links remain calm and unembellished.

### Type scale — Custom (ratio ≈ 20.396, base 24px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 489.5px | 400 | 1 | -0.02em | — | store_norske_ja_light | Oversized 19–86 identity across the opening canvas. |
| body | 24px | 400 | 1.2 | 0 | — | store_norske_ja_light | Supporting studio or project information in the portfolio. |
| nav | 24px | 400 | 1.2 | 0 | — | store_norske_ja_light | Compact site and project-index navigation labels. |
| link | 24px | 400 | 1.2 | 0 | — | store_norske_ja_light | Project actions such as “Voir le projet”. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 5, 8, 12, 24, 30 px.
- Section rhythm 112px · element gap — · card padding — · max content width 1380px.

The first viewport is a single, open white field with the oversized wordmark centered as the dominant element. The measured page maximum width is 1380px, and the overall density is spacious, with a 112px section gap. In the full-page overview, the project index switches to a much denser catalogue rhythm: aligned text columns, repeated horizontal rules and a right-edge status mark. Preserve clear alignment and generous separation between major page regions; no multi-column card grid is measured.

## Shape & elevation

- Radius: nav `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The interface reads as flat: no measured shadows, gradients or raised cards. Use thin black horizontal rules to separate index rows, not layered panels. Keep the white canvas continuous and let typography, spacing and alignment provide hierarchy.

## Imagery

The first viewport contains no visible photography, illustration, 3D or video; the wordmark itself is the visual focus. The full-page overview suggests a project-led portfolio, where architectural imagery can support individual entries without altering the restrained black-and-white identity. Keep media treatment quiet and let project documentation remain distinct from the sparse opening canvas.

## Components

### Oversized wordmark

Set “19–86” in the measured light display face, in black against the open white canvas.

### Project index rows

Use compact, aligned project metadata with fine horizontal separators and a small far-right status mark, as shown in the page overview.

### Project link

Render “Voir le projet” as plain black 24px text in Store Norske Ja Light, without a filled button treatment.

### Navigation labels

Use plain black 24px Store Norske Ja Light text; the measured “Lieu” navigation entries have horizontal padding.

### Measured component styles

- **Link** (“Voir le projet”): transparent background · text #000000 · radius 0px · padding 0px · 400 24px store_norske_ja_light
- **Navigation item** (“Lieu”): transparent background · text #000000 · radius 0px · padding 0px 24px · 400 24px store_norske_ja_light

## Do

- Use white as the uninterrupted primary canvas.
- Use black for the wordmark, text, links and rules.
- Give the display numerals ample surrounding white space.
- Keep project-index columns precisely aligned.
- Separate catalogue rows with fine horizontal rules.
- Use the measured light typeface consistently.

## Don't

- Do not introduce unmeasured accent colours.
- Do not add shadows, gradients or raised cards.
- Do not crowd the opening wordmark with supporting content.
- Do not turn project links into filled CTA buttons.
- Do not use decorative illustrations to define the brand.
- Do not replace the orderly index with a card grid.

## Agent prompt

Build a new architecture-studio page in 19–86’s restrained editorial style. Use Gallery White (#ffffff) as the continuous canvas and Studio Ink (#000000) for the wordmark, navigation, links, project text and fine dividers; do not add accent colours. Set typography in Store Norske Ja Light, or a close free substitute, with an oversized tightly tracked identity and quieter, regular-weight labels. Keep the opening area sparse and spacious, then organize portfolio entries as a precise catalogue with aligned metadata columns, thin horizontal rules and optional small status marks. Prefer flat surfaces over cards, shadows or gradients. Let architectural project imagery appear as supporting content, not as a reason to alter the monochrome identity. Preserve a calm contrast between the expansive hero and denser index.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A single white canvas with an oversized black 19–86 wordmark as the dominant visual. | Immediate studio identity | Oversized typography, Monochrome canvas, Generous whitespace |

## Source CSS custom properties (selected)

```css
--base-space: 8px;
--color-text: black;
--color-link: #8c8c8c;
--color-bg: white;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/19-86-fr