---
title: "Glein design system"
variant: extended
source: https://glein.wien/
captured_at: 2026-10-12
theme: light
industry: fashion
generator: Design DNA (https://four.wiralomi.com/style/glein-wien)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Glein · Design System

> Quiet modernism for considered everyday goods

**Theme:** light · **Industry:** fashion · **Source:** https://glein.wien/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Glein’s homepage pairs a restrained monochrome interface with an image-led, asymmetrical shop grid. Natural materials and studio-made goods are presented through warm, tactile photography and concise editorial copy.

## North star

Keep the interface monochrome and flat, and let tactile product photography provide the page’s warmth and visual variety.

## Overview

The visual strategy is deliberately quiet: a white canvas and black typography let product photography carry most of the colour and atmosphere. A narrow warm-beige announcement strip adds a subtle note of warmth, while the rest of the interface stays flat and unembellished. F-Grotesk gives the wordmark, navigation and category labels a clean contemporary presence; Maison-Neue-Mono sets compact supporting copy and utility text, lending the editorial details a precise, workshop-like tone. The homepage uses a varied, asymmetric image grid rather than uniform product cards. Large fashion photographs sit beside smaller category images, with short white labels placed over the imagery. Generous white space in the lower brand-information area contrasts with the dense visual browsing above. Thin separators and carefully aligned blocks organize the page without shadows, rounded cards or decorative effects. Keep the interface restrained and let real, warm-toned photography supply the richness.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, header and footer backgrounds; also appears in category-image overlays and subtle dividers. |
| Studio Ink | `#000000` | `--color-studio-ink` | neutral | Primary navigation, headings, wordmark, body copy and the text of utility controls. |
| Warm Parchment | `#ebe6dc` | `--color-warm-parchment` | accent | Soft beige announcement band across the top; a restrained interface accent, distinct from photographic colours. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#000000` (Studio Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-border` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| F-Grotesk | `--font-display` | webfont | 400 | Wordmark, navigation, category labels and larger editorial headings. | Inter |
| Maison-Neue-Mono | `--font-mono` | webfont | 400 | Compact body copy, utility labels, buttons and small studio information. | Space Mono |

- **F-Grotesk:** Regular weight, clean sans-serif forms, natural casing; uppercase is used for section headings.
- **Maison-Neue-Mono:** Regular monospace with tight, practical text blocks; used at small sizes for supporting details.

### Type scale — Custom (ratio ≈ 2.044, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 111px | 400 | 1.2 | 0 | — | F-Grotesk | Oversized editorial display type where prominent brand statements appear. |
| h1 | 30px | 400 | 1.2 | 0 | — | F-Grotesk | Primary page or brand heading in the information section. |
| h2 | 20px | 400 | 1.2 | 0 | uppercase | F-Grotesk | Uppercase headings for the studio’s values and materials. |
| body | 13px | 400 | 1.19 | 0 | — | Maison-Neue-Mono | Compact monospace descriptions and supporting editorial copy. |
| button | 13px | 400 | 1.19 | 0 | — | Maison-Neue-Mono | Small monospace label for utility controls. |
| nav | 15px | 400 | 1.3 | 0 | — | F-Grotesk | Header navigation and the centered Glein wordmark. |
| code | 13px | 400 | 1.19 | 0 | — | Maison-Neue-Mono | Monospace utility and studio-detail text. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 7, 8, 10, 11, 13, 18, 20, 26, 30, 36, 42, 91, 156, 200 px.
- Section rhythm 48px · element gap 8px · card padding — · max content width —.

The page combines a compact, full-width announcement and navigation header with a long, image-led category mosaic. The shop area uses an asymmetric multi-column composition: broad feature images balance smaller adjacent tiles, with slim white gutters separating them. Category labels sit over the photographs rather than inside boxed cards. A later brand-information band shifts to a more open layout, with the wordmark offset beside a compact grid of editorial statements. The overall rhythm alternates dense browsing imagery with generous white space; no measured maximum width is specified.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.25s ease` on interactive elements.

The interface is essentially flat: no measured shadows, gradient treatments, or rounded component system. White gutters and subtle hairlines separate content, while the beige announcement strip forms a shallow top band. Image tiles provide depth through their own lighting and composition, not through interface layering.

## Imagery

Photography is the defining visual material: apparel on models, close product details, accessories, and calm interiors. Images are cropped into varied rectangular tiles, often filling their grid areas edge to edge. Natural light, warm surfaces, and earthy product tones contrast with the white interface. Category titles and small underlined prompts overlay the photographs. No illustration or 3D treatment defines the page.

## Components

### Announcement strip

A narrow, full-width Warm Parchment band carrying repeating shipping and returns messages in small dark text.

### Primary navigation

A spacious white header with shop and studio links, centered Glein wordmark, language choices and basket utility.

### Category image tile

Photography-led rectangular tile with a concise white category title and an underlined browse prompt over the image.

### Asymmetric category mosaic

A varied grid combining a large garment image with smaller accessory or product tiles, divided by narrow white gutters.

### Studio values block

An open white section with a large Glein wordmark alongside compact uppercase statements and monospace descriptions.

### Footer information

Small, dark utility links and studio contact details arranged as compact groups on white.

### Measured component styles

- **Primary button** (“Cookie-Einstellungen”): transparent background · text #000000 · radius 0px · padding 0px · 400 13px Maison-Neue-Mono
- **Navigation item** (“SHOP NACHHALTIGE MATERIALIEN STUDIO SHOP”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px F-Grotesk

## Do

- Use Gallery White (#ffffff) as the dominant interface surface.
- Set primary interface text in Studio Ink (#000000).
- Reserve Warm Parchment (#ebe6dc) for a restrained announcement accent.
- Build browsing around an asymmetric grid of real product photography.
- Overlay category labels directly on images with clear contrast.
- Pair F-Grotesk display text with Maison-Neue-Mono utility copy.

## Don't

- Don’t add gradients, decorative shadows, or rounded-card styling.
- Don’t make the interface more colourful than the product imagery.
- Don’t force every image into equal-sized product cards.
- Don’t replace the editorial photography with generic illustrations.
- Don’t use oversized interface chrome that competes with the imagery.
- Don’t add unmeasured colour values or spacing specifications.

## Agent prompt

Build a new Glein-style ecommerce page with a restrained, editorial studio feel. Use Gallery White (#ffffff) for the canvas and Studio Ink (#000000) for navigation, headings and copy; use Warm Parchment (#ebe6dc) only as a quiet announcement-band accent. Pair a clean F-Grotesk-like sans serif for navigation and display text with a compact Maison-Neue-Mono-like typewriter face for utility details and body copy. Keep the header clear and low-profile. Make product photography the visual focus in an asymmetric mosaic of varied rectangular tiles, with short readable labels overlaid directly on images. Follow image-heavy browsing with open white editorial content, aligned wordmark and compact brand statements. Favor crisp gutters and flat surfaces; avoid shadows, gradients, rounded cards, invented palette colours and arbitrary measurements.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | category-nav | Long asymmetric image mosaic with large feature tiles, smaller adjacent category tiles and narrow white gutters. | Image-led category browsing, Direct category links, Overlaid browse prompts | Varied rectangular crops, White text overlays, Asymmetric grid |
| 2 | other | Open white editorial area with a large wordmark beside a compact grid of brand statements, followed by grouped utility information. | Brand introduction, Materials and craft details, Studio and contact information | Offset wordmark, Uppercase section headings, Compact monospace copy, Small footer link groups |

## Source CSS custom properties (selected)

```css
--swiper-theme-color: #007aff;
--text-grid-padding: calc((calc(100vw - 0px) - 15*8px)/16 + 8px/2);
--border-width: 1px;
--color-text: #000;
--color-text-light: #b3b3b3;
--color-background: #fff;
--color-background-accent: #ebe6dc;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/glein-wien