---
name: Vitsœ
description: "A perfect example of 'less, but better' design, demonstrating how high contrast and generous white space can elevate a product catalog."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  tertiary: "#0073B1"
  neutral: "#696969"
  bg-quiet: "#F0F0F0"
  line: "rgba(194, 194, 194, 1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 40px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 32px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "-0.25px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A heritage furniture brand website built on Dieter Rams' principles of modular design and functional minimalism.

*A curated, gallery-like product catalog with timeless restraint.*

## Colors

Monochromatic with a single functional blue accent for interactivity.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Accent (`#0073B1`)** — uses `accent` token
- **Muted (`#696969`)** — uses `muted` token
- **Borders (`rgba(194, 194, 194, 1)`)** — uses `line` token

## Typography

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

- Use Linotype Univers W01 for all text layers.
- Maintain a strict typographic hierarchy with heavy weights for display and light for body.
- Keep letter spacing tight for large display sizes.

## Layout

Grid-based layout with 12 columns, featuring alternating full-width and split-column sections.

*Rhythm:* Generous vertical rhythm driven by 32px and 64px increments for clear section separation.

## Elevation & Depth

- Borders: Thin, high-contrast borders (1px) or subtle gray dividers (1px solid #C2C2C2).

## Shapes

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

## Components

- **button:** Text-based links with arrows for primary actions; solid black button with white text for cookie acceptance.
- **card:** Image-forward product cards with minimal padding and clear typographic labels.
- **input:** Search icon integrated into the header navigation.
- **hero:** Large-format imagery paired with bold product titles and concise functional descriptions.

## Do's and Don'ts

**Don't:**
- Don't use decorative illustrations — screenshot shows photography and a single functional red lips icon.
- Don't use soft drop shadows — screenshot shows flat, borderless images or thin solid dividers.
- Don't use bright, multi-colored gradients — screenshot shows a monochrome palette with one blue accent.
- Don't use heavy, ornate serif fonts — screenshot shows a clean, geometric sans-serif throughout.
- Don't use cluttered navigation — screenshot shows a minimal, text-based top menu.
- Don't use rounded pill buttons — screenshot shows rectangular buttons and simple text links.

---

## System Prompt (paste into AI agent)

```
Design DNA for Vitsœ, a heritage furniture brand rooted in Dieter Rams' minimalist philosophy. The system uses a monochromatic palette (#000000, #FFFFFF, #F0F0F0) with a single functional blue accent (#0073B1). Typography is exclusively a clean grotesque sans-serif (Linotype Univers W01) with heavy weights for display and light for body. Critical donts: 1) Never use decorative illustrations, as the site relies on honest photography. 2) Avoid complex shadows or rounded borders, as the system is defined by flat, rectilinear surfaces. 3) Do not use multiple accent colors; maintain strict restraint with only one high-chroma blue for interactive elements. Positioning is premium and functional, focusing on modular longevity over trendy aesthetics.
```