---
name: Bernerkuhl
description: "This site is a perfect example of a 'less is more' editorial approach where the typography and photography do all the heavy lifting."
version: alpha

colors:
  background: "#fafaf9"
  primary: "#000000"
  neutral: "#c7c7c7"
  bg-quiet: "#ffffff"
  line: "rgba(0,0,0,0.2)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 20px
    lineHeight: 1.25
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: transitional-serif
    fontSize: 12px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

Minimalist fashion e-commerce with an editorial, gallery-like aesthetic.

*A high-end fashion gallery catalog.*

## Colors

Monochromatic palette with a focus on high-contrast black on off-white backgrounds.

- **Background (`#fafaf9`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#c7c7c7`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.2)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous whitespace between sections and a tight, structured grid for product displays.

## Elevation & Depth

- Borders: Sharp 1px solid black borders for inputs and dividers.

## Shapes

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

## Components

- **button:** Minimal text-based buttons, often uppercase, sometimes with a small solid square indicator.
- **card:** Borderless product cards that rely entirely on high-quality photography.
- **chip:** Small, rounded white pills for product numbering.
- **input:** Minimalist input fields with only a bottom border.
- **hero:** Large, full-bleed split-screen imagery or single statement photograph.

## Do's and Don'ts

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

---

## System Prompt (paste into AI agent)

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