Orbea

Overview

Orbea is a premium Basque bicycle manufacturer founded in 1840, serving serious cyclists and mountain bikers worldwide. The design system embodies 'Technical Minimalism'—a philosophy that strips away ornament to reveal functional elegance. The interface prioritizes clarity and precision: deep navy primary (#172280) anchors trust and authority, while teal accents (#5eada0) and magenta highlights (#cc2e8c) inject energy into key interactions. The visual language evokes the precision of engineering drawings and the refined restraint of European industrial design. Users encounter a calm, purposeful interface that respects their expertise and time.

Orbea's voice is direct, knowledgeable, and unadorned. The brand speaks to cyclists as peers—technical without jargon, confident without arrogance. Vocabulary emphasizes performance, heritage, and craftsmanship. Example sentence in brand voice: 'Rallon E-LTD combines 27 years of mountain bike mastery with electric precision—customize every component to match your terrain.'

Colors

The color system balances technical authority with approachable warmth. Primary (#172280) is a deep navy that conveys engineering precision and brand stability; it dominates CTAs, navigation, and text hierarchy. Secondary (#5eada0), a sophisticated teal, provides a natural, earthy accent used for supporting UI elements, status indicators, and secondary actions. Tertiary (#cc2e8c), a vibrant magenta, reserves itself for highlights, badges, and moments requiring visual punctuation—sparingly applied to maintain impact.

The surface stack ranges from pure white (#ffffff) for primary content areas to carefully calibrated grays (#e8e8e8 for containers, #555859 for secondary text) that maintain legibility without harshness. Error states use a clean red (#d32f2f) with sufficient contrast (4.5:1+)

Typography

The type system pairs Trump Gothic Pro (display/headlines, weights 500–700) with Neue Haas Grotesk Text (body/labels, weights 400–500) from Adobe Typekit. Trump Gothic Pro's geometric warmth softens the technical aesthetic, while Neue Haas Grotesk's Swiss precision ensures readability at all scales. Display (60px, 700 weight, -0.04em tracking) anchors hero sections; Headline-LG (40px, 700 weight, -0.02em) titles major sections; Headline-MD (28px, 700 weight) subsections. Body-LG (18px, 400 weight, 28px line-height) and Body-MD (16px, 400 weight, 24px line-height) carry primary content with generous line-height for mountain-bike-catalog readability. Label-MD (14px, 500 weight, 0.01em tracking) and Label-SM (12px, 500 weight, 0.05em tracking) handle UI labels and badges. Apply text-shadow 0

Layout

The layout uses a 12-column grid with a 1280px max-width container, centered with equal gutters (24px on desktop, 16px on tablet, 12px on mobile). Page rhythm follows a 'breathing' model: major sections are separated by 40px (lg spacing), subsections by 24px (md spacing), and inline elements by 12px (sm spacing). The hero section occupies full viewport height with a centered modal or overlay for region selection, establishing visual hierarchy immediately. Product cards use a 3-column grid on desktop (4 on wide screens), 2 columns on tablet, 1 on mobile, with 24px gaps. Whitespace is intentional: the interface never feels crowded. Container max-width of 1280px ensures text remains scannable (60–80 characters per line for body copy). Padding inside cards is consistently 24px (md spacing), wi

Elevation & Depth

Depth is conveyed through precise shadow application and layering, not through color darkening. The elevation system defines three levels: Level 1 (Base/Cards): box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), used for standard cards and input fields. Level 2 (Elevated/Modals): box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), applied to modals, popovers, and floating panels. Level 3 (Floating/Tooltips): box-shadow 0 12px 32px rgba(0, 0, 0, 0.15), reserved for tooltips and highest-priority overlays. All shadows use a soft, diffused blur (8–32px) to avoid harsh edges. On hover, cards transition from Level 1

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are applied strategically to soften technical elements without sacrificing clarity. Buttons use full rounding (border-radius: 9999px, or 40px for 48px-height buttons) to signal interactivity and approachability; this contrasts with the sharp edges of input fields (border-radius: 10px, or 0.75rem). Cards and containers use moderate rounding (border-radius: 8px, or 1rem) to balance friendliness with formality. Modals and popovers use larger rounding (border-radius: 1.5rem) to create visual separation from the page. Input fields specif

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background: #172280, text: #ffffff, padding: 12px 32px, border-radius: 40px, height: 48px) use Trump Gothic Pro Medium at 14px with 0.01em tracking. On hover, background darkens to #0d1a4d with a 200ms ease-out transition and box-shadow 0 3px 8px rgba(0, 0, 0, 0.15). Secondary buttons (background: transparent, border: 1px solid #172280, text: #172280) follow the same dimensions and typography; on hover, background becomes #d4dff5 (primary-container). Ghost buttons (no border, transparent background) are used for tertiary actions; on hover, background becomes #dce0df (surface-container-high). All buttons disable with background #e8e8e8, text #555859 at 50% opacity, and cursor: not-allowed.

Containers &

Do's and Don'ts

**Do**

• Do use primary navy (#172280) for all primary CTAs and interactive focus states—it establishes trust and guides attention.
• Do maintain 24px (md spacing) as the default padding inside cards and containers; this breathing room is essential to the technical aesthetic.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) to cards and 0 8px 24px rgba(0, 0, 0, 0.12) to modals; shadows convey hierarchy without color tricks.
• Do use Trump Gothic Pro (700 weight) for all headlines and display text; its geometric warmth humanizes technical content.
• Do reserve tertiary magenta (#cc2e8c) for high-impact moments (badges, alerts, key highlights); overuse dilutes its power.

**Don't**

• Don't use rounded corners smaller than 8px on cards or containers; the technical aesthetic requires generous curves to feel approachable.
• Don't apply gradients or glassmorphism effects; Orbea's elevation system relies on precise shadows and layering, not blur or color blending.
• Don't exceed 1280px container max-width; wider layouts break the reading rhythm and dilute focus on product details.
• Don't mix typefaces within a single section; Trump Gothic Pro handles all headlines, Neue Haas Grotesk handles all body copy—no exceptions.
• Don't use opacity or transparency for disabled states; instead, use surface-container-high (#dce0df) background with on-surface-variant (#555859) text at 50% opacity and cursor: not-allowed.