# Glein Wien · Design system migration spec

> Source: https://glein.wien  ·  Curated by OpenDesign  ·  en

> Worth including as a masterclass in using restraint, typography, and high-quality photography to create a premium, editorial e-commerce experience.

## 1. Identity DNA

Glein Wien operates like a curated gallery of material-focused lifestyle goods, where the interface recedes to let the product's physicality speak. The system is built on a principle of absolute restraint: a strict monochrome palette, standard-weight typography, and a bold, asymmetric layout that trusts the power of high-quality photography.

**One-liner:** A minimalist, editorial-style e-commerce site emphasizing sustainable materials through high-quality photography and restrained typography.
**Keywords:** minimalist · sustainable · lifestyle · editorial · premium
**Analogy:** A curated gallery of material-focused lifestyle goods.

## 2. Color

The color system is a study in neutrality, using black, white, and a single light gray as a functional canvas. This monochrome palette ensures the focus remains entirely on the editorial imagery it frames.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#b3b3b3` | placeholder |
| `--line` | `rgba(0,0,0,0.1)` | divider |

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

The principle is clear: color is never the hero; it is the silent, supportive frame.

## 3. Typography

Typographic voice is split between a clean grotesque-sans for display and body text, and a functional monospace for utility elements. The system uses a single, standard weight (400) throughout, avoiding any stylistic variation from bold or italic forms.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 111px | 1.0 | 400 | -1px | Large hero category overlays |
| heading | 30px | 1.2 | 400 | -0.5px | Section headings |
| body | 15px | 1.3 | 400 | 0 | Body text and standard UI |
| small | 13px | 1.2 | 400 | 0.5px | Navigation and utility links |

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

## 4. Spacing

The rhythm is defined by generous whitespace around content, creating a clean, breathable composition that lets the photography command attention.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous whitespace and tight internal padding, often relying on image composition rather than strict grid spacing.

## 5. Surfaces

Surfaces are deliberately flat and unadorned, with zero drop shadows and a minimal use of borders. The only depth is suggested by the layered quality of the photography itself.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Minimal; predominantly single-pixel lines used for buttons, links, and subtle dividers.

## 6. Layout

The layout skeleton is a bold, asymmetric masonry grid dominated by large-scale editorial images. On mobile, this complex structure collapses into a clean, single-column stack.

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

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

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and function over spectacle. Transitions are smooth and low-duration, affecting only opacity and color states to provide quiet, immediate feedback.

- **Durations:** micro 100ms · small 250ms · medium 500ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Subtle opacity transitions on interactive elements.
  - Color transitions on hover states.

- **Hover:** Subtle color or opacity shifts; minimal visual feedback.
- **Click:** Standard pointer cursor and immediate response.
- **Transition:** Smooth, low-duration (0.25s) transitions for state changes.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is quiet, understated, and refined, mirroring the site's visual restraint. Headlines are large, clean, and often overlay imagery directly, while calls to action are typically underlined text links.

- **Tone:** Quiet, understated, and refined.
- **Headline style:** Large, clean, and minimalist, often overlaying imagery.
- **CTA style:** Understated, often underlined text links rather than prominent buttons.
- **Avoid:** Loud, high-contrast call-to-action buttons / Dense blocks of promotional text / Bright, saturated color accents / Complex iconography

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

The system deliberately avoids saturated colors, bold weights, rounded forms, dense text, and any decorative flourish that might distract from the core material narrative.

## System Prompt (paste into AI tool)

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