---
name: Studio Otto
description: "A masterclass in minimal typography and negative space, making it an ideal reference for high-end agency or gallery portfolio layouts."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#010101"
  neutral: "#010101"
  line: "rgba(1,1,1,1.0)"

typography:
  body:
    fontFamily: grotesque-sans
    fontSize: 11.5px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0.23px"
  display:
    fontFamily: grotesque-sans
    fontSize: 11.5px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "0.575px"

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

spacing:
  xs: 4px
  sm: 5px
  md: 15px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A stark, text-dense portfolio showcasing creative projects through a disciplined monochrome and sans-serif grid.

*A high-end, minimalist gallery catalogue or a stark architectural portfolio.*

## Colors

Strict monochrome palette maximizing contrast and readability through sheer negative space and typography.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#010101`)** — uses `ink` token
- **Muted (`#010101`)** — uses `muted` token
- **Borders (`rgba(1,1,1,1.0)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Uppercase transformation for headings and categories
- Tight, compact line-height across all text elements
- Strict monochrome typographic hierarchy defined solely by weight, case, and tracking

## Layout

Dense, asymmetric multi-column grid with heavy vertical alignment and text wrapping tightly around elements.

*Rhythm:* Tight, micro-spacing system heavily relying on 5px and 15px padding increments for a dense grid.

## Elevation & Depth

- Borders: Sharp, 1px solid black borders occasionally used for structural division.

## Shapes

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

## Components

- **button:** Text-based interactive elements using pointer cursors, often uppercase sans-serif links.
- **card:** Asymmetric grid cells defined by typography and whitespace rather than containers.
- **chip:** None
- **input:** None
- **hero:** Massive negative space pushing the primary grid of text and images to the bottom or off-center.

## Do's and Don'ts

**Don't:**
- Don't use drop shadows — the screenshot shows completely flat, borderless elements.
- Don't use border-radius — the screenshot shows strict rectangularity on all visible surfaces.
- Don't use a wide typographic scale — the screenshot shows highly uniform, small text sizes.
- Don't use high-chroma accents — the screenshot shows a strictly monochrome black-and-white palette.
- Don't use large, centered hero headers — the screenshot shows text blocks tucked into a dense, bottom-heavy grid.
- Don't use generous padding — the screenshot shows tight 5px and 15px increments creating a dense visual rhythm.

---

## System Prompt (paste into AI agent)

```
A stark, minimalist portfolio for a creative agency, relying on extreme white space and a dense, text-heavy grid pushed to the bottom of the viewport. The visual language is strictly monochrome, utilizing an off-black (#010101) ink on a pure white (#FFFFFF) background. Typography is exclusively a compact grotesque sans-serif set at a uniform small size (11.5px), using uppercase and increased letter-spacing for hierarchy. Avoid traditional UI components, border-radii, drop shadows, or any high-chroma accent colors; the design relies purely on asymmetric grid placement and tight typographic spacing to create structure.
```