Saudi Properties Portal (REGA)

Overview

Saudi Properties Portal is the official gateway for non-Saudi nationals and foreign investors seeking to acquire real estate in the Kingdom of Saudi Arabia. The platform embodies a "Civic Clarity" aesthetic—a design philosophy that combines governmental authority with accessible transparency, using clean geometry, institutional green accents (#1b8354), and a light, spacious canvas to convey trustworthiness and procedural simplicity. The interface prioritizes information hierarchy and eligibility verification, transforming complex regulatory pathways into intuitive digital experiences. The emotional response is one of confidence: users encounter a system that feels official yet approachable, rigorous yet navigable.

The brand voice is formal yet conversational, precise yet human. Vocabulary emphasizes procedural clarity ("eligibility engine," "geographic zones," "seamless journey") without bureaucratic jargon. Tone is patient and reassuring, acknowledging that foreign property acquisition involves multiple stakeholders and regulatory layers. Example sentence in brand voice: "Verify your eligibility in seconds, then explore investment opportunities across approved zones in Riyadh, Jeddah, and the Eastern Province."

Colors

The color system centers on institutional trust and regulatory clarity. Primary (#1b8354) is a deep, confident green derived from the Saudi national identity, used exclusively for call-to-action buttons, active states, and key interactive elements—it signals authority and forward motion. Secondary (#0079c1) is a professional blue reserved for informational elements, links, and secondary actions, providing visual contrast without competing for attention. Tertiary (#323232) is a near-black used for body text and structural elements, ensuring legibility at 16px body-md weight over the white surface (#ffffff). The surface stack progresses from bright white (#ffffff) through subtle grays (#f3f4f6, #e5e7eb, #d2d6db) to support layering without introducing visual noise. On-surface text (#161616)

Typography

The type system uses Avenir Next across all scales, a humanist sans-serif that conveys both professionalism and approachability—critical for a government portal serving international audiences. Display (56px, 700 weight, -0.02em letter-spacing) anchors hero sections and major page titles, commanding attention without aggression. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content zones and section breaks, with tighter line-heights (48px, 36px respectively) to maintain visual density. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) form the reading layer, with 1.5x line-height ratio ensuring comfortable scanning at typical viewing distances. Label-md (14px, 600 weight, 20px line-height) and label-sm (12px, 500 wei

Layout

The layout uses a 12-column fluid grid with a maximum container width of 1400px, allowing responsive scaling from mobile (single column) through tablet (6 columns) to desktop (12 columns). Gutter spacing is consistently 24px (md spacing token), creating rhythm without excessive whitespace. Section separation uses lg spacing (40px) vertically, establishing clear visual breaks between content zones (hero, eligibility engine, geographic zones, opportunities, footer). The design favors generous whitespace—surface-container-low (#f3f3f3) backgrounds are used sparingly to avoid visual fatigue, with most content sitting on pure white (#ffffff) to maintain clarity. Cards and containers use md padding (24px) internally, with sm padding (12px) for nested elements. The container-max-width of 1400px e

Elevation & Depth

Depth is conveyed through subtle shadow layering and strategic use of borders, avoiding the flat aesthetic while maintaining the institutional clarity of the design. Level 1 (Base Surface) uses no shadow—the white background (#ffffff) is the foundation. Level 2 (Standard Cards) applies elevation.md (0 3px 8px rgba(0, 0, 0, 0.15)) with a 1px solid border at #d2d6db, creating a gentle lift that distinguishes cards from the background without visual drama. Level 3 (Elevated/Modals) applies elevation.lg (0 0.5rem 1rem rgba(0, 0, 0, 0.15)), a more pronounced shadow used for modals, dropdowns, and h

Shapes

The shape philosophy is "Institutional Precision"—rounded corners are minimal and purposeful, reflecting the formal nature of real estate transactions and regulatory compliance. Buttons use sm radius (2px) for a sharp, official appearance that contrasts with consumer-facing apps; this micro-radius signals seriousness and legal weight. Cards and containers use md radius (8px), a subtle rounding that softens the institutional edge without introducing playfulness. Input fields and form elements use DEFAULT radius (4px), splitting the difference to maintain visual consistency across the interface.

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses primary green (#1b8354) with white text, 12px horizontal padding, 44px height, and sm radius (2px). On hover, the background shifts to #157a47 (a 15% darkening) with a 200ms transition, providing immediate feedback without color shock. Button-primary-active (pressed state) darkens further to #0d4a2f for tactile confirmation. Button-secondary uses a transparent background with a 1px primary-colored border, allowing secondary actions to coexist without visual hierarchy conflict. On hover, button-secondary gains a surface-container-lowest background (#f3f4f6) to indicate interactivity. All buttons use label-md typography (14px, 600 weight) for consistent labeling.

Containers & Surfaces Cards are the prim

Do's and Don'ts

**Do**

• Do use primary green (#1b8354) exclusively for primary CTAs and active states—it carries the weight of official authority and should never be diluted across secondary UI.
• Do maintain 24px gutter spacing (md token) consistently across all grid layouts to create predictable rhythm and reduce cognitive load for international users.
• Do apply elevation.md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and containers to establish clear visual hierarchy without introducing visual noise.
• Do use Avenir Next at 16px body-md weight with 24px line-height for all body text to ensure legibility for non-native English readers and accessibility compliance.
• Do provide 200ms ease-in-out transitions on all interactive hover states (buttons, cards, inputs) to signal interactivity without jarring visual shifts.

**Don't**

• Don't use secondary blue (#0079c1) or tertiary gray (#323232) as primary action colors—they lack the institutional weight of the primary green and will confuse users about interaction priority.
• Don't apply rounded corners larger than md radius (8px) to cards or containers; full rounding (9999px) is reserved for badges and pills to maintain visual distinction.
• Don't exceed elevation.lg shadow (0 0.5rem 1rem rgba(0, 0, 0, 0.15)) on any component except modals and top-level overlays—deeper shadows introduce visual clutter in a portal context.
• Don't use color alone to convey state changes (e.g., error, success, warning); always pair color with icons, text labels, or borders to ensure accessibility for colorblind users.
• Don't reduce padding below sm (12px) on interactive elements or below md (24px) on card containers—the portal serves international users with varying motor control and touch device sizes.