irenelabat.es — Design Language

1. Visual Theme & Atmosphere

Irene Labat’s portfolio is built on controlled darkness and expressive type — a Spanish creative director’s digital voice translated into extreme typographic scale. The dominant feeling is theatrical: near-black backgrounds recede into near-invisibility while oversized display text fills the viewport like a cinema title card. There is no decoration; the work is the decoration. Every choice points toward restraint in structure and extravagance in letterforms. The palette is intentionally limited to two tones — dark and bone — so the typography can breathe without competition.

2. Color Palette & Roles

The palette is binary: background against foreground, nothing else. No grays, no tints, no accent hues. The bone white reads warm against the brown-black, avoiding the cold sterility of pure #fff on #000. This warmth is the only color personality.

What’s absent: No accent colors, no gradients, no shadows, no success/error states.

3. Typography Rules

The site makes a single typeface family — PolySans — do all the work, but in radically different cuts:

The headline tracking is aggressively negative (−4.87px at 243px), pulling letters into near-ligature contact. Line heights match font size exactly (1:1), creating tight typographic blocks that behave like graphic elements. No mixed-family pairing — PolySans alone handles the full typographic range.

What’s absent: No serif, no monospace, no system fallback beyond sans-serif.

4. Component Styling

• Navigation links transition via opacity to 0.65 plus a horizontal translate (+15.9px) on focus — a subtle rightward drift that signals interactivity without changing color.
• Buttons / CTAs: No dedicated button surface detected. Actions are likely typographic links.
• Work items: Navigation items are numbered text labels (e.g., “01. Violeta”) — the numbering is the UI.
• Borders: Used as structural lines, always in bone rgb(238, 233, 221), never decorative.
• No cards, no shadows, no rounded corners.

5. Layout Principles

• Full-bleed sections with zero default padding on main, section, and footer.
• Header uses 30px 0 padding — minimal vertical breathing room at top.
• Breakpoints: 576px, 600px, 768px, 950px, 1024px — a dense responsive ladder suggesting careful reflow of oversized type at each step.
• Layout is likely a vertical scroll of full-screen sections, each dominated by a single headline.
• The WordPress-based architecture suggests custom block templates rather than a CSS framework.

6. Depth & Elevation

This site lives entirely in 2D. No shadows, no blur, no elevation. Depth is achieved typographically — scale creates hierarchy, proximity creates grouping. The near-black background is the “floor”; text floats above it by pure contrast. Interactive feedback uses opacity and translation instead of shadow or glow.

7. Do’s and Don’ts

Do:

• Use polysans-slimwide for hero text only — its condensed width and negative tracking are for large scale.
• Maintain the binary palette strictly. Add nothing that isn’t bone or near-black.
• Keep line-heights at or near 1:1 for display sizes.
• Use opacity + translate for hover/focus states, not color changes.

Don’t:

• Introduce rounded corners or card surfaces — this design has zero border-radius.
• Add box-shadows or drop-shadows of any kind.
• Use color to signal state — opacity is the signal here.
• Mix in a second typeface family; PolySans’s width variety is the contrast system.

8. Responsive Behavior

The dense breakpoint ladder (576, 600, 768, 950, 1024px) indicates the 243px headline shrinks progressively — likely stepping down through the --h* custom property scale (h380 → h290 → h200 → h98 → h83 → h60). At mobile widths the typographic block reflows to fill the narrower viewport while preserving the 1:1 line-height rhythm. Header padding likely increases proportionally to prevent optical compression.

9. Agent Prompt Guide

Build a portfolio section in the style of irenelabat.es: near-black background (#272224), bone text (#EEE9DD), no shadows, no rounded corners. Use a wide condensed display font at extreme scale (200px+) with −4px to −5px letter-spacing and 1:1 line-height. Navigation uses numbered text labels. Interactive states change opacity to ~0.65 and translate +16px horizontally — no color shift. Layout is full-bleed vertical sections with minimal padding. No accent colors, no gradients, no decorative elements.

Generated by Sparkbites — extracted from live CSS analysis