# Studio Otto · Design system migration spec

> Source: https://studio-otto.com  ·  Curated by OpenDesign  ·  en

> A masterclass in minimal typography and negative space, making it an ideal reference for high-end agency or gallery portfolio layouts.

## 1. Identity DNA

Studio Otto's design system is structured like a high-end gallery catalogue—every element is placed with the precision of a printed grid, where the absence of decoration becomes the primary statement. The visual language is defined by what it omits: no color, no shadow, no curvature, leaving only the stark relationship between ink and paper, type and void.

**One-liner:** A stark, text-dense portfolio showcasing creative projects through a disciplined monochrome and sans-serif grid.
**Keywords:** minimal · editorial · monochrome · gallery · agency
**Analogy:** A high-end, minimalist gallery catalogue or a stark architectural portfolio.

## 2. Color

The palette is binary and absolute: off-black (#010101) on pure white (#FFFFFF), with no mid-tones, no tints, and no accent interruptions. This strict monochrome constraint forces every design decision to be carried by typography and spatial composition alone.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#010101` | body text |
| `--muted` | `#010101` | placeholder |
| `--line` | `rgba(1,1,1,1.0)` | divider |

**Color principle:** Strict monochrome palette maximizing contrast and readability through sheer negative space and typography.

Color here is not expressive but structural—it exists solely to define figure against ground with maximum optical contrast.

## 3. Typography

Typography serves as the system's sole hierarchical mechanism. A compact grotesque sans-serif is deployed at a deliberately uniform small scale, with uppercase transformation and tracked-out letter-spacing doing the work that size variation or weight contrast would perform in other systems.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 11.5px | 1.1 | 400 | 0.23px | Primary body text and navigation elements |
| display | 11.5px | 1.1 | 400 | 0.575px | Uppercase headings and category labels |

**Type rules:**
- 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

## 4. Spacing

The spacing rhythm is deliberately cramped, built on tight 5px and 15px increments that create a dense, gridlocked visual texture.

- **Base unit:** 5px
- **Scale:** 4 / 5 / 15 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Tight, micro-spacing system heavily relying on 5px and 15px padding increments for a dense grid.

## 5. Surfaces

Surfaces are flat and borderless, with the rare exception of a 1px solid black rule used purely for structural division. There are no drop shadows, no border-radii, and no material elevation—the interface reads as a single continuous plane.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Sharp, 1px solid black borders occasionally used for structural division.

## 6. Layout

The layout skeleton is an asymmetric multi-column grid that clusters content into dense, bottom-heavy formations. Massive negative space dominates the upper viewport, pushing the primary text-and-image grid downward or off-center, creating a compositional tension between void and density.

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

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

## 7. Motion & Interaction

Motion is reduced to a single, consistent gesture: a 0.6-second background transition on hover states. This restraint ensures that animation never competes with the typographic grid for attention—it merely signals interactivity with a quiet color shift.

- **Durations:** micro 220ms · small 400ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth 0.6s background transitions on hover states

- **Hover:** Subtle background transitions or state changes on interactive text elements.
- **Click:** Direct navigation via pointer cursor.
- **Transition:** Unified 0.6s background transitions for consistent hover feedback.
- **Keyboard:** Standard sequential focus navigation.

## 8. Voice & Don'ts

The editorial voice is detached, professional, and strictly informative, delivered through short uppercase category labels and implicit text-based navigation. Emotive language, decorative elements, and traditional UI components are all excluded from the system's vocabulary.

- **Tone:** Detached, professional, and strictly informative.
- **Headline style:** Short, uppercase, tracked-out sans-serif category labels.
- **CTA style:** Implicit, text-based navigation without traditional button components.
- **Avoid:** emotive language / decorative elements / traditional UI components

### Don'ts
- ❌ 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.

Studio Otto deliberately rejects drop shadows, border-radii, wide typographic scales, high-chroma accents, centered hero headers, and generous padding—every omitted convention is a conscious refusal to soften the grid's discipline.

## System Prompt (paste into AI tool)

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