Midnight Ink
#000000Primary text, nav hairline borders, footer dividers, section rules, button text. Dominant structural color — defines the graphic skeleton against the warm canvas
Glein
glein.wienWebsite preview
The design language
Glein operates as a monochromatic editorial canvas: oversized product and lifestyle photography fills nearly every viewport, with white sans-serif category labels floating directly on top of the imagery. The palette is a tight warm-achromatic system — Bone White, Midnight Black, a signature Warm Sand beige, and Concrete Gray — with zero chromatic accent, which forces the photography's natural tones (denim, linen, leather) to become the color story. Typography stays at weight 400 across both the grotesque and monospace companion; no bold weights exist, so hierarchy is built through size alone, culminating in a 111px display. Components are razor-thin: hairline black borders, zero radius, micro-padding, and no shadows. The result reads like an art-school lookbook — restrained, tactile, and quiet, where the absence of decoration is the signature.
Color palette
neutral
Bone White
#ffffffPage canvas, card surfaces, overlay text on dark imagery, cookie dialog background. The breathing space
Warm Sand
#ebe6dcSecondary surface and section bands — the warm beige that gives the atelier its linen-like tactility. Section dividers, footer wash, category card backgrounds
Concrete Gray
#8c8c8cMuted secondary text, tertiary borders, subdued image overlays. The recede color — present but never competing
Ash Gray
#b3b3b3Subtle dividers, inactive nav borders, low-emphasis rules. The quietest member of the scale
Typography
Type scale
Major Third (1.25) · 16px basedisplay
111px · 400 · 1The quick brown fox jumps
heading
30px · 400 · 1The quick brown fox jumps
subheading
20px · 400 · 1.3The quick brown fox jumps
body-sm
15px · 400 · 1.19The quick brown fox jumps
caption
13px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
F-Grotesk
- Weights
- 400
- Sizes
- 13px, 15px, 20px, 30px, 111px
- Line height
- 1.00, 1.19, 1.20, 1.30
- Fallback
- Söhne, Inter, or Neue Haas Grotesk
Primary grotesque — used for everything from body to display. The entire type system runs at weight 400 only; hierarchy is pure scale.
Additional typeface
Maison-Neue-Mono
- Weights
- 400
- Sizes
- 13px, 15px, 20px
- Line height
- 1.00, 1.19, 1.20, 1.30
- Fallback
- JetBrains Mono, IBM Plex Mono, or Space Mono
Monospace companion — navigation, category labels, button text, footer meta, promotional strip. The 'labelling' voice that contrasts the editorial grotesque.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 6px
- Section gap
- 42px
- Card padding
- 13px
- Element gap
- 13px
Border radius
tags
0pxcards
0pxinputs
0pxbuttons
0pxSpacing scale
2px6px7px8px10px11px13px15px18px20px24px26px30px36px42px91px156px200px245px267pxGuidelines
Do
- Keep every element at weight 400 — F-Grotesk and Maison-Neue-Mono both run single-weight. Build hierarchy through size and space, never through bold.
- Let photography fill the viewport edge to edge. No internal gutters in image grids, no rounded corners, no borders around photos.
- Overlay white F-Grotesk category titles directly on imagery. Use 30px for category names, 13px monospace for 'mehr anzeigen' sub-links.
- Separate sections with warm sand (#ebe6dc) bands or 1px #000000 hairlines — never with shadows or card elevation.
- Use Maison-Neue-Mono for all functional labels: nav items, buttons, tags, footer meta. The mono face is the system's 'utility voice'.
- Let the display type breathe: 111px F-Grotesk at line-height 1.0 with generous surrounding whitespace. No letter-spacing tightening — the natural mono-influenced rhythm of F-Grotesk carries it.
- Use the 2px/6px micro-padding for all interactive elements. Buttons are stamp-sized by design, not 'small by accident'.
Don’t
- Don't introduce any chromatic color. The system is 0% colorful — adding even one accent breaks the entire monochrome contract.
- Don't use bold, semibold, or light weights. The font files are loaded at 400 only; attempting 500/600/700 will fall back or look wrong.
- Don't add shadows, glows, or blur effects. The surface model is flat — elevation is communicated by warm-band transitions, not z-axis depth.
- Don't round corners. Every radius in the system is 0px. Adding border-radius introduces a 'card' or 'button' feel that contradicts the editorial-paper aesthetic.
- Don't use sans-serif for functional labels. Monospace is reserved for nav, buttons, and meta — mixing it with F-Grotesk here dilutes the atelier voice.
- Don't crowd the 111px display with surrounding UI. Display type needs air — no buttons, links, or images in its immediate margin zone.
- Don't use colored hover states on links. Underline-on-hover in the same color is the only state change the system supports.
Components
Category Image Tile
Primary navigation and discovery surface — large editorial image with overlaid white category titleFull-bleed photography (denim, linen, leather textures) occupying 2-column or 3-column grid cells. White F-Grotesk 30px category title ('T-Shirts', 'Hosen', 'Leinen', 'Taschen klein') overlaid bottom-left. Below the title, a 13px monospace 'mehr anzeigen' link in #ffffff. No border, no radius, no shadow — the image is the component.
Editorial Section Block
Scrolling content band that mixes imagery with body textAlternating layout: left-aligned or center-aligned text columns of 15–20px F-Grotesk body in #000000 on #ebe6dc warm sand background. Text max-width ~400px for comfortable line length. Section separated by hairline 1px #000000 rule or warm band transition.
Top Promo Strip
Persistent thin announcement bar above the navigationFull-width hairline strip with 13px monospace text in #000000 on #ffffff. Promotional copy ('30-TAGE RÜCKGABERECHT', 'GRATIS VERSAND AB EUR 150,-') repeated three times across the viewport at 11px padding top/bottom. Separated from nav by a 1px #000000 bottom border.
Primary Navigation
Top-level site navigation with brand wordmark centerHorizontal bar: left cluster 'SHOP' / 'NACHHALTIGE MATERIALIEN' (monospace 13px), center brand wordmark 'Glein' (F-Grotesk 20px), right cluster 'STUDIO' / 'DE | EN' / 'Warenkorb'. 18px top padding. 1px #000000 bottom border. No background fill — sits on the page canvas.
Hairline CTA Button
Micro interactive element — 'Alle akzeptieren' and 'Auswählen' in the cookie dialogInverted black button: #000000 background, #ffffff text, F-Grotesk 13px. Padding 2px top/bottom, 6px left/right — a deliberately tiny footprint. Zero radius. Ghost alternative: #ffffff background, 1px #000000 border, #000000 text. No hover elevation, no shadow.
Monospace Text Link
Inline navigational link — 'mehr anzeigen' below category titles, footer links13px Maison-Neue-Mono in #ffffff when on image overlays, #000000 on light surfaces. Underline on hover only. Generous letter-spacing from the mono face gives the link a label/tag character.
Cookie Consent Dialog
GDPR consent overlayWhite card (#ffffff) centered or bottom-right on viewport. Black 1px border, zero radius, 24px padding. Body text in F-Grotesk 15px #000000 with underlined 'Datenschutzrichtlinie' link. Two buttons in a row: filled black 'Alle akzeptieren' + outlined black 'Auswählen'.
Image Grid Container
The layout chassis for category and product imageryMulti-column CSS grid (2- or 3-column) with 0px gap — images meet edge to edge with no gutters. No rounded corners, no borders between cells. Photography carries the visual weight entirely.
Brand Wordmark
Centered logo lockup in the primary navigationF-Grotesk 20px weight 400 in #000000. The wordmark is treated as a typographic element, not a graphic — no custom letterforms, no symbol mark beside it. The lowercase 'G' of 'Glein' is the only brand signature beyond the type system itself.
Surfaces & elevation
Level 0
Canvas
#ffffffPrimary page background, cookie dialog surface, overlay text reverse
Level 1
Warm Band
#ebe6dcSecondary section background, warm neutral contrast band
Level 2
Muted Field
#8c8c8cTertiary field, subdued image tint zones
The system has no elevation. Surfaces are flat and differentiated by background color alone (white → warm sand → concrete gray) and by 1px #000000 hairline rules. This is a deliberate paper/print metaphor — the site reads like a magazine spread, not a software interface. Any shadow would break the editorial contract.
Layout & imagery
Layout
Full-bleed editorial grid, no max-width container. The header is a thin announcement strip + hairline-bordered nav. The page body is a multi-column image grid (2-col on smaller viewports, 3-col on wider) with zero gap — tiles meet at shared edges. Category titles overlay the bottom-left of each image cell. Section transitions happen via warm sand (#ebe6dc) bands or 1px hairlines. Information sections (about, atelier address) use centered narrow text columns (~400px) on the warm sand band, creating a 'note from the studio' rhythm between image grids. Navigation is a fixed top bar with brand wordmark centered and functional links flanking.
Imagery
Imagery IS the interface. Photography is full-bleed, edge-to-edge in tight grid cells, with no rounded corners or decorative framing. Shots are editorial fashion photography: tight crops on garments (T-shirt on hanger, linen on body, leather bag, denim waistband with leather label), natural warm light, tactile material focus. No lifestyle context, no models in environment — the garment and its texture are the subject. Color treatment is honest and unmanipulated: denim blue, warm tan leather, natural linen cream become the page's only chromatic moments. Image density is extremely high — photography occupies roughly 70% of the viewport on category pages, with text overlay only as labels.
Design notes
Agent Guide
**Quick Color Reference** - text: #000000 - background: #ffffff - secondary surface: #ebe6dc (Warm Sand) - border: #000000 (1px hairline) - muted text: #8c8c8c - primary action: no distinct CTA color **Example Component Prompts** 1. *Category Image Tile*: Full-bleed 3-column grid cell containing a fashion photograph. No padding, no border, no radius. White F-Grotesk 30px category title ('Leinen') overlaid at bottom-left, with 13px Maison-Neue-Mono 'mehr anzeigen' link directly beneath in #ffffff. 2. *Top Navigation*: Full-width bar with 1px #000000 bottom border. Left: 'SHOP' and 'NACHHALTIGE MATERIALIEN' in 13px Maison-Neue-Mono #000000. Center: 'Glein' wordmark in F-Grotesk 20px #000000. Right: 'STUDIO', 'DE | EN', 'Warenkorb' in 13px Maison-Neue-Mono. 18px top padding, 11px bottom padding. Background: #ffffff. 3. *Ghost Outlined Button*: White background, 1px #000000 border, zero radius. Text 'Auswählen' in F-Grotesk 13px #000000. Padding 2px vertical, 6px horizontal. No hover state change beyond a background-color shift to #ebe6dc. 4. *Editorial Text Block*: Centered narrow column (~400px max-width) on #ebe6dc warm sand background. Body text in F-Grotesk 20px weight 400, line-height 1.3, color #000000. No headings, no decorations — just generous typographic space. 5. *Promo Strip*: Full-width 1px #000000 bottom border, 11px top/bottom padding. Text 'GRATIS VERSAND AB EUR 150,-' repeated 3x in 13px Maison-Neue-Mono #000000, separated by whitespace, on #ffffff background.
Similar brands
Toteme
Same editorial grid-with-overlay-text pattern and monochromatic surface treatment on product photography
The Row
Identical single-weight type philosophy, zero-chrome palette, and full-bleed garment photography with hairline navigation
Studio Nicholson
Same atelier/studio brand voice — warm-neutral canvas, oversized category type, monospace nav labels, no decorative UI
Lemaire
Matches the lookbook-as-website approach — editorial photography, restrained type, warm sand and bone white surface system, hairline rules as the only graphic element
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
