---
name: Letsbehonest Eu
description: "Worth including as an example of a clean, editorial-style fashion site that uses a restrained but effective color palette and strong photography."
version: alpha

colors:
  background: "#EEE5D9"
  primary: "#0E0E0E"
  secondary: "#868686"
  tertiary: "#892500"
  neutral: "#B4B4B4"
  bg-soft: "#F9F6F2"
  line: "rgba(134, 134, 134, 0.3)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 138px
    lineHeight: 0.8
    fontWeight: 700
    letterSpacing: "1px"
  h1:
    fontFamily: humanist-sans
    fontSize: 56px
    lineHeight: 1.0
    fontWeight: 700
    letterSpacing: "1px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.78
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: humanist-sans
    fontSize: 11px
    lineHeight: 1.36
    fontWeight: 400
    letterSpacing: "1px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

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

---

## Overview

A sustainable fashion brand featuring high-contrast editorial photography and warm, earthy tones.

*An editorial fashion magazine's digital storefront.*

## Colors

Warm, earthy neutrals grounded by a single deep red accent and high-contrast photography.

- **Background (`#EEE5D9`)** — uses `bg` token
- **Primary text (`#0E0E0E`)** — uses `ink` token
- **Secondary text (`#868686`)** — uses `ink-soft` token
- **Accent (`#892500`)** — uses `accent` token
- **Muted (`#B4B4B4`)** — uses `muted` token
- **Borders (`rgba(134, 134, 134, 0.3)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Use uppercase for navigation and minor headings.
- Maintain generous letter-spacing (2px+) for uppercase elements.
- Use a mix of geometric and humanist sans-serif fonts for hierarchy.

## Layout

Full-width hero image followed by centered, single-column sections with generous whitespace.

*Rhythm:* Generous vertical spacing with distinct section padding (e.g., 114px top).

## Elevation & Depth

- Borders: Minimal, using 1px solid #868686 for subtle dividers and interactive elements.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** Text-based or simple rectangular buttons with uppercase text and generous horizontal padding.
- **card:** Clean product cards featuring full-height model photography on neutral backgrounds.
- **hero:** Full-bleed, high-resolution editorial photography with minimal overlay text and large carousel arrows.

## Do's and Don'ts

**Don't:**
- Don't use a pure white background — the screenshot shows a warm, beige (#EEE5D9) as the primary canvas.
- Don't set navigation in lowercase — the screenshot shows all navigation items in uppercase.
- Don't use complex gradients — the design relies on flat colors and high-quality photography.
- Don't use a sans-serif for everything — the brand mark uses a bold, condensed sans-serif, while body text is more humanist.
- Don't add drop shadows to cards — product cards are borderless and flush with the background.
- Don't use a dark mode or dark backgrounds for primary content — the palette is predominantly light and earthy.

---

## System Prompt (paste into AI agent)

```
Design a premium, editorial fashion e-commerce site. The core aesthetic is built on a warm, earthy palette with a primary background of #EEE5D9 and a stark, high-contrast accent of #892500. Use a combination of geometric and humanist sans-serif fonts for display and body text, ensuring uppercase is used for navigation and key labels. The layout must be image-forward, prioritizing large, high-resolution photography with generous whitespace and minimal UI chrome. Avoid cluttered interfaces, heavy shadows, or synthetic-looking colors. Ensure interactions are subtle, using quick 0.15s color transitions. Do not use lowercase for navigation, do not add drop shadows to cards, and do not use a pure white background.
```