# Dokument Studio · Design system migration spec

> Source: https://www.dokument.studio  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in typography-driven minimalism, using extreme restraint and carefully considered spacing to create a sophisticated, professional identity.

## 1. Identity DNA

Dokument Studio's identity operates like a meticulously curated archive—every element is placed with the deliberate quiet of a gallery catalog, stripped to its essential function. The design system is built on a principle of extreme restraint, where whitespace and typography do the work that ornament would elsewhere.

**One-liner:** A minimalist, calm portfolio site for a design studio in hiatus.
**Keywords:** agency · studio · minimal · archive · hiatus
**Analogy:** A calm, well-documented archive of a design studio's past work.

## 2. Color

The color system is built on a foundation of almost monastic neutrality. A light warm gray provides a neutral, breathable ground, while dark charcoal ink serves as the primary voice for text, ensuring high contrast and legibility without harshness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#f6f6f4` | main background |
| `--ink` | `#383734` | body text |
| `--ink-soft` | `#7a7874` | secondary text |
| `--accent` | `#2c7ef8` | single accent |
| `--line` | `rgba(0,0,0,0.1)` | divider |

**Color principle:** Extreme restraint with a predominantly monochromatic palette and a single, functional blue accent for links.

A single functional blue accent exists solely for interactive elements, a deliberate punctuation mark in an otherwise silent field.

## 3. Typography

Typography is the structural and expressive core of the system, establishing a clear hierarchy through three distinct voices. A condensed grotesque commands attention for massive display text, a humanist sans-serif ensures comfortable readability for body copy, and a monospace font with wide tracking handles small, uppercase utility labels.

- **Display:** condensed-grotesque
- **Body:** humanist-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 56px | 1.0 | 700 | -1px | Large display logo at the bottom |
| body | 16px | 1.4 | 400 | 0.1px | Main body text and navigation items |
| caption | 12px | 1.3 | 400 | 2.4px | Small footer details and uppercase labels |

**Type rules:**
- Use a condensed grotesque for massive display text.
- Use a humanist sans for readable body copy.
- Use a monospace font with wide tracking for small, uppercase utility text.

## 4. Spacing

Spacing follows a standard 4px base grid, deployed with generous generosity to support a calm, breathable rhythm throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 px
- **Rhythm:** Standard 4px base with generous whitespace to support a calm, breathable layout.

## 5. Surfaces

The surface model is defined by its complete absence of shadows or visible borders. Depth and separation are achieved purely through the strategic use of spacing and layout hierarchy, maintaining a flat, borderless aesthetic.

- **Radius:** sm 4px · md 600px · lg 600px · pill 600px
- **Borders:** None visible; separation is achieved purely through spacing and layout.

## 6. Layout

The layout skeleton is a study in vertical focus, organized as a single-column primary content area. Navigation and footer elements are pushed to the top and bottom extremes, creating a central corridor for the work itself.

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

**Skeleton:** A single-column primary content area with navigation and footer elements pushed to the top and bottom extremes.

## 7. Motion & Interaction

Motion philosophy is one of deliberate stillness, emphasizing an archival calm over dynamic engagement. The site operates with minimal, subtle transitions—like opacity changes on hover—that acknowledge interactivity without demanding attention.

- **Durations:** micro 0ms · small 0ms · medium 0ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Static layout with no visible animations or transitions in the screenshot.

- **Hover:** Subtle opacity changes on interactive elements.
- **Click:** Standard link navigation.
- **Transition:** All elements have a transition property defined, implying smooth state changes on hover.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is calm, professional, and carries a subtle note of nostalgia, matching the studio's hiatus status. It communicates through large, impactful condensed typography for headlines and relies on restrained text links or minimal bordered buttons for calls to action.

- **Tone:** Calm, professional, and slightly nostalgic.
- **Headline style:** Large, impactful condensed typography.
- **CTA style:** Restrained, often just a text link or a minimal bordered pill button.
- **Avoid:** Overly excited language / Loud call-to-action buttons / Complex UI components

### Don'ts
- ❌ don't use bright or chaotic colors — the screenshot shows a restrained monochromatic palette with a single functional blue.
- ❌ don't use playful or rounded display fonts — the screenshot shows a highly condensed, rigid grotesque for display.
- ❌ don't clutter the layout with multiple columns or grids — the screenshot shows a very open, single-column dominant layout.
- ❌ don't use heavy drop shadows or 3D effects — the screenshot shows a completely flat, borderless aesthetic.
- ❌ don't use bold weights for body text — the screenshot shows a regular weight of 400 for all standard copy.
- ❌ don't use decorative elements like icons or illustrations — the screenshot relies entirely on typography and minimal avatars.

The system deliberately forgoes bright colors, playful fonts, complex components, and heavy visual effects to maintain its core identity of disciplined minimalism.

## System Prompt (paste into AI tool)

```
This is a minimalist, calm portfolio site for a design studio in hiatus. The design DNA is defined by extreme restraint and typography-driven hierarchy. Key hex colors are a very light warm gray background (#f6f6f4) and a dark charcoal ink (#383734), with a single functional blue accent (#2c7ef8) used for links. The typography features a condensed grotesque for massive display text and a humanist sans for body copy. Critical donts include: never use loud, vibrant colors; never use rounded or playful typography; and never clutter the layout with unnecessary UI components or heavy shadows. The layout relies on generous whitespace and a single-column focus to create a sense of calm and professional elegance.
```