ROA

Overview

ROA is a premium European hiking footwear brand that embodies Architectural Minimalism—a design philosophy that prioritizes precision, material honesty, and functional elegance over ornament. The visual identity evokes the stark beauty of Alpine landscapes: clean geometric forms, a restrained earthy palette (warm browns, blacks, and off-whites), and typography that feels both contemporary and timeless. The brand personality is understated, knowledgeable, and unapologetically technical. Every design decision serves a purpose; nothing is decorative. Voice: precise, calm, grounded in expertise. Example: 'The Vibram XS Trek sole grips wet stone at 45-degree angles—tested on the Matterhorn.'

Colors

The ROA color system centers on a sophisticated neutral foundation with strategic accent deployment. Primary (#ff0000) is reserved exclusively for critical CTAs and error states—a bold, uncompromising red that demands attention without apology. The secondary palette consists of warm earth tones: secondary (#4d413b) serves as the primary button and interactive baseline, while tertiary (#b0a59f) provides a softer, more approachable accent for hover states and secondary UI. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (surface-container-highest #d2cfc4, surface-container #eee9e7, surface-container-low #efefef) to create subtle depth without visual noise. Form borders use outline-variant (#d1cfcb) at 1px, creating a whisper-thin separation between i

Typography

ROA's type system pairs Riccione-Xlight (a refined, geometric display face) with ROA-Regular (a clean, legible workhorse) to create visual hierarchy through weight and scale rather than stylistic variation. Display and headline-lg use Riccione-Xlight at 56px and 44px respectively, with tight line-height (1.125 unitless) and negative letter-spacing (-0.02em to -0.01em) to create architectural tension and visual impact. Body copy and labels use ROA-Regular at 13–16px with 1.4em line-height for comfortable reading. All interactive labels (buttons, badges) use label-sm at 11px, 700 weight, with 0.08em letter-spacing to create visual distinction and emphasis. When displaying product prices or technical specs over busy product imagery, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) to ensure le

Layout

ROA uses a 12-column fluid grid with a max-width of 1220px, centered on desktop and edge-to-edge on mobile (with 20px gutter). The spacing scale is semantic: lg (40px) separates major sections (hero to product details), md (24px) divides subsections (product specs from reviews), and sm (12px) provides breathing room within component groups. Main content padding is 150px on desktop (--main-padding) and 130px on mobile (--main-padding-mobile), creating generous white space around product imagery. Product cards use 10px padding (--product-padding) to maintain compact density while preserving visual separation. The container max-width of 1220px ensures product images remain at optimal viewing size (typically 600–800px) without excessive scaling. Negative space is treated as a design material:

Elevation & Depth

ROA eschews dramatic shadows in favor of a flat, print-like aesthetic with minimal depth cues. Elevation is conveyed through subtle color shifts and precise 1px borders rather than shadow blur. Level 1 (Base): white background (#ffffff) with no shadow. Level 2 (Cards & Containers): 1px solid border at outline-variant (#d1cfcb), background surface-container (#eee9e7), box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) on hover only. Level 3 (Modals & Overlays): same border treatment, background surface-container-highest (#d2cfc4), box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12). The shadow is always soft and

Shapes

ROA employs Soft-Technical geometry: corners are subtly rounded to soften the industrial aesthetic without sacrificing precision. Buttons use border-radius: 9999px (full pill shape) for primary CTAs, creating a distinctive, approachable silhouette that contrasts with the angular product photography. Secondary buttons and form inputs use 4–5px radius, maintaining a technical feel while remaining friendly. Cards and containers use 3px radius, the smallest increment, reinforcing the architectural grid. This graduated radius scale (3px → 5px → 8px → full) creates visual rhythm and guides the eye t

Components

Action Elements Buttons are the primary interface for user intent. Primary buttons (button-primary) use background #ff0000, text white, padding 8px 32px, height 36px, border-radius 9999px, and label-sm typography (11px, 700 weight, 0.08em letter-spacing). On hover (button-primary-hover), background shifts to #cc0000 with a 200ms ease transition—no shadow, no scale change, just color. Secondary buttons (button-secondary) use background #eee9e7, text #b0a59f, padding 0px 60px, height 48px, border-radius 5px, and body-lg typography (16px, 400 weight). On hover, background becomes #e6e6e6 and text shifts to #000000. All button transitions use 200ms ease timing to feel responsive without appearing rushed.

Containers & Surfaces Cards (card) have background #ffffff, 1px border at #d1cfcb

Do's and Don'ts

**Do**

• Do use primary red (#ff0000) exclusively for CTAs, error states, and critical interactive elements—never as a background or decorative accent.
• Do maintain 1px solid borders at #d1cfcb for all card and container edges; this creates visual structure without visual weight.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active); this creates perceived responsiveness without feeling rushed.
• Do use Riccione-Xlight for display and headline typography; its geometric precision reinforces the architectural brand identity.
• Do preserve generous white space (lg spacing: 40px) between major sections; emptiness is a design material, not a failure.
• Do use full-radius (9999px) exclusively for primary buttons; this distinctive shape becomes a brand signature.

**Don't**

• Don't use drop shadows deeper than 24px blur or darker than rgba(0, 0, 0, 0.15); ROA's aesthetic is flat and print-like, not dimensional.
• Don't apply rounded corners larger than 10px to cards or containers; this softens the architectural precision that defines the brand.
• Don't use secondary (#4d413b) as a background color; it's reserved for buttons and interactive elements. Use surface colors (#ffffff, #efefef, #eee9e7) for backgrounds.
• Don't mix typefaces; Riccione-Xlight and ROA-Regular are the only approved fonts. Never substitute with system fonts or generic sans-serifs.
• Don't add decorative elements (icons, gradients, patterns) to the interface; every visual element must serve a functional purpose.
• Don't use color to convey information alone; always pair color with text labels or icons for accessibility and clarity.