CARPRO Design SystemDESIGN.md alpha

The CARPRO design system is built to evoke a premium, high-end automotive experience. The overarching aesthetic relies on a striking contrast between a deep, true-dark background and a vibrant, energetic yellow accent. This mirrors the luxury and performance associated with high-end auto detailing and ceramic coating services.

The interface prioritizes clarity and action, avoiding unnecessary decorative elements in favor of a clean, structured, and slightly "masculine" aesthetic standard in the automotive industry.

• The Power of Dark Mode: The app operates exclusively in a dark theme. The background #0D0D0D absorbs focus, allowing the #1A1A1A surface cards to subtly lift off the screen without requiring heavy, muddy shadows.

• Strategic Accent: Yellow (#F2C94C) is strictly reserved for actionable elements (CTA buttons, selected states, progress steps, cart counters, and important highlights). It should never be used as a background for large static areas.

• Typography: Uses a clean, highly legible sans-serif. Hierarchy is established through weight and color (White for primary data, Medium Grey for metadata and labels) rather than significant shifts in font size.

### Buttons

• Primary CTAs: Full-width or prominent buttons (like "Book a Service" or "Continue") utilize the primary yellow background with black (#000000) text for maximum contrast and legibility. They feature a lg (12px) border radius to feel tactile but structured.

• Secondary Actions: Outlined buttons with a subtle border (#333333) and white text, used for secondary filtering or "Shop Now" actions.

### Cards & Surfaces

• Product and service listings utilize the surface color (#1A1A1A) with an md (8px) radius.

• They are tightly composed, often incorporating a subtle inner border or relying entirely on the contrast against the deeper background to define their edges.

• Images within cards (like car photos or product bottles) are given slight padding and often sit on a subtly lighter gray background to ensure they pop.

### Navigation & Progress

• Bottom Nav: Relies on clear, recognizable, fine-line icons. The active state is denoted by turning both the icon and the text primary yellow.

• Progress Trackers: Used extensively in the booking and tracking flows. Completed steps use filled yellow circles with checkmarks, the active step uses an outlined yellow circle, and upcoming steps use grey outlines. A horizontal track connects them, highlighting yellow for completed sections.

• Form Fields: Inputs feature a dark grey background (slightly lighter than the page background) with no visible borders until focused. Labels sit cleanly above the inputs in a small, secondary text color.