---
name: OMA
description: "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."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#FF0000"
  neutral: "#666666"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 58px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 50px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "-2px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "0"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px

---

## Overview

A monolithic architecture portfolio that lets the buildings speak while the UI retreats

*A monochromatic Swiss watch that occasionally ticks in red*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#FF0000`)** — uses `accent` token
- **Muted (`#666666`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

Edge-to-edge photography with overlaid hard-edged typography containers

*Rhythm:* Rigid 4px base unit used consistently for padding and internal element spacing

## Elevation & Depth

- Borders: Hard 4px solid borders used exclusively to highlight time-sensitive content blocks

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 0px

## Components

- **button:** None visible; typography acts as the primary interactive layer
- **card:** Invisible structural containers that align text blocks over full-bleed images
- **chip:** None
- **input:** None
- **hero:** Massive architectural photography with large, superimposed sans-serif text

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```