---
name: Mybrentano Ch
description: "This site is an excellent example of a modern, editorial approach to e-commerce, blending technical typography with organic warmth."
version: alpha

colors:
  background: "#FBF5F1"
  primary: "#212529"
  line: "rgba(33,37,41,1.0)"

typography:
  display:
    fontFamily: monospaced-sans
    fontSize: 60px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "-0.5px"
  h1:
    fontFamily: sans-serif
    fontSize: 30px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: sans-serif
    fontSize: 18px
    lineHeight: 1.67
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: sans-serif
    fontSize: 15px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 4px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A clean, editorial e-commerce site for natural holistic healthcare products.

*A modern, digital-native apothecary blending clean aesthetics with organic warmth.*

## Colors

High-contrast natural palette with warm beige and dark ink.

- **Background (`#FBF5F1`)** — uses `bg` token
- **Primary text (`#212529`)** — uses `ink` token
- **Borders (`rgba(33,37,41,1.0)`)** — uses `line` token

## Typography

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

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

## Layout

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

*Rhythm:* Generous white space with standard 4px base unit.

## Elevation & Depth

- Borders: Thin 1px solid black borders used for structure and division.

## Shapes

- `sm`: 4px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Minimal outline buttons with pill-shaped language toggles and circular icon buttons.
- **card:** Clean product cards with thin borders, aligned text, and no background color.
- **chip:** Simple text-based language toggles inside pill shapes.
- **input:** Bottom-bordered input fields without visible background.
- **hero:** Large, left-aligned monospaced headline with an organic, overlapping photo collage.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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