Grand Paysage

Overview

Grand Paysage is a transformative land-art and ecological design system for a large-scale environmental art project at Mont-Orford in Quebec. The brand embodies 'Ecological Minimalism'—a design philosophy that prioritizes clarity, natural materials, and environmental consciousness through restrained color palettes and purposeful typography. The UI communicates stewardship, cultural immersion, and scientific precision, inviting visitors to contemplate the intersection of art, nature, and biodiversity. The visual language evokes the mountain landscape itself: earthy tones (#278674 teal, #e7744b coral, #d3c7b3 sand) anchor the interface, while clean typography and generous whitespace create a meditative, contemplative experience.

The brand voice is poetic yet grounded, educational without being didactic. Tone: reverent, precise, inviting. Vocabulary emphasizes ecological terms ('biodiversity,' 'indigenous plants,' 'land art,' 'immersive installations') alongside artistic language ('sculpture,' 'visual experience,' 'contemplation'). The brand never feels corporate or distant; instead, it speaks as a cultural steward and environmental advocate. Example sentence in brand voice: 'Depuis 2017, nous transformons les cicatrices du paysage en refuges vivants pour la biodiversité.'

Colors

The color system is rooted in the natural palette of Mont-Orford and Quebec's ecological landscape. Primary (#278674, a sophisticated teal-green) represents the forest canopy and living ecosystem—it appears on interactive elements, key CTAs, and focus states to signal environmental action and engagement. Secondary (#e7744b, a warm coral-orange) provides energetic contrast and draws attention to calls-to-action, event highlights, and accent moments; it evokes the autumn foliage and sunset light on the mountain. Tertiary (#d1aed1, a soft mauve) is reserved for supporting UI elements, badges, and secondary information layers, adding visual depth without competing for attention.

The surface stack uses warm, off-white tones (#f5f7fa as the primary surface, #ebe3d4 for dimmed states, #d3c7b3 fo

Typography

The type system balances monumental display typography with warm, readable body text to communicate both artistic vision and educational content. Display and headline levels use Bebas Neue, a geometric sans-serif with generous letter-spacing (0.28em for display, 0.25em for headline-lg), creating a bold, architectural presence that echoes the scale of the mountain landscape and the ambition of the land-art project. Playfair Display serves title-lg contexts, introducing serif elegance for section headers and feature callouts. Body copy uses Heebo, a humanist sans-serif at 18px (body-lg) and 16px (body-md) with 28px and 24px line-heights respectively, ensuring comfortable reading of long-form ecological and cultural narratives. Label and small-text elements maintain Heebo at 14px and 12px wit

Layout

The layout system uses a 12-column grid with a max-width of 1280px, creating a flexible, responsive canvas that adapts from mobile (single column, 16px gutter) to desktop (full 12-column grid, 24px gutter). The design philosophy prioritizes generous whitespace and breathing room—sections are separated by lg spacing (40px) on mobile, xl spacing (64px) on tablet and desktop, allowing the eye to rest and the content to feel unhurried. The hero section spans full-width with 112px vertical padding (7rem), establishing a contemplative entry point. Container padding uses the gutter token (24px) consistently, creating a predictable rhythm. The grid accommodates asymmetric layouts (e.g., 5-column content + 7-column image) to reflect the dynamic composition of the mountain and art installations. Mar

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast, reflecting the soft, diffused light of a mountain landscape. Level 1 (Base): the surface (#f5f7fa) provides the foundation with no shadow. Level 2 (Standard Cards): cards use box-shadow: 0 4px 12px rgba(30, 30, 30, 0.08) with a 1px border at rgba(211, 199, 179, 0.5), creating a gentle lift and definition. Level 3 (Elevated/Modals): featured cards and overlays use box-shadow: 0 20px 40px rgba(39, 134, 116, 0.12)—note the teal-tinted shadow that reinforces the primary color and creates visual cohesion. Glass ove

Shapes

The shape philosophy is 'Organic Geometry'—rounded corners are used strategically to soften the interface while maintaining architectural clarity. Buttons and primary interactive elements use rounded-lg (1rem / 16px), a moderate radius that feels approachable without being overly playful. Cards and containers use rounded-xl (1.5rem / 24px), creating a softer, more inviting frame for content. Input fields and smaller UI components use rounded-DEFAULT (0.5rem / 8px) or rounded-md (0.75rem / 12px), maintaining visual hierarchy while keeping the interface cohesive. Badges and pills use rounded-ful

Components

Action Elements Buttons are the primary interaction mechanism and must feel inviting and purposeful. The button-primary uses {colors.primary} (#278674) background with white text, rounded-lg (16px), and 12px 24px padding, creating a 48px tall target that meets accessibility standards. On hover, the background darkens to #1e5047 with a 200ms transition, signaling interactivity without jarring the user. The button-secondary uses a transparent background with a 2px {colors.primary} border, allowing for secondary actions (e.g., 'Learn More', 'Explore') that feel less urgent. Both buttons use {typography.label-md} (14px, 600 weight, 0.01em letter-spacing) for crisp, readable labels.

Containers & Surfaces Cards form the backbone of content organization. The card component uses rgba(245,

Do's and Don'ts

**Do**

• Do use {colors.primary} (#278674) sparingly on CTAs and interactive states to maintain focus and guide user attention toward ecological action.
• Do apply generous whitespace (lg and xl spacing tokens) between sections to create a contemplative, unhurried reading experience that honors the mountain landscape.
• Do pair Bebas Neue headlines with Heebo body text to balance monumental artistic vision with warm, accessible storytelling.
• Do use the teal-tinted shadow (rgba(39, 134, 116, 0.12)) on elevated elements to reinforce the primary color and create visual cohesion across the interface.
• Do maintain rounded corners (rounded-lg minimum) on all interactive elements to communicate warmth and approachability aligned with the ecological brand voice.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background; instead, use {colors.on-surface} (#1e1e1e) and {colors.surface} (#f5f7fa) to maintain the warm, natural aesthetic.
• Don't apply harsh shadows or high-contrast borders; the design system prioritizes soft, diffused depth that reflects the mountain's natural light.
• Don't mix typefaces beyond the defined system (Bebas Neue, Playfair Display, Heebo); introducing additional fonts dilutes the brand's architectural clarity.
• Don't use {colors.secondary} (#e7744b) as a background for large content areas; reserve it for accent moments, badges, and CTAs to prevent visual fatigue.
• Don't reduce border-radius below rounded-DEFAULT (8px) on any interactive element; sharp corners conflict with the organic, human-centered brand philosophy.