ABC Car Wash

Overview

ABC Car Wash is a luxury automotive detailing brand that elevates the car wash experience through precision engineering and premium service delivery. The visual identity embraces a "High-Contrast Minimalism" aesthetic—a design philosophy that pairs austere, near-black surfaces with crisp white space and a singular vibrant accent (electric blue #0099ff) to create visual clarity and premium perception. The brand serves discerning car owners who view vehicle maintenance as a ritual of care, not a commodity. The UI evokes a sense of controlled precision: every element is intentional, every interaction is frictionless, and the overall experience feels like stepping into a studio rather than a car wash bay. The tone is confident yet approachable—technical without being cold, premium without pretension. Example: "Your car deserves studio-grade care. Book your bay in seconds."

Colors

The color system is built on a foundation of high-contrast duality: a pristine white surface (#ffffff) paired with a deep navy secondary (#1b2b3b) that anchors the brand's authority. The primary accent, electric blue (#0099ff), is reserved exclusively for interactive elements—call-to-action buttons, focus states, and key links—creating an unmistakable visual hierarchy. This blue is not decorative; it signals actionability and draws the eye to conversion moments. The secondary palette includes a warm tertiary brown (#8b7355) derived from automotive leather and detailing aesthetics, used sparingly in badges and accent typography. Neutral grays (#747474, #999999, #e5e7e7) provide breathing room and support hierarchy without competing for attention. Surface containers range from #ffffff (brigh

Typography

The type system pairs two distinct voices: Imperial Script (56px, 400 weight) for display-level headlines, delivering elegance and personality in hero sections, and Hanken Grotesk (400–700 weights, 12px–40px range) for all functional typography. This pairing creates a visual tension that mirrors the brand's dual nature—premium aesthetics grounded in technical precision. Display text (Imperial Script at 56px, -0.02em letter-spacing) is used sparingly for hero statements like "Premium Car Wash & Detailing," creating a moment of visual delight. Headline-lg (Hanken Grotesk, 40px, 700 weight, -0.01em spacing) anchors section titles and establishes hierarchy. Body text (Hanken Grotesk, 16px, 400 weight, 0.02em spacing) is optimized for readability at small sizes, with a line-height of 24px provi

Layout

The page uses a 12-column grid with a max-width of 1280px, providing a fixed container that scales gracefully on desktop while maintaining breathing room on ultra-wide displays. The gutter is set to 24px (md spacing), creating consistent horizontal rhythm. Vertical spacing follows a semantic scale: lg spacing (40px) separates major sections (hero, service cards, testimonials), md spacing (24px) groups related content, and sm spacing (12px) provides micro-breathing room within components. The hero section occupies full viewport height with the muddy car image as a hero photograph, anchoring the visual narrative. Service cards are arranged in a responsive grid (3 columns on desktop, 1 on mobile) with md padding (24px) and lg gaps (40px) between cards. The footer uses xl spacing (64px) for to

Elevation & Depth

Depth is achieved through a restrained shadow system and subtle background layering rather than dramatic drop shadows. Level 1 (Base): The white surface (#ffffff) serves as the foundation with no shadow. Level 2 (Cards & Containers): Cards use box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) with a 1px border in surface-variant (#e5e7e7), creating a subtle lift without visual heaviness. Level 3 (Modals & Overlays): Elevated surfaces use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), signaling modal or dropdown context. The shadow blur radius (4px–16px) increases with elevation, mimicking light diffusion

Shapes

The shape language is called "Precision Roundness"—a philosophy that uses rounded corners to soften the geometric rigor of the grid while maintaining a technical, engineered feel. Buttons use full rounding (border-radius: 9999px), creating pill-shaped affordances that feel modern and tappable. Cards and containers use lg rounding (1rem / 16px), providing enough curvature to feel approachable without sacrificing the structured aesthetic. Input fields use DEFAULT rounding (0.5rem / 8px), a subtle curve that signals interactivity without competing with buttons. The logo and icon elements use full

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses a solid blue background (#0099ff), white text, full rounding (9999px), and padding of 8px 20px with a 44px height. On hover, the background transitions to the dimmed blue (#0077cc) over 200ms, providing clear feedback. The secondary button (button-secondary) uses a light gray background (#dcdcdc), dark text (#1b2b3b), and a 1px outline in #999999, maintaining visual distinction while offering a lower-priority action path. The ghost button (button-ghost) is transparent with a blue border and blue text, used for tertiary actions like "Learn more." All buttons use label-md typography (14px, 600 weight) and include a 150–200ms transition on hover to avoid jarring state changes.

Contai

Do's and Don'ts

**Do**

• Do use the primary blue (#0099ff) exclusively for interactive elements—buttons, links, focus states—to create unmistakable affordance.
• Do pair Imperial Script display text with Hanken Grotesk body text to balance elegance with technical clarity.
• Do apply full rounding (9999px) to buttons and pill-shaped elements; use lg rounding (1rem) for cards and containers.
• Do maintain 24px gutter spacing and 40px section separation to create breathing room and visual hierarchy.
• Do transition all interactive states over 150–200ms using ease-out timing to provide smooth, responsive feedback.
• Do use box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) on cards to create subtle depth without visual heaviness.

**Don't**

• Don't use the secondary navy (#1b2b3b) as a primary interactive color; reserve it for headers, footers, and structural elements.
• Don't apply multiple shadows to a single element; each component occupies one elevation level only.
• Don't use sharp corners (0px border-radius) on interactive elements; the brand requires softness and approachability.
• Don't exceed 2 font families in a single design; Imperial Script and Hanken Grotesk are the complete palette.
• Don't apply hover states without a transition; all state changes must animate over 150–200ms to feel premium.
• Don't use tertiary brown (#8b7355) as a primary accent; it's reserved for badges and secondary typography only.