Michelin

Overview

Michelin is a heritage industrial brand modernized for digital commerce, serving consumers seeking tire solutions with confidence and clarity. The design system embodies 'Industrial Pragmatism'—a philosophy that combines bold, high-contrast visual language with functional, no-nonsense interfaces. The aesthetic is unapologetically confident: a vivid yellow (#fce500) accent cuts through neutral surfaces (white #ffffff, grays #e5e5e5 to #1a1a1a) to signal action and brand presence, while a deep blue secondary (#27509b) grounds the experience in trust and technical authority. The UI evokes the sensation of a well-engineered product: clean, purposeful, and built to last.

The brand voice is direct, knowledgeable, and reassuring—never flowery, never uncertain. Michelin speaks to drivers as peers who understand the road. Example sentence: 'Find the tire engineered for your journey—compare performance, price, and availability in seconds.' Typography pairs the distinctive Michelin Unit Titling (used for headlines and brand moments) with Noto Sans for body copy, creating a visual hierarchy that feels both premium and accessible. The design system prioritizes clarity over decoration: every color choice, spacing decision, and component state serves the user's goal of finding and purchasing the right tire.

Colors

The color system is built on three pillars: a neutral foundation (white, light grays, dark grays), a vibrant primary accent (yellow #fce500), and supporting brand colors (deep blue #27509b, error red #b71c1c). Primary (#fce500) is the signature call-to-action color—used exclusively on buttons, key links, and interactive highlights that demand user attention. It is never used for body text or large surface areas, preserving its impact. Secondary (#27509b) is the trust color, applied to navigation, form focus states, and secondary CTAs; it conveys technical expertise and reliability. Tertiary (#b71c1c) is reserved for error states, warnings, and critical feedback. The surface stack ranges from pure white (#ffffff) at the brightest level to near-black (#1a1a1a) for text, with intermediate gra

Typography

The type system uses two distinct families to create visual hierarchy: Michelin Unit Titling (proprietary, bold, geometric) for headlines and brand moments, and Noto Sans (neutral, highly legible) for body copy and UI labels. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero statements and major section breaks; Headline-lg (40px, 700 weight) anchors page sections; Headline-md (28px, 700 weight) introduces subsections; Title-lg (20px, 600 weight) labels cards and modules. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and rich content; Body-md (16px, 400 weight, 24px line-height) is the default for form labels, descriptions, and standard UI text. Label-md (14px, 600 weight, 0.01em letter-spacing) is applied to button text, badges, and

Layout

The layout system uses a 12-column grid with a max-width of 1280px (1280px container, centered with equal margins on desktop). Spacing follows a semantic scale: unit (8px) is the base increment; xs (4px) is used for micro-spacing (icon-to-text gaps); sm (12px) is used for internal component padding; md (24px) is the standard gutter between sections and card padding; lg (40px) is used for major section separation (hero to content, content to footer); xl (64px) is reserved for full-page rhythm breaks. On tablet (601px–1024px), the grid collapses to 2 columns with the same gutter (24px). On mobile (≤600px), the grid becomes single-column with reduced gutter (16px implied). Container max-width is strictly enforced at 1280px to prevent line-length bloat on ultra-wide displays. White-space is ge

Elevation & Depth

Depth is conveyed through a three-level shadow system and subtle background shifts. Level 1 (Base/Surface): no shadow, white background (#ffffff) or light gray (#f2f2f2). Level 2 (Standard Card/Hover): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background shifts to surface-container (#e5e5e5) on hover. Level 3 (Modal/Elevated): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background remains white (#ffffff) but the shadow creates clear separation from the page. All shadows use a 15–20% black opacity with a 3–8px blur radius and 0px offset to create a soft, diffused effect that suggests light fro

Shapes

The shape philosophy is 'Technical Minimalism'—rounded corners are used sparingly and purposefully to soften industrial edges without sacrificing clarity. Buttons and form inputs use rounded.DEFAULT (0.5rem / 8px) for a subtle, modern feel that remains professional. Cards and containers use rounded.lg (1rem / 16px) to create a slightly softer, more inviting appearance while maintaining geometric precision. Modals and dropdowns use rounded.xl (1.5rem / 24px) for a premium, elevated feel. Badges and pills use rounded.full (9999px) to signal compactness and secondary importance. No element uses s

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons (button-primary) use a solid yellow background (#fce500) with black text (#000000), 16px 24px padding, 48px height, and 0.5rem border-radius. On hover, the background shifts to primary-fixed-dim (#e6cc00) with a 200ms ease transition. The button text is always label-md weight (600) and never changes color on hover. Secondary buttons (button-secondary) use a transparent background with a 1px solid border (#cccccc) and black text; on hover, the background becomes surface-container-low (#f2f2f2). Ghost buttons (button-ghost) are text-only with no border or background; they use secondary color (#27509b) text and gain a light background on hover. All buttons have a minimum touch target of 48px height to meet access