# Josephinelochen · Design system migration spec

> Source: https://josephinelochen.com  ·  Curated by OpenDesign  ·  en

> This site is a prime example of restraint-driven design where the interface intentionally recedes to elevate the visual content.

## 1. Identity DNA

The system operates like a high-fashion lookbook or gallery exhibition, where the architectural space exists solely to frame the work. Its identity is defined by strict minimalism and a deliberate retreat of the interface, ensuring the photographic content commands full attention.

**One-liner:** A minimalist, image-driven portfolio for a fashion professional.
**Keywords:** fashion · portfolio · editorial · minimalist
**Analogy:** A high-fashion lookbook or gallery exhibition.

## 2. Color

A strictly monochromatic palette of pure white, solid black, and light gray forms the entire UI, allowing photographic work to dominate the visual field. This chromatic restraint is a foundational principle.

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

**Color principle:** Strict monochromatic contrast with minimal UI to maximize photographic impact.

The core principle is that color serves only as neutral support, never as a competing element.

## 3. Typography

Typography is a clean, uniform sans-serif, kept small and at regular weight. The voice is functional and unobtrusive, designed to inform without ever distracting from the imagery.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| body | 13.68px | 1.25 | 400 | 0.2px | Primary UI text and navigation. |

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

## 4. Spacing

Generous whitespace establishes a deliberate rhythm, giving each photographic piece room to be considered.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace to let photography breathe.

## 5. Surfaces

Surfaces are rendered without any decorative borders, shadows, or gradients. Depth is suggested only through the images themselves, with a flat, rectilinear presentation that avoids all ornamentation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 0px
- **Borders:** No visible borders on main UI elements.

## 6. Layout

The structural skeleton is built around full-bleed imagery, with a fixed header for persistent navigation. A grid gallery unfolds below, relying on pure alignment and spacing to organize the content.

- **Container max:** 1920px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 50px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is used sparingly and with singular purpose, primarily for image transitions and loading states. The philosophy is one of subtle, smooth opacity fades that feel like a natural progression of light.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Opacity fade-in for image transitions.

- **Hover:** Cursor changes to pointer or grab on images.
- **Click:** Standard pointer interaction.
- **Transition:** Opacity and filter transitions on image load or hover.
- **Keyboard:** Standard tab navigation.

## 8. Voice & Don'ts

The editorial voice is minimalist and professional, expressed through simple, direct text navigation. Every element is curated to serve a functional purpose within the gallery context.

- **Tone:** Minimalist and professional.
- **Headline style:** Simple, direct text navigation.
- **CTA style:** No prominent CTAs visible.
- **Avoid:** Excessive text / Decorative UI elements / Bright colors

### Don'ts
- ❌ 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.

The system deliberately avoids gradients, shadows, rounded corners, decorative headings, and accent colors, embracing a strict, flat geometry.

## System Prompt (paste into AI tool)

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