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

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