Network Gayrimenkul

Overview

Network Gayrimenkul is Turkey's institutional real estate authority, serving professional brokers, investors, and homebuyers through a data-rich, trust-first digital platform. The brand embodies 'Professional Clarity'—a design aesthetic that prioritizes legibility, institutional credibility, and efficient information hierarchy over decorative flourish. The UI conveys competence through structured layouts, decisive color choices (a signature cobalt blue accent against neutral grays), and typography that balances warmth (Poppins for headlines) with precision (Roboto for body text). Users should feel confident that Network Gayrimenkul understands their property needs and will deliver results without unnecessary complexity.

The brand voice is authoritative yet approachable: direct, data-informed, and respectful of the user's time. Sentences are active and outcome-focused (e.g., 'Biz ne istediğinizi iyi biliyoruz' — 'We understand what you need'). Network avoids jargon-heavy legalese while maintaining professional gravitas. The tone acknowledges that real estate is a significant decision and treats every inquiry with seriousness. Personality emerges through confident CTAs, clear section labeling, and a visual system that feels organized rather than sterile.

Colors

The color system is rooted in institutional trust and professional clarity. Primary (#274cbf) is a medium cobalt blue—the signature accent used exclusively on call-to-action buttons ('ARA', offer buttons), active navigation states, and focus indicators. This blue appears frequently enough to anchor the brand identity but sparingly enough to maintain visual hierarchy; it is never used as a background or text color on neutral surfaces. Secondary (#868e96) is a warm gray that serves as the default text color and secondary UI element (disabled states, helper text, secondary labels). The surface stack uses a light gray background (#ededed) for the page body, transitioning through white (#ffffff) for cards and containers, with subtle container variants (#f8f9fa, #e9ecef, #dee2e6) for depth witho

Typography

The type system pairs Poppins (headlines, labels, CTAs) with Roboto (body, form fields, secondary text) to create a hierarchy that feels both modern and trustworthy. Poppins's geometric, slightly rounded letterforms convey approachability and clarity; Roboto's neutral, highly legible design ensures form fields and body copy remain scannable at small sizes. Display text (60px, 700 weight, -0.04em tracking) is used sparingly for hero headlines like 'Biz ne istediğinizi iyi biliyoruz' and creates immediate visual impact. Headline-lg (40px, 600 weight) anchors section titles; headline-md (28px, 600 weight) breaks up content blocks. Body-md (16px, 400 weight, 24px line-height) is the default for paragraphs and list content, with 0.01em letter-spacing to prevent cramping in Turkish's longer word

Layout

The layout follows a 12-column Bootstrap grid with a max-width of 1199px and 15px gutters on each side (30px total gutter width), creating a responsive, predictable container. The page rhythm uses lg spacing (40px) to separate major sections (hero, featured properties, testimonials, footer), md spacing (24px) for subsection breaks, and sm spacing (12px) for internal card padding. The hero banner spans full-width with a semi-transparent overlay (rgba(47, 55, 69, 0.18)) to ensure text legibility over background imagery. The search form sits below the hero at full-width, using a white background with md padding and lg shadow to 'float' above the page. Property cards are arranged in a responsive grid (4 columns on desktop, 2 on tablet, 1 on mobile) with md spacing between items. Form fields wi

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than color darkening. The base elevation (Level 1) is the page background (#ededed), which provides a neutral canvas. Level 2 (Standard Cards) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, 3px vertical offset that suggests the card is slightly raised. Level 3 (Modals, Search Form, Dropdowns) uses box-shadow: 0 1px 35px rgba(0, 0, 0, 0.07), a larger spread shadow that conveys greater separation from the base. On hover, property cards transition to box-shadow: 0px 0px 10px 0.1px #0b35ae, a diffuse blue glow that rein

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are present but restrained, reflecting the brand's balance between approachability and institutional precision. Buttons use border-radius: 2px (sm / 0.25rem), a barely-perceptible curve that suggests refinement without softness. Form inputs and dropdowns use 3px (md / 0.75rem), slightly more generous to signal interactivity and reduce visual harshness. Cards and containers use 4px (md / 0.75rem) to 12px (lg / 1rem), with larger radius on property cards (lg) to encourage exploration. The search form uses md (4px) for internal inputs and l

Components

Action Elements Buttons are the primary interactive element and use the primary blue (#274cbf) background with white text (Poppins 13px 500 weight, 13px 20px padding, 2px border-radius). The button-primary-hover state darkens to #1e3a8a and adds a diffuse blue glow (box-shadow: 0px 0px 10px 0.1px #0b35ae) to reinforce interactivity. Offer buttons (.giveOffer) follow the same pattern but with 15px font-size and 7px top margin, creating visual distinction for secondary CTAs. Secondary buttons use transparent backgrounds with a 1px outline in #495057, allowing them to sit alongside primary buttons without competing. All buttons use a 0.3s ease-in-out transition on background-color and box-shadow to provide smooth feedback.

Containers & Surfaces Cards (.property-box, .card) use white

Do's and Don'ts

**Do**

• Do use primary blue (#274cbf) exclusively on CTAs, focus states, and active navigation—never as a background wash or body text color.
• Do maintain md (24px) padding inside cards and containers to ensure content breathes and remains scannable.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to any small text overlaid on photography or dark backgrounds to guarantee legibility.
• Do use Poppins for all headlines, labels, and buttons; reserve Roboto for body copy and form fields to maintain clear visual hierarchy.
• Do transition button and input states over 0.3s ease-in-out to provide smooth, professional feedback without jarring snaps.
• Do keep border-radius values consistent within a component type (all buttons 2px, all cards 4px–12px) to reinforce the soft-technical aesthetic.

**Don't**

• Don't use primary blue as a background color or for body text—it is reserved for interactive elements and focus states only.
• Don't exceed 35px blur radius on shadows; keep the elevation system lightweight and modern.
• Don't mix Poppins and Roboto weights arbitrarily; use Poppins 600+ for emphasis, Roboto 400 for neutral body text.
• Don't apply rounded corners larger than lg (12px) to buttons or form inputs; maintain the soft-technical restraint.
• Don't use color alone to convey state changes; pair color shifts with shadow, border, or cursor changes for accessibility.
• Don't place text directly on photography without a semi-transparent overlay or text-shadow; ensure WCAG AA contrast ratios (4.5:1 minimum) at all times.