CURATED · OPEN · FREE

Albacondos

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

01

Identity DNA

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

02

Color

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

03

Typography

geometric-sans · humanist-sans

• display95px · 500
• headline40px · 300
• body16px · 300

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

04

Spacing

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

05

Surfaces

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

06

Layout

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

07

Motion & Interaction

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.

Opacity and background color changes with a smooth 0.4s ease-out transition. · Immediate cursor pointer response with delayed transform transitions.

08

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.

09

Voice & Don'ts

• Tone Sophisticated, confident, and tranquil.
• Headlines Minimalist, often utilizing large numerical displays (timestamps) instead of traditional text headers.
• CTAs Understated pill-shaped buttons with uppercase tracking.

• 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.
• Avoid: Don't use bright, saturated colors or jarring gradients.
• Avoid: Don't rely on heavy drop shadows or complex drop-shadow borders.
• Avoid: Don't use cluttered grids with multiple small elements; prioritize large photographic areas.
• Avoid: Don't use decorative or heavily stylized serif fonts.
• Avoid: Don't use dense, small text; maintain generous whitespace between all elements.
• Avoid: Don't use rounded rectangles with small corner radii; stick to strict pills or sharp corners.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko