# Hausotto · Design system migration spec

> Source: https://www.hausotto.com  ·  Curated by OpenDesign  ·  en

> The site is worth including as a masterclass in extreme minimalist, typography-first portfolio design.

## 1. Identity DNA

The Hausotto system operates on a single, unwavering principle: the stark, typographic billboard in a white room. It is a minimalist design studio portfolio centered on massive, monochromatic typography, where the architecture is built from type and the structure is defined by absence. Every element is stripped to its essential, functional core.

**One-liner:** A minimalist design studio portfolio centered on massive, monochromatic typography.
**Keywords:** minimal · architectural · stark · direct
**Analogy:** A stark, typographic billboard in a white room.

## 2. Color

The color system is a binary condition of absolute contrast, utilizing only solid black and solid white. There is no decorative color, no accent, and no gradient; the palette is a strict, high-contrast tool for legibility and directness.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strict monochromatic high-contrast with no decorative color.

The guiding principle is clarity through absolute opposition, allowing the typography and layout to carry all expressive weight.

## 3. Typography

The typographic voice is geometric and monochrome, with a uniform weight that resists stylistic flourish. Scale is dramatic, from a full-viewport logotype down to small captions, but the tone remains starkly direct.

- **Display:** geometric-sans
- **Body:** geometric-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 216px | 1.0 | 400 | -7.2px | Full-viewport logotype. |
| heading | 22.5px | 1.15 | 400 | -0.5px | Primary navigation and list items. |
| body | 13px | 1.2 | 400 | 0px | Small captions and utility text. |

**Type rules:**
- All typography is strictly monochrome and geometric.
- Negative letter-spacing is heavily applied to large display text.
- Text color is uniformly solid black (#000000).

## 4. Spacing

Rhythm is established through generous vertical spacing and precise padding steps, creating a deliberate cadence between elements.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing and precise padding steps.

## 5. Surfaces

Surfaces are flat and devoid of depth, with an absolute prohibition on drop shadows or layered effects. Borders are minimal, appearing only as strict 1px solid lines for specific interactive states.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Minimal and strictly 1px solid black for interactive or underlined elements.

## 6. Layout

The layout skeleton is expansive whitespace organized by a rigid, unbordered tabular grid. Content flows from a massive, centered typographic hero into a structured, left-aligned data list.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 4 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Expansive whitespace with a rigid, unbordered tabular grid.

## 7. Motion & Interaction

Motion is minimal and strictly functional, limited to uniform CSS transitions for hover and state changes. Subtle opacity and positional shifts are the only concessions to interactivity.

- **Durations:** micro 220ms · small 500ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle transitions on opacity and top position for interactive states.

- **Hover:** Subtle opacity changes on navigable items.
- **Click:** Standard pointer cursor for interactive elements.
- **Transition:** All elements use a uniform CSS transition property.
- **Keyboard:** Standard focus states implied.

## 8. Voice & Don'ts

The editorial voice is neutral, direct, and functional, mirroring the system's stark visual language. Communication is stripped of friendly micro-copy, playful tone, or decorative language.

- **Tone:** Neutral, direct, and strictly functional.
- **Headline style:** Massive, all-caps, tightly tracked geometric sans-serif.
- **CTA style:** Plain text or simple black boxes without decoration.
- **Avoid:** Avoid decorative colors or gradients. / Avoid rounded corners or soft shapes. / Avoid drop shadows or layered surfaces. / Avoid friendly or playful micro-copy. / Avoid varied font weights; maintain uniform thickness. / Avoid centered, multi-line text blocks.

### Don'ts
- ❌ don't use secondary colors — screenshot shows a strictly black-and-white palette.
- ❌ don't apply border-radius — screenshot shows sharp, unrounded rectangular elements.
- ❌ don't use drop shadows — screenshot shows completely flat, 2D surfaces.
- ❌ don't use decorative imagery — screenshot shows a strictly typographic interface.
- ❌ don't vary font weights — screenshot shows uniform weight across all text.
- ❌ don't use centered multi-line text — screenshot shows left-aligned lists and centered single-line headers.

The system deliberately rejects decorative color, soft shapes, drop shadows, and varied typographic weight to maintain its rigid, high-end editorial identity.

## System Prompt (paste into AI tool)

```
This is a minimalist design studio portfolio. The layout is characterized by massive, monochromatic typography (Monument-like geometric sans-serif) centered on a stark white background (#ffffff) with solid black text (#000000). The primary content is organized in a clean, borderless tabular grid, maintaining a high-contrast, strictly architectural aesthetic. Critical constraints include the absolute prohibition of color, border-radius, drop shadows, and decorative imagery. Any deviations from this stark, flat, and grid-based structure will compromise the design's rigid, high-end editorial identity.
```