Linngren Immobilien

Overview

Linngren Immobilien embodies 'Architectural Minimalism with Warmth'—a design philosophy that strips away visual noise to reveal the essential beauty of premium real estate. The brand serves high-net-worth individuals and institutional clients seeking luxury properties in Leipzig and surrounding regions. The aesthetic is deliberately restrained: a deep, sophisticated dark canvas (rgb(41, 54, 59)) anchors the interface, while a signature crimson accent (rgb(181, 23, 74)) punctuates key interactions—contact forms, property calls-to-action, and investment opportunities. This contrast evokes confidence, exclusivity, and the precision required in high-value transactions. The emotional response is one of quiet authority: users feel they are engaging with a curated, professional service, not a mass-market platform.

The brand voice is refined yet approachable, speaking in the language of architectural merit and market insight. Vocabulary patterns emphasize 'ästhetische' (aesthetic), 'exklusiv' (exclusive), 'hochwertig' (premium), and 'Wertermittlung' (valuation)—terms that position the agency as both artistic custodian and fiduciary expert. The tone avoids hyperbole; instead, it delivers precise, actionable information. Example sentence in brand voice: 'Diese Immobilie vereint zeitlose Architektur mit modernem Komfort—eine seltene Kombination im Leipziger Markt.' (This property unites timeless architecture with modern comfort—a rare combination in the Leipzig market.)

Colors

The color system is built on a 'Dark Luxury' foundation, where the primary surface (rgb(41, 54, 59)) provides a gallery-like backdrop that allows property imagery and key information to command attention. The surface stack progresses from near-black (surface-container-lowest: rgb(15, 23, 24)) through mid-tones (surface-container: rgb(41, 54, 59)) to lighter containers (surface-container-highest: rgb(63, 81, 84)), enabling subtle depth without sacrificing legibility. On-surface text is pure white (rgb(255, 255, 255)) for maximum contrast; on-surface-variant (rgb(197, 204, 207)) is reserved for secondary information and disabled states.

Primary (rgb(181, 23, 74), #b51749) is the brand's signature accent—deployed exclusively on high-priority CTAs ('Kontakt aufnehmen', property inquiry button

Typography

The type system centers on Outfit, a geometric sans-serif that balances technical precision with human warmth—essential for a brand that bridges architectural expertise and client empathy. Display (60px, weight 700, line-height 68px, letter-spacing -0.04em) anchors hero sections and major announcements; headline-lg (40px, weight 600) frames section introductions; headline-md (28px, weight 600) organizes content hierarchies. Body-lg (18px, weight 400, line-height 28px) is the primary reading size for property descriptions and long-form content, while body-md (16px, weight 400) handles UI labels and secondary text. Label-md (14px, weight 600, letter-spacing 0.02em) is applied to buttons and form labels; label-sm (12px, weight 500) to badges and metadata. All type is rendered with a subtle te

Layout

The layout operates on a 12-column grid with a fixed max-width of 1280px, centered on viewport. The spacing scale uses an 8px base unit: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero/footer zones. Gutter width is consistently 24px, ensuring breathing room around content blocks. The design favors asymmetric layouts—hero sections often span 7–8 columns with property imagery, while sidebar CTAs occupy 4–5 columns. White-space is treated as a design element, not a void; generous margins (40px–64px) between sections create a gallery-like rhythm that reflects the premium positioning. Container padding is 24px on desktop, reducing to 16px on tablet and 12px on mobile, maintainin

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the 'floating card' aesthetic in favor of subtle layering. Level 1 (Base): the surface (rgb(41, 54, 59)) with no shadow, establishing the canvas. Level 2 (Standard Cards & Inputs): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background without visual drama. Level 3 (Modals & Elevated Containers): box-shadow 0 1px 20px -2px rgba(0, 0, 0, 1), a deeper shadow that signals modal prominence and focus. Hover states on interactive elements (buttons, list items) transition to Level 2 shadows over 200ms,

Shapes

The shape philosophy is 'Architectural Precision with Approachability.' Buttons and primary CTAs use rounded.lg (1rem / 16px), a gentle curve that softens the geometric Outfit typeface while remaining professional. Cards and containers default to rounded.md (0.75rem / 12px), a subtle radius that avoids the 'pill' effect while maintaining visual warmth. Input fields and form elements use rounded.DEFAULT (0.5rem / 8px), a tighter radius that signals functional, utilitarian purpose. Badges and micro-components use rounded.full (9999px) for a fully rounded appearance, creating visual distinction f

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (background rgb(181, 23, 74), text white, padding 12px 16px, height 48px, border-radius 1rem) is reserved for high-priority CTAs: 'Kontakt aufnehmen', property inquiry, and investment requests. On hover, the background shifts to primary-container (rgb(214, 61, 107)) with a 200ms cubic-bezier transition (0.4, 0, 0.2, 1), providing smooth visual feedback. Button-secondary uses a transparent background with a 1px border in primary color, allowing secondary actions ('Mehr über uns erfahren') to coexist without visual competition. Button-ghost (transparent background, on-surface text) is used for tertiary actions and navigation links; on hover, it gains a surface-container-high background (rgb(52, 70, 74)) over 15

Do's and Don'ts

**Do**

• Do use primary (rgb(181, 23, 74)) exclusively on high-stakes CTAs and focus states—never on decorative elements or secondary information.
• Do maintain the dark surface (rgb(41, 54, 59)) as the dominant background; light surfaces should be reserved for modals and elevated containers to preserve the premium aesthetic.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) for consistent, professional feedback.
• Do use Outfit at weights 400–600 for body and UI; reserve weight 700 for display-only contexts to avoid visual heaviness.
• Do respect the 24px gutter and 40px section spacing to maintain the gallery-like rhythm and prevent content from feeling cramped.

**Don't**

• Don't use secondary (rgb(255, 105, 0)) or tertiary (rgb(88, 151, 251)) as primary CTAs—these are supporting accents only and dilute the brand's signature crimson authority.
• Don't apply shadows with blur > 8px or spread > 0px; the system uses sharp, architectural shadows (0 3px 8px, 0 1px 20px -2px) to maintain precision.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the systematic harmony.
• Don't render text smaller than 12px (label-sm) or larger than 60px (display) without design review; the type scale is calibrated for legibility and hierarchy.
• Don't mix Outfit with system fonts or serif typefaces; the entire system depends on Outfit's geometric consistency to communicate professionalism.