Brigade Overland

Overview

Brigade Overland is a premium off-road and overland gear retailer that embodies **Rugged Authenticity with Refined Commerce**—a design philosophy that marries the durability and field-tested ethos of adventure equipment with the precision and clarity of modern e-commerce. The brand serves North American explorers, overlanders, and 4x4 enthusiasts who demand both performance and reliability. The visual language is grounded in a warm, earthy palette anchored by a bold rust-red primary accent (#b43c32), deep forest greens (#323c32), and sophisticated warm neutrals (#e7e6dd), creating an interface that feels both rugged and approachable. The UI evokes confidence, expertise, and a connection to the outdoors—users should feel they're shopping with seasoned adventurers, not faceless retailers.

The brand voice is direct, knowledgeable, and unpretentious. Copy avoids marketing hyperbole in favor of technical specificity and field-proven claims. Tone examples: 'Lightforce leads the way with three lighting modes in one fixture—with legendary made-in-Australia quality and unbeatable performance' (not 'experience the magic of premium lighting'). The vocabulary emphasizes durability, heritage, and practical capability. Personality traits: confident without arrogance, helpful without condescension, adventurous but grounded in reality.

Colors

The color system is built on a **warm-earth foundation** that reflects the outdoor heritage and premium positioning of the brand. Primary (#b43c32) is a rust-red accent used exclusively on call-to-action buttons, key interactive elements, and brand-critical highlights—it commands attention without aggression and pairs naturally with the earthy palette. Secondary (#323c32) is a deep forest green deployed on secondary buttons, navigation accents, and supporting UI elements; it reinforces the outdoor connection while maintaining sophistication. Tertiary (#2d4650) is a cool slate-blue reserved for status indicators, badges, and tertiary actions—it provides visual contrast and hierarchy depth.

The surface stack uses warm, light neutrals: surface (#ffffff) as the primary canvas, surface-contain

Typography

The type system uses **Geist** (a modern, geometric sans-serif) across all scales, creating visual consistency and a contemporary feel that contrasts elegantly with the earthy color palette. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements; Headline-lg (40px, 600 weight, -0.02em) structures primary page sections; Headline-md (28px, 600 weight) breaks up content zones. Body-lg (18px, 400 weight) is reserved for introductory paragraphs and feature descriptions, while Body-md (16px, 400 weight) serves as the default body copy at 24px line-height for optimal readability. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and UI microcopy; Label-sm (12px, 600 weight, 0.05em tracking) is used sparingly for secondary labe

Layout

The page layout follows a **12-column fluid grid** with a maximum container width of 1280px (1192px on some sections), ensuring content remains readable on all viewports while maintaining visual breathing room. The gutter spacing is 24px between grid columns, creating a consistent rhythm. Section separation uses lg spacing (40px) for major content breaks, md spacing (24px) for related groupings, and sm spacing (12px) for tight component clusters. The hero section spans full-width with a split layout: left side (dark forest green background with white text, 50% width) contains the headline and CTA, while the right side (50% width) features a full-bleed photographic hero image. Below the fold, content cards are arranged in a 3-column grid on desktop, collapsing to 1 column on mobile. All int

Elevation & Depth

Depth is conveyed through a **subtle shadow hierarchy** that avoids heavy drop-shadows in favor of refined, layered lighting. Level 1 (Base/Surface): no shadow; elements sit flush on the background. Level 2 (Standard Cards & Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, close shadow that lifts content 2-4px above the surface, used on cards, dropdowns, and form inputs. Level 3 (Elevated/Modals & Hover States): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)—a larger, more diffuse shadow that creates clear separation for modals, expanded cards, and hover-state elevations. All shadows us

Shapes

The shape philosophy is **Soft-Technical Minimalism**—rounded corners are used strategically to soften the interface without sacrificing clarity or modern precision. Buttons and primary CTAs use full radius (9999px) to create a friendly, approachable pill shape that invites interaction; this is the most distinctive shape in the system and should never be applied to cards or containers. Input fields and form controls use DEFAULT radius (0.5rem / 8px) for a subtle, professional appearance that feels refined without being cold. Cards and content containers use DEFAULT (0.5rem) or md (0.75rem) dep

Components

**Action Elements:** Buttons are the primary interaction mechanism and must be highly visible. Primary buttons use {colors.primary} (#b43c32) background with {colors.on-primary} (white) text, Label-md typography (12px, 600 weight), full radius, and 18px vertical padding with 25px horizontal padding (total height 48px). Hover state transitions to #a03428 over 200ms. Secondary buttons mirror the primary structure but use {colors.secondary} (#323c32) background; on hover, darken to #1f2a1e. Ghost buttons have transparent background with 1px {colors.outline} border and {colors.primary} text; on hover, fill with {colors.surface-container-high}. All buttons must include a focus ring: 3px solid {colors.primary} at 50% opacity, offset 2px outside the button boundary.

**Containers & Surfaces:** Ca

Do's and Don'ts

**Do**

• Do use the primary rust-red (#b43c32) exclusively on CTAs and interactive focus states—it is the brand's signature accent and must never be diluted or overused on decorative elements.
• Do maintain the 48px minimum height on all interactive elements (buttons, inputs, selects) to ensure touch accessibility and visual prominence.
• Do apply negative letter-spacing (-0.02em to -0.04em) on all headlines to create visual weight and sophistication; body copy should use 0em tracking for neutral readability.
• Do use the full-radius pill shape (9999px) exclusively on buttons; never apply it to cards, containers, or other UI elements.
• Do animate all state transitions (hover, focus, active) over 200ms with ease-in-out timing to feel responsive and intentional.
• Do layer shadows using the three-level hierarchy: no shadow for base, 0 3px 8px rgba(0, 0, 0, 0.15) for standard elevation, and 0 16px 40px rgba(0, 0, 0, 0.12) for maximum lift.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background colors—use #1a1a1a for text and #ffffff for surfaces to maintain warmth and reduce eye strain.
• Don't apply the primary accent color (#b43c32) to non-interactive elements like badges, dividers, or decorative accents—reserve it exclusively for CTAs and focus states.
• Don't round corners on input fields beyond DEFAULT (8px) or on cards beyond md (12px)—excessive rounding reads as dated and undermines the refined aesthetic.
• Don't use system fonts or generic sans-serif fallbacks; always specify Geist as the primary typeface to maintain brand consistency and visual identity.
• Don't create buttons smaller than 48px in height or with padding less than 18px vertical / 25px horizontal—this violates accessibility standards and diminishes visual prominence.
• Don't apply shadows with pure black (rgba(0, 0, 0, X))—always use warm black at the same opacity to harmonize with the earthy color palette and maintain visual cohesion.