Sobha Privy Collection

Overview

Sobha Privy Collection embodies Architectural Minimalism—a design philosophy that celebrates restraint, precision, and the eloquence of negative space. The brand serves ultra-high-net-worth individuals seeking Dubai's rarest luxury properties, and the UI evokes a sense of curated exclusivity through a monochromatic palette (near-black #1a1919 and white #ffffff) punctuated by refined grays (#717170, #afafaf). The aesthetic is deliberately austere: no gradients, no decorative flourishes, only the essential geometry of luxury real estate. The interface feels like a private gallery—quiet, confident, and unapologetically selective.

The brand voice is precise, understated, and never breathless. Vocabulary favors architectural terms ("collection," "curated," "address," "residence") over marketing hyperbole. Tone is conversational yet formal, as if speaking to a peer who already understands the value proposition. Example sentence: "The Privy Collection comprises handpicked residences at Dubai's most iconic addresses, each selected for its architectural significance and investment potential."

Colors

The color system operates on a principle of hierarchical restraint. Primary (#1a1919, a sophisticated near-black) anchors all interactive elements—buttons, links, and focus states—and serves as the dominant text color on light backgrounds. It is never used as a background fill; instead, it commands attention through contrast and precision. Secondary (#717170, a warm mid-gray) provides visual relief and is used for supporting text, disabled states, and secondary UI elements. Tertiary (#666666, a slightly cooler gray) is reserved for tertiary actions and subtle dividers. The surface stack is anchored by white (#ffffff) for primary content areas, with surface-container-low (#f5f5f5) and surface-container (#eeeeee) used for layered card backgrounds and grouped content. Surface-container-high (

Typography

The type system employs two distinct families to create a visual hierarchy rooted in luxury publishing. TT Ramillas (fontWeight: 300, light weight) is reserved for display and headline scales—its elegant, high-contrast letterforms communicate editorial sophistication and are used exclusively at sizes 32px and above. TT Commons Pro (fontWeight: 500–600, medium to semi-bold) serves all body and label text, providing legibility and a contemporary counterpoint to the classical headlines. The pairing creates a "editorial-meets-contemporary" aesthetic: Ramillas evokes the refined typography of high-end property brochures, while Commons Pro grounds the interface in functional clarity. Letter-spacing is calibrated per scale: headlines use 0.02em to enhance their elegance, while labels use 0.08em (

Layout

The layout employs a 12-column fluid grid with a maximum container width of 1280px, ensuring the design scales gracefully from mobile to desktop. Page rhythm is governed by a semantic spacing scale: {spacing.lg} (40px) separates major sections, {spacing.md} (24px) groups related content, and {spacing.sm} (12px) provides micro-spacing within components. The design favors generous white space—sections are never cramped, and card padding is consistently {spacing.md} (24px) to create breathing room around content. The gutter between columns is {spacing.gutter} (24px), maintaining visual cohesion across breakpoints. Container max-width is set to 1280px to prevent content from stretching excessively on ultra-wide displays, preserving the sense of curated intimacy. Margins and padding are always

Elevation & Depth

Depth in this system is achieved through subtle shadow and border treatments rather than dramatic layering. The elevation scale consists of three levels: Level 1 (Base) uses no shadow, relying on a 1px solid border at rgba(26, 25, 25, 0.1) to define edges. Level 2 (Standard Card) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) paired with a 1px border, creating a soft lift from the background. Level 3 (Elevated/Modal) uses box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) with the same border treatment, reserved for modals, dropdowns, and primary focus states. All shadows use a 0px x-offset and y-o

Shapes

The shape philosophy is termed "Architectural Precision"—a commitment to minimal, functional border-radius values that echo the clean lines of contemporary luxury architecture. Buttons and inputs use {rounded.DEFAULT} (4px), a subtle radius that softens hard edges without introducing visual softness. Cards and larger containers use {rounded.DEFAULT} (4px) or {rounded.md} (6px) depending on context, maintaining consistency with the button language. Dropdowns and floating panels use {rounded.DEFAULT} (4px) to align with the overall system. Badges and pill-shaped elements use {rounded.full} (9999

Components

Action Elements Buttons are the primary interaction mechanism and must always carry a 1px solid border to reinforce their clickability. The button-primary component uses backgroundColor: {colors.primary} (#1a1919) with textColor: {colors.on-primary} (#ffffff), padding: 12px 24px, and height: 44px. On hover, the background shifts to {colors.primary-container} (#3c3c3b) with a smooth 400ms transition (cubic-bezier(0.7, 0, 0.3, 1)). The button-secondary variant uses a transparent background with a 1px border at {colors.outline} (#3c3c3b) and textColor: {colors.primary}; on hover, it gains a background of {colors.surface-container-high} (#e9ecef). Button-ghost removes the border entirely, relying on text color and a subtle hover background (rgba(26, 25, 25, 0.04)) for affordance. All butto