Berkenrhode

Overview

Berkenrhode embodies a 'Warm Naturalism' aesthetic—a design philosophy that grounds digital experiences in the tactile, earthy palette of the Dutch Veluwe landscape. The brand serves travelers seeking authentic nature-integrated accommodation, and the UI evokes a sense of peaceful discovery through warm terracottas (#b84c08), soft sage greens (#2b3e32), and cream backgrounds (#f8f3ec) that feel like stepping into a sun-dappled forest clearing. The emotional response is one of calm anticipation: the interface invites exploration without urgency, mirroring the unhurried rhythm of a countryside retreat.

The voice is warm, conversational, and locally rooted—never corporate or sterile. Berkenrhode speaks in the cadence of a knowledgeable host who knows every corner of the park and wants guests to feel at home before they arrive. Vocabulary leans into sensory language (terrace, fireplace, forest path) and practical hospitality. Example sentence in brand voice: 'Kies je verblijf tussen de bomen—je eigen stukje Veluwe wacht.'

Colors

The color system centers on a warm, earthy primary (#b84c08—a burnt sienna that appears on all CTAs, active states, and key interactive elements) paired with a sophisticated forest green tertiary (#2b3e32) that reinforces the nature connection. The secondary accent (#ba8649—a softer terracotta) provides warmth in supporting UI elements like badges and secondary buttons. The surface stack uses a cream-to-white progression (surface #f8f3ec, surface-bright #ffffff, surface-container #f3ede4) that feels natural and inviting rather than clinical. On-surface text (#2e261f, a near-black brown) maintains legibility while staying warm. Primary (#b84c08) is reserved exclusively for CTAs ('Zoek & Boek', 'Alles accepteren'), focus states, and active tabs—it is never used for body text or neutral UI. S

Typography

The type system pairs Literata (a high-contrast serif) for display and headline levels with DM Sans (a warm, humanist sans-serif) for body and UI text. This pairing communicates both sophistication and approachability: Literata's generous letterforms evoke the hand-drawn quality of local signage, while DM Sans ensures clarity in dense booking interfaces. Display (56px, 700 weight, -0.02em tracking) is reserved for hero headlines like 'Zoek & Boek' and sets an aspirational tone. Headline-lg (40px, 700 weight) anchors section titles. Body-md (16px, 400 weight, 24px line-height) is the workhorse for form labels, descriptions, and instructional text. Label-md (14px, 600 weight, 0.02em tracking) is used for button text and small UI labels to ensure they command attention without visual noise. O

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, allowing the design to breathe on desktop while remaining compact on mobile. The page rhythm is driven by lg spacing (40px) for section separation—notice the breathing room between 'Zoek & Boek' hero, the search form, and the results grid. The gutter (24px) is applied consistently to card padding and horizontal margins, creating a cohesive rhythm. The search form occupies the full container width on mobile, then constrains to 1024px on tablet to avoid overwhelming the user. White-space is generous: the cream background (#f8f3ec) is never crowded, and cards (md padding: 24px) sit comfortably within their containers. Container max-width is 1280px; sections use md (24px) padding on sides, lg (40px) between major sections. The

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the harsh drop-shadows of older booking interfaces. Level 1 (Base): the surface (#f8f3ec) with no shadow—this is the default card state. Level 2 (Standard Card): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) applied to all cards and form containers; this subtle shadow lifts elements 4–6px off the background. Level 3 (Elevated/Hover): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12) applied on card-hover and modal overlays; this creates a sense of focus and interactivity. Modals and overlays use a semi-transparent backdrop (rgba(0, 0, 0, 0.4)

Shapes

The shape philosophy is 'Soft-Technical'—rounded corners are minimal and functional, never playful or organic. Buttons and inputs use DEFAULT (0.5rem / 4px) border-radius, creating a subtle softness that feels contemporary without sacrificing clarity. Cards use DEFAULT (4px) for consistency with form elements, reinforcing a cohesive component library. Larger containers (modals, expanded sections) use lg (1rem / 16px) to signal hierarchy and breathing room. The full (9999px) radius is reserved exclusively for badges and small accent elements (e.g., the 'UITGELICHT' ribbon). This restraint refle

Components

Action Elements Buttons follow a strict hierarchy: primary buttons (#b84c08 background, white text, 44px height, 12px 24px padding, 4px radius) are used for main CTAs ('Zoek & Boek', 'Alles accepteren'). On hover, the background darkens to #a63f00 with a 200ms ease-out transition. Secondary buttons use a transparent background with a 2px primary border and primary text; on hover, they fill with primary-container (#ffdcc9) and shift text to on-primary-container (#3d1f00). Ghost buttons (transparent, outline-variant border) are used for tertiary actions like 'Weigeren' or 'Annuleren'; they transition to surface-container-high (#ede7dd) on hover. All buttons use label-md typography (14px, 600 weight, 0.02em tracking) for consistent visual weight.

Containers & Surfaces Cards are the p

Do's and Don'ts

**Do**

• Do use primary (#b84c08) exclusively for CTAs, active states, and focus indicators—never for body text or neutral backgrounds.
• Do apply md elevation (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and form containers to create visual separation from the cream surface.
• Do pair Literata headlines with DM Sans body text to balance sophistication with warmth and readability.
• Do maintain lg spacing (40px) between major sections to create breathing room and guide the eye through the booking flow.
• Do use the full tertiary green (#2b3e32) sparingly—on accent strokes, icons, or secondary badges—to reinforce the nature connection without overwhelming the warm palette.

**Don't**

• Don't use near-black or pure black for text; stick to on-surface (#2e261f, a warm brown) to maintain the earthy aesthetic.
• Don't apply shadows stronger than lg (0 8px 24px rgba(0, 0, 0, 0.12)) or use harsh drop-shadows; the design should feel grounded, not floating.
• Don't mix border-radius values within a component family—buttons, inputs, and cards should all use DEFAULT (4px) for consistency.
• Don't use the secondary accent (#ba8649) on primary CTAs; reserve it for supporting elements like secondary buttons and informational badges.
• Don't reduce spacing below md (24px) for section separation; the cream background needs room to breathe to avoid a cramped, transactional feel.