# Mybrentano Ch · Design system migration spec

> Source: https://mybrentano.ch  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a modern, editorial approach to e-commerce, blending technical typography with organic warmth.

## 1. Identity DNA

The design system for Mybrentano is built like a modern apothecary's workshop—a place where clinical precision meets organic warmth. Every element serves a functional purpose within a holistic whole, from the grid's clean geometry to the restrained palette's natural tones. This is a digital-native interpretation of traditional healing spaces, translated into a contemporary e-commerce format.

**One-liner:** A clean, editorial e-commerce site for natural holistic healthcare products.
**Keywords:** natural · holistic · healthcare · pharmacy · apothecary
**Analogy:** A modern, digital-native apothecary blending clean aesthetics with organic warmth.

## 2. Color

The color system operates on a principle of high-contrast naturalism, grounded by a warm beige background that provides organic warmth against the clinical precision of dark ink. This two-tone foundation creates a sense of calm authority, allowing photographic content to breathe within the composition.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FBF5F1` | main background |
| `--ink` | `#212529` | body text |
| `--line` | `rgba(33,37,41,1.0)` | divider |

**Color principle:** High-contrast natural palette with warm beige and dark ink.

The palette's restraint is deliberate: it builds trust through simplicity rather than sensory overload.

## 3. Typography

Typography is organized around a clear hierarchy of function, using a clean geometric sans-serif as the foundational voice for all body text and UI elements. For headlines, a monospaced variant introduces technical precision and a subtle editorial authority that distinguishes headings from content.

- **Display:** monospaced-sans
- **Body:** sans-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 60px | 1.2 | 400 | -0.5px | Hero headlines |
| h1 | 30px | 1.2 | 400 | 0px | Section headings |
| body | 18px | 1.67 | 400 | 0px | Body text |
| small | 15px | 1.2 | 400 | 0px | UI labels and product details |

**Type rules:**
- All typography uses a clean, geometric sans-serif family.
- Headlines utilize a monospaced variant for technical precision.
- Font weight is consistently regular (400) across all text.

## 4. Spacing

Spacing follows a strict 4px rhythm, creating predictable vertical and horizontal intervals that structure the page like measured shelving in an apothecary's cabinet.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous white space with standard 4px base unit.

## 5. Surfaces

Surfaces are defined by absence rather than addition—there are no shadows or gradients, only thin 1px black borders that provide structural division. This approach maintains visual clarity by treating edges as precise delineations rather than decorative flourishes.

- **Radius:** sm 4px · md 0px · lg 0px · pill 999px
- **Borders:** Thin 1px solid black borders used for structure and division.

## 6. Layout

The layout skeleton is a strict left-aligned grid, with content flowing vertically from a fixed top navigation bar. This editorial structure prioritizes readability and scannability, organizing information in clear columns that support the site's e-commerce function.

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

**Skeleton:** Grid-based with a top navigation bar and a stacked vertical flow for content.

## 7. Motion & Interaction

Motion follows a philosophy of functional feedback rather than decorative animation, with smooth transforms and gentle easing providing subtle responses to user interaction. These transitions occur within a uniform 0.2s to 0.3s timeframe, ensuring consistency without drawing attention to themselves.

- **Durations:** micro 200ms · small 300ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1.0)`
- **Patterns:**
  - Smooth transform transitions on hover states
  - Gentle easing on page transitions

- **Hover:** Subtle opacity or color shifts on interactive elements.
- **Click:** Standard pointer cursor on all clickable areas.
- **Transition:** Uniform 0.2s to 0.3s transitions for smooth UI feedback.
- **Keyboard:** Standard sequential focus navigation.

## 8. Voice & Don'ts

The editorial voice is professional yet approachable, delivering clear information in a slightly technical register that matches the monospaced headlines. This tone avoids both clinical sterility and casual informality, finding middle ground in knowledgeable directness.

- **Tone:** Professional yet approachable and informative.
- **Headline style:** Direct, clear, and slightly technical due to the monospaced font.
- **CTA style:** Simple and direct, often just a word like 'Kaufen' (Buy).
- **Avoid:** Loud, flashy animations / Cluttered interfaces / Overly casual language

### Don'ts
- ❌ Don't use drop shadows — screenshot shows flat, border-based design.
- ❌ Don't use gradient backgrounds — screenshot shows a solid warm beige background.
- ❌ Don't use rounded corners on containers — screenshot shows sharp, square corners.
- ❌ Don't use bold font weights for emphasis — screenshot shows consistently regular weight.
- ❌ Don't use a bright, high-chroma accent color — screenshot shows a restrained black-and-beige palette.
- ❌ Don't use centered layouts for main content — screenshot shows a strong left-aligned grid.

What this system deliberately omits—drop shadows, gradients, rounded containers, bold weights—defines its character as much as what it includes.

## System Prompt (paste into AI tool)

```
This website is a digital apothecary for natural healthcare products, using a clean, editorial layout. The palette relies on a warm beige background (#FBF5F1) and dark ink (#212529). Typography mixes a monospaced-sans for headlines with a clean sans-serif for body text. Critical donts: avoid drop shadows, avoid gradient backgrounds, and avoid rounded corners on containers. The design relies on thin black borders and generous whitespace for structure.
```