# Bernerkuhl · Design system migration spec

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

> This site is a perfect example of a 'less is more' editorial approach where the typography and photography do all the heavy lifting.

## 1. Identity DNA

Bernerkuhl's system operates like a high-end fashion gallery catalog, where restraint is the primary design tool. Every element is curated to serve the photographic content, resulting in a digital space that feels both archival and immediate.

**One-liner:** Minimalist fashion e-commerce with an editorial, gallery-like aesthetic.
**Keywords:** minimal · refined · fashion · editorial · archival
**Analogy:** A high-end fashion gallery catalog.

## 2. Color

The palette is strictly monochromatic, built on the stark contrast of black ink against a warm off-white ground. Muted gray accents exist only for functional elements like inputs and dividers.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#fafaf9` | main background |
| `--bg-quiet` | `#ffffff` | quiet area |
| `--ink` | `#000000` | body text |
| `--muted` | `#c7c7c7` | placeholder |
| `--line` | `rgba(0,0,0,0.2)` | divider |

**Color principle:** Monochromatic palette with a focus on high-contrast black on off-white backgrounds.

The principle is absolute: color never competes with the imagery, ensuring every visual decision defers to the photograph.

## 3. Typography

A single transitional serif in a uniform 400 weight carries the entire typographic voice, creating a consistent and refined tone. Uppercase treatment for navigation and key labels establishes a clear, editorial hierarchy.

- **Display:** transitional-serif
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 20px | 1.25 | 400 | 0px | Hero headlines and product titles |
| body | 12px | 1.15 | 400 | 0px | Navigation, product labels, and standard text |

**Type rules:**
- Use uppercase for navigation and key labels.
- Maintain tight leading for a compact, refined feel.
- Standard weight (400) is used throughout for consistency.

## 4. Spacing

Rhythm is defined by generous whitespace between sections, contrasted with a tight, structured grid for product displays.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace between sections and a tight, structured grid for product displays.

## 5. Surfaces

Surfaces are defined by absence—no drop shadows and no rounded corners. Sharp, 1px solid black borders provide the only structural delineation for inputs and dividers.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Sharp 1px solid black borders for inputs and dividers.

## 6. Layout

The layout skeleton begins with edge-to-edge, full-bleed editorial imagery. This transitions into a clean, structured background hosting a borderless grid where photography is the sole content.

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

**Skeleton:** Edge-to-edge imagery on desktop, transitioning to a clean white background with a structured product grid.

## 7. Motion & Interaction

Motion is understated and purposeful, relying on smooth fade-ins and subtle transforms on scroll. All transitions use a consistent 0.5s duration with a custom cubic-bezier easing for a fluid, premium feel.

- **Durations:** micro 200ms · small 500ms · medium 800ms
- **Easing:** `cubic-bezier(0.65, 0.05, 0.36, 0.5)`
- **Patterns:**
  - Smooth fade-ins and subtle transforms on scroll.

- **Hover:** Cursor changes to a pointer on interactive elements, likely with subtle opacity shifts.
- **Click:** Immediate response with no heavy feedback animations.
- **Transition:** All transitions use a 0.5s duration with custom cubic-bezier easing.
- **Keyboard:** Standard browser focus behaviors.

## 8. Voice & Don'ts

The editorial voice is sophisticated, understated, and direct. Headlines are concise and functional, often using numbered sequences, while calls-to-action are minimal and integrated into the grid.

- **Tone:** Sophisticated, understated, and direct.
- **Headline style:** Concise and functional, often using numbered sequences.
- **CTA style:** All-caps, minimal, and integrated into the overall grid.
- **Avoid:** Loud colors / playful copy / dense text blocks / busy backgrounds

### Don'ts
- ❌ Don't use rounded corners on cards or containers — screenshot shows sharp, square edges.
- ❌ Don't use bold font weights — screenshot shows consistent use of weight 400 across all text.
- ❌ Don't use vibrant accent colors — screenshot shows a strictly monochromatic black, white, and gray palette.
- ❌ Don't use drop shadows on UI elements — screenshot shows a completely flat design.
- ❌ Don't use complex multi-column layouts for body text — screenshot shows a very simple, often single-column structure.
- ❌ Don't use standard sans-serif fonts — screenshot uses a distinct transitional serif for all typography.

The system deliberately avoids loud colors, playful copy, dense text blocks, and any visual complexity that would distract from the curated photographic content.

## System Prompt (paste into AI tool)

```
A minimalist, editorial e-commerce platform for a fashion brand. The design relies on a monochromatic palette of black (#000000) on off-white (#fafaf9) backgrounds, with muted gray (#c7c7c7) accents. Typography is strictly transitional-serif at a uniform weight of 400, featuring uppercase navigation and tight line heights. The layout is edge-to-edge with high-quality photography, transitioning into a clean, borderless product grid. Critical constraints: never use rounded corners or drop shadows; maintain a strictly monochromatic color scheme; always use all-caps for navigation and key labels; avoid using bold font weights anywhere in the interface.
```