# Nordebrink · Design system migration spec

> Source: https://nordebrink.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of high-end, restrained editorial design where typography and spacing do all the heavy lifting without any decorative elements.

## 1. Identity DNA

The Nordebrink system functions as a curated monograph, where every element is subservient to the content. It is a design of pure restraint, relying on typographic precision and spatial rhythm rather than applied decoration.

**One-liner:** A refined, minimalist typographic portfolio with a focus on pure content and elegant hierarchy.
**Keywords:** restrained · typographic · refined · professional · minimal
**Analogy:** A curated monograph or high-end design portfolio.

## 2. Color

A strictly monochrome palette defines the entire chromatic language, using deep black for primary text and a specific muted gray for secondary information. This stark contrast against a pure white ground establishes hierarchy without relying on color accents.

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

**Color principle:** Stark, high-contrast monochrome palette relying entirely on typography and spacing for hierarchy.

The principle is absolute clarity: color is reserved for textual content, never for background or decorative fills.

## 3. Typography

The typographic voice is singular and disciplined, employing a humanist-sans category font with tight negative letter-spacing. A uniform weight of 400 is maintained throughout, using opacity and the muted gray for subtle differentiation rather than weight or size variation.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 20.7px | 1.2 | 400 | -0.414px | primary reading text and navigation |
| small | 16px | 1.2 | 400 | -0.32px | secondary metadata and subheadings |

**Type rules:**
- Tight negative letter-spacing for a refined, compact typographic texture.
- Subtle use of opacity and color for secondary text rather than size variations.

## 4. Spacing

The spatial rhythm is governed by generous vertical breathing room and a strict internal grid, creating a calm, measured reading pace.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with strict 16px padding for list items and a 30px horizontal gap between columns.

## 5. Surfaces

Surfaces are rendered with minimal visual interference; the pure white ground is partitioned only by subtle, 1px solid black borders. Shadows and heavy blocks are deliberately excluded to maintain a flat, typographic plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Subtle 1px solid borders (using rgb(0,0,0)) for list separation, avoiding heavy visual blocks.

## 6. Layout

The structural skeleton is an asymmetric two-column layout on desktop, with a narrow left column for labels and a wider right for content. This grid collapses gracefully to a single, vertically stacked column on mobile devices.

- **Paragraph max:** 680px
- **Grid:** 3 columns, gutter 30px
- **Breakpoints:** 768 px

**Skeleton:** Two-column asymmetric layout on desktop (narrow left column for labels, wide right column for content), collapsing to a single column on mobile.

## 7. Motion & Interaction

Motion is applied with deliberate subtlety, serving only to confirm interaction. All state changes use a smooth, 0.6-second cubic-bezier transition to maintain a fluid, unhurried pace.

- **Durations:** micro 220ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.16, 1, 0.3, 1)`
- **Patterns:**
  - Smooth transitions for color and opacity changes on hover states.

- **Hover:** Color transitions (likely to a muted gray) for interactive text elements.
- **Click:** Immediate navigation.
- **Transition:** A 0.6s cubic-bezier transition applied globally for a smooth, fluid feel.
- **Keyboard:** Standard tab-based navigation with visible focus states.

## 8. Voice & Don'ts

The editorial voice is professional and confident, expressed through minimalist headlines that rely on typographic hierarchy. Calls to action are subtle, often simple text prompts or directional arrows.

- **Tone:** Professional, confident, and highly restrained.
- **Headline style:** Minimalist, relying on bold typographic hierarchy rather than visual decoration.
- **CTA style:** Subtle text-based prompts or simple arrows.
- **Avoid:** Excessive use of bold weights or uppercase for emphasis. / Decorative elements, icons, or illustrations. / Complex multi-color palettes or gradients.

### Don'ts
- ❌ don't use decorative icons — screenshot shows minimal, functional arrows instead
- ❌ don't use multiple font families — screenshot shows a single humanist-sans family throughout
- ❌ don't use heavy background fills or cards — screenshot shows pure white background with flat text
- ❌ don't use primary colors for accents — screenshot shows a strict monochrome palette
- ❌ don't use wide letter-spacing — screenshot shows tight, negative letter-spacing for compact text
- ❌ don't use large font-weight variations — screenshot shows a uniform weight of 400 for all text

The system deliberately excludes decorative icons, complex gradients, and multiple font families to preserve its monographic integrity.

## System Prompt (paste into AI tool)

```
This is a refined, minimalist design portfolio for a professional designer, relying entirely on typography and generous whitespace to establish hierarchy. The palette is strictly monochrome, featuring a pure white background with deep black text (#000000) and a specific muted gray (#949494) for secondary information. The typography uses a single humanist-sans category font, characterized by tight negative letter-spacing (-0.414px) and a uniform font weight of 400, creating a dense yet elegant reading texture. Critical constraints include avoiding all decorative elements, illustrations, or background fills; avoiding multiple font families or heavy weight variations; and avoiding primary accent colors or complex gradients. The layout is an asymmetric grid on desktop that gracefully collapses to a single column on mobile, ensuring a clean, editorial presentation.
```