# Kengo Kuma · Design system migration spec

> Source: https://kkaa.co.jp  ·  Curated by OpenDesign  ·  en

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

## 1. Identity DNA

The design system for Kengo Kuma & Associates functions like a minimalist pavilion: a structure of extreme restraint, where every element is placed to frame the primary exhibit—the architecture itself. The system’s DNA is one of geometric precision and photographic reverence, establishing a visual language that is both a professional portfolio and a testament to the studio’s ethos.

**One-liner:** A restrained, photographic portfolio for a world-class architecture studio.
**Keywords:** Architecture · Studio · Kengo Kuma · Minimal · Geometric
**Analogy:** A minimalist architectural studio portfolio with a focus on photography.

## 2. Color

The color system is a disciplined exercise in monochrome, deploying only white, charcoal, and light grey to ensure the full-color architectural photographs command the viewer’s complete attention. This neutral foundation is a deliberate void, designed to be filled by the materiality and light captured in the studio’s work.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#f5f5f5` | quiet area |
| `--ink` | `#2a2a2a` | body text |
| `--ink-soft` | `#717171` | secondary text |
| `--muted` | `#717171` | placeholder |
| `--line` | `rgba(42,42,42,0.2)` | divider |

**Color principle:** Neutral, highly restrained palette that allows architectural photography to be the primary focus.

The core principle is functional absence: the palette exists not for expression, but to provide a neutral ground that yields primacy to the imagery.

## 3. Typography

Typographically, the system speaks with a single, consistent voice: a light-weight sans-serif set with negative tracking. This approach creates a textural harmony that is technical and refined, supporting content without ever competing with it.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 18px | 1.5 | 300 | -0.32px | Navigation and headings |
| body | 13px | 2.2 | 300 | -0.32px | Dates and metadata |

**Type rules:**
- 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.

## 4. Spacing

The spatial rhythm is established by a consistent 12px unit, creating a measured and predictable grid that structures all components from buttons to list items.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 12px padding used for buttons and list items.

## 5. Surfaces

Surfaces are treated as clean, flat planes, defined only by a hairline border or the subtlest shadow. Depth is implied through the layering of content and the strategic use of borders, not through decorative gradients or heavy drop shadows.

- **Radius:** sm 4px · md 4px · lg 4px · pill 999px
- **Shadows:**
  - rgba(0, 0, 0, 0.5) 0px 0px 3px 0px
- **Borders:** 1px solid border color, often used as subtle separators.

## 6. Layout

The foundational layout is a binary composition: an immersive, full-bleed hero image followed by a clean, disciplined grid of project cards. This structure prioritizes visual impact at the entry point, then transitions to a organized, scannable catalog of work.

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

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

## 7. Motion & Interaction

Motion is employed as a subtle guide, not a spectacle. All transitions—fades on load, hovers on links—are executed with a uniform, low-speed timing that feels smooth and intentional, never drawing attention to the interface itself.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth transitions on hover (0.2s ease-in-out).
  - Subtle fade-ins for content sections.

- **Hover:** Subtle color shifts or opacity changes on interactive elements.
- **Click:** Standard pointer cursor for all links and interactive elements.
- **Transition:** Consistent 0.2s ease-in-out transition for all properties.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is professional and restrained, mirroring the studio’s international, project-focused demeanor. Headlines are clean and uppercase, while all calls-to-action are minimal, text-based, and deliberately unobtrusive.

- **Tone:** Professional, restrained, and international.
- **Headline style:** Clean, uppercase, geometric sans-serif.
- **CTA style:** Minimal, text-based, and unobtrusive.
- **Avoid:** Avoid heavy, bold typography. / Avoid saturated or primary colors. / Avoid decorative UI elements or illustrations.

### Don'ts
- ❌ 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.

The system deliberately avoids bold typography, saturated color, and decorative illustration, insisting that the architecture must speak for itself.

## System Prompt (paste into AI tool)

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