---
name: Benlongdendesign
description: "This site is a masterclass in restraint, using minimalist design principles to elevate a high-end creative portfolio."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#A0A0A0"
  line: "rgba(255, 255, 255, 0.15)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.4
    fontWeight: 700
    letterSpacing: "0.5px"

rounded:
  sm: 4px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A refined, editorial portfolio for a creative director, balancing stark typography with immersive photographic work.

*An exclusive gallery or curated magazine spread showcasing high-end work*

## Colors

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

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#A0A0A0`)** — uses `muted` token
- **Borders (`rgba(255, 255, 255, 0.15)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* Generous whitespace separating sections, with tight 8px gaps between list items

## Elevation & Depth

- Borders: Subtle 1px borders or background overlays on hover

## Shapes

- `sm`: 4px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-based links with subtle hover transitions, no filled button shapes
- **card:** Full-bleed or large-scale photographic blocks representing projects
- **chip:** Minimal uppercase text labels for categories
- **input:** N/A
- **hero:** Immersive photographic background with overlaid project title and credits

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```