CURATED · OPEN · FREE

Kengo Kuma

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

architecturestudio

↓ Download design system (23 MB)Open in OpenDesign

Visit: https://kkaa.co.jp

📦 Browse pack contents →

Identity DNA

ArchitectureStudioKengo KumaMinimalGeometric

A minimalist architectural studio portfolio with a focus on photography.

Color

#2a2a2aInk

#717171Ink soft

#ffffffBG

#f5f5f5BG quiet

rgba(42,42,42,0.2)Line

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

Typography

geometric-sans · system-sans

display18px · 300
body13px · 300

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.

Spacing

4px

8px

12px

16px

24px

32px

48px

64px

96px

Consistent 12px padding used for buttons and list items.

Surfaces

sm · 4px

md · 4px

lg · 4px

pill · 999px

1px solid border color, often used as subtle separators.

rgba(0, 0, 0, 0.5) 0px 0px 3px 0px

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

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

Motion & Interaction

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth transitions on hover (0.2s ease-in-out). · Subtle fade-ins for content sections.

Subtle color shifts or opacity changes on interactive elements. · Standard pointer cursor for all links and interactive elements.

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.

Voice & Don'ts

Tone Professional, restrained, and international.
Headlines Clean, uppercase, geometric sans-serif.
CTAs Minimal, text-based, and unobtrusive.

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.
Avoid: Avoid heavy, bold typography.
Avoid: Avoid saturated or primary colors.
Avoid: Avoid decorative UI elements or illustrations.

Inside the pack — real screenshots

Kengo Kuma — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko