# Benlongdendesign · Design system migration spec

> Source: https://benlongdendesign.co.uk  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in restraint, using minimalist design principles to elevate a high-end creative portfolio.

## 1. Identity DNA

The design system operates as an exclusive gallery or curated magazine spread, where each element is placed with deliberate restraint. Its identity is built on stark, high-contrast minimalism, functioning as a refined framework to showcase immersive photographic work for a creative director.

**One-liner:** A refined, editorial portfolio for a creative director, balancing stark typography with immersive photographic work.
**Keywords:** Creative Director · Designer · Portfolio · Editorial · Luxury
**Analogy:** An exclusive gallery or curated magazine spread showcasing high-end work

## 2. Color

The palette is a strict monochrome of black, white, and gray, executed with stark, high-contrast minimalism. This absence of chromatic color ensures the photographic content remains the singular focal point.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#000000` | main background |
| `--ink` | `#FFFFFF` | body text |
| `--muted` | `#A0A0A0` | placeholder |
| `--line` | `rgba(255, 255, 255, 0.15)` | divider |

**Color principle:** Stark, high-contrast minimalism relying on black, white, and gray to let photographic work stand out.

The foundational principle is that color should never compete with the curated visual work it supports.

## 3. Typography

The typographic voice is defined by a system of grotesque-sans fonts, applied with a strict hierarchy for UI and body text. Section headers are set in uppercase with measured letter-spacing, creating a clean, professional structure devoid of decorative elements.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 16px | 1.4 | 700 | 0.5px | Primary navigation and header text |

**Type rules:**
- Use grotesque-sans for all UI and body text
- Apply uppercase and small letter-spacing to section headers
- Maintain a strict typographic hierarchy without decorative elements

## 4. Spacing

Generous whitespace establishes the primary rhythm between major sections, while list items are set with tight, consistent gaps.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 80 / 96 px
- **Rhythm:** Generous whitespace separating sections, with tight 8px gaps between list items

## 5. Surfaces

Depth is conveyed almost exclusively through layered photographic imagery and background overlays. Surfaces remain flat, with subtle 1px borders or hover state changes providing the only structural definition.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Borders:** Subtle 1px borders or background overlays on hover

## 6. Layout

The layout skeleton is an immersive, full-width grid where large photographic blocks dominate the viewport. This expansive visual field is contrasted and structured by dense, multi-column text lists and labels.

- **Container max:** 1280px
- **Paragraph max:** 800px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A full-width, immersive grid where large photographic imagery dominates the viewport, contrasted by structured, multi-column text lists.

## 7. Motion & Interaction

Motion is minimal and purposeful, limited to quick, smooth transitions for interactive elements. Subtle opacity and color shifts on hover provide feedback without distraction, adhering to low-duration timings for a refined feel.

- **Durations:** micro 200ms · small 300ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity and color transitions on hover for interactive elements

- **Hover:** Subtle text color shifts and opacity changes
- **Click:** Immediate navigation or state change
- **Transition:** Smooth, low-duration transitions (0.2s - 0.5s) for a refined feel
- **Keyboard:** Standard focus outlines for accessibility

## 8. Voice & Don'ts

The editorial voice is professional, understated, and confident. Headlines are direct, uppercase, and descriptive of the creative role, while calls to action are simple text links for navigation and contact.

- **Tone:** Professional, understated, and confident
- **Headline style:** Direct, uppercase, and descriptive of the creative role
- **CTA style:** Simple text links for contact and navigation
- **Avoid:** Avoid bright, saturated colors or neon accents / Avoid complex animations or distracting motion / Avoid decorative typography or script fonts

### Don'ts
- ❌ don't use decorative script fonts — screenshot shows a clean grotesque-sans system font
- ❌ don't add drop shadows to containers — screenshot shows flat surfaces and photographic overlays
- ❌ don't use bright, saturated accent colors — screenshot relies entirely on a monochrome palette
- ❌ don't clutter the layout with dense grids — screenshot uses generous whitespace and large imagery
- ❌ don't use rounded card corners for project previews — screenshot shows sharp, full-bleed edges
- ❌ don't use heavy border-radius on UI elements — screenshot uses a minimal 50% radius only for icons

The system deliberately avoids decorative script fonts, bright saturated accents, complex animations, and cluttered layouts, committing fully to a monochrome, image-focused aesthetic.

## System Prompt (paste into AI tool)

```
This is a premium, editorial-style portfolio for a creative director. It uses a stark, high-contrast palette of pure black (#000000), white (#FFFFFF), and medium gray (#A0A0A0). The typography relies entirely on system grotesque-sans fonts, maintaining a clean and professional aesthetic. Layouts are expansive, often featuring full-bleed photography with overlaid text. Critical donts: do not use decorative or script fonts, avoid bright saturated accents, and never clutter the layout with dense grids or unnecessary UI elements. The focus should remain on immersive imagery and structured, uppercase text labels.
```
