---
name: Dokument Studio
description: "This site is a masterclass in typography-driven minimalism, using extreme restraint and carefully considered spacing to create a sophisticated, professional identity."
version: alpha

colors:
  background: "#f6f6f4"
  primary: "#383734"
  secondary: "#7a7874"
  tertiary: "#2c7ef8"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: condensed-grotesque
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-1px"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0.1px"
  caption:
    fontFamily: humanist-sans
    fontSize: 12px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "2.4px"

rounded:
  sm: 4px
  md: 600px
  lg: 600px
  pill: 600px

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

---

## Overview

A minimalist, calm portfolio site for a design studio in hiatus.

*A calm, well-documented archive of a design studio's past work.*

## Colors

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

- **Background (`#f6f6f4`)** — uses `bg` token
- **Primary text (`#383734`)** — uses `ink` token
- **Secondary text (`#7a7874`)** — uses `ink-soft` token
- **Accent (`#2c7ef8`)** — uses `accent` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Standard 4px base with generous whitespace to support a calm, breathable layout.

## Elevation & Depth

- Borders: None visible; separation is achieved purely through spacing and layout.

## Shapes

- `sm`: 4px
- `md`: 600px
- `lg`: 600px
- `pill`: 600px

## Components

- **button:** Minimalist pill-shaped buttons with a thin border and generous internal padding.
- **card:** None visible.
- **chip:** Small, pill-shaped avatar chips for team members.
- **input:** None visible.
- **hero:** A massive, vertically stacked condensed typography logo serving as the visual anchor at the bottom.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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