Mango DESIGN.md

Design System Inspiration of Mango

Overview

Visual Theme & Atmosphere

Mango is a fashion retailer founded in Barcelona in 1984. Its collections span Woman, Man, Kids, Teen and Home; its own description of womenswear places contemporary fashion in a Mediterranean context. Mango says it aims to inspire each woman to develop her own style. Company origin, Our lines

That direction extends through Craft Your Own Story. Mango's October 2025 campaign release describes an invitation to explore personal style and choose how to present oneself. Its more recent evolution also has a physical expression: the October 2026 Les Halles reopening uses the New Med store concept, with natural textures, warm tones and a welcoming Mediterranean-home idea, within the 4E 2024–2026 plan. These are brand and store-design contexts; their materials are not website colour tokens. Campaign, New Med, October 2026

The captured Spanish shop expresses that identity through a full-width fashion photograph, a large serif campaign line and compact uppercase navigation. The interface uses near-black #131313, a white #ffffff canvas and square controls; the photograph supplies the prominent colour. A centred wordmark sits between collection navigation and shopping tools. These are observations of the desktop entry page, not a published brand manual. Live shop

The entry page offers the five collection links and a search link. The worker's capture left the consent panel open; the link states below were re-measured with it rejected.

Brand Narrative

Barcelona is a continuing part of Mango's story: the corporate history starts with its first shop on Paseo de Gracia and later describes El Hangar as the design centre where its collections are created. It also records the launch of Mango's own e-commerce. The corporate home describes an integrated distribution business combining stores, franchises, wholesale and its own online shop. History, Company

For this reference, the connection between that story and the live visual treatment is an interpretation: the large photographic surface and serif campaign line carry the fashion expression, while small neutral controls support browsing. The store concept and the website share brand context; no store-material palette has been imported into the UI tokens.

Principles

These are implementation lessons from this capture, rather than claims of official design principles:

• Give the image more visual weight than the navigation.
• Preserve separate semantic content, background and border roles even where their colour values match.
• Express feedback through the measured neutral steps (#434343 hover, #2a2a2a active); keep keyboard focus distinguishable with the separate outline.

Personas

Personas were not researched.

Colors

The live census contains 215 computed root custom properties, including 86 --sem-color-* entries. The following roles retain the site's semantic names. Repeated values across content, background and border roles are intentional.

The paragraph census has a tie: three white paragraphs and three #121212 paragraphs. foreground therefore follows the explicit core-content token, rather than treating the most frequent overall text colour as body ink. Overall text counts favour #131313 (43), then #121212 (8).

Typography

Evidence classes

The loaded aliases are linked to these source paths by the captured @font-face declarations:

• DefaultFontES 400 → /fonts/MangoNew-Regular/subsets/MangoNew-Regular-es.woff2.
• DefaultFontES 600 → /fonts/MangoNew-SemiBold/subsets/MangoNew-SemiBold-es.woff2.
• InspirationalFontES 400 → /fonts/MangoHeritageHeadline-Regular/subsets/MangoHeritageHeadline-Regular-es.woff2.

Body and h1 declare DefaultFontES, sans-serif. The census's generic button sample does not establish a loaded product action face; the individual control records supply their own declarations and metrics. The loaded-face evidence and the per-control declarations remain separate. Substitute: none chosen. Live font census

Metrics

The semantic weight labels are distinctive: --sem-font-weight-light is 400, --sem-font-weight-regular is 600, and --sem-font-weight-black is 900. Preserve those actual values when interpreting the names.

Layout

At 1440 × 1000, the sticky header measures 56px high. Collection links start at x=32px; the 118 × 18px logo link is centred at x=661px. The hero photograph fills the width beneath it. The full-page capture then shows a centred newsletter area, region/language control, social links and a four-column footer.

Footer column starts are x=32, 384, 736 and 1088px in this desktop capture. This is an observed arrangement, not a verified general grid specification. Computed horizontal-padding tokens are none: 0, xsm: 8px, sm: 16px and md: 32px. Component padding supplies the more specific 10px 24px action inset and 20px hero-link inset.

Responsive Behavior

Only desktop 1440 × 1000 was rendered. Computed breakpoint declarations are --breakpoint-m: 600px, --breakpoint-l: 1024px, --breakpoint-xl: 1920px and --breakpoint-height: 400px; behaviour at those breakpoints was not tested.

Elevation & Depth

All six inspected controls have box-shadow: none. The consent panel's inspected ancestor is white with a 1px #c7c7c7 border and no shadow. The root also declares --sem-color-background-scrim: #42424240 and --sem-color-background-surface-onimage: #fafafae5; these alpha colours remain prose evidence. No elevation scale was verified.

Motion & Easing

The two measured consent controls have computed transitions listing color, background-color and border-color, each at 0.3s with cubic-bezier(0.3, 0.85, 0.5, 1) and zero delay. The probe waited 900ms per measured state, past the 300ms longest transition. Exact raw transition strings are preserved in the verification Proof block.

The hero link's rest transition is color 0.5s cubic-bezier(0.3, 0.85, 0.5, 1) 0s; the header Mujer, Buscar and footer Ayuda rest transitions are color 0.3s cubic-bezier(0.3, 0.85, 0.5, 1) 0s. The hero link's hover and every link's focus were measured on these transitions; the probe waited 900ms, past the longest 500ms. Reduced-motion behaviour was not tested.

Components

The worker measured two buttons on Mango's own white consent panel while it was open. They are kept here as observations of the semantic hover and active steps, not as components: both have transparent backgrounds, box-shadow: none and 0px radius.

The product links were re-measured with the consent panel rejected and the country dialog closed. The hero Mujer link is 82.8 × 48px with 0px 20px padding and #fdfdfd ink; the header Mujer link is 42.8 × 16px; Buscar is 51.7 × 24px; footer Ayuda is 41.5 × 38px with 7px 0px padding. The last three use #131313 ink. All four are transparent links with 0px radius, no border, no shadow and 12px/600 type with a 16px line height; their declared family is HeadingsFontES (unresolved; see Typography).

States. Keyboard focus on every link shifts the text to #434343, the semantic brand-hover step, and draws a 2px solid #121212 outline: offset 1px on the header Mujer link, 2px on Buscar and Ayuda. Over the photograph the hero link adds a 2px solid white #ffffff border inside the outline (offset 0) and a 4px white box-shadow spread that shows as a white halo outside it: white, dark, white from the inside out. On hover the hero link's text turns #f4f4f4 and gains a solid #f4f4f4 underline.

States

Re-measured in a fresh-profile browser at 1440 × 1000 with the consent panel rejected (“Solo cookies necesarias”) and the “¿En qué país quieres comprar?” country dialog closed by its own “Cerrar” button (no country was chosen):

Every focus outline is solid, and none persisted after blur.

The worker's capture, taken with the consent panel open, measured its two buttons:

No disabled state was measured.

Do's and Don'ts

Do

• Let fashion photography carry the strong colour; use the measured semantic neutrals for interface roles.
• Keep the measured consent actions square and 44px high, with distinct hover and pressed colours.
• Draw keyboard focus as a 2px solid #121212 outline with the text shifted to #434343; over photography, put a white 2px border inside it and a 4px white box-shadow halo outside it.
• Keep font aliases, loading evidence and type metrics explicit.

Don't

• Assume header links underline on hover: only the hero link's underline was measured; the header link's hover opens the menu.
• Convert the photograph's garment colours into interface tokens.
• Render an unloaded alias as a verified type specimen, or assign a replacement font by eye.

Voice & Tone

The captured Spanish UI uses short commerce labels such as Mujer, Buscar and Ayuda, rendered uppercase in the screenshots. The hero's accessible collection-link labels append the Barcelona/1984 origin line. Mango's Craft Your Own Story campaign supplies a more expressive register centred on personal style and self-expression. This is a reading of the opened material, not a formal voice guideline. Campaign source

Agent Prompt Guide

“Build a Mango-style desktop fashion entry with a centred wordmark, compact uppercase collection navigation and a full-width fashion photograph. Use #ffffff surfaces and #131313 interface ink. Preserve the separation between the loaded UI alias DefaultFontES and the loaded inspirational alias InspirationalFontES.”

“Set the collection links as uppercase 12px/600 text with no box: #131313 in the header, #fdfdfd over the hero photograph with 0px 20px padding. On hover the hero link turns #f4f4f4 and underlines. On keyboard focus every link shifts to #434343 and gets a 2px solid #121212 outline; over the photograph put a 2px white border inside it and a 4px white box-shadow halo outside it. Their declared HeadingsFontES face is unresolved; choose no substitute.”