alexandravaldivieso.com — Design Language

1. Visual Theme & Atmosphere

Alexandra Valdivieso’s site reads as a high-end fashion portfolio: opulent yet restrained, built on the tension between stark white and near-black surfaces. The design borrows from editorial print — large-scale serif headlines that crowd the line height, full-bleed imagery overlaid with translucent washes, and a navigation that disappears into the background until needed. Colour accent (a single coral-pink) is held back like a designer’s signature, appearing only on accessibility elements and hover moments. The overall atmosphere is confident silence: the work speaks, the interface steps aside.

2. Color Palette & Roles

Background layer

• #ffffff — Primary canvas; body and content sections.
• rgb(241, 243, 249) — Slightly cool off-white surface (div.top-bun); used to separate hero from content without hard lines.

Foreground & text

• rgb(0, 0, 0) — Body copy and navigation labels.
• rgb(241, 243, 249) — Headline text rendered over dark imagery; cool ivory that lifts off dark backgrounds.
• rgb(255, 255, 255) — Link labels and CTA text on dark or coloured backgrounds.

Dark surfaces

• rgb(28, 28, 28) — Mobile/overlay menu background (div.header-menu-bg); near-black that keeps brand warmth without going full black.

Accent

• rgb(255, 105, 127) — Coral-pink; used exclusively on the skip-link and accent moments. Signals interaction, not decoration.

Overlay

• rgba(0, 0, 0, 0.5) — Semi-transparent image overlay (div.fluidImageOverlay); controls photo luminance without masking the image entirely.

No custom CSS properties or tokens are defined — all values are hardcoded, consistent with a Squarespace/fluid grid build.

3. Typography Rules

Two typefaces, clearly ranked:

Gilda Display — Display / editorial serif. Used for h2 headlines at 77.44px / 78px line-height (tight ratio near 1:1), font-weight: 400, letter-spacing −1.55px. The tight leading and negative tracking create dense, poster-like type blocks. No uppercase transform — the elegance is in the letterform itself.

Open Sans — Functional sans. Used for body paragraphs (p, div) and buttons at 16px. Weight stays at 400; no tracking adjustments. Its neutrality deliberately recedes behind the display face.

What is absent: no monospace, no variable fonts, no font-feature-settings beyond defaults, no uppercase transforms. The typographic palette is intentionally minimal — two roles, two typefaces, nothing else.

4. Component Stylings

Navigation — Transparent background over hero; switches to rgb(28, 28, 28) for the mobile overlay menu. No visible border or shadow on default state.

Floating cart — Background matches the coral accent rgb(255, 105, 127) family, positioned absolutely. Rounded with 300px radius (effectively pill/circle).

Image overlays — rgba(0,0,0,0.5) wash applied via div.fluidImageOverlay. No blur, no gradient — a clean flat dim.

Buttons — Open Sans 16px, weight 400. No apparent shadow, no border-radius tokens beyond 50% (circular) and 300px (pill). CTAs are text-weight, not bold.

Border radii available: 50% (circular avatars/icons) and 300px (pill buttons/badges). No intermediate radii — sharp rectangles or maximum-curve pills only.

5. Layout Principles

Section-based vertical rhythm: each section carries padding-top: ~56px, margin: 0. Content is full-width by default, constrained by inner containers. The grid is fluid (Squarespace fluid engine); no explicit grid or flex gap tokens are exposed.

One responsive breakpoint detected: 768px. The layout collapses from a horizontal editorial arrangement to stacked single-column at mobile. The header switches to an overlay menu pattern at this threshold.

6. Depth & Elevation

No box-shadows are defined anywhere in the extracted CSS. Depth is created entirely through:

• Layered photography with the rgba(0,0,0,0.5) overlay.
• Surface luminance contrast between the #f1f3f9 off-white zone and the #1c1c1c dark menu.
• Typography scale — the 77px display headline creates visual weight without chrome.

This is a deliberately flat, photography-first design: the images supply all the three-dimensionality.

7. Do’s and Don’ts

Do:

• Use Gilda Display only for primary headlines; never for body or UI labels.
• Keep the coral rgb(255, 105, 127) scarce — one accent per view.
• Allow full-bleed images to dominate sections; reduce UI chrome around them.
• Use pill shapes (300px radius) for any CTA buttons.
• Keep text on dark-image sections in rgb(241, 243, 249) ivory, not pure white — it reads warmer.

Don’t:

• Don’t add intermediate grey surfaces — the palette is white, near-black, and one accent.
• Don’t use bold or semibold weights; both typefaces stay at 400.
• Don’t introduce additional typefaces; two roles are the ceiling.
• Don’t add drop shadows — they conflict with the flat, editorial tone.
• Don’t use uppercase transforms on the display face; it loses its elegance.

8. Responsive Behavior

Single breakpoint at 768px:

• Desktop: horizontal editorial layouts, large display typography, transparent nav.
• Mobile: stacked single-column, rgb(28, 28, 28) overlay navigation, type scale reduces proportionally.
• The 77px headline will need significant reduction on mobile (suggest ~40–48px) to avoid overflow, though no explicit mobile type scale is defined in the CSS.
• Cart floats as a fixed pill element at both breakpoints.

9. Agent Prompt Guide

“Design in the style of alexandravaldivieso.com: white editorial canvas, one coral accent rgb(255,105,127), Gilda Display for headlines at near-1:1 line-height with negative tracking, Open Sans 400 for body. No shadows. Full-bleed photography with rgba(0,0,0,0.5) overlays. Pill buttons (border-radius: 300px). Mobile collapses at 768px to stacked layout with dark overlay nav rgb(28,28,28). Keep UI chrome minimal — the imagery does the visual work.”

Generated by Sparkbites — extracted from live CSS analysis