Abitibi-Témiscamingue Tourism

Overview

Abitibi-Témiscamingue is a bold, nature-centric tourism brand for Quebec's raw wilderness region. The design system embraces **Authentic Outdoor Modernism**—a movement that combines rugged, unpolished natural imagery with clean, confident typography and a signature vibrant orange accent (rgb(255, 72, 0)). The UI evokes a sense of discovery and adventure without pretense: the brand speaks to travelers seeking genuine wilderness experiences, not curated Instagram moments. The emotional response is one of liberation and clarity—the interface gets out of the way so the landscape can speak.

Voice and personality: direct, conversational, and unapologetically Québécois. The brand uses colloquial French phrasing ("Pas pour tout le monde pis c'est ben correct" — "Not for everyone and that's perfectly fine") to signal authenticity and inclusivity. Vocabulary leans into tangible, sensory language: "brute nature," "lacs," "grands espaces," "décrocher" (to unplug). The tone is warm but never saccharine—it's the voice of a friend inviting you on a real adventure, not a marketing pitch. Example sentence in brand voice: "Demain, tu peux être sur un lac tranquille avec rien que le bruit des vagues et des oiseaux."

Colors

The color palette is anchored by a vibrant, energetic primary orange (rgb(255, 72, 0) / #ff4800) used exclusively for CTAs, hero text overlays, and interactive focus states. This orange is the brand's signature accent—it commands attention against the natural greens and earth tones of landscape photography without feeling artificial. Secondary blue (rgb(13, 110, 253) / #0d6efd) provides a cool counterpoint for informational elements and secondary navigation. Tertiary green (rgb(123, 220, 181) / #7bdcb5) echoes the region's boreal forest and is reserved for success states and nature-related tags.

The surface stack is deliberately light and airy: the base surface is a warm off-white (rgb(245, 245, 239) / #f5f5ef) that mimics natural paper and stone, never pure white. Container surfaces rang

Typography

The type system uses Switzer as the single typeface family across all scales, creating a cohesive, modern aesthetic that feels both approachable and authoritative. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major page titles, commanding attention with its size and negative letter-spacing that tightens the letterforms. Headline-lg (48px, 600 weight) is used for section headers and prominent callouts. Headline-md (32px, 600 weight) breaks up content into digestible chunks. Body-lg (20px, 500 weight) is the primary reading size for descriptive copy and maintains excellent legibility at this scale. Body-md (16px, 400 weight) is used for secondary descriptions and metadata. Label-md (15px, 500 weight) is applied to button text and form labels, with 0.0

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The spacing scale is semantic and hierarchical: unit (8px) is the base increment, with sm (12px) used for tight component spacing, md (24px) for standard section gutters, lg (40px) for major section separation, and xl (64px) for full-page rhythm breaks. The gutter width is consistently 24px, creating a balanced margin around all content. White space is generous—sections are separated by lg (40px) spacing to prevent visual fatigue and allow the eye to rest on the landscape photography that dominates the page. Cards and content blocks use md (24px) internal padding, with sm (12px) spacing between nested elements. The container max-w

Elevation & Depth

Depth is achieved through subtle, naturalistic shadows that mimic soft outdoor lighting rather than harsh digital drop-shadows. The elevation system uses three levels: sm (0 2px 3px rgba(0, 0, 0, 0.1)) for small interactive elements like buttons and badges, creating a gentle lift; md (0 3px 8px rgba(0, 0, 0, 0.15)) for cards and containers, suggesting a moderate floating effect; and lg (0 5px 16px rgba(0, 0, 0, 0.1)) for modals and overlays, creating clear visual separation from the background. Shadows are warm-tinted (using black with 10–15% opacity rather than pure black) to harmonize with t

Shapes

The shape philosophy is **Soft-Technical Pragmatism**: rounded corners are used strategically to soften the interface without sacrificing clarity or modernity. Buttons and form inputs use a small, consistent radius (6px / {rounded.DEFAULT}) that feels friendly and approachable while remaining professional. Cards and containers use a slightly larger radius (10px / {rounded.lg}) to create visual distinction from interactive elements. Badges and pills use full border-radius (9999px / {rounded.full}) to signal compact, self-contained information. Modals and overlays use 16px ({rounded.xl}) for a s

Components

**Action Elements.** Buttons are the primary interactive component and use the signature orange primary color (rgb(255, 72, 0)) with white text (rgb(255, 255, 255)). Primary buttons have 44px height, 10px vertical padding, 24px horizontal padding, 6px border-radius, and label-md typography (15px, 500 weight). On hover, the background darkens to #e63d00 over a 0.2s ease transition, providing clear feedback. Secondary buttons use a transparent background with a 2px orange border and orange text, maintaining visual hierarchy while offering an alternative action. Ghost buttons (used in overlays or on dark backgrounds) use rgba(255, 255, 255, 0.1) background with white text and 40px height, transitioning to rgba(255, 255, 255, 0.2) on hover. All buttons use cursor: pointer and include a 0.2s tr

Do's and Don'ts

**Do**

• Do use the primary orange (rgb(255, 72, 0)) exclusively for CTAs, hero text overlays, and focus states—it is the brand's signature and must remain distinctive.
• Do maintain generous white space (lg spacing, 40px) between major sections to let the landscape photography breathe and prevent visual fatigue.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels over busy backgrounds to ensure legibility without compromising the natural aesthetic.
• Do use Switzer at all scales and weights (400, 500, 600, 700) to maintain typographic cohesion and avoid mixing typefaces.
• Do transition all interactive states (hover, focus, active) over 0.2–0.3s ease to provide smooth, tactile feedback without jarring movement.

**Don't**

• Don't use pure white (#ffffff) as the primary surface—always use the warm off-white (#f5f5ef) to maintain the natural, earthy aesthetic.
• Don't apply harsh, high-contrast shadows (e.g., 0 10px 40px rgba(0, 0, 0, 0.3))—use soft, warm-tinted shadows (10–15% black opacity) to suggest depth gently.
• Don't mix typefaces or use system fonts—Switzer is the single typeface family across all scales and must be loaded via @font-face or Google Fonts.
• Don't use sharp corners (0px border-radius) on interactive or container elements—minimum radius is 4px (sm) for inputs and 6px (DEFAULT) for buttons.
• Don't dilute the primary orange with transparency on CTAs—use 100% opacity (rgb(255, 72, 0)) to maintain maximum clarity and brand distinctiveness.