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

# My Brentano · Design System

> Quiet, natural care in a spacious editorial frame

**Theme:** light · **Industry:** health · **Source:** https://mybrentano.ch/ · **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._

My Brentano pairs a warm, pale canvas and oversized type with intimate natural-care product imagery. A restrained navigation, compact product listings and practical footer keep the page calm and commerce-ready.

## North star

Let warm empty space and expressive dark typography lead, while keeping product imagery natural and interface details thin and understated.

## Overview

The page is built on a nearly continuous warm off-white canvas, #fbf5f1, with dark charcoal and black reserved for text, outlines and controls. The palette stays deliberately restrained; richer beige, brown and yellow tones belong chiefly to the photographic collage rather than interface chrome. Studio Feixen Sans provides the everyday text, while Studio Feixen Sans Writer gives the display and navigation a distinctive, typewriter-like character. A very large, left-aligned hero statement sits above a centered, layered product-and-nature composition, leaving generous open space around both. Further down, a narrow text block, two outlined product cards and a dense multi-column footer create a clear shift from editorial storytelling to shopping and utility. The overall rhythm is comfortable and spacious, with simple square-edged cards and thin black rules. Circular outlined header controls and buttons add small graphic accents without introducing shadows or heavy surfaces.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Porcelain Blush | `#fbf5f1` | `--color-porcelain-blush` | surface | Dominant page canvas behind the hero, editorial content, product grid and footer. |
| Soft Charcoal | `#212529` | `--color-soft-charcoal` | neutral | Main headings, navigation and muted body copy across the page. |
| Ink Black | `#000000` | `--color-ink-black` | neutral | Strong text, product-card hairlines, and the outlines of navigation and circular controls. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Small control and input surfaces, including outlined circular header buttons. |

### Semantic aliases

`--color-canvas` → `#fbf5f1` (Porcelain Blush) · `--color-text` → `#000000` (Ink Black) · `--color-text-muted` → `#212529` (Soft Charcoal) · `--color-border` → `#000000` (Ink Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fbf5f1` | 19.43:1 | AAA |
| `#212529` | `#fbf5f1` | 14.28:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Studio Feixen Sans Book | `--font-body` | webfont | 400 | Primary body copy and general page text | Inter |
| Studio Feixen Sans Writer Book | `--font-display` | webfont | 400, 700 | Display headings, navigation, links and product-interface labels | Special Elite |

- **Studio Feixen Sans Book:** Book-weight sans-serif for readable, compact copy; keep tracking neutral and casing natural.
- **Studio Feixen Sans Writer Book:** Distinctive monospaced, typewriter-like character; regular weight predominates, with a bold display style.

### Type scale — Golden Ratio (ratio ≈ 1.587, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 700 | 1.2 | 0 | — | Studio Feixen Sans Writer Book | Large expressive hero statement in typewriter-like bold. |
| h1 | 30px | 400 | 1.2 | 0 | — | Studio Feixen Sans Book | Primary page heading and prominent introductory text. |
| h2 | 25px | 400 | 1.2 | 0 | — | Studio Feixen Sans Writer Book | Editorial section and product titles. |
| body | 15px | 400 | 1.2 | 0 | — | Studio Feixen Sans Book | Natural-care story and supporting descriptions. |
| caption | 12px | 400 | 2.5 | 0 | uppercase | Studio Feixen Sans Writer Book | Compact uppercase labels and secondary metadata. |
| nav | 18px | 400 | 1.67 | 0 | — | Studio Feixen Sans Writer Book | Header navigation and prominent site identity. |
| link | 15px | 400 | 1.2 | 0 | — | Studio Feixen Sans Writer Book | Product names and inline navigation actions. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 10, 30, 40 px.
- Section rhythm 50px · element gap — · card padding — · max content width 1400px.

A centered site canvas with a measured maximum width of 1400px and a comfortable, open density. The header is a slim horizontal strip, followed by a left-aligned, near-full-width hero title and a centered collage. Later content narrows into a single-column story, then opens into a two-column product row and a four-column footer. Preserve generous section separation and avoid crowding the text or imagery.

## Shape & elevation

- Radius: button `50%` · nav `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The interface is predominantly flat, with no measured shadows or gradients. Separate product cards and the header with thin black outlines or hairlines rather than raised surfaces. The hero collage creates visual depth through overlapping image planes, not UI shadows; circular controls remain outlined and light.

## Imagery

Use photographic imagery of products, ingredients and hands, assembled as a layered collage rather than a rigid hero banner. Keep cutout-like image edges and overlapping rectangular crops visible against the pale canvas. Warm beige and botanical tones may appear in the photos, but should not become additional interface colours; favor natural light and unforced, tactile product presentation.

## Components

### Header navigation

A narrow top row with the brand greeting at left, language and primary links near the center, and compact circular cart and search controls at right.

### Editorial hero

A large, left-aligned dark statement sits above a centered, layered photographic collage on the warm canvas.

### Natural-care story

A compact, left-aligned block of body copy explains ingredients and production, with broad open space around it.

### Product cards

Two side-by-side product listings use thin black outlines, product photos, concise names, variants, CHF prices and simple purchase links.

### Circular controls

Small white controls use black outlines and fully rounded shapes for language, navigation, cart and search actions.

### Footer and newsletter

A dense four-column utility area combines contact details, retail information, legal links and a compact email signup.

### Measured component styles

- **Primary button**: background #ffffff · text #000000 · border 1px solid #000000 · radius 100% · padding 0px · 400 18px Studio Feixen Sans Writer Book
- **Link** (“Arnika+ Salbe”): transparent background · text #000000 · radius 0px · padding 0px · 400 15px Studio Feixen Sans Writer Book
- **Input**: background #ffffff · text #000000 · radius 0px · padding 5px · 400 15px Studio Feixen Sans Book
- **Card** (“Arnika+ Salbe 1.1.5 12g CHF 8 Kaufen”): transparent background · text #212529 · border 1px solid #000000 · radius 0px · padding 0px · 400 15px Studio Feixen Sans Writer Book
- **Navigation item** (“Hallo. Wir sind Brentano DE”): transparent background · text #212529 · radius 0px · padding 0px · 400 25px Studio Feixen Sans Writer Book

## Do

- Use #fbf5f1 as the dominant page canvas.
- Set expressive, left-aligned display text in the Writer-style face.
- Keep large open areas around hero copy and photography.
- Use natural product photography with layered crops.
- Outline cards and controls with thin black rules.
- Keep shopping details compact and easy to scan.

## Don't

- Do not introduce saturated interface colours.
- Do not add shadows, gradients or raised card effects.
- Do not turn the hero into a dense text-and-image grid.
- Do not use rounded cards; reserve circular rounding for controls.
- Do not treat photographic beige and brown tones as brand UI colours.
- Do not crowd the editorial copy with product controls.

## Agent prompt

Build a new page in My Brentano’s calm natural-care style. Use Porcelain Blush (#fbf5f1) as the continuous canvas, Soft Charcoal (#212529) for headings and body copy, and Ink Black (#000000) for strong text, fine outlines and controls. Keep Clean White (#ffffff) limited to small control or input surfaces. Pair a readable sans-serif body face with a typewriter-like display and navigation face. Compose a narrow header, a spacious left-aligned headline, and tactile product photography in overlapping crops. Keep story copy compact, then present products in simple thin-outlined cards with clear prices and purchase actions. Favor open space, flat surfaces and clear section transitions. Avoid gradients, shadows, saturated accents and decorative rounded containers; circular outlines belong only on small controls.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Large left-aligned headline above a centered layered image collage on a pale canvas. | Brand introduction, Visual storytelling | Oversized type, Layered photography, Generous whitespace |
| 2 | feature-split | A narrow text block within a spacious single-column section. | Ingredient reassurance, Production story | Compact body copy, Open canvas |
| 3 | product-grid | Two product listings in a side-by-side grid with left-aligned names and purchase details. | Product discovery, Direct purchase | Outlined product cards, Product photography, CHF pricing |
| 4 | footer | Four compact columns for contact, retail, company information and email signup. | Contact access, Newsletter signup, Retail discovery | Multi-column utility links, Email input, Compact footer copy |

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