Zara

# Zara — Style Reference
> High-fashion starkness on white marble. Unyielding contrast and precise lines on a luminous white canvas.

**Theme:** light

**Site:** https://zara.com

Zara's interface projects an unyielding, high-fashion minimalism through a stark monochrome palette and precise typography. The visual brand is built on a high-contrast black-on-white foundation, creating a sophisticated backdrop where product photography becomes the primary source of color and texture. An absence of soft edges or expressive spacing reinforces a refined, almost austere aesthetic.

## Tokens — Colors

| Name | Value | Token | Role |
|------|------|------|------|
| Pitch Black | `#000000` | `--color-pitch-black` | Primary text, borders, icons, form outlines. This is the dominant dark against the luminous white. |
| Luminous White | `#ffffff` | `--color-luminous-white` | Page backgrounds, card surfaces, button fills – the expansive canvas for all content. |
| Subtle Gray | `#757575` | `--color-subtle-gray` | Secondary text, subtle borders, inactive states – provides a slight tonal variation without introducing color. |

## Tokens — Typography

### Helvetica Now Text
- **Substitute:** Helvetica Neue, Arial, sans-serif
- **Weights:** 300, 400
- **Sizes:** 11px, 12px, 13px, 15px, 16px
- **Line height:** 1, 1.23, 1.45, 1.5, 1.54, 1.6
- **Letter spacing:** normal
- **Role:** Universal sans-serif for all text, conveying a contemporary and no-nonsense tone. The consistent use of only two weights across all sizes reinforces the brand's directness.

## Tokens — Type Scale

Major Second (1.125) from 13px base.

| Role | Size | Line height | Letter spacing |
|------|------|------|------|
| caption | 11px | 1.5 | — |
| body-sm | 12px | 1.5 | — |
| body | 13px | 1.5 | — |
| body-lg | 15px | 1.5 | — |
| heading-sm | 16px | 1.5 | — |

## Tokens — Spacing

- **Section gap:** 48px
- **Card padding:** 20px
- **Element gap:** 16px

## Tokens — Radius

- **all:** 0px

## Layout

The page uses a maximum-width contained layout, with content (like the form) aligned to the left against an expansive white background. The hero section employs a split-screen approach, with a functional form on the left and a large, full-bleed photograph on the right. There are no alternating background bands; the entire canvas is Luminous White. Content arrangement is primarily vertical stacking for forms, paired with dominant, large-format imagery, creating a sense of spaciousness and clear hierarchy. Navigation appears minimal, implied rather than explicitly detailed in the provided view, with a prominent brand logo at the top-left.

## Imagery

Photography is the primary visual element, featuring full-bleed, high-quality fashion model shots. The imagery is often centrally composed, highlighting the product and model with a soft-focus, desaturated background that provides context without distraction. There's no specific masking or corner treatment; images appear as raw, uncropped editorial photography. Illustrations and abstract graphics are absent, as the visual load is carried almost entirely by fashion photography, serving a purely product showcase and atmospheric role.

## Components

### Location & Language Selector Form

### Button Group — Primary & Ghost

### Product Card

### Ghost Link Button
*Secondary interactive elements within text (e.g., 'haz click aquí')*

Black text (#000000), transparent background, no border, no padding. Visually indistinguishable from standard text until hovered, prioritizing content flow over overt interactivity.

### Default Input Field
*User input for forms (e.g., 'LOCATION', 'LANGUAGE')*

Black text (#000000), white background (#ffffff), with a 1px solid black border. No border-radius. Features 16px right padding and 0px top/bottom/left padding, indicating content alignment within the field.

### Transparent Input Field
*Secondary input fields or those within larger interactive components*

Black text (#000000), transparent background (rgba(0,0,0,0)), with a 1px solid black bottom border. No border-radius or padding, presenting as an underlined text input rather than a distinct box.

### Location/Language Dropdown
*Selector for locale-specific options*

Functions as a Default Input Field, suggesting a click opens a modal or dropdown. Utilizes black text (#000000), white background (#ffffff), 1px solid black border. Padding: 0px top/bottom/left, 16px right.

## Guidelines

### Do

- Do use #000000 (Pitch Black) for all primary text and interactive element borders.
- Do use #ffffff (Luminous White) for all page and primary component backgrounds.
- Do maintain 0px border-radius for all elements, including buttons and input fields.
- Do apply Helvetica Now Text (or a suitable substitute like Helvetica Neue or Arial) for all typographic elements.
- Do use a consistent base spacing unit of 4px for fine-grained adjustments, and multiples for larger gaps (e.g., 12px, 16px, 20px, 32px, 48px).
- Do limit text colors to Pitch Black (#000000) for primary content and Subtle Gray (#757575) for secondary details.

### Don't

- Don't introduce any color outside of the defined monochrome palette of Pitch Black, Luminous White, and Subtle Gray.
- Don't use any rounded corners or soft edges on UI elements; maintain sharp, crisp rectangular forms.
- Don't use drop shadows or complex elevation effects; depth is created through direct contrast and layering.
- Don't apply padding to the top, bottom, or left of input fields listed under 'Default Input Field' or 'Location/Language Dropdown' to maintain precise alignment.
- Don't vary font weights significantly; adhere strictly to 300 and 400 for Helvetica Now Text.
- Don't use decorative flourishes or non-essential graphical elements; the design emphasizes functional minimalism.

## Agent Prompt Guide

Quick Color Reference:
- Text: #000000
- Background: #ffffff
- Accent/Secondary Text: #757575
- Border: #000000

Example Component Prompts:
- Create a page header: ZARA logo text at 32px Helvetica Now Text (weight unspecified, but visually bold) #000000, left-aligned, on a #ffffff background. 
- Create a text input labeled 'LOCATION': Text input box with 1px solid #000000 border, #ffffff background, #000000 text. Placeholder text should be #757575. Padding should be 0px top/bottom/left, 16px right. Font is Helvetica Now Text, 13px, weight 400.
- Create a 'CONTINUE' button: 1px solid #000000 border, 0px border-radius, background rgba(0,0,0,0). Text is 'CONTINUE' in all caps, #000000, Helvetica Now Text, 13px, weight 400. Padding: 2px top/bottom, 12px left/right. 
- Create a paragraph describing an offer: 'Si nos visitas desde las Canarias haz click' in Helvetica Now Text, 13px, weight 400, #000000. Followed by 'aquí' as a ghost link, same font/size/weight, #000000, no border or background, implying a clickable text element.