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

# Studio Emmerer · Design System

> Architecture presented with clarity and restraint

**Theme:** light · **Industry:** portfolio · **Source:** https://emmerer.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._

Studio Emmerer pairs a concise studio introduction and architectural project imagery with a long, information-rich project index. A strictly monochrome interface keeps attention on the work, while generous whitespace and fine rules give the archive an editorial character.

## North star

Keep the interface white, typographic, and rigorously aligned so the architecture—not decorative UI—carries the page.

## Overview

The page uses a white canvas and black text as its defining visual system; the measured palette contains no dedicated accent colour. Light grey appears sparingly in secondary text, while the warmer stone and brown tones visible in the screenshots belong to architectural photography rather than the interface. NHaasGrotesk is used throughout in regular weight, with large, closely tracked studio copy balanced by smaller captions and project links. The opening area is arranged in two broad columns: an introductory text block on the left and a project image with compact news navigation and caption on the right. Below, a wide project archive reads as a four-column table, with uppercase muted headers, black project links, and thin horizontal rules separating rows. The layout is flat and spacious rather than card-based: generous separation distinguishes the introduction from the dense archive, while aligned columns preserve scanability.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Full-page canvas and open space around the introduction, featured project, and archive. |
| Archive Ink | `#000000` | `--color-archive-ink` | neutral | Primary studio copy, navigation, project links, and thin table dividers. |
| Quiet Grey | `#999999` | `--color-quiet-grey` | neutral | Muted small text such as project-table column headings; keep secondary to black. |

### Semantic aliases

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

### Contrast (WCAG 2.x)

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

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| NHaasGrotesk | `--font-body` | webfont | 400 | Used throughout for the studio introduction, navigation, project names, captions, and table labels. | Inter |

- **NHaasGrotesk:** Regular weight throughout; compact negative tracking, no uppercase transformation except small table headers.

### Type scale — Perfect Fifth (ratio ≈ 1.5, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 1.16 | -0.005em | — | NHaasGrotesk | Large studio introduction at the top of the page. |
| body | 20px | 400 | 1.16 | -0.008em | — | NHaasGrotesk | Prominent descriptive copy and project-list entries. |
| caption | 15px | 400 | 1.16 | -0.011em | — | NHaasGrotesk | Compact project captions and secondary table labels. |
| nav | 30px | 400 | 0.9 | -0.005em | — | NHaasGrotesk | Large introductory-area navigation links. |
| link | 15px | 400 | 1.16 | -0.011em | — | NHaasGrotesk | Smaller calls to action and project links. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 12, 16 px.
- Section rhythm 90px · element gap — · card padding — · max content width 1408px.

Use a broad, centered page canvas with a measured maximum width of 1408px. The opening region places introductory copy beside a featured image and its controls; the project archive follows as a four-column table aligned to the same page edges. Preserve generous separation between these regions, then keep archive rows tightly and consistently ruled. The overall density is comfortable: large open areas above a long, compact index.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease-in-out` on interactive elements.

The interface is flat: measured components show no shadows, gradients, or card surfaces. Separate project rows with thin black hairlines instead of boxed cards. Keep images flush to their layout area and avoid extra decorative layers; whitespace, alignment, and rules provide the page's structure.

## Imagery

Use documentary architectural photography, with buildings and interiors shown as the actual project subject rather than decorative illustration. The featured image is a wide crop of a stone passage and contemporary circulation ramp; natural material tones remain within the photograph. Keep image edges clean and rectangular, with small captions and controls immediately below.

## Components

### Studio introduction

Large regular-weight black copy occupies the left side of the opening region, ending in a read-more prompt and compact about, contact, and imprint links.

### Featured project image

A wide architectural photograph sits in the right opening column, followed by a small news position indicator and previous/next arrows.

### Project caption

Place the project name and an Open Project text link below the featured image in compact black type.

### Project archive table

Present projects in four aligned columns for project, type, location, and year; use muted uppercase headers and thin horizontal separators.

### Project links

Use plain black text links for project names, with no filled button treatment, border, or radius.

### Measured component styles

- **Primary button**: transparent background · text #000000 · radius 0px · padding 0px · 400 15px NHaasGrotesk
- **Link** (“Upper Austrian Provincial Archives Cultu”): transparent background · text #000000 · radius 0px · padding 0px · 400 20px NHaasGrotesk
- **Navigation item** (“Studio Emmerer is an architectural pract”): transparent background · text #000000 · radius 0px · padding 0px · 400 30px NHaasGrotesk

## Do

- Use #ffffff as the primary canvas.
- Use #000000 for primary text and archive rules.
- Reserve #999999 for genuinely secondary labels.
- Align archive columns consistently across every row.
- Use architectural photography with restrained captions.
- Preserve generous whitespace before the project index.

## Don't

- Do not add an unmeasured accent colour.
- Do not turn archive rows into cards.
- Do not add shadows, gradients, or rounded treatments.
- Do not use bold weights absent from the measured type system.
- Do not let image colours dictate interface colours.
- Do not replace the ruled archive with decorative tiles.

## Agent prompt

Build a new architecture-studio page in Studio Emmerer's restrained editorial style. Use Gallery White (#ffffff) for the canvas, Archive Ink (#000000) for primary copy and hairlines, and Quiet Grey (#999999) only for secondary labels. Set all interface typography in a regular-weight NHaasGrotesk-like sans serif, with Inter as a practical free substitute and subtle negative tracking. Compose the opening with a large studio statement beside a clean, rectangular architectural photograph and compact controls or caption. Follow it with an aligned, four-column project archive separated by fine horizontal rules. Keep the page flat: no shadows, gradients, cards, or rounded UI. Use whitespace to separate major regions, but keep archive rows compact and easy to scan. Let photographic material colours remain inside the images.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Two-column opening: studio statement on the left, featured project photograph and compact controls on the right. | Read more prompt, About and contact links, Previous/next project controls | Large regular black copy, Rectangular architectural image, Small image caption |
| 2 | content-feed | Long four-column project table spanning the page width, with aligned headers and ruled rows. | Scannable project index, Project-name links, Metadata by type, location, and year | Muted uppercase column labels, Thin horizontal rules, Black text on white |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--secondary-color: rgb(153,153,153);
--text-color-over-preview: white;
```

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