CARPRO MOBILE UI DESIGN SYSTEMLegacy format
Premium Dark Luxury Automotive UI for mobile first platforms
Color Palette
Background
Accent
Text
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Premium Dark Luxury Automotive UI for mobile first platforms
Components
Buttons
Cards
Card Title
Sample body text for the card component.
Elevation & Depth
Font Family
```css
font-family: "Poppins", sans-serif;
```
Hero Heading
```css
font-size: 44px;
font-weight: 700;
line-height: 1.1;
letter-spacing: -1px;
```
---
# 5. BUTTON SYSTEM
Primary Button
```css
background: #F5B400;
color: #000;
height: 54px;
border-radius: 16px;
font-weight: 600;
```
Secondary Button
```css
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
color: white;
```
---
# 6. CARD DESIGN
Service Cards
```css
background: linear-gradient(
180deg,
#111111 0%,
#090909 100%
);
border-radius: 22px;
box-shadow:
0 10px 30px rgba(0,0,0,0.45);
```
---
# 7. HOME SCREEN STRUCTURE
1. Header
2. Hero Section
3. CTA Buttons
4. Car Showcase
5. Services Grid
6. Promo Banner
7. Popular Services
8. Testimonials
9. Footer CTA
---
# 8. HEADER DESIGN
```css
height: 72px;
background: rgba(0,0,0,0.8);
backdrop-filter: blur(16px);
```
---
# 9. HERO SECTION
Example:
```txt
Premium Care.
Perfect Finish.
```
Second line:
```css
color: #F5B400;
```
---
# 10. FORM STYLING
```css
height: 58px;
background: #111;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 16px;
padding-inline: 16px;
color: white;
```
Focus:
```css
border-color: #F5B400;
box-shadow: 0 0 0 4px rgba(245,180,0,0.12);
```
---
# 11. TRACKING SCREEN
Timeline:
• Completed = Gold
• Current = Glow
• Pending = Gray
Estimated Time:
```css
color: #F5B400;
font-weight: 600;
```
---
# 12. ICON STYLE
Use:
• Lucide Icons
• Phosphor Icons
```css
stroke: 1.8px;
```
---
# 13. ANIMATION SYSTEM
Use:
• Framer Motion
Duration:
```css
0.25s - 0.4s
```
---
# 14. IMAGE STYLE
All car images:
• Cinematic
• High contrast
• Studio lighting
• Black vehicles preferred
Avoid:
• Flat stock photos
• Bright daylight
---
# 15. RESPONSIVE RULES
Mobile
430px base
Tablet
768px
Desktop
1440px+
Desktop:
• Keep mobile cards centered
• Avoid stretching
• Use max-width containers
---
# 16. TECH STACK
Frontend:
• Next.js
• Tailwind CSS
• Framer Motion
Icons:
• Lucide
Carousel:
• Swiper.js
---
# 17. DESIGN LANGUAGE SUMMARY
The UI should feel like:
> “A luxury detailing garage mixed with a premium automotive concierge app.”
NOT:
• Generic ecommerce
• Flat SaaS UI
YES:
• Premium
• Dark
• Elegant
• High contrast
• Automotive luxury
Use with MCP
Don't have the MCP? Install it here