The Noguchi Museum — Split Editorial Gallery

---
version: alpha
name: The Noguchi Museum — Split Editorial Gallery
colors:
  background: "#FFFFFF"
  foreground: "#333230"
  primary: "#000000"
  on-primary: "#FFFFFF"
  surface: "#F2F2F2"
  muted: "#767676"
  border: "#DDDDDD"
typography:
  exhibition-title:
    fontFamily: NH-Display-55, Helvetica, Arial, sans-serif
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.21px
  card-title:
    fontFamily: NH-Display-55, Helvetica, Arial, sans-serif
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0.33px
  navigation:
    fontFamily: NH-Text-55, Helvetica, Arial, sans-serif
    fontSize: 21px
    fontWeight: 400
    lineHeight: 24px
  eyebrow:
    fontFamily: NH-Text-55, Helvetica, Arial, sans-serif
    fontSize: 12px
    fontWeight: 400
    lineHeight: 16px
    letterSpacing: 1.25px
  caption:
    fontFamily: Sabon, Times New Roman, serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 22px
spacing:
  desktop-gutter: 30px
  mobile-gutter: 20px
rounded:
  panel: 0px
components:
  exhibition:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.exhibition-title}"
  editorial-card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.foreground}"
    typography: "{typography.card-title}"
    rounded: "{rounded.panel}"
  masthead:
    backgroundColor: "{colors.background}"
    textColor: "{colors.foreground}"
    typography: "{typography.navigation}"
  category:
    textColor: "{colors.muted}"
    typography: "{typography.eyebrow}"
---

## Overview

The Noguchi Museum home gives sculpture and archival photography the authority normally assigned to a marketing headline. A symmetrical white masthead frames a boldly asymmetrical editorial experience: a black exhibition feature on the left and a pale-gray sequence of alternating image-and-text stories on the right. This guide is grounded in the 1440 × 1000 opening desktop viewport, a supplementary full-page overview and the 390 × 844 mobile opening. The supplied primary image is deliberately a viewport capture: full-page stitching leaves whitespace beneath the sticky exhibition column. The cookie notice was dismissed using its visible close control. Carousel states beyond the displayed exhibition were not inspected.

## Colors

Measured surfaces are #FFFFFF for the masthead and lower page, #000000 for the lead exhibition and #F2F2F2 for the editorial column. The principal ink is the slightly warm #333230. Gray #767676 supplies small category labels and #DDDDDD provides quiet dividers and secondary boundaries. Put white title text on the black exhibition field. Photography carries the occasional vivid accent, such as the red sculpture in the event image; do not convert that object color into a global interface accent. Muted labels have deliberately lower emphasis; assess contrast on their actual background before reusing them for critical information.

## Typography

Use the measured `NH-Text-55` family for navigation and eyebrows and `NH-Display-55` for story titles, both with Helvetica/Arial fallbacks. The exhibition title is 40px/48px, weight 400, with 0.21px tracking. Editorial titles are 24px/30px with 0.33px tracking. Desktop navigation is 21px/24px. Small uppercase categories use 12px/16px with 1.25px tracking. Sabon appears in lower-page collection and anniversary captions at 16px/22px, giving interpretive text a book-like register distinct from the neutral navigation.

At 390px the measured exhibition title becomes 26px/32px with 0.1px tracking; editorial titles become 21px/28px. Eyebrows become 11px/14px and keep 1.25px tracking. Caption samples become 14px/20px. These are measured responsive samples, not a promise about all intermediate widths. The bold wordmark is artwork: do not model it using the hidden heading's computed font size.

## Layout

The desktop masthead is approximately 110px tall, with a small visit-status line, four widely spaced navigation destinations and the centered wordmark. Search sits at the far right. The main composition splits at x=720 into equal-width fields. The left portrait-format exhibition photograph sits centered in a black field with generous black margins; category, multiline title and date follow beneath it. The right starts with a portrait beside biography text, then reverses the arrangement for the event story. Its visible inset is 30px. Maintain this deliberate alternation instead of a uniform stack of identical cards.

The supplementary overview shows more editorial rows, a three-column programs band, paired collection/anniversary modules, an Akari shop banner and a light-gray footer. There is substantial breathing space between content groups. Full-page whitespace beneath the lead feature reflects the page's column/sticky composition, not missing artwork and not a spacing value to reproduce mechanically.

At 390px the masthead becomes a compact row with menu icon, centered wordmark and search; the visit-status line moves below it. The lead feature occupies the full width. Its photograph is inset 20px on each side, followed by centered category and title. The opening image remains tall rather than becoming a short panoramic crop. The mobile opening and typography were checked; menu expansion, full mobile scroll behavior and other breakpoints were not tested.

## Elevation & Depth

Depth comes from sculpture, photographic lighting and the contrast between black and gray fields. The interface is almost entirely flat: no raised cards, frosted panels or drop-shadow buttons are visible in the opening. Use hairline separators where the masthead meets content. Let photographs retain tonal detail rather than applying a shared decorative overlay.

## Shapes

Panels and image edges are square, with measured zero-radius samples. Use fine line icons for search and the menu, and small circular pagination dots for the exhibition carousel. These small circles are the exception, not a reason to round the image panels. Preserve each photograph's intended aspect ratio and avoid masking archival images into arbitrary shapes.

## Components

- **Museum masthead:** practical visit information above a broad navigation row, with the wordmark centered independently of left/right link lengths. Mobile uses recognizable menu and search controls around the mark.
- **Exhibition feature:** centered archival photograph on black, tracked category label, large regular-weight title, date and a small dot row. The observed slide is “Light and Stone”; timings and slide interactions remain untested.
- **Editorial story pair:** image and vertically centered text alternate sides on the pale-gray field. Labels describe the content type, while titles remain clear links rather than button-shaped calls to action.
- **Programs band:** small photo-led program entries use the same quiet typographic hierarchy instead of colored badges.
- **Collection captions:** serif interpretive prose under artwork provides a scholarly counterpoint to the sans-serif navigational shell.

## Do's and Don'ts

Do let object photography dominate. Do preserve the stark black/pale split and the alternating editorial rhythm. Do use small tracked labels to separate content types. Do retain portrait proportions when the layout collapses to mobile.

Don't add gradients, rounded marketing cards or large colored CTA pills. Don't make the red sculpture an invented brand token. Don't treat hidden menu descendants as visible navigation. Don't infer carousel, hover, focus or menu behavior from a still; implement and test those states separately.