---
name: Kengo Kuma
description: "This site is an excellent example of a highly refined, restraint-driven portfolio where the work (architecture) dictates the entire visual language, resulting in a timeless and premium aesthetic."
version: alpha

colors:
  background: "#ffffff"
  primary: "#2a2a2a"
  secondary: "#717171"
  neutral: "#717171"
  bg-quiet: "#f5f5f5"
  line: "rgba(42,42,42,0.2)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 18px
    lineHeight: 1.5
    fontWeight: 300
    letterSpacing: "-0.32px"
  body:
    fontFamily: system-sans
    fontSize: 13px
    lineHeight: 2.2
    fontWeight: 300
    letterSpacing: "-0.32px"

rounded:
  sm: 4px
  md: 4px
  lg: 4px
  pill: 999px

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

---

## Overview

A restrained, photographic portfolio for a world-class architecture studio.

*A minimalist architectural studio portfolio with a focus on photography.*

## Colors

Neutral, highly restrained palette that allows architectural photography to be the primary focus.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#2a2a2a`)** — uses `ink` token
- **Secondary text (`#717171`)** — uses `ink-soft` token
- **Muted (`#717171`)** — uses `muted` token
- **Borders (`rgba(42,42,42,0.2)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** system-sans

- Use a light font weight (300) for all text.
- Maintain consistent negative letter-spacing (-0.32px) for a refined feel.
- Use a tight line-height for metadata and dates.

## Layout

Large, immersive hero images followed by a clean grid of project cards.

*Rhythm:* Consistent 12px padding used for buttons and list items.

## Elevation & Depth

- rgba(0, 0, 0, 0.5) 0px 0px 3px 0px
- Borders: 1px solid border color, often used as subtle separators.

## Shapes

- `sm`: 4px
- `md`: 4px
- `lg`: 4px
- `pill`: 999px

## Components

- **button:** Minimal text-based navigation links, uppercase with light weight.
- **card:** Image-focused cards with subtle borders and metadata below.
- **hero:** Full-bleed, high-quality architectural photography.

## Do's and Don'ts

**Don't:**
- Don't use bold typography — screenshot shows all text is weight 300.
- Don't use a vibrant color palette — screenshot shows a neutral, monochromatic scheme.
- Don't use complex UI components — screenshot shows a minimalist, photography-focused layout.
- Don't use decorative icons or illustrations — screenshot shows only photography and text.
- Don't use heavy shadows or gradients — screenshot shows flat, clean surfaces.
- Don't use rounded corners excessively — screenshot shows sharp or minimal border-radius.

---

## System Prompt (paste into AI agent)

```
This is a minimalist, photography-driven portfolio website for the Kengo Kuma architecture studio. The design DNA is highly restrained, using a neutral palette of white (#ffffff), charcoal (#2a2a2a), and light grey (#717171) to let high-quality architectural imagery be the primary focus. Typography is consistently light-weight system sans-serif with subtle negative letter-spacing (-0.32px). Critical donts: avoid bold typography, saturated colors, and decorative UI elements. The layout uses a clean grid with 12px and 24px gutters. All interactions are smooth and understated with a 0.2s transition.
```