---
name: Glein Wien
description: "Worth including as a masterclass in using restraint, typography, and high-quality photography to create a premium, editorial e-commerce experience."
version: alpha

colors:
  background: "#ffffff"
  primary: "#000000"
  neutral: "#b3b3b3"
  line: "rgba(0,0,0,0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 111px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 15px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0.5px"

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

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

---

## Overview

A minimalist, editorial-style e-commerce site emphasizing sustainable materials through high-quality photography and restrained typography.

*A curated gallery of material-focused lifestyle goods.*

## Colors

Strict monochrome palette (black, white, light gray) serving as a neutral canvas for large, high-quality editorial photography.

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#b3b3b3`)** — uses `muted` token
- **Borders (`rgba(0,0,0,0.1)`)** — uses `line` token

## Typography

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

- Uppercase used extensively for navigation and utility links.
- Standard weight (400) used across all typographic elements.

## Layout

Asymmetric masonry grid dominated by large-scale hero images, adapting to a single-column stack on mobile.

*Rhythm:* Generous whitespace and tight internal padding, often relying on image composition rather than strict grid spacing.

## Elevation & Depth

- Borders: Minimal; predominantly single-pixel lines used for buttons, links, and subtle dividers.

## Shapes

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

## Components

- **button:** Minimalist; text-only with monospace font or simple bordered rectangles for primary actions.
- **card:** Image-driven containers with text overlays, lacking traditional card borders or backgrounds.
- **chip:** None visible.
- **input:** Standard minimal form elements (implied by cookie modal).
- **hero:** Full-bleed or large-panel editorial photography with overlaid category titles and minimal 'mehr anzeigen' links.

## Do's and Don'ts

**Don't:**
- don't use saturated accent colors — screenshot shows a strictly monochrome (black/white/gray) palette.
- don't use bold font weights — screenshot shows standard weight (400) used exclusively across all text.
- don't use decorative or handwritten fonts — screenshot shows clean, geometric grotesque-sans and functional monospace.
- don't add rounded corners to cards or buttons — screenshot shows sharp, 0-radius edges.
- don't use prominent drop shadows — screenshot shows flat, clean surfaces without depth effects.
- don't clutter the interface with dense text blocks — screenshot shows a highly visual, photography-driven layout with minimal copy.
- don't use bright, colorful backgrounds — screenshot shows mostly white or photographic backgrounds.

---

## System Prompt (paste into AI agent)

```
This is a premium, editorial-style e-commerce site for sustainable lifestyle goods. It uses a strict monochrome palette (black, white, #b3b3b3 gray) with sharp, 0-radius corners and zero shadows, creating a flat, minimalist aesthetic. Typography relies on a clean grotesque-sans (F-Grotesk) for display and body text, with a functional monospace (Maison-Neue-Mono) for utility elements; all text is standard weight (400). The layout is a bold, asymmetric masonry grid of large-scale, high-quality editorial photography. Critical donts: never use bold font weights; never add rounded corners or drop shadows; never use saturated accent colors; never clutter the interface with dense text; never use decorative or handwritten fonts; never use bright, colorful backgrounds.
```