# Folkert Link · Design system migration spec

> Source: https://folkert.link  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of expressive editorial typography used within a highly restrained, functional portfolio structure.

## 1. Identity DNA

Folkert Link operates as a minimalist design index, a curated journal where typography is the primary material. The system is built on a stark monochrome palette and a rigid structural contrast, using a single, sharp yellow highlight to mark navigational context within the project archive.

**One-liner:** A typographic portfolio for designer Folkert Gorter, featuring a rigid monospaced index and expressive overlapping display text.
**Keywords:** Portfolio · Design Index · Monospaced · Experimental · Curated
**Analogy:** A minimalist, highly curated design index or project journal.

## 2. Color

The color system is a study in restraint, built on a stark, high-contrast monochrome of pure white and black. A single, sharp primary yellow punctuates this palette, used sparingly to highlight active states and navigation context.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `rgba(0,0,0,0.75)` | secondary text |
| `--muted` | `rgba(0,0,0,0.4)` | placeholder |
| `--accent` | `#FFFF00` | single accent |
| `--line` | `rgba(0,0,0,0.15)` | divider |

**Color principle:** Stark high-contrast monochrome (black and white) with a single sharp yellow highlight for navigation context.

The principle is absolute: a strict monochrome base ensures content remains the focal point, with the single accent color serving only a functional, contextual purpose.

## 3. Typography

The typographic voice is defined by a dual personality: a strict, monospaced font for the structural index and a clean, expressive grotesque sans-serif for display headlines. This creates a dialogue between functional legibility and expressive, often overlapping, typographic form.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 120px | 0.85 | 400 | -2px | Overlapping vertical display text |
| body | 14.5px | 1.65 | 400 | 0px | Descriptive text |
| mono | 13px | 1.3 | 400 | 0px | Navigation index and headings |

**Type rules:**
- Primary typography is a strict monospaced font used for navigation and labels.
- Large display typography uses a clean grotesque sans-serif, often rotated or overlapping.
- Text colors are strictly black or semi-transparent black.

## 4. Spacing

Rhythm is established through generous vertical spacing in the monospaced list, contrasted sharply with the tight, overlapping arrangement of display text.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing in the monospaced list, contrasted with tight overlapping in the display text.

## 5. Surfaces

Surfaces are flat and defined by minimal, functional borders rather than depth. Card elements use a subtle 1px solid border, while interactive components receive heavier definition to signal their purpose.

- **Radius:** sm 0px · md 0px · lg 13px · pill 999px
- **Borders:** 1px solid rgba(0,0,0,0.15) on card elements, with heavier borders on specific interactive components.

## 6. Layout

The layout skeleton is an asymmetric split pane, anchored by a persistent, left-aligned monospaced navigation index. A dynamic content area to the right hosts expressive, often vertically rotated, display typography and project imagery.

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

**Skeleton:** Asymmetric split layout with a persistent monospaced index on the left and a dynamic content area on the right.

## 7. Motion & Interaction

Motion is utilitarian and quiet, designed to facilitate smooth transitions between content states without drawing attention to itself. The philosophy is to use simple fades and slides that support navigation clarity rather than add decorative flourish.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Simple fade and slide transitions on hover and navigation changes.

- **Hover:** Cursor changes to pointer over interactive elements, with subtle color shifts or opacity changes.
- **Click:** Navigates to project-specific overlays or external links.
- **Transition:** All elements have a base transition defined for smooth state changes.
- **Keyboard:** Standard browser focus behavior.

## 8. Voice & Don'ts

The editorial voice is bare, minimal, and intellectual, with headlines that are expressive, overlapping, and often oriented vertically. Calls-to-action are plain monospaced text, sometimes highlighted with the system's single yellow accent.

- **Tone:** Bare, minimal, and intellectual.
- **Headline style:** Expressive, overlapping, and often vertically oriented display type.
- **CTA style:** Plain monospaced text, sometimes highlighted with a bright yellow background.
- **Avoid:** Avoid decorative elements or stock photography. / Avoid overly complex UI components or heavy gradients. / Avoid multiple accent colors.

### Don'ts
- ❌ Don't use multiple accent colors — screenshot shows a strict monochrome palette with a single yellow highlight.
- ❌ Don't use traditional rounded corners on all elements — screenshot shows a mix of sharp edges and specific rounded containers.
- ❌ Don't center-align the main navigation — screenshot shows a strictly left-aligned monospaced index.
- ❌ Don't use standard sans-serif for the main index — screenshot shows a dedicated monospaced font.
- ❌ Don't use busy backgrounds — screenshot shows a clean, solid white background.
- ❌ Don't use heavy drop shadows — screenshot shows flat surfaces with minimal, subtle borders.

The system deliberately avoids decorative elements, complex UI components, multiple accent colors, and standard layout conventions like centered navigation.

## System Prompt (paste into AI tool)

```
This is a portfolio and design index for Folkert Gorter, characterized by a stark monochrome palette with a single sharp yellow accent (#FFFF00). The layout relies heavily on a left-aligned monospaced index (Monument Grotesk Mono) contrasting with expressive, overlapping grotesque display type. Critical constraints include maintaining the strict black-and-white scheme, preserving the asymmetric split layout, and using the monospaced font exclusively for navigation and lists. Avoid decorative elements, complex UI components, or multiple accent colors. The interaction model is minimal, focusing on smooth transitions between project states.
```