CARPRO Design System
The CARPRO design system is built to evoke a premium, high-end automotive experience through dark mode and strategic yellow accents
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
The CARPRO design system is built to evoke a premium, high-end automotive experience through dark mode and strategic yellow accents
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Design Intent & Vibe
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.
Visual Hierarchy & Contrast
• 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.
Component Guidelines
### 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.
Use with MCP
Don't have the MCP? Install it here