Pentagram — Dark Industrial-Design Editorial Carousel

---
version: alpha
name: Pentagram — Dark Industrial-Design Editorial Carousel
colors:
  primary: '#FFFFFF'
  canvas: '#FFFFFF'
  ink: '#1A1A1A'
  muted: '#767676'
  charcoal: '#222222'
  black: '#000000'
  sample-heading: '#FFFFFF'
  sample-supporting: '#1A1A1A'
typography:
  heading:
    fontFamily: Plain, Arial, sans-serif
    fontSize: 52px
    fontWeight: 400
    lineHeight: 54.6px
  supporting:
    fontFamily: Plain, Arial, sans-serif
    fontSize: 19px
    fontWeight: 400
    lineHeight: 25px
---

## Overview
A complete charcoal thematic section pairing a large industrial-design headline and contextual paragraph with a black tray of four photographed projects. Inspected on 2026-10-05. The exact isolated element is `.thematic[data-items*="The Secret Life of Things"]`; a warm full-page render preceded measurement and a fresh image was cropped to its current document bounds.

## Colors
Use the observed palette tokens for the corresponding text and surfaces; photographs, artwork and gradients are not reduced to invented solid-color tokens. The interface is intentionally monochrome. Preserve the separation between white project fields, #222222 thematic bands and the true-black footer; project artwork contributes its own colors.

## Typography
The listed font families and sizes are measured CSS samples. The selected heading sample is Plain, Arial, sans-serif at 52px, weight 400, line-height 54.6px. A supporting link/container sample uses 19px with 25px leading. These local samples are not a universal type scale. Child spans or image artwork can paint differently from inherited container styles.

## Layout
The section has measured 48px top and 64px bottom desktop padding. Its headline is 52px/54.6px; descriptive copy occupies roughly the left half above the project tray. At 390px the headline becomes 36px, copy fills the width, and the horizontal carousel shows a narrower slice of its cards. Edge clipping and abbreviated card descriptions belong to the source carousel; the crop contains the entire outer section. Primary image dimensions are 1440 × 931px at a 1440px viewport. The mobile evidence is 390 × 860px at a 390px viewport. These two widths do not identify exact breakpoint thresholds.

## Elevation & Depth
A black tray sits against a slightly lighter #222222 canvas. Product photography adds physical depth; the enclosing interface does not rely on heavy shadows.

## Shapes
Portrait-oriented product photographs, squared internal cards and a softly rounded black outer tray contrast with the generous rectangular text region.

## Components
The Secret Life of Things introduction and a captured selection of industrial-design projects. Desktop and mobile can show different carousel positions; pointer dragging, pagination, timing and destination links were not tested.

## Do’s and Don’ts
Keep contextual editorial copy with the project row and preserve source image proportions. When adapting, provide keyboard-reachable carousel controls and reduced-motion behavior; these are recommendations, not verified properties of this capture. Provide visible focus states, meaningful alternative text and usable touch targets when adapting; no complete accessibility audit was performed.