Switch between the rendered Visual preview and the Raw DESIGN.md.
The Immobiliare.it design system embodies clean, professional Italian real estate marketplace aesthetics with a modern, minimal approach. The visual language prioritizes clarity and trust through generous whitespace, a refined color palette anchored in deep blue and warm accents, and a restrained typographic hierarchy. The system conveys accessibility, professionalism, and reliability—essential qualities for a platform facilitating high-value property transactions. The atmosphere is contemporary yet timeless, avoiding visual clutter while maintaining visual interest through subtle color relationships and purposeful use of negative space.
Key Characteristics
#0051BA): Main brand color for primary CTAs, headings, and key interactive elements#003A7A): Hover and active states for primary blue elements#DC2626): Error states, critical warnings, and negative actions#10B981): Confirmation messages, successful transactions, positive status#F59E0B): Cautionary alerts and informational warnings#0051BA): Underlined text links, hover states#003A7A): Active link state#000000): Primary text, headings, high-contrast elements#1F2937): Secondary text, supporting content#6B7280): Tertiary text, disabled states, hints#D1D5DB): Borders, subtle dividers#F9FAFB): Subtle backgrounds, alternate surfaces#FFFFFF): Primary background, card surfaces#E5E7EB): Default borders, subtle dividing lines#9CA3AF): Focused input borders, elevated dividers#F3F4F6): Secondary backgrounds, disabled states#FEE2E2): Error notification backgrounds#D1FAE5): Success notification backgrounds#FEF3C7): Warning notification backgrounds#DBEAFE): Information notification backgrounds#00000008): Minimal elevation, 8% black opacity#0000001A): Card elevation, 26% black opacity#0000003D): Modal/overlay elevation, 60% black opacity| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display Large | Primary | 48px | 700 | 1.2 | -0.5px | Page headlines, hero titles |
| Display Medium | Primary | 36px | 700 | 1.25 | -0.25px | Section titles, major headings |
| Heading 1 | Primary | 32px | 700 | 1.3 | 0px | Primary section headings |
| Heading 2 | Primary | 28px | 600 | 1.35 | 0px | Secondary section headings |
| Heading 3 | Primary | 24px | 600 | 1.4 | 0px | Tertiary headings, card titles |
| Heading 4 | Primary | 20px | 600 | 1.45 | 0px | Subheadings, list headers |
| Body Large | Primary | 18px | 400 | 1.6 | 0.25px | Lead paragraphs, intro text |
| Body Regular | Primary | 16px | 400 | 1.6 | 0.25px | Standard body copy, descriptions |
| Body Small | Primary | 14px | 400 | 1.5 | 0.25px | Secondary body copy, helper text |
| Label Medium | Primary | 14px | 500 | 1.4 | 0.25px | Form labels, tags |
| Button | Primary | 16px | 600 | 1.5 | 0.25px | All button text |
| Link | Primary | 16px | 400 | 1.6 | 0.25px | Hyperlinks, default link state |
| Caption | Primary | 12px | 400 | 1.4 | 0.25px | Fine print, metadata, timestamps |
| Code Inline | Monospace | 14px | 400 | 1.5 | 0px | Inline code snippets, IDs |
| Code Block | Monospace | 13px | 400 | 1.6 | 0px | Code blocks, multi-line technical text |
#000000 or #1F2937 ensures WCAG AAA contrast ratios.#0051BA#FFFFFF12px 24px16px6006px0px 1px 2px #0000001A#003A7A0px 2px 4px #0000003D#002851#D1D5DB#9CA3AFbackground-color 200ms ease, box-shadow 200ms ease#F3F4F6#00000012px 24px16px6006px1px solid #D1D5DB#E5E7EB#9CA3AF#D1D5DB#F9FAFB#9CA3AFbackground-color 150ms ease, border-color 150ms ease#0051BA12px 24px16px6006px1px solid #0051BA#DBEAFE#003A7A#BFDBFE#9CA3AF#D1D5DBbackground-color 150ms ease, border-color 150ms ease#FFFFFF1px solid #E5E7EB8px24px0px 1px 3px #0000001A0px 4px 8px #0000001Abox-shadow 200ms ease#FFFFFF12px32px0px 4px 12px #0000001A0px 8px 24px #0000003D#F9FAFB1px solid #E5E7EB6px16px 20px#FFFFFF1px solid #D1D5DB6px12px 16px16px#000000#9CA3AFborder-color 150ms ease, box-shadow 150ms ease2px solid #0051BA0px 0px 0px 3px #DBEAFE11px 15px (adjusted for border width)2px solid #DC2626#FEF2F20px 0px 0px 3px #FEE2E2#F3F4F6#D1D5DB#9CA3AF14px500#0000008px20px20px2px solid #D1D5DB4px#FFFFFF#0051BA#0051BA#FFFFFF20px20px2px solid #D1D5DB50%#FFFFFF#0051BA#0051BA8px#FFFFFF1px solid #E5E7EB16px 24px0px 1px 2px #0000001A16px400#1F29378px 16px2px solid transparentcolor 200ms ease, border-color 200ms ease#0051BA#0051BA#0051BA2px solid #0051BA60014px#6B7280/ with margin 0px 8px#000000500#F3F4F6#1F29376px 12px12px50016px1px solid #D1D5DB#DBEAFE#003A7A1px solid #93C5FD#D1FAE5#065F461px solid #6EE7B7#FEE2E2#7F1D1D1px solid #FECACA16px 20px6px4px solid12px#DBEAFE#0051BA#003A7A#0051BA#D1FAE5#10B981#065F46#10B981#FEF3C7#F59E0B#78350F#F59E0B#FEE2E2#DC2626#7F1D1D#DC26264px4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 56px, 64px4px – 8px: Micro spacing (inline gaps, icon spacing)12px – 16px: Component padding, tight grouping20px – 24px: Standard section spacing, comfortable breathing room32px – 40px: Major section separations48px – 64px: Page-level vertical rhythm, hero sections1280px24px (desktop), 16px (tablet), 12px (mobile)Generous whitespace creates visual hierarchy and reduces cognitive overload. Spacing follows a rhythm: containers are separated by multiples of 24px, internal component padding uses 16px–24px, and micro-interactions use 4px–8px. Negative space is treated as an active design element, never squeezed. This approach supports both desktop scanning and mobile readability.
0px (only for input focus rings or design system edge cases)4px (tightly constrained elements like badges, small buttons)6px (buttons, inputs, small cards, alerts)8px (standard cards, dropdown menus)12px (elevated cards, modal dialogs, hero containers)24px (badge pills, full-width rounded buttons, avatar containers)50% (circles: avatars, radio buttons, circular icons)| Level | Treatment | Use |
|---|---|---|
| Flat (0) | No shadow, 1px border #E5E7EB | Inputs, flat buttons, dividers, minimal interactive elements |
| Raised (1) | 0px 1px 2px rgba(0, 0, 0, 0.1) | Default cards, standard UI surfaces, subtle lift |
| Elevated (2) | 0px 4px 8px rgba(0, 0, 0, 0.1) | Hovered cards, dropdowns, sticky headers |
| Floating (3) | 0px 8px 16px rgba(0, 0, 0, 0.15) | Modals, popovers, floating action buttons |
| Modal (4) | 0px 16px 32px rgba(0, 0, 0, 0.2) | Full-screen modals, stacked dialogs |
Shadow Philosophy: The design system uses a subtle, consistent shadow palette derived from a single light source above. Shadows increase in blur and spread as elevation increases, creating clear visual hierarchy without excessive darkness. Shadows use opacity-based black (rgba(0, 0, 0, X)) rather than fixed grays, ensuring adaptability across backgrounds. Interactive elements (buttons, links) receive shadow on hover to signal affordance, but active states minimize shadow to imply press/engagement.
#DC2626 for errors, #10B981 for success, #F59E0B for warnings to provide intuitive meaning.#0051BA) exclusively for primary CTAs and high-priority actions to create clear visual hierarchy.8px, buttons use 6px, pills use 24px—stick to the scale.rgba(0, 0, 0, 0.4) minimum).| Breakpoint Name | Width | Key Changes |
|---|---|---|
| Mobile Small | 320px | Single column, 12px gutter, 16px padding on sections |
| Mobile Regular | 375px | Optimized for common phone sizes, touch targets 48px minimum |
| Mobile Large | 480px | Two-column layouts permitted, 16px gutter |
| Tablet | 768px | 8-column grid effective, 24px gutter, sidebar navigation collapses to drawer |
| Desktop | 1024px | Full 12-column grid, horizontal navigation restored |
| Desktop Large | 1280px | Max content width enforced, full spacing scale active |
| Wide | 1536px | Increased container margins to prevent edge-clipping |
48px (buttons, form controls, interactive list items)48px (icon buttons, checkboxes, radio buttons)8px (prevents accidental adjacent taps)24px effective height.12px.18px instead of 24px for section gaps); horizontal padding reduced to 16px.#0051BA), hover #003A7A#FFFFFF); secondary surfaces #F9FAFB#000000)#000000); secondary #1F2937#6B7280)#D1D5DB)#DC2626), background #FEE2E2#10B981), background #D1FAE5#F59E0B), background #FEF3C7#0051BA), hover #003A7A, underline always presentColor always communicates meaning: Never use color decoratively; every hue serves semantic purpose (primary action, error, success, warning, or neutral hierarchy).
Typography scale is 4px-based intervals: 12px, 14px, 16px, 18px, 20px, 24px, 28px, 32px, 36px, 48px. Font weight carries hierarchy: 400 (body), 500 (labels), 600 (subheadings), 700 (headings).
Spacing adheres to 4px multiples: 4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64px. Never introduce arbitrary spacing; always round to scale.
Border radius follows component class: Sharp 0px, inputs/buttons 6px, cards 8px, elevated containers 12px, pills 24px, circles 50%.
Shadows indicate elevation, not decoration: Use only the defined 4-level shadow system; increase blur and spread proportionally with elevation; avoid pure black shadows—use opacity-based black.
Focus states are non-negotiable: Every interactive element must have a visible focus ring (e.g., 0px 0px 0px 3px rgba(219, 234, 254, 1) for blue elements).
Contrast ratios must meet WCAG AA minimum (4.5:1 for normal text, 3:1 for large text). Test all text-on-color combinations.
Touch targets on mobile must be ≥48px in both dimensions. Never compress interactive elements below this threshold, even for secondary actions.
Primary Blue (#0051BA) is reserved for primary CTAs only. All secondary actions use the gray button variant; accent colors (red, green, amber) are semantic, never decorative.
Responsive collapse hierarchy: Mobile-first design; add layout complexity as viewport expands. Modals full-screen on mobile, centered on desktop. Navigation hamburger below 1024px, horizontal above.