# Letsbehonest Eu · Design system migration spec

> Source: https://www.letsbehonest.eu  ·  Curated by OpenDesign  ·  en

> Worth including as an example of a clean, editorial-style fashion site that uses a restrained but effective color palette and strong photography.

## 1. Identity DNA

This system operates like an editorial fashion magazine's digital storefront, where the architecture is designed to showcase the garments. Its identity is built on sustainable fashion, candid photography, and a curated, premium aesthetic.

**One-liner:** A sustainable fashion brand featuring high-contrast editorial photography and warm, earthy tones.
**Keywords:** sustainable · fashion · editorial · candid
**Analogy:** An editorial fashion magazine's digital storefront.

## 2. Color

The palette is a study in restraint, dominated by warm, earthy neutrals that serve as a quiet stage for the photography. A single, bold red accent punctuates the composition with confidence.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#EEE5D9` | main background |
| `--bg-soft` | `#F9F6F2` | card background |
| `--ink` | `#0E0E0E` | body text |
| `--ink-soft` | `#868686` | secondary text |
| `--muted` | `#B4B4B4` | placeholder |
| `--accent` | `#892500` | single accent |
| `--line` | `rgba(134, 134, 134, 0.3)` | divider |

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

High-contrast photography is the primary driver, with the color system existing to support, not compete with, the imagery.

## 3. Typography

Typographic hierarchy is established through a deliberate mix of geometric and humanist sans-serif fonts, creating a clear distinction between display and body text. The voice is clean and editorial, with uppercase rules defining navigation and key labels.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 138px | 0.8 | 700 | 1px | Major section headers |
| h1 | 56px | 1.0 | 700 | 1px | Page titles |
| body | 14px | 1.78 | 400 | 0px | Main text |
| caption | 11px | 1.36 | 400 | 1px | Small UI labels and metadata |

**Type rules:**
- 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.

## 4. Spacing

Rhythm is established through generous, deliberate vertical spacing.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Generous vertical spacing with distinct section padding (e.g., 114px top).

## 5. Surfaces

Surfaces are treated with profound minimalism. Depth is implied by the absence of borders and shadows, allowing the warm canvas and full-bleed imagery to define spatial relationships.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** Minimal, using 1px solid #868686 for subtle dividers and interactive elements.

## 6. Layout

The structural skeleton begins with a full-bleed hero image, setting a dramatic, image-first tone. Subsequent content settles into a centered, single-column layout, breathing within generous whitespace to maintain focus.

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

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

## 7. Motion & Interaction

Motion philosophy prioritizes subtlety and function over decoration. Transitions are quick and smooth, designed to acknowledge interaction without interrupting the visual flow.

- **Durations:** micro 150ms · small 200ms · medium 400ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Quick, subtle color transitions on hover for interactive elements.
  - Smooth transitions for carousel slides.

- **Hover:** Subtle color change or opacity shift, typically 0.15s ease-out.
- **Click:** Immediate visual response.
- **Transition:** All transition properties set on many elements for smooth state changes.
- **Keyboard:** Standard tab navigation with focus states.

## 8. Voice & Don'ts

The editorial voice is confident, minimalist, and sustainably-focused. Headlines are short and impactful, while calls-to-action remain clean and unobtrusive.

- **Tone:** Confident, minimalist, and sustainably-focused.
- **Headline style:** Short, impactful, and often displayed in large, bold uppercase letters.
- **CTA style:** Clean and unobtrusive, often text-based.
- **Avoid:** Using loud, neon, or overly synthetic colors. / Employing decorative or script fonts. / Creating cluttered layouts with excessive text overlays on images. / Using complex shadows or gradients. / Adding unnecessary borders or heavy UI chrome. / Using lowercase for primary navigation.

### Don'ts
- ❌ 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.

The system deliberately avoids cluttered interfaces, heavy shadows, synthetic colors, and any visual noise that would dilute the photographic narrative.

## System Prompt (paste into AI tool)

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