---
version: alpha
name: Snøhetta
description: Architectural editorial restraint — a near-monochrome black-on-off-white canvas with a warm paper undertone, oversized serif-meets-grotesque headlines, generous gallery whitespace, ruled hairline dividers, and image-led layouts where photography of buildings and landscapes carries the color.
colors:
  # Canvas + ink
  background: "#f4f1ec"
  surface: "#ffffff"
  surface-soft: "#eceae4"
  ink: "#111111"
  ink-pure: "#000000"

  # Secondary text
  ink-secondary: "#555048"
  ink-muted: "#8a857c"

  # Accent — restrained, used sparingly for links/interaction
  primary: "#1a1a1a"
  link: "#111111"
  link-hover: "#6b6157"

  # Lines + chrome
  border: "#d9d4cb"
  divider: "#c9c3b8"

  # On-color
  on-primary: "#f4f1ec"
  on-ink: "#f4f1ec"

  # Dark-mode surfaces (site offers a dark toggle)
  ink-inverse: "#0e0e0e"
  surface-inverse: "#151515"

typography:
  display-hero:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -1.5px
  display-large:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.08
    letterSpacing: -1px
  section-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.5px
  sub-heading:
    fontFamily: "Playfair Display, Georgia, serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.25px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: 0px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.2px
  label-caps:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 1.2px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 160px

rounded:
  none: 0px
  xs: 2px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-primary-hover:
    backgroundColor: "{colors.link-hover}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 14px 28px
    borderColor: "{colors.ink}"

  link-inline:
    textColor: "{colors.link}"
    typography: "{typography.body}"
  link-inline-hover:
    textColor: "{colors.link-hover}"
    typography: "{typography.body}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 20px 32px
    borderColor: "{colors.divider}"

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
    borderColor: "{colors.border}"

  card-title-block:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.card-title}"
    padding: 16px 0px

  label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 0px

  divider:
    backgroundColor: "{colors.divider}"
    height: 1px
    width: 100%

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    borderColor: "{colors.ink}"
---

# Snøhetta Design System

## Overview

Snøhetta's website carries the same restraint as the firm's architecture — buildings like the Oslo Opera House and the Norwegian National Opera are exercises in letting material, light, and landscape do the talking, and the site follows that exactly. The canvas is a warm off-white paper tone (`{colors.background}`) rather than clinical pure white, giving the whole page the feeling of looking at a printed monograph. Near-black ink (`{colors.ink}`) sits on top, and the only saturated color comes from the photography of projects: water, stone, glass, and Nordic sky. The interface itself is almost colorless on purpose.

Typography is the firm's signature voice. Oversized serif display headlines (a Playfair-class high-contrast serif) provide editorial gravity and a hand-set, architectural-publication feel, while a clean neutral grotesque (Inter-class) handles navigation, body copy, and captions. The contrast between the two — expressive serif headers, quiet sans body — mirrors the way Snøhetta pairs sculptural form with rigorous function. Headlines run large with tight tracking; body text is generous and airy.

The layout is gallery-led. Projects appear as full-bleed or large-grid images with minimal chrome: a title, a discipline label, a hairline rule. There are almost no rounded corners, no shadows, no fills — separation comes from whitespace and thin `{colors.divider}` rules. The site even ships accessibility-minded toggles (dark mode, simplified layout, low-res images), reinforcing that the design is structural and content-first, not decorative.

**Key Characteristics:**
- Warm off-white paper canvas (`{colors.background}`) instead of pure white — print-monograph feel
- High-contrast serif display headlines (Playfair-class) paired with a neutral grotesque body (Inter-class)
- Near-monochrome chrome — color lives only in project photography
- Square corners throughout (`{rounded.none}`) — no rounding, no shadows
- Hairline `{colors.divider}` rules and whitespace as the only separators
- Uppercase tracked labels (`{typography.label-caps}`) for disciplines/metadata
- Gallery-grade whitespace between sections (`{spacing.3xl}`–`{spacing.4xl}`)
- Built-in dark mode and reduced-data display modes

## Colors

### Primary
- **Paper** (`{colors.background}`): The warm off-white page canvas — the defining surface.
- **Ink** (`{colors.ink}`): Near-black for all primary text and dark fills. Not pure black, to match the paper warmth.
- **White** (`{colors.surface}`): Pure white for inputs and select image mats.

### Secondary Text
- **Ink Secondary** (`{colors.ink-secondary}`): Captions, labels, supporting copy — a warm taupe-gray.
- **Ink Muted** (`{colors.ink-muted}`): Tertiary metadata, timestamps.

### Accent / Interactive
- **Primary** (`{colors.primary}`): Dark fills for primary buttons.
- **Link** (`{colors.link}`): Inline links — ink-dark, distinguished by underline rather than hue.
- **Link Hover** (`{colors.link-hover}`): Warm brown-gray on hover.

### Lines & Chrome
- **Border** (`{colors.border}`): Input outlines, card edges.
- **Divider** (`{colors.divider}`): Hairline section rules — the signature separator.

### Dark Mode
- **Ink Inverse** (`{colors.ink-inverse}`): Near-black canvas in dark mode.
- **Surface Inverse** (`{colors.surface-inverse}`): Raised dark surfaces.

## Typography

### Font Family
- **Display**: `Playfair Display` (high-contrast serif), fallbacks `Georgia, serif`
- **Text/UI**: `Inter` (neutral grotesque), fallbacks `Helvetica, Arial, sans-serif`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`, etc.).

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — editorial billboard headlines |
| `display-large` | Major project titles |
| `section-heading` | Section titles |
| `sub-heading` | Lighter serif sub-sections |
| `card-title` | Project card titles (sans) |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Compact UI text |
| `nav-link` | Navigation, buttons |
| `label-caps` | Uppercase tracked discipline labels |
| `caption` | Image captions, metadata |

### Principles
- **Serif announces, sans informs**: High-contrast serif for headlines (gravity, craft); neutral grotesque for everything functional.
- **Tight display tracking**: Display sizes use slight negative tracking (-1px to -1.5px) for a set-by-hand feel.
- **Tracked uppercase labels**: Discipline/metadata labels use +1.2px letter-spacing in small caps.
- **Airy body**: Body line-height of 1.6 keeps long-form reading comfortable against the paper tone.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with large editorial jumps to `{spacing.3xl}` (96px) and `{spacing.4xl}` (160px) between major sections.

### Grid & Container
- Wide max content width with full-bleed image breakouts
- Project galleries: 1–3 column grids of large images
- Hairline `{colors.divider}` rules separate sections, never boxes

### Whitespace Philosophy
- **Gallery emptiness**: Massive vertical rhythm between sections; whitespace frames the photography.
- **Image carries the color**: Chrome is colorless so building/landscape photography reads loud.
- **Rules over boxes**: Separation comes from thin rules and space, not borders or shadows.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat | No shadow, square corners | Everything — the system is flat by design |
| Rule | 1px `{colors.divider}` | Section and list separation |
| Outline | 1px `{colors.border}` | Inputs, occasional card edges |
| Focus | 2px solid `{colors.ink}` outline | Keyboard focus |

**Depth Philosophy**: Snøhetta uses essentially no elevation. There are no drop shadows and no rounded corners. Hierarchy comes from type scale, whitespace, and the weight of full-bleed imagery — the same way a printed architecture monograph creates depth on a flat page.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Default — buttons, cards, images, inputs |
| `xs` | 2px | Rare small UI affordances |
| `sm` | 4px | Optional soft inputs |
| `md` | 6px | Reserved |
| `pill` | 9999px | Toggle switches (dark mode control) only |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Ink fill, paper text, square corners. Inverts to warm brown-gray on hover.
- **`button-secondary`** — Paper surface with 1px ink outline; fills to ink on hover.

### Links
- **`link-inline`** — Ink-dark, underlined; warms to `{colors.link-hover}` on hover. Distinguished by underline, not color.

### Navigation
- **`nav-bar`** — Paper background, ink text, hairline bottom rule. Discipline menu in tracked sans.

### Cards
- **`card`** — Frameless image-led project tile; title + uppercase discipline label below. No fill, no shadow.

### Labels
- **`label`** — Uppercase tracked discipline/metadata in warm secondary ink.

### Dividers
- **`divider`** — 1px `{colors.divider}` hairline — the primary separator across the site.

### Inputs
- **`input`** — White or paper surface, 1px `{colors.border}`, square corners; focus darkens border to ink.

## Do's and Don'ts

### Do
- Use the warm paper `{colors.background}`, not pure white
- Pair a high-contrast serif display with a neutral grotesque body
- Keep corners square (`{rounded.none}`) and surfaces flat
- Separate with hairline `{colors.divider}` rules and whitespace
- Let project photography carry all the color
- Use uppercase tracked labels for disciplines/metadata
- Underline links rather than coloring them

### Don't
- Don't introduce rounded corners or drop shadows
- Don't add saturated accent colors to the chrome — color belongs to the imagery
- Don't tighten body tracking; keep body airy at 1.6 line-height
- Don't use pure white as the canvas — it breaks the paper warmth
- Don't box content in cards; use rules and space
- Don't use the serif for body copy or UI labels

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked images, hamburger nav |
| Tablet | 600–1024px | 2-column galleries, reduced section spacing |
| Desktop | 1024–1440px | Full multi-column grids, hairline rules |
| Large | >1440px | Generous margins, full-bleed imagery |

### Collapsing Strategy
- Serif hero scales down but keeps tight tracking
- Navigation collapses to a menu; discipline list stacks
- Project grids: 3-column → 2-column → single column
- Section spacing: 96–160px → ~48px on mobile
- Low-res / simplified display modes reduce image weight

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Paper `{colors.background}`
- Heading/body text: Ink `{colors.ink}`
- Secondary text/labels: `{colors.ink-secondary}`
- Divider rule: `{colors.divider}`
- Primary CTA: Ink `{colors.ink}` fill, paper text, square corners

### Example Component Prompts
- "Create a hero on warm paper `{colors.background}`. Headline at 64px Playfair Display weight 500, line-height 1.05, letter-spacing -1.5px, `{colors.ink}`. Lead paragraph at 20px Inter weight 400, line-height 1.6, `{colors.ink-secondary}`. Square ink CTA (`{colors.ink}` fill, paper text, 14px 28px padding, no radius)."
- "Build a project card: full-width image, no border or shadow, square corners. Below it a 20px Inter weight 500 title `{colors.ink}` and a 12px uppercase Inter label with +1.2px tracking in `{colors.ink-secondary}`. Separate cards with a 1px `{colors.divider}` rule."
- "Design navigation: paper background, ink text, 15px Inter weight 500, hairline `{colors.divider}` bottom rule, discipline menu in tracked sans."

### Iteration Guide
1. Paper canvas (`{colors.background}`), never pure white
2. Serif (Playfair-class) announces, sans (Inter-class) informs
3. Square corners and flat surfaces — no shadows, no rounding
4. Separate with hairline rules and whitespace, not boxes
5. Color lives in photography; chrome stays near-monochrome
6. Links underline; labels are uppercase and tracked

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Snøhetta. Brand names and trademarks belong to their respective owners.