MODUS Projects

Overview

MODUS Projects is a Dutch real estate finishing specialist serving large-scale residential and commercial developments. The brand embodies 'Architectural Clarity'—a design philosophy that marries precision engineering with warm, human-centered craftsmanship. The visual identity conveys luxury without ostentation: a refined warm orange accent (#ffa574) punctuates a sophisticated palette of deep charcoal (#0e0a0a), warm grays (#3b3940, #848c8f), and clean whites, evoking both the materiality of construction and the serenity of finished spaces. The interface feels authoritative yet approachable, reflecting the brand's promise of 'one point of contact, clear agreements.'

The brand voice is direct, professional, and solution-oriented. Vocabulary emphasizes clarity ('heldere afspraken'), specialization ('onderscheidende afbouw'), and reliability ('betrouwbare uitvoering'). Tone avoids hyperbole; instead, it speaks in concrete terms about materials, timelines, and outcomes. Example: 'Luxe kwaliteit zonder meerprijs—grip in elke fase van het project' (Luxury quality without premium pricing—control at every project phase).

Colors

The color system is anchored in architectural materiality. Primary (#ffa574) is a warm, earthy orange derived from natural building materials—terracotta, warm brick, sunset light on facades—and serves as the sole accent for CTAs, interactive states, and brand emphasis. It appears sparingly but decisively: on the 'Bespreek jouw project' button, hover states, and active navigation links. On-primary is set to deep charcoal (#0e0a0a) for maximum contrast and legibility over the warm orange.

The surface stack uses a cool-neutral palette: surface (#ffffff) for primary backgrounds, surface-container (#e9ecef) for secondary cards and panels, and surface-container-highest (#cccccc) for tertiary layers. This creates visual hierarchy through subtle lightness shifts rather than dramatic contrast. On-

Typography

The type system pairs a serif display family (Jubilee Silver, Georgia fallback) with a clean sans-serif body font (Telegraf, Arial fallback), creating visual tension that signals both heritage and modernity. Display (115px, 400 weight, -0.02em tracking) is reserved for hero headlines and major section breaks; it commands attention without aggression. Headline-lg (56px) and headline-md (40px) use the same serif family at lighter weights, maintaining elegance across heading hierarchy. Body-lg (18px) and body-md (16px) in Telegraf provide readable, neutral content; label-md (14px, 600 weight, 0.01em tracking) is used for buttons, form labels, and UI microcopy to ensure crisp legibility at small sizes. All serif headings use -0.015em to -0.02em negative tracking to tighten letterforms; sans-se

Layout

The layout follows a 12-column grid with a max-width of 1280px, maintaining a fluid 24px gutter on desktop and adapting to 16px on tablet and 12px on mobile. The hero section spans full-width with a photographic background (apartment complex at golden hour), overlaid with a semi-transparent dark scrim (rgba(0, 0, 0, 0.3)) to ensure text legibility. Section separation uses lg spacing (40px) for major breaks and md spacing (24px) for subsections. Cards and content blocks use md padding (24px) internally; list items use sm padding (12px) for compact density. The navigation bar is fixed at the top with 48px vertical padding, containing left-aligned links ('Over ons', 'Projecten'), a centered logo, and a right-aligned primary CTA button. White-space is generous but purposeful: the brand avoids

Elevation & Depth

Depth is conveyed through a three-tier shadow system that mimics real-world light and material hierarchy. Level 1 (Base/Surface): no shadow; flat white or light gray backgrounds. Level 2 (Standard Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on all default cards, input fields, and dropdown panels. This subtle shadow lifts elements 4–8px off the page. Level 3 (Elevated/Modals): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used on hover states of cards, modal overlays, and floating action elements. The shadow spread increases from 8px to 24px, signaling greater separation. Transitions

Shapes

The shape philosophy is 'Refined Minimalism'—sharp enough to feel contemporary and precise, yet softened just enough to feel approachable. Buttons use border-radius: 4px (0.25rem), a subtle rounding that suggests precision tooling without appearing playful. Cards and containers use 12px (0.75rem) for a slightly warmer feel, balancing the geometric precision of the UI. Input fields use 4px to align with buttons and maintain visual consistency. The logo and badge elements use border-radius: 50% (full) for circular emphasis. This graduated rounding scale—4px for buttons, 12px for cards, 50% for b

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (button-primary) uses background: #ffa574, color: #0e0a0a, padding: 12px 24px, height: 48px, border-radius: 4px, and typography label-md (14px, 600 weight). On hover, the background shifts to #ff8c4d (darker orange) with a 200ms transition. On active/pressed, it darkens further to #ff7a35. The secondary button (button-secondary) uses a transparent background with a 1px border in outline-variant (#c8c8c8), same padding and height, and on-surface text color. On hover, the background fills with surface-container-high (#dbe2e5) to signal interactivity. Both buttons maintain 48px height for touch-friendly targeting.

Containers & Surfaces Cards (card component) use background: surface-container-lowest (#fa

Do's and Don'ts

**Do**

• Do use the warm orange (#ffa574) exclusively for primary CTAs, active states, and brand emphasis—never dilute it with secondary uses.
• Do maintain 48px minimum height for all interactive elements (buttons, inputs, list items) to ensure touch accessibility and visual comfort.
• Do apply the serif typeface (Jubilee Silver) only to headlines and display text; never use it for body copy or UI labels.
• Do use the three-tier shadow system consistently: no shadow for base surfaces, 0 3px 8px for cards, 0 8px 24px for elevated elements.
• Do pair the warm orange accent with deep charcoal (#0e0a0a) for maximum contrast and legibility on all interactive elements.

**Don't**

• Don't use the primary orange (#ffa574) for backgrounds, disabled states, or secondary UI—reserve it for interactive affordances only.
• Don't mix serif and sans-serif fonts within a single line of text or heading; maintain clear separation by hierarchy level.
• Don't apply border-radius greater than 12px on cards or containers; the brand aesthetic requires architectural precision, not organic softness.
• Don't use color alone to convey state changes; always pair color shifts with shadow or opacity changes for accessibility and clarity.
• Don't apply text-shadow or blur effects to body text; reserve these techniques for small labels over photographic backgrounds only.