---
title: "Haus Otto design system"
variant: extended
source: https://www.hausotto.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/hausotto-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Haus Otto · Design System

> A quiet canvas led by bold typography.

**Theme:** light · **Industry:** design · **Source:** https://www.hausotto.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Haus Otto’s homepage pairs a stark white field with a monumental black wordmark and a restrained project index. Its editorial character comes from scale, whitespace, and precise alignment rather than decorative elements.

## North star

Keep the canvas white and let oversized black typography, precise alignment, and generous empty space do the visual work.

## Overview

The page is built around a strict black-and-white palette: #ffffff fills the canvas, while #000000 carries the wordmark, navigation, and project-list labels. The screenshot’s tiny black and warm-colored dots are limited interface details, not a broader colour system, and the measured palette provides no additional brand colours. Monument is the defining visual instrument: a huge, tightly tracked uppercase display wordmark anchors the otherwise quiet opening, while small, regular-weight text handles navigation and index labels. The composition is deliberately sparse, with the logo occupying a broad central band and ample uninterrupted space around it. A compact top navigation sits at the upper left, balanced by two small circular marks at the upper right. At the bottom, project-list column headings establish an editorial grid. Treat the page as a typographic portfolio canvas, not as a conventional image-led landing page; preserve the white field and let scale, alignment, and negative space create hierarchy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | The uninterrupted page canvas and the dominant background behind the wordmark and project index. |
| Studio Ink | `#000000` | `--color-studio-ink` | brand | The oversized Haus Otto wordmark, navigation labels, and project-index text. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Monument-Regular | `--font-body` | webfont | 400 | Navigation, headings, body copy, and large link labels throughout the homepage. | Space Grotesk |

- **Monument-Regular:** Use regular weight; the display wordmark is oversized, uppercase, and tightly tracked.

### Type scale — Custom (ratio ≈ 4.076, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 216px | 400 | normal | -0.033em | — | Monument-Medium | The oversized uppercase Haus Otto wordmark anchoring the opening canvas. |
| h1 | 22.5px | 400 | 1.16 | 0 | — | Monument-Regular | Primary page heading or compact introductory text where present. |
| body | 13px | 400 | 1.23 | 0 | — | Monument-Regular | Small supporting copy and project-index labels. |
| link | 22.5px | 400 | 1.16 | 0 | — | Monument-Regular | Prominent project and download links in the portfolio index. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 3, 4, 5, 8, 20, 30 px.
- Section rhythm 80px · element gap — · card padding — · max content width 1424px.

Use a single, open canvas with a measured maximum width of 1424px and comfortable density. Keep the navigation near the top edge, with the wordmark broadly centered in the opening field and substantial whitespace above and below. The project index follows as a clean, multi-column editorial row, with labels aligned to consistent vertical tracks. The measured section gap is 80px; preserve the spacious rhythm rather than adding stacked cards or dense content. Maintain simple horizontal alignment and avoid visible container framing.

## Shape & elevation

- No box shadows measured: the page is flat.

The interface reads as flat: no measured shadows, gradients, or layered cards. Keep the white canvas uninterrupted and use text placement rather than elevation to define hierarchy. Avoid prominent borders; any dividing lines should remain understated and should not introduce a new colour.

## Imagery

The supplied viewport and full-page capture show no photography, illustration, 3D, or video; the visual identity is carried by typography and whitespace. Do not invent image treatments or decorative artwork for this page. If project imagery is introduced on a new page, keep it subordinate to the editorial layout and avoid adding unmeasured colour to the core palette.

## Components

### Top navigation

Small black Haus Otto and Info text links sit at the upper left with minimal separation and no enclosing bar.

### Corner marks

Two tiny circular marks sit at the upper right; treat them as restrained interface details, not core palette colours.

### Wordmark

A huge black uppercase HAUS OTTO wordmark dominates the opening field, with tight tracking and no surrounding box.

### Project index header

Small labels such as Client/Collaborator, Case, Year, and Presskit define aligned editorial columns near the lower edge.

### Text links

Links are unboxed, black, and typographic; measured link styles include 22.5px Monument-Regular labels.

### Measured component styles

- **Link** (“Download”): transparent background · text #000000 · radius 0px · padding 0px 3px · 400 22.5px Monument-Regular

## Do

- Keep the page canvas #ffffff.
- Use #000000 for the wordmark and primary text.
- Make typography the primary visual element.
- Preserve broad, uninterrupted whitespace.
- Align navigation and project labels with a clear editorial grid.
- Keep links unboxed and visually restrained.

## Don't

- Do not add gradients or shadows.
- Do not introduce decorative cards or heavy borders.
- Do not add extra palette colours as brand accents.
- Do not crowd the opening with body copy.
- Do not replace the wordmark with imagery.
- Do not use multiple typefaces without evidence.

## Agent prompt

Build a new page in the Haus Otto visual style: use a clean #ffffff Gallery White canvas and #000000 Studio Ink for typography. Keep the composition flat, sparse, and editorial, with a compact text navigation, a bold oversized uppercase typographic anchor, and project or content links arranged on a carefully aligned grid. Use Monument-Regular where available; Space Grotesk is a practical free substitute. Keep text links unboxed and avoid card styling, gradients, shadows, and decorative borders. Preserve generous negative space and let changes in type scale establish hierarchy. Do not promote the tiny corner marks from the reference into a new colour system. Add only the content needed for the new page, maintaining the same disciplined alignment and quiet visual tone.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single white canvas with a compact top navigation, oversized central wordmark, and a multi-column index along the lower area. | minimal top navigation, project index, text links | black-on-white typography, oversized wordmark, open whitespace, aligned columns |

## Source CSS custom properties (selected)

```css
--XSfontSize: 13px;
--XSfontLineHeight: 16px;
--border: 1.5px solid;
--bg-color: #fff;
--primary-color: #000;
--swiper-theme-color: #007aff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/hausotto-com