CURATED · OPEN · FREE

Studio Otto

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

PortfolioAgencyCleanCurationGallery

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://studio-otto.com

📦 Browse pack contents →

Identity DNA

minimaleditorialmonochromegalleryagency

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

Color

#010101Ink

#FFFFFFBG

rgba(1,1,1,1.0)Line

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

Typography

grotesque-sans

body11px · 400
display11px · 400

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

Spacing

4px

5px

15px

24px

32px

48px

64px

96px

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

Surfaces

sm · 0px

md · 0px

lg · 0px

pill · 0px

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

Layout

1440container

12columns

5pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

600msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth 0.6s background transitions on hover states

Subtle background transitions or state changes on interactive text elements. · Direct navigation via pointer cursor.

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.

Voice & Don'ts

Tone Detached, professional, and strictly informative.
Headlines Short, uppercase, tracked-out sans-serif category labels.
CTAs Implicit, text-based navigation without traditional button components.

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.
Avoid: emotive language
Avoid: decorative elements
Avoid: traditional UI components

Inside the pack — real screenshots

Studio Otto — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko