Pairi Daiza

Overview

Pairi Daiza is a premium European zoo and wildlife sanctuary that positions itself as an 'Enchanted Kingdom of Animals'—a destination where natural wonder meets sophisticated hospitality. The design system embodies 'Luxe Naturalism': a refined, heritage-driven aesthetic that celebrates the beauty of wildlife and botanical environments through warm, earthy tones (primary #bc994e, secondary #ba8e0b, accent #dc9d23) layered over clean, minimalist surfaces. The brand evokes a sense of discovery, wonder, and timeless elegance—evoking the feeling of stepping into a carefully curated sanctuary where every detail has been thoughtfully preserved.

The voice is warm, inviting, and authoritative without being condescending. Pairi Daiza speaks in the language of experience: 'Discover the wonders of five continents,' 'Welcome to the Enchanted Kingdom,' 'Starting at 122 euro.' The tone balances educational precision (animal facts, opening hours, ticket pricing) with emotional resonance (family moments, natural beauty, adventure). Typography choices—Marcellus for headlines (serif, heritage-forward) and Lato for body text (clean, accessible)—reinforce this duality. Example sentence in brand voice: 'Explore 800 species across five continents, open 365 days a year—your gateway to wonder awaits.'

Colors

The color system is rooted in natural earth tones and refined luxury. Primary (#bc994e) is a warm, sophisticated bronze-gold used for CTAs, interactive elements, and brand accents—it appears on the 'I CONSENT' button, ticket booking links, and key navigation items. This color signals trust and premium positioning. Secondary (#ba8e0b) is a deeper, more saturated gold deployed for hover states, badges, and supporting UI elements. The accent color (#dc9d23) is a brighter, more energetic gold reserved for primary CTAs and elevated states—it commands attention without overwhelming. Surface colors follow a light, airy palette: pure white (#ffffff) for primary surfaces, soft grays (#f8f8f8, #f2f2f2) for container backgrounds, and neutral borders (#d9d9d9, #c1c1c1) for subtle definition. Text hier

Typography

The type system combines serif heritage (Marcellus) with modern accessibility (Lato, Oxygen). Marcellus, a serif font, is reserved for display and headline levels (66px, 40px, 28px) where its elegant, timeless character reinforces brand prestige and heritage. Lato, a humanist sans-serif, handles body copy (18px, 16px) with a light weight (300–400) to maintain airiness and readability across long-form content. Oxygen, a geometric sans-serif, powers labels and UI text (14px, 12px) at bold weights (600) for clarity and emphasis. Line heights are generous: 76px for display (1.15x), 48px for headlines (1.2x), 28px for body-lg (1.56x), creating visual breathing room. Letter-spacing is minimal on headlines (-0.02em to -0.01em) to maintain elegance, while labels receive +0.02em to +0.05em for clar

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining a fluid-to-fixed approach that adapts gracefully from mobile to desktop. The gutter is 24px, providing consistent horizontal rhythm. Vertical spacing follows a semantic scale: xs (4px) for micro-interactions, sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The container max-width of 1280px ensures content never feels stretched on ultra-wide displays. White space is generous: the hero section spans full-width with a semi-transparent overlay, while content sections use md (24px) padding on all sides with lg (40px) margins between major blocks. Cards and modals use md (24px) internal padding, creating a cons

Elevation & Depth

Elevation is achieved through a refined shadow system that mimics natural light and depth without resorting to harsh contrasts. The base level (Level 0) is the white surface (#ffffff) with no shadow. Level 1 (standard cards, input fields) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, warm shadow that suggests subtle lift. Level 2 (hovered cards, dropdowns) escalates to 0 7px 14px rgba(50, 50, 93, 0.1)—a broader, more diffuse shadow indicating greater prominence. Level 3 (modals, overlays) combines the shadow with a semi-transparent dark overlay (rgba(0, 0, 0, 0.5)) and optional backdr

Shapes

The shape philosophy is 'Refined Pragmatism'—sharp where precision matters, rounded where warmth is needed. Buttons and inputs use minimal rounding: sm (2px) for micro-interactions, DEFAULT (4px) for standard buttons and form fields, md (10px) for secondary buttons and cards. The full (50%) radius is reserved for circular badges, avatar containers, and pill-shaped search inputs (as seen in the primary input field with border-radius: 50px). This graduated approach balances modern minimalism with approachability: sharp corners on utilitarian elements (borders, dividers) convey efficiency, while

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: {colors.primary} (#bc994e), textColor: {colors.on-primary} (white), typography: {typography.label-md} (Oxygen, 14px, 600), rounded: {rounded.DEFAULT} (4px), padding: 12px 24px, and height: 48px. On hover, the background transitions to {colors.primary-fixed} (#dc9d23) over 150ms, signaling interactivity. On active/pressed, it darkens to {colors.primary-fixed-dim} (#ba8e0b). The button-secondary variant uses a transparent background with a 1px border at {colors.outline} (#d9d9d9), textColor: {colors.primary}, and rounded: {rounded.md} (10px) for a softer appearance. On hover, the background fills with {colors.surface-container-high} (#f0f9fa). Button-ghost is minimal: transpa

Do's and Don'ts

**Do**

• Do use {colors.primary} (#bc994e) exclusively for primary CTAs and brand-critical interactive elements—it's the signature accent that builds recognition.
• Do apply generous white space (md/lg spacing) around content blocks to maintain the 'enchanted sanctuary' feeling of calm discovery.
• Do use Marcellus serif for all headlines (display, headline-lg, headline-md) to reinforce heritage and premium positioning—never use sans-serif for headlines.
• Do combine soft shadows (0 3px 8px rgba(0, 0, 0, 0.15)) with 1px borders (#d9d9d9) on cards to create subtle, naturalistic elevation without harshness.
• Do transition all interactive states (hover, focus, active) over 150–200ms using cubic-bezier(0.4, 0, 0.2, 1) for smooth, refined feedback.
• Do maintain the full (50%) border-radius on search inputs and circular badges to signal approachability and discovery.

**Don't**

• Don't use {colors.primary} for body text, backgrounds, or non-interactive elements—it must remain reserved for CTAs and brand accents to preserve visual hierarchy.
• Don't apply harsh shadows (blur > 14px) or multiple layered shadows—the aesthetic is refined naturalism, not floating-UI extremes.
• Don't mix serif and sans-serif fonts within a single headline or title—use Marcellus for all display/headline levels, Lato/Oxygen for body/labels only.
• Don't use rounded corners > md (10px) on standard buttons or form fields—reserve lg (16px) and xl (24px) for modals and large containers only.
• Don't reduce padding below {spacing.sm} (12px) on interactive elements—maintain breathing room to prevent cramped, cluttered interfaces.
• Don't apply text-shadow on dark backgrounds unless the contrast ratio falls below 4.5:1—the brand prioritizes clarity and accessibility over stylistic effects.