# quechua-lookbook.com — Design System

## 1. Visual Theme & Atmosphere
The Quechua Lookbook is an outdoor/activewear campaign site built with Tailwind and powered by WordPress block editor. Two custom typefaces — Decathlon-Brand and Decathlon-Display — carry the full typographic identity of the Decathlon product family. The colour system is warm, natural, and earthy: soft bone, warm stone, muted toffee tones anchored by a deep charcoal. This is not sportswear maximalism — it is a considered editorial lookbook that presents outdoor clothing through an organic, nature-connected lens.

## 2. Color Palette & Roles
| Role | Value | Notes |
|------|-------|-------|
| Charcoal | `rgb(42, 41, 40)` | Primary text, deep elements |
| Bone | `rgb(245, 244, 239)` | Page canvas — warm white |
| Stone | `rgb(207, 202, 191)` | Borders, subtle backgrounds |
| Toffee | `rgb(175, 165, 146)` | Supporting mid-tone |

All-warm, all-natural palette. No pure white, no pure black. The slight yellow cast across all values speaks to sun-bleached fabric, mountain light, and organic materials.

## 3. Typography Rules
- **Body brand**: Decathlon-Brand — 500 weight, 97px for h1, 500 line-height scaling. Confident and readable at large scale.
- **Display/editorial**: Decathlon-Display — used for h2 (39px) and likely decorative headings. A more expressive cut of the brand typeface family.
- Both fonts are proprietary Decathlon brand assets — no fallback brand experience without them.
- Fallback: `sans-serif` — functional but brand-less.
- Large h1 (97px) anchors campaign spreads. H2 (39px) introduces sections.

## 4. Component Stylings
- **Radius**: 7px (standard UI), 14px (medium cards), 9999px (pill elements).
- **Shadows**: None detected — the photography provides all visual drama.
- **WordPress blocks**: Standard block editor components, styled to match the brand palette.
- Full-bleed image blocks are the primary visual component.

## 5. Layout Principles
- WordPress block editor grid system.
- Full-bleed photography sections with typographic overlays.
- The aspect-ratio presets (square, 4:3, 3:4, 16:9, 9:16) signal careful editorial control over image proportions.
- Bone background between photography sections provides breathing room.

## 6. Depth & Elevation
No shadows. Photography is the depth source — outdoor imagery creates natural three-dimensionality against flat editorial panels. The palette's warm tones read as tactile without requiring shadow reinforcement.

## 7. Do's and Don'ts
**Do:**
- Use Decathlon-Brand for large headings (80px+); Decathlon-Display for editorial sub-headings
- Apply the warm bone canvas (`#f5f4ef`) between photography panels
- Respect the defined aspect ratios for all imagery

**Don't:**
- Use pure white or pure black backgrounds
- Introduce bright or saturated accent colours — the palette is intentionally muted
- Apply pill radius (9999px) to image containers — use 7px only

## 8. Responsive Behavior
Tailwind breakpoints on WordPress blocks. 97px Decathlon-Brand will need viewport scaling on mobile. Full-bleed images maintain their aspect-ratio constraints at all sizes. The neutral palette transitions smoothly across device types.

## 9. Agent Prompt Guide
> Reproduce quechua-lookbook.com style: warm bone canvas `rgb(245,244,239)`, charcoal `rgb(42,41,40)` text. Decathlon-Brand 500 at 97px for hero headlines, Decathlon-Display for section titles. Stone `rgb(207,202,191)` and toffee `rgb(175,165,146)` for supporting tones. Border-radius 7–14px. No shadows. Full-bleed photography-led editorial layout.

*Generated by Sparkbites — extracted from live CSS analysis*