# OMA · Design system migration spec

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

> A powerful example of restraint in architectural design systems, where the UI intentionally recedes to let the photography and typography carry the entire visual weight.

## 1. Identity DNA

The OMA design system operates like a monochromatic Swiss watch—a precise, mechanical instrument where every component serves a singular purpose. Its restraint is its power, a framework that deliberately recedes to let architectural work occupy the entire visual field.

**One-liner:** A monolithic architecture portfolio that lets the buildings speak while the UI retreats
**Keywords:** Architecture · Studio · Global · Editorial · Minimal
**Analogy:** A monochromatic Swiss watch that occasionally ticks in red

## 2. Color

The color system is a study in binary opposition: a strict foundation of black and white, occasionally interrupted by a single, high-chroma red accent reserved exclusively for vital metadata like dates. This is not a palette but a deliberate absence of one, ensuring the photography remains the sole source of chromatic variation.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#666666` | placeholder |
| `--accent` | `#FF0000` | single accent |
| `--line` | `rgba(0,0,0,1.0)` | divider |

**Color principle:** Strict black-and-white foundation interrupted only by a single, sharp red accent for vital metadata

The principle is clear: color is a functional signal, never a decorative element.

## 3. Typography

Typography here is not decoration but a structural element, employing a single, uniform grotesque sans-serif used exclusively in uppercase. The voice is institutional and declarative, with tight negative letter-spacing creating dense, monumental headings that match the scale of the architecture they describe.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 58px | 1.0 | 700 | -2px | Main architectural titles |
| heading | 50px | 1.0 | 700 | -2px | Project names |
| body | 16px | 1.1 | 500 | 0 | Base UI text |

**Type rules:**
- All caps is mandatory for display hierarchy
- Tight negative letter-spacing is required for large text
- Font weight alternates strictly between 500 and 700

## 4. Spacing

A rigid 4px base unit governs all internal rhythm, creating a tight, efficient grid for padding and element spacing that feels deliberately compact and engineered.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Rigid 4px base unit used consistently for padding and internal element spacing

## 5. Surfaces

Surfaces are completely flat and unadorned, with zero drop shadows to maintain a strictly two-dimensional plane. The only exception is a hard, 4px solid border used sparingly to frame time-sensitive content blocks, creating a sharp, mechanical division rather than a soft elevation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** Hard 4px solid borders used exclusively to highlight time-sensitive content blocks

## 6. Layout

The layout is a full-bleed photographic field, with edge-to-edge imagery serving as the foundational canvas. Typography and content are overlaid as hard-edged containers directly onto this imagery, creating a direct, confrontational relationship between text and subject.

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

**Skeleton:** Edge-to-edge photography with overlaid hard-edged typography containers

## 7. Motion & Interaction

Motion is purely functional, adhering to a subtle philosophy of smooth, all-property CSS transitions. There is no flourish—only a consistent, 220ms default for link states and interactive feedback, reinforcing the system's mechanical precision.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Standard link transitions (all properties)

- **Hover:** Standard pointer cursor on all text links and elements
- **Click:** Standard pointer interaction
- **Transition:** All CSS properties transitioned smoothly (220ms default)
- **Keyboard:** Standard tab navigation implied by cursor states

## 8. Voice & Don'ts

The voice is authoritative, institutional, and strictly declarative, mirroring the tone of architectural monographs and studio publications. It avoids warmth and playfulness entirely, treating the interface as a neutral conduit for content.

- **Tone:** Authoritative, institutional, and strictly declarative
- **Headline style:** Short, punchy architectural titles in bold uppercase
- **CTA style:** Standard inline text links
- **Avoid:** Warmth / Playfulness / Decorative elements / Excessive padding / Curved corners

### Don'ts
- ❌ Don't use border-radius — screenshot shows sharp, 90-degree corners exclusively
- ❌ Don't add drop shadows — screenshot shows completely flat, unshadowed surfaces
- ❌ Don't use lower-case titles — screenshot shows strict uppercase for all navigation and headings
- ❌ Don't use heavy padding — screenshot shows tight 12px to 15px internal spacing
- ❌ Don't use a complex color palette — screenshot shows only black, white, and a single red accent
- ❌ Don't use serif or decorative fonts — screenshot shows a strict, functional grotesque sans-serif

The system deliberately forgoes warmth, decorative elements, curved corners, and complex color—embracing a monastic austerity that lets the architecture speak for itself.

## System Prompt (paste into AI tool)

```
A global architecture portfolio site (OMA) that uses a minimalist, high-contrast design system. The palette is strictly black (#000000) and white (#FFFFFF), with a single, sharp red accent (#FF0000) used only for date metadata. The typography is a uniform grotesque sans-serif (Arial W01) used exclusively in uppercase with tight negative letter-spacing. All components are flat with hard 0px corners and zero drop shadows, relying on massive, full-bleed architectural photography to provide visual interest. Key critical donts: never use border-radius, never add drop shadows, and never use lowercase letters for headlines.
```
