---
name: Albacondos
description: "This site is an excellent example of high-end real estate web design, using extreme restraint and generous whitespace to create an atmosphere of luxury and sophistication."
version: alpha

colors:
  background: "#F5F4F3"
  primary: "#000000"
  neutral: "#737373"
  line: "rgb(115, 115, 115)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 95px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "10px"
  headline:
    fontFamily: humanist-sans
    fontSize: 40px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "normal"
  body:
    fontFamily: humanist-sans
    fontSize: 16px
    lineHeight: 1.0
    fontWeight: 300
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 8px
  lg: 22.5px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A premium residential real estate site defined by expansive photography, generous whitespace, and elegant, restrained typography.

*High-end real estate developer showcasing premium urban living spaces.*

## Colors

Monochromatic palette with deep warm undertones, relying entirely on large-scale photography for visual interest.

- **Background (`#F5F4F3`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#737373`)** — uses `muted` token
- **Borders (`rgb(115, 115, 115)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** humanist-sans

- Primary typeface is a geometric sans (Montserrat family) with a dominant weight of 300
- Accented by a secondary display sans for branding elements
- Uppercase transformation is applied extensively for navigation and feature tags
- Generous tracking is applied to large numerical displays for a spacious feel

## Layout

Asymmetric, masonry-style grid that breaks standard column alignment to create an editorial, magazine-like flow.

*Rhythm:* Vertical rhythm is established by extremely generous padding blocks of 115px, creating a calm, breathable layout.

## Elevation & Depth

- Borders: 1px solid borders are used for pill-shaped buttons and small tag components.

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 22.5px
- `pill`: 999px

## Components

- **button:** Pill-shaped outline buttons with uppercase text and generous horizontal padding.
- **card:** Minimalist cards defined primarily by large, high-resolution photographic content rather than heavy borders or shadows.
- **chip:** Small pill-shaped tags with thin 1px borders and uppercase text for categorical labels.
- **input:** Minimalist form fields that blend seamlessly into the light background.
- **hero:** Full-viewport cinematic imagery that serves as the primary focal point, with absolute-positioned typography.

## Do's and Don'ts

**Don't:**
- don't use bright, saturated accent colors — screenshot shows a strict monochromatic palette dominated by photography.
- don't use heavy drop shadows on cards — screenshot shows flat, borderless elements defined only by imagery.
- don't use dense, cluttered layouts — screenshot shows massive whitespace (115px vertical padding) and breathable spacing.
- don't use heavily stylized or decorative serif fonts for display — screenshot shows a strict geometric sans-serif for all typography.
- don't use complex, multi-step border-radius for UI components — screenshot shows strict pill-shaped (fully rounded) buttons.
- don't use busy, complex backgrounds — screenshot shows solid off-white backgrounds (#F5F4F3) for all text-heavy sections.

---

## System Prompt (paste into AI agent)

```
You are designing for a premium urban residential developer named 'ALBA'. The visual language is defined by expansive, cinematic photography paired with generous whitespace and a strict monochromatic palette. The primary background is a warm off-white (#F5F4F3) with solid black text (#000000). Typography relies heavily on a light-weight (300) geometric sans-serif for a refined, airy feel. UI elements, particularly buttons and tags, are strictly pill-shaped with thin 1px outlines and uppercase tracking. Complex clip-path animations are used for imagery reveals. Key constraints: Avoid any bright accent colors, drop shadows, or cluttered multi-column grids. Always prioritize large photographic areas and extreme vertical spacing (115px padding) to maintain a sense of luxury and calm. Never use decorative or heavy display fonts.
```