# Bridget Pictures · Design system migration spec

> Source: https://bridget.pictures  ·  Curated by OpenDesign  ·  en

> This site is a perfect example of radical minimalism in portfolio design, removing all UI noise to let the photography stand alone.

## 1. Identity DNA

Bridget Pictures operates as a digital analogue to a pristine gallery space: architecture recedes to let the work exist unmediated. The system achieves this by stripping every interface element to its most functional, silent form. It is a framework of absence.

**One-liner:** A hyper-minimal, pure-white portfolio for fashion and conceptual photography.
**Keywords:** minimalist · gallery · curated · fashion · editorial
**Analogy:** a clean, white gallery space where photography is the sole focus

## 2. Color

The color system is a strict binary: a pure #FFFFFF field against #000000 ink. This absolute contrast creates a void where photographic color and tone can resonate without interference.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--ink` | `#000000` | body text |
| `--line` | `rgba(0,0,0,1)` | divider |

**Color principle:** Extreme binary contrast with no tertiary colors or accents.

The principle is uncompromising: no tertiary hues, no accents, no gradients—only the fundamental opposition of light and dark.

## 3. Typography

A single humanist-sans typeface, set at a uniform 19px and weight 400, provides a quiet, consistent textual layer. Italicization alone denotes active states, a subtle typographic shift that avoids introducing new visual weight.

- **Display:** humanist-sans
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 19px | 1.2 | 400 | 0px | primary text and navigation |

**Type rules:**
- Use a single, uniform font weight (400) for all text elements.
- Maintain a small, fixed font size (19px) for consistent readability.
- Rely on italicization for active states like 'Featured'.

## 4. Spacing

Rhythm is governed by generous whitespace, creating deliberate pauses between images and around the fixed navigation.

- **Base unit:** 10px
- **Scale:** 10 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace prioritized between images and navigation

## 5. Surfaces

Depth is entirely absent; surfaces are flat planes without shadows, borders, or radii. The interface is a series of crisp, rectangular cuts against the white field.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** none

## 6. Layout

The layout skeleton is a single, full-viewport column. A fixed navigation bar is anchored to the bottom of the viewport, providing constant orientation without intruding on the central content flow.

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

**Skeleton:** A single-column, full-width layout with absolute fixed navigation at the bottom of the viewport.

## 7. Motion & Interaction

Motion philosophy favors subtlety and continuity. Transitions are smooth crossfades between images, designed to be felt as a gentle progression rather than seen as an animated effect.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - smooth crossfade between gallery images

- **Hover:** pointer cursor on interactive elements
- **Click:** threshold adjustment controls (– / +) and navigation links
- **Transition:** all transitions applied globally
- **Keyboard:** standard keyboard navigation

## 8. Voice & Don'ts

The editorial voice is neutral, silent, and objective. Communication occurs through small, understated typography and simple text links, never through decorative or persuasive language.

- **Tone:** neutral, silent, objective
- **Headline style:** small, understated typography
- **CTA style:** simple text links without buttons
- **Avoid:** decorative elements / color / visual noise

### Don'ts
- ❌ don't use background colors — screenshot shows pure white (#FFFFFF) instead
- ❌ don't use accent colors — screenshot shows only black (#000000) on white instead
- ❌ don't use drop shadows or depth — screenshot shows completely flat elements instead
- ❌ don't use border-radius — screenshot shows perfectly sharp rectangular corners instead
- ❌ don't use heavy font weights — screenshot shows uniform 400 weight instead
- ❌ don't add decorative borders or dividers — screenshot shows pure whitespace separation instead

The system deliberately forgoes background colors, accent hues, drop shadows, and decorative borders, maintaining a radical purity of form.

## System Prompt (paste into AI tool)

```
Positioning: A hyper-minimal, pure-white portfolio for fashion and conceptual photography. Key colors: #FFFFFF background and #000000 ink. Font category: humanist-sans. Critical donts: 1) Never use background colors or gradients—keep it pure white. 2) Never use accent colors or shadows—the layout is strictly binary. 3) Never add border-radius or visual decoration—the style is sharp and unadorned. The design is a silent, single-column gallery where the photography is the only focus, supported by a fixed, minimal navigation bar at the bottom.
```