ALTIVARO Treks

Overview

ALTIVARO Treks is a Himalayan adventure travel brand that transforms expedition planning into an inspiring, trustworthy experience. The design system employs a "Warm Minimalism" aesthetic—combining earthy, approachable typography (Roboto for body, Almarai for buttons) with a bold, energetic accent color (#f97316 orange) that signals adventure and calls users to action. The brand serves outdoor enthusiasts and trekkers seeking authentic, guided experiences in the Himalayas, evoking a sense of discovery, safety, and community. The UI prioritizes clarity and accessibility, using generous whitespace (24px gutters, 40px section spacing) and a restrained color palette (navy secondary #0b1f3a, warm tertiary #dd890b) to build confidence in complex booking flows.

The brand voice is conversational yet authoritative: warm, encouraging, and grounded in real mountain expertise. Vocabulary favors action verbs ("Explore," "Discover," "Connect") and sensory language ("Himalayan peaks," "alpine trails") without hyperbole. Example sentence in brand voice: "Trek through rhododendron forests at dawn, guided by locals who know every ridge."

Colors

The color system balances a clean, light foundation with strategic accent warmth. Primary (#f97316) is the signature orange used exclusively on call-to-action buttons, hover states, and key interactive elements—it commands attention without overwhelming the interface. Secondary (#0b1f3a) is a deep navy that anchors the brand identity in the header, footer, and secondary buttons, conveying stability and trust. Tertiary (#dd890b) is a muted golden-brown reserved for highlights, badges, and tertiary CTAs, adding warmth without competing with primary. The surface stack uses near-white (#ffffff, #fafafa, #f5f5f5) for cards and containers, with carefully graded grays (#eeeeee, #dddddd, #cccccc) for borders and dividers. On-surface text is dark charcoal (#111111) for body copy and #333333 for sec

Typography

The type system uses Roboto as the primary typeface for headlines and body text, paired with Almarai (a geometric sans-serif) for button labels to create visual distinction in call-to-action zones. Display (56px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence; headline-lg (48px, 600 weight) breaks major content zones; headline-md (40px, 600 weight) introduces subsections. Body text sits at 16px (400 weight, 24px line-height, 0.01em tracking) for optimal readability on light backgrounds, with 18px body-lg used in feature callouts. Button labels use Almarai at 16px (400 weight, 22px line-height) to signal interactive affordance. Label-sm (12px, 500 weight, 0.05em tracking) is applied to badges and metadata. All headlines use -0.015em to -0.02em negative letter-s

Layout

The layout follows a 12-column fluid grid with a 1140px max-width container, ensuring content remains readable on desktop while scaling gracefully to mobile. Page rhythm is established through consistent 40px (lg spacing) section separators, with 24px (md spacing) used for component internal padding and 12px (sm spacing) for tight groupings. The gutter width is 24px, creating breathing room between grid columns. Hero sections occupy full viewport height with 80px bottom spacing before the next content block, establishing a clear visual hierarchy. Card-based layouts use 24px padding internally with 12px gaps between cards in grid arrangements. Whitespace is treated as a design element—never less than 12px between interactive elements, never more than 80px between major sections. Container m

Elevation & Depth

Depth is conveyed through subtle shadow layering and strategic use of borders rather than heavy drop shadows. Level 1 (Base/Surface): no shadow, 1px solid border at #cccccc (outline-variant) for card edges. Level 2 (Standard Card/Hover): box-shadow 0 2px 6px rgba(0, 0, 0, 0.12), 1px solid border at #dddddd. Level 3 (Elevated/Modal): box-shadow 0 8px 24px rgba(0, 0, 0, 0.18), 1px solid border at #999999. Interactive elements (buttons, inputs) use no shadow in default state; on hover, they transition to Level 2 shadow in 200ms. The shadow palette is intentionally restrained—no blur radius exceed

Shapes

The shape philosophy is "Approachable Geometry"—using rounded corners to soften the interface and signal friendliness, while maintaining enough angularity to feel contemporary and trustworthy. Buttons use 1.5rem (24px) border-radius (rounded.xl) to create pill-shaped affordances that feel inviting and clickable. Cards use 1rem (16px) border-radius (rounded.lg) for a balanced, modern appearance that's neither too sharp nor too soft. Input fields use 0.5rem (8px) border-radius (rounded.DEFAULT) for subtle rounding that doesn't distract from content. Small UI elements (badges, tags) use 9999px (r

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use #f97316 background with white text, Almarai 16px 400 weight, 11px vertical / 24px horizontal padding, 24px border-radius, and a 1px solid border matching the background. On hover (button-primary-hover), the background shifts to #fd4621 (inverse-primary) in a 200ms ease transition, maintaining the border. Secondary buttons (button-secondary) invert the scheme: white background, #111111 text, 1px solid #111111 border. On hover (button-secondary-hover), they adopt the secondary color (#0b1f3a) with white text and matching border. Border-line buttons (button-border-line) use transparent background with #111111 text and border; on hover, they fill with #0b1f3a. All buttons use cursor: pointer a

Do's and Don'ts

**Do**

• Do use #f97316 (primary) exclusively on primary CTAs and hover states—never on backgrounds or secondary UI elements.
• Do maintain 24px minimum padding inside cards and 40px between major content sections to preserve the airy, trustworthy aesthetic.
• Do apply Almarai font-family to all button labels to create visual distinction from body text and signal interactivity.
• Do use 1px solid borders on all cards and inputs at #cccccc or darker to provide subtle visual separation without heavy shadows.
• Do transition all interactive color and shadow changes in 200ms ease to provide smooth, perceptible feedback.
• Do keep line-height at 1.25–1.5 for body text (24px at 16px font) to ensure readability on light backgrounds.

**Don't**

• Don't use primary color (#f97316) on more than 15% of the interface—it loses impact and creates visual chaos.
• Don't apply box-shadow blur radius greater than 24px; keep shadows subtle and restrained to maintain the minimal aesthetic.
• Don't mix Roboto and Almarai in the same text block; use Roboto for body/headlines and Almarai only for button labels.
• Don't reduce padding below 12px on interactive elements; cramped spacing reduces click accuracy and feels claustrophobic.
• Don't use secondary color (#0b1f3a) as a background for body text—it creates insufficient contrast; reserve it for headers and secondary buttons.
• Don't apply border-radius greater than 24px on buttons; it dilutes the modern, trustworthy aesthetic and can feel childish.