Groen Services Maastricht

Overview

Groen Services Maastricht embodies a design philosophy rooted in 'Organic Minimalism'—a movement that marries the precision of architectural restraint with the warmth of natural materials and living systems. The brand serves Dutch homeowners and businesses seeking professional garden design, landscaping, and maintenance in the Maastricht region. The visual identity evokes quiet confidence and environmental stewardship: a sophisticated dark-green hero image with delicate fern fronds, paired with refined sans-serif typography and restrained earth tones, creates an atmosphere of expertise grounded in nature. The UI communicates that gardening is both an art and a science, deserving of thoughtful, measured design.

The brand voice is conversational yet authoritative, speaking in Dutch with a tone that is helpful, never condescending. Sentences are direct and action-oriented: 'Bij GROEN helpen we u graag uw droomtuin te verwezenlijken' (At GROEN, we're happy to help you realize your dream garden). The vocabulary emphasizes craftsmanship ('vakkundig', 'zorgvuldig'), sustainability ('duurzaam', 'milieuvriendelijk'), and partnership ('samen', 'advies'). Example sentence in brand voice: 'Omdat al die keuzes van invloed zijn op het ontwerp, neemt GROEN deze met u door.'

Colors

The color palette reflects the brand's dual nature: grounded in earth and foliage, yet refined and professional. Primary (#7c8d7c) is a muted sage green—neither vibrant nor dull—used for interactive elements, navigation accents, and the decorative line above the hero headline. This green appears at 100% opacity on white backgrounds and transitions smoothly to its container variant (#a5b0a5) on hover, maintaining visual continuity across 0.3s ease transitions. Secondary (#c58d43) is a warm terracotta-bronze, reserved for accent highlights and supporting visual interest; it appears sparingly to avoid competing with the primary green. The surface stack is deliberately minimal: white (#ffffff) as the primary surface, with subtle grays (#e9ecef, #d0d0d0, #c0c0c0) for container depth. Text color

Typography

The type system pairs two distinct families to create hierarchy and personality. Baronneue (a custom serif-influenced display font) is used exclusively for headings (h1–h4) at weights of 400, with generous letter-spacing of 0.10em to 0.15em, creating an elegant, spacious rhythm that evokes print design and craftsmanship. Lato (Google Fonts, weight 300) serves body copy and interface labels, with a lighter weight (300) and consistent letter-spacing of 0.1em to 0.12em, lending an airy, modern feel. Display text (h1) is set at 42px with 68px line-height and 0.15em letter-spacing, commanding attention without aggression. Body text (body-md) is 16px with 24px line-height and 0.1em letter-spacing, optimized for justified paragraphs at 1.1em font-size with 1.7em margin-bottom. Labels and buttons

Layout

The page employs a fluid, full-width layout with a 1200px container max-width for content sections, creating breathing room on desktop while adapting gracefully to mobile. The grid is 12-column, though most sections use 50/50 splits (b50 class) for image-text pairings or full-width blocks. Vertical spacing follows a semantic rhythm: hero section is 800px tall (min-height: 40em), section padding is 6em top and bottom (paddingy class), and horizontal padding for article content is 6em left and right (paddingx class). The spacing scale uses 8px as the base unit, with lg (40px) for section separation and md (24px) for component internal padding. The hero uses absolute positioning with transform: translateY(-50%) translateX(-50%) to center the title and CTA vertically, creating a focal point. P

Elevation & Depth

Depth is conveyed through subtle shadow and layering rather than dramatic z-index stacking. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (standard cards, dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests proximity without harshness. Level 3 (elevated modals, hover states) uses box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), a larger spread and blur radius that conveys significant lift. The dropdown panel (.bb-custom-select-panel) explicitly uses 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at #d0d0d

Shapes

The design philosophy embraces 'Architectural Softness'—sharp, clean lines tempered with minimal rounding. Buttons and input fields use border-radius: 0.5rem (8px), a subtle curve that feels contemporary without sacrificing legibility. Dropdown panels use 4px border-radius, maintaining crispness for utilitarian elements. Cards and elevated surfaces use 0.75rem (12px) for a slightly more pronounced softness. The hero section and full-width blocks use border-radius: 0px, honoring the architectural grid. The only fully rounded element is the badge component (border-radius: 9999px), which signals

Components

Action Elements Buttons are the primary interaction mechanism and use Baronneue font at 14px, lowercase, with 0.12em letter-spacing. Primary buttons (.btngreen) have background-color: #7c8d7c, color: #262626, padding: 0 2em, line-height: 2em (48px total height), and border-radius: 0.5rem. On hover, the background transitions to #a5b0a5 (primary-container) over 0.3s ease. Secondary buttons (.btnwhite) invert this: white background with 1px solid #7c8d7c border, black text. Light-green buttons (.btnlightgreen) use #a5b0a5 background. All buttons are text-transform: lowercase and cursor: pointer. The contact button in the top-right uses position: absolute; right: 0; margin-top: 5em; font-size: 0.8em, creating a persistent, non-intrusive CTA.

Containers & Surfaces Cards (.card) use ba