---
title: "BAM Photographers design system"
variant: extended
source: https://benandmartin.com/
captured_at: 2026-10-12
theme: dark
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/benandmartin-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# BAM Photographers · Design System

> Monochrome framing, cinematic stories, oversized type.

**Theme:** dark · **Industry:** portfolio · **Source:** https://benandmartin.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A photography duo’s portfolio pairs an almost-black canvas with oversized white wordmarks and cinematic project imagery. Automotive campaigns and lifestyle stories unfold in a restrained, image-led sequence.

## North star

Keep the interface monochrome and understated so each cinematic project image, not decorative UI, commands attention.

## Overview

The page uses a deliberately spare monochrome interface: #000000 anchors the canvas and #ffffff carries navigation, headings, and the oversized opening wordmark. The hero’s black-and-white photograph establishes the mood, while the project sequence introduces saturated colors only through the photography; these hues are image content, not interface accents. Compact uppercase navigation and labels contrast with a very large, expressive brand mark. Helveesti is measured for the small interface text, with consistent tracking and uppercase treatment. Projects are arranged as broad, vertically stacked image compositions, alternating full-width frames with paired images. Black gutters keep separate works distinct without adding decorative card chrome. Sections follow a steady, spacious rhythm, and text stays secondary to the imagery. Reproduce the page as a quiet gallery: restrained interface, high-impact photography, and no invented color accents.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Black | `#000000` | `--color-gallery-black` | surface | The continuous page canvas and dark gutters separating project imagery. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Navigation, oversized hero wordmark, and project headings on the black canvas. |

### Semantic aliases

`--color-canvas` → `#000000` (Gallery Black) · `--color-text` → `#ffffff` (Paper White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helveesti | `--font-body` | webfont | 400 | Uppercase navigation, body labels, and eyebrow text. | Inter |

- **Helveesti:** Measured at weight 400; use uppercase with generous tracking for compact interface text.

### Type scale — Major Third (ratio ≈ 1.25, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 14px | 400 | 1.3 | 0.06em | uppercase | Helveesti | Uppercase supporting project labels and small interface text. |
| nav | 14px | 400 | 1.3 | 0.06em | uppercase | Helveesti | Top-level portfolio navigation links. |
| eyebrow | 14px | 400 | 1.3 | 0.06em | uppercase | Helveesti | Compact uppercase labels introducing project content. |

## Spacing & layout

- Base unit **1px**, density **comfortable**.
- Scale (most used values): 20, 25 px.
- Section rhythm 60px · element gap 20px · card padding — · max content width 1390px.

A vertically scrolling, single-column portfolio uses a measured page maximum width of 1390px and a comfortable section rhythm. The opening viewport is a full-bleed photographic hero with navigation overlaid along its top edge and an enormous centered wordmark. Below, project compositions alternate between paired frames and wide single images; headings align to the start. Keep the black canvas visible as gutters and avoid adding conventional boxed content columns.

## Shape & elevation

- Radius: xs `15px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.8s cubic-bezier(0.16, 1, 0.3, 1)` on interactive elements.

The measured interface is flat, with no shadows or gradients. Black gutters provide separation between photographs instead of borders or elevated cards. Keep the navigation and wordmark layered directly over the hero image; use contrast from the image and white type rather than introducing decorative panels.

## Imagery

Use cinematic photography as the primary content: automotive campaigns, portraits, landscapes, and lifestyle scenes. The opening image is black and white, while later project images retain vivid natural color. Mix wide single frames with paired images, preserving each image’s own crop and strong photographic atmosphere; do not add illustrations or interface graphics as substitutes.

## Components

### Overlay navigation

A compact uppercase row sits over the hero image, with links for Selected, Automotive, Directors, and Contact in white.

### Hero wordmark

An oversized white “bam selected” wordmark dominates the opening black-and-white photographic frame.

### Project heading

Short white project titles, such as AUDI and A6 ALLROAD, introduce image-led work and align to the start.

### Project image composition

Wide single images and paired frames alternate down the page, separated by the black canvas.

### Project link

Where present, a plain white uppercase link sits alongside project content without a button background.

### Measured component styles

- **Link**: transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Helveesti · uppercase
- **Navigation item** (“SELECTED”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Helveesti · uppercase

## Do

- Use #000000 as the page-wide canvas.
- Set interface text and headings in #ffffff.
- Let project photography provide the page’s color.
- Overlay compact navigation on the opening image.
- Alternate paired frames with wide project images.
- Keep project titles short and start-aligned.

## Don't

- Do not add colored interface accents.
- Do not wrap every image in a card.
- Do not add shadows or decorative gradients.
- Do not let supporting copy compete with the photography.
- Do not replace the monochrome hero with a colorful interface treatment.
- Do not introduce extra font families without evidence.

## Agent prompt

Build a new photography portfolio page in BAM Photographers’ restrained gallery style. Use Gallery Black (#000000) for the full-page canvas and Paper White (#ffffff) for navigation, headings, and interface labels; keep color confined to the photographs. Start with a cinematic full-bleed hero, overlay a compact uppercase navigation row, and give the brand wordmark dominant scale. Use Helveesti where available, or a close sans-serif substitute, for lightly tracked uppercase interface text. Organize the work as a spacious vertical sequence of broad images, alternating single frames and paired compositions, with short start-aligned project titles. Preserve black gutters between works. Keep the interface flat: no shadows, gradients, colored buttons, or ornamental card chrome. Prioritize atmospheric automotive and lifestyle photography over explanatory copy.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed monochrome photograph with overlaid top navigation and a centered oversized wordmark. | Overlay navigation, Brand-first introduction | Black-and-white photography, White uppercase links, Oversized wordmark |
| 2 | gallery | Start-aligned project headings followed by paired automotive and portrait imagery. | Selected work browsing | Short uppercase headings, Paired image frames |
| 3 | gallery | A broad, cinematic project image follows the start-aligned project title. | Visual project browsing | Wide photographic frame, Minimal project label |
| 4 | gallery | Project heading and brief copy introduce a wide lifestyle image. | Editorial project introduction | Short title, Photographic feature frame |
| 5 | gallery | A short BMW project heading precedes an image-led composition. | Selected campaign browsing | Start-aligned heading, Cinematic imagery |
| 6 | gallery | BMW project label and title introduce broad photographic frames. | Project sequence | Minimal typography, Automotive image focus |
| 7 | gallery | A project heading and supporting line sit with an atmospheric campaign image. | Editorial storytelling | Compact description, Wide image |
| 8 | gallery | A brief project label leads into a broad BMW campaign composition. | Project browsing | White title on black, Large image |
| 9 | gallery | Two image elements accompany a short project heading and link. | Project link | Paired imagery, Plain text link |
| 10 | gallery | A concise BMW heading introduces another wide photographic project block. | Sequential portfolio browsing | Minimal title, Broad image |
| 11 | gallery | Two image elements sit with a short title and plain text link. | Project link | Paired imagery, Minimal label |
| 12 | gallery | Project heading and title precede a spacious BMW image composition. | Campaign browsing | Start-aligned heading, Large image frames |
| 13 | gallery | A final title block closes the single-column project sequence. | Portfolio close | Short uppercase heading, Black canvas |

## Source CSS custom properties (selected)

```css
--bg: #000;
--text: #fff;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/benandmartin-com