---
name: Folkert Link
description: "This site is an excellent example of expressive editorial typography used within a highly restrained, functional portfolio structure."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "rgba(0,0,0,0.75)"
  tertiary: "#FFFF00"
  neutral: "rgba(0,0,0,0.4)"
  line: "rgba(0,0,0,0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 120px
    lineHeight: 0.85
    fontWeight: 400
    letterSpacing: "-2px"
  body:
    fontFamily: system-sans
    fontSize: 14.5px
    lineHeight: 1.65
    fontWeight: 400
    letterSpacing: "0px"
  mono:
    fontFamily: system-sans
    fontSize: 13px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 0px
  md: 0px
  lg: 13px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A typographic portfolio for designer Folkert Gorter, featuring a rigid monospaced index and expressive overlapping display text.

*A minimalist, highly curated design index or project journal.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`rgba(0,0,0,0.75)`)** — uses `ink-soft` token
- **Accent (`#FFFF00`)** — uses `accent` token
- **Muted (`rgba(0,0,0,0.4)`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.15)`)** — uses `line` token

## Typography

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

- 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.

## Layout

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

*Rhythm:* Generous vertical spacing in the monospaced list, contrasted with tight overlapping in the display text.

## Elevation & Depth

- Borders: 1px solid rgba(0,0,0,0.15) on card elements, with heavier borders on specific interactive components.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 13px
- `pill`: 999px

## Components

- **button:** Text-based navigation links, some with bold monospaced styling and yellow highlighting.
- **card:** Asymmetric grid of project thumbnails, mostly images with no uniform border radius.
- **chip:** N/A
- **input:** N/A
- **hero:** Large, expressive overlapping and vertically rotated display text dominating the central viewport.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```