---
name: Josephinelochen
description: "This site is a prime example of restraint-driven design where the interface intentionally recedes to elevate the visual content."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  neutral: "#CECECE"
  line: "rgba(0,0,0,1)"

typography:
  body:
    fontFamily: grotesque-sans
    fontSize: 13.68px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0.2px"

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

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

---

## Overview

A minimalist, image-driven portfolio for a fashion professional.

*A high-fashion lookbook or gallery exhibition.*

## Colors

Strict monochromatic contrast with minimal UI to maximize photographic impact.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#CECECE`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans

- Text is kept small and unobtrusive.
- Use sans-serif typography for all interface elements.

## Layout

Full-bleed imagery with fixed-position header and grid gallery below.

*Rhythm:* Generous whitespace to let photography breathe.

## Elevation & Depth

- Borders: No visible borders on main UI elements.

## Shapes

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

## Components

- **button:** No buttons visible; navigation is text-based.
- **card:** Image cards in a grid layout, presented without borders or shadows.
- **hero:** Large, full-bleed photographic hero image.

## Do's and Don'ts

**Don't:**
- Don't use gradients — the UI is strictly flat and monochromatic.
- Don't add drop shadows to images or cards — they are presented cleanly without depth.
- Don't use rounded corners — the layout relies on sharp, rectilinear shapes.
- Don't use multiple font families — typography is strictly uniform and minimal.
- Don't use bold, decorative headings — text is kept small, regular weight, and functional.
- Don't use bright or varied accent colors — the palette is strictly black, white, and photographic.

---

## System Prompt (paste into AI agent)

```
This is a minimalist, image-driven portfolio website for a fashion professional. It uses a strict monochromatic color palette, with a pure white background (#FFFFFF) and solid black text (#000000). The typography is a clean grotesque-sans font, kept small and regular weight to ensure the photography remains the focus. Key design principles include full-bleed imagery, generous whitespace, and a complete absence of decorative UI elements. Critical constraints include: Do not use rounded corners, as the layout is sharp and rectilinear. Do not add shadows or borders to image cards. Do not use multiple font families or varied accent colors.
```