# Snøhetta · Design system migration spec

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

> This site exemplifies how extreme restraint and typographic elegance can create a premium portfolio experience that elevates the showcased architectural work.

## 1. Identity DNA

The design system for Snøhetta operates as an elite architectural portfolio gallery. Its identity is one of transdisciplinary rigor, where the studio's global practice of architecture and design is presented through a framework of extreme, deliberate minimalism.

**One-liner:** A global transdisciplinary practice showcasing prestigious architectural and design projects with refined minimalism.
**Keywords:** Architecture · Design · Global · Transdisciplinary · Studio
**Analogy:** An elite architectural portfolio gallery

## 2. Color

The color system is an exercise in deliberate absence, built on a strict monochrome palette. Pure black and white form the foundation, with gray tones for hierarchy, ensuring all visual richness is ceded to the project photography.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-quiet` | `#F2F2F2` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#757575` | placeholder |
| `--muted-soft` | `#949494` | weak hint |
| `--line` | `rgba(223, 223, 223, 1)` | divider |

**Color principle:** Extreme minimalism with a strict black-and-white palette punctuated by photography

This principle dictates that the design itself must never compete with the architectural work it presents.

## 3. Typography

Typographic voice is established through a single, refined humanist-sans font family used exclusively at a light weight. The hierarchy is built on dramatic shifts in size rather than bolding, creating an elegant, gallery-like captioning effect.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.04 | 300 | -0.5px | Hero and primary headlines |
| h1 | 48px | 1.3 | 300 | 0 | Secondary headlines and section titles |
| body | 18px | 1.33 | 300 | 0 | Standard paragraph text |
| small | 16px | 1.4 | 300 | 0 | Captions and meta information |

**Type rules:**
- Font weight is predominantly 300 (light) for a refined, elegant aesthetic
- Line lengths are tightly controlled to maintain readability on large display text
- Typographic hierarchy relies heavily on size differences rather than weight variations

## 4. Spacing

Vertical rhythm is governed by generous spacing that grants each section and image the quiet authority of a gallery wall.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing between sections creates a sense of luxury and breathing room

## 5. Surfaces

Surfaces are flat and unadorned, rejecting any sense of applied depth. The only structural division comes from thin, 1px borders, used sparingly as subtle cartography for list elements.

- **Radius:** sm 0px · md 0px · lg 16px · pill 9999px
- **Borders:** Thin 1px borders used sparingly for list dividers

## 6. Layout

The layout skeleton is an asymmetric two-column arrangement, defined by expansive whitespace. Full-bleed horizontal image carousels interrupt the structure, providing immersive project showcases that break the grid with cinematic flow.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 40px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric two-column layout with generous whitespace and full-bleed image carousels

## 7. Motion & Interaction

Motion philosophy is one of refined, utilitarian subtlety. Transitions are limited to smooth, standard-ease shifts in color and opacity, serving as quiet acknowledgments of interactivity rather than decorative flourishes.

- **Durations:** micro 200ms · small 300ms · medium 600ms
- **Easing:** `cubic-bezier(0.4, 0, 0.2, 1)`
- **Patterns:**
  - Smooth color and opacity transitions on interactive elements
  - Horizontal scrolling carousels for project imagery

- **Hover:** Subtle color changes on text links, typically to muted gray
- **Click:** Standard pointer cursor throughout interactive areas
- **Transition:** 0.2s ease transitions for color and background properties
- **Keyboard:** Standard tab navigation implied by link-based interface

## 8. Voice & Don'ts

The editorial voice is authoritative, sophisticated, and restrained. It communicates through declarative statements and understated text links, avoiding any excess punctuation or informal language that would break the tone.

- **Tone:** Authoritative, sophisticated, and restrained
- **Headline style:** Declarative and factual statements about the practice
- **CTA style:** Understated text links rather than prominent buttons
- **Avoid:** Excessive punctuation / Exclamation marks / Informal language

### Don'ts
- ❌ Don't use heavy font weights — screenshot shows exclusively light (300) weight typography
- ❌ Don't add drop shadows to UI elements — screenshot shows completely flat surfaces
- ❌ Don't use a vibrant accent color — screenshot shows strictly black, white, and gray
- ❌ Don't use rounded corners on cards or buttons — screenshot shows mostly sharp rectangular edges
- ❌ Don't crowd the layout with elements — screenshot shows extensive whitespace between sections
- ❌ Don't use colored background sections — screenshot shows a uniform white background throughout

The system deliberately forgoes vibrant accents, rounded forms, and decorative shadows to maintain its uncompromising, portfolio-first clarity.

## System Prompt (paste into AI tool)

```
This is the website for Snøhetta, a global transdisciplinary architecture and design practice. The design DNA is defined by extreme minimalism, utilizing a strict monochrome palette of pure black (#000000) for text on a pure white (#FFFFFF) background, with #757575 and #949494 for secondary and muted text. The typography exclusively uses a light weight (300) humanist-sans font family (Dovre) at large display sizes, creating a refined, elegant aesthetic. The layout features generous whitespace, thin 1px dividers, and an asymmetric two-column structure with full-bleed image carousels. Critical design rules: never use bold font weights, never add drop shadows or vibrant accent colors, never crowd the layout, always maintain generous spacing, and rely on size hierarchy rather than weight for visual distinction. The overall feel is that of a premium, high-end design portfolio that lets the work speak for itself.
```
