Subaru Parts Online

Overview

Subaru Parts Online is a direct-to-consumer e-commerce platform for genuine OEM Subaru parts, accessories, and branded gear. The design system embodies 'Automotive Pragmatism'—a clean, trust-forward aesthetic that prioritizes clarity, scannability, and functional simplicity. The interface uses a bright, neutral canvas (pure white #ffffff) anchored by a confident, accessible blue primary (#3a8eee) that signals reliability and action. The emotional response is one of confidence: users know they're buying authentic parts from an official source, and the UI reinforces that through straightforward navigation, clear product hierarchies, and minimal visual noise. The brand serves Subaru owners who value authenticity, performance, and peace of mind—not design novelty.

The voice is direct, knowledgeable, and reassuring. Subaru Parts Online speaks in the language of automotive enthusiasts and practical owners alike: 'Discover the perfect parts for your Subaru, crafted to ensure optimal performance and reliability.' Vocabulary emphasizes authenticity ('genuine,' 'OEM,' 'official'), reliability ('trust,' 'quality,' 'smooth'), and ownership pride ('Love every mile'). The tone avoids hype; instead, it builds confidence through specificity and transparency. Example sentence in brand voice: 'Browse the official Subaru Parts Online catalog to find authentic components that keep your Subaru running smoothly.'

Colors

The color system is built on a foundation of trust and clarity. Primary (#3a8eee) is a mid-tone, accessible blue used exclusively for interactive elements—call-to-action buttons, links, icons, and focus states. This blue is neither corporate-cold nor playful; it signals automotive authority and digital confidence. Secondary (#666666) is a neutral gray used for supporting text, disabled states, and secondary navigation; it provides visual hierarchy without competing for attention. Tertiary (#0066cc) is a deeper blue reserved for accent highlights, badges, and status indicators when primary is already in use. The surface stack is deliberately minimal: white (#ffffff) for primary surfaces, light grays (#f5f5f5 through #e0e0e0) for container hierarchy, and near-black (#1a1a1a) for inverse cont

Typography

The type system uses Everett (a proprietary Subaru font family) as the primary typeface, with fallbacks to Arial and Helvetica for web safety. The hierarchy is built on weight and size rather than decorative variation. Display (56px, 700 weight) is reserved for hero headlines and major page titles; Headline-lg (36px, 600 weight) anchors section headers and product category titles; Headline-md (28px, 600 weight) is used for subsections and card titles. Body-lg (18px, 400 weight) is the primary reading size for descriptive copy and product descriptions, set to 28px line-height for comfortable scanning. Body-md (16px, 400 weight) is used for standard UI text, form labels, and secondary content. Label-md (14px, 600 weight, Everett-Medium) is applied to button text, badges, and navigation items

Layout

The layout uses a 12-column grid system with a max-width of 1280px, centered on the viewport. The gutter between columns is 24px (md spacing), providing breathing room without excessive whitespace. Page sections use lg spacing (40px) for vertical separation, creating a clear rhythm: hero section (full-width with image overlay), primary navigation (sticky header, 64px height), content sections (24px padding on sides, 40px between sections). The container max-width of 1280px ensures readability on large displays while maintaining focus. Product grids use a responsive 4-column layout on desktop (3 on tablet, 1 on mobile), with 24px gaps between cards. Form fields and inputs use md spacing (24px) for label-to-input distance and sm spacing (12px) between form rows. The design favors generous wh

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. The elevation system uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and input fields, providing minimal separation from the surface; md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover states on cards and modals, indicating interactivity; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating elements like sticky headers and dropdown menus. Inset shadows (inset 0px 1px 0 rgba(0, 0, 0, 0.075)) are used on input fields to create a subtle recessed appearance, signaling that the field is interactive. F

Shapes

The shape philosophy is 'Functional Minimalism'—rounded corners are used sparingly and purposefully to soften the interface without introducing unnecessary complexity. Buttons use DEFAULT radius (0.5rem / 8px), providing a subtle softness that feels modern and approachable without appearing playful. Cards and containers use md radius (0.75rem / 12px), creating a slightly more pronounced roundness that distinguishes them as distinct surfaces. Input fields use DEFAULT radius (8px) to align with buttons, creating a cohesive interaction layer. Modals and dropdowns use lg radius (1rem / 16px) to si

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses #3a8eee background with white text, 44px height, 10px vertical / 24px horizontal padding, and DEFAULT (8px) border-radius. On hover, the background shifts to #2a7ad9 (a darker blue, -10% lightness) with a 200ms ease-in-out transition. Focus states add a 3px box-shadow: 0 0 0 3px #e3f0ff. Button-secondary uses surface-container (#eeeeee) background with on-surface text and a 1px outline-variant border; on hover, it shifts to surface-container-high (#e8e8e8). Button-ghost has no background or border by default, using primary text color; on hover, it gains a subtle primary-container background. All buttons use label-md typography (14px, 600 weight) and are left-aligned within their containers. Disabled button

Do's and Don'ts

**Do**

• Do use primary (#3a8eee) exclusively for interactive elements—buttons, links, focus states, and status indicators. This creates a clear, scannable interaction layer.
• Do maintain 24px (md spacing) as the default margin between major sections and 12px (sm spacing) between form elements. This rhythm creates visual clarity and breathing room.
• Do apply 200ms ease-in-out transitions to all interactive state changes (hover, focus, active). This provides tactile feedback without distraction.
• Do use Everett-Medium (600 weight) for button text and navigation labels to create visual weight and distinguish interactive elements from body text.
• Do stack form fields vertically with sm spacing (12px) between rows, and use label-md typography for all form labels positioned above their inputs.
• Do use the full rounded radius (9999px) exclusively for badge and pill-shaped elements to signal metadata or status.
• Do apply subtle shadows (sm elevation: 0 1px 2px rgba(0, 0, 0, 0.06)) to cards and containers to create depth without drama.

**Don't**

• Don't use secondary (#666666) or tertiary (#0066cc) as primary interactive colors. Primary (#3a8eee) is the only color users should associate with clickability.
• Don't apply border-radius greater than lg (1rem / 16px) to buttons or standard containers; this dilutes the functional minimalism and feels playful rather than trustworthy.
• Don't use hard corners (0px radius) on any interactive element. Even subtle roundness (8px) signals modernity and approachability.
• Don't animate border-radius, opacity, or transform properties on hover. Only animate background-color and box-shadow to maintain visual stability.
• Don't exceed 1280px container max-width on desktop; wider layouts reduce focus and readability for product-focused content.
• Don't use more than two font weights in a single section (e.g., 400 and 600). Stick to Everett-Regular and Everett-Medium to maintain clarity.
• Don't apply text-shadow to body copy or large headlines. Reserve text-shadow (0 1px 3px rgba(0, 0, 0, 0.3)) for small labels over busy product images only.