# Albacondos · Design system migration spec

> Source: https://www.albacondos.com  ·  Curated by OpenDesign  ·  en

> 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.

## 1. Identity DNA

Like a high-end real estate developer showcasing premium urban living spaces, this system treats visual restraint as a form of luxury. The design language is defined by expansive photography and generous whitespace, where every element is placed with the deliberate care of a curated gallery exhibition.

**One-liner:** A premium residential real estate site defined by expansive photography, generous whitespace, and elegant, restrained typography.
**Keywords:** luxury · architecture · urban · sophisticated · modern living
**Analogy:** High-end real estate developer showcasing premium urban living spaces.

## 2. Color

The color system is monochromatic by design, employing a warm off-white canvas as a neutral stage for the imagery. Black provides typographic contrast, while all chromatic interest is delegated entirely to the photography itself.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F5F4F3` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#737373` | placeholder |
| `--line` | `rgb(115, 115, 115)` | divider |

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

The principle is absolute restraint: the palette never competes with the content it frames.

## 3. Typography

Typography relies on a geometric sans-serif, Montserrat, at a light 300 weight to create an airy, refined voice that never overpowers the visual narrative. Extensive uppercase transformations and generous tracking on numerical displays establish a quiet authority.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 95px | 1.0 | 500 | 10px | Large display numerals and hero timestamps |
| headline | 40px | 1.0 | 300 | normal | Main heading titles |
| body | 16px | 1.0 | 300 | normal | Primary body copy and navigation links |

**Type rules:**
- 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

## 4. Spacing

Rhythm is measured in vast, quiet intervals. The vertical spacing uses extreme padding blocks of 115px to create a calm, breathable pace throughout the layout.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Vertical rhythm is established by extremely generous padding blocks of 115px, creating a calm, breathable layout.

## 5. Surfaces

Surfaces are defined by their absence of decoration. Depth is implied through generous spacing alone, with only the finest 1px borders appearing on pill-shaped buttons and tag components.

- **Radius:** sm 4px · md 8px · lg 22.5px · pill 999px
- **Borders:** 1px solid borders are used for pill-shaped buttons and small tag components.

## 6. Layout

The layout follows an asymmetric, masonry-style grid that breaks conventional column alignment to achieve an editorial, magazine-like flow. Full-viewport hero sections serve as the primary structural anchors, with absolute-positioned typography layered over cinematic imagery.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion is cinematic and deliberate, using clip-path transitions for dramatic, sweeping reveals of imagery. Fade effects range from 0.4 to 1.5 seconds, creating a smooth, unhurried pace that mirrors the physical experience of moving through a well-designed space.

- **Durations:** micro 400ms · small 600ms · medium 1000ms
- **Easing:** `cubic-bezier(0.76, 0, 0.24, 1)`
- **Patterns:**
  - Clip-path transitions are heavily utilized for dramatic, cinematic reveal effects on imagery.
  - Fade-in and fade-out patterns with durations ranging from 0.4s to 1.5s for smooth page transitions.

- **Hover:** Opacity and background color changes with a smooth 0.4s ease-out transition.
- **Click:** Immediate cursor pointer response with delayed transform transitions.
- **Transition:** Complex transitions including delayed opacity and smooth cubic-bezier clip-paths for section reveals.
- **Keyboard:** Standard tab-focusable elements with clear visual focus states.

## 8. Voice & Don'ts

The editorial voice is sophisticated, confident, and tranquil, favoring minimalist headline structures and understated calls to action. The system deliberately avoids bright saturated accents, decorative serifs, and dense cluttered grids.

- **Tone:** Sophisticated, confident, and tranquil.
- **Headline style:** Minimalist, often utilizing large numerical displays (timestamps) instead of traditional text headers.
- **CTA style:** Understated pill-shaped buttons with uppercase tracking.
- **Avoid:** Don't use bright, saturated colors or jarring gradients. / Don't rely on heavy drop shadows or complex drop-shadow borders. / Don't use cluttered grids with multiple small elements; prioritize large photographic areas. / Don't use decorative or heavily stylized serif fonts. / Don't use dense, small text; maintain generous whitespace between all elements. / Don't use rounded rectangles with small corner radii; stick to strict pills or sharp corners.

### Don'ts
- ❌ 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.

They don't use bright colors, drop shadows, or cluttered layouts—every choice serves the singular goal of calm sophistication.

## System Prompt (paste into AI tool)

```
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.
```