Reference-Based Strategy: Inspired by Barrett-Jackson's prestigious automotive auction aesthetics combined with modern fintech dashboard sophistication (Robinhood, Coinbase data visualization) and luxury automotive marketplaces (RM Sotheby's, Bring a Trailer).
Core Philosophy: Create a premium, high-stakes auction environment that balances emotional luxury vehicle presentation with precise, data-driven intelligence typical of financial trading platforms.
Dark Mode Foundation (Primary interface)
- Background: 12 8% 8% (deep charcoal)
- Surface: 12 8% 12% (elevated panels)
- Surface Elevated: 12 8% 16% (cards, modals)
Accent Colors
- Electric Blue: 193 100% 50% (primary actions, live indicators)
- Warning Amber: 38 100% 50% (alerts, ending soon, outbid notifications)
- Success Green: 142 76% 45% (won auctions, confirmed bids)
- Danger Red: 0 84% 60% (reserve not met, expired)
Text Hierarchy
- Primary Text: 0 0% 98%
- Secondary Text: 0 0% 70%
- Tertiary/Muted: 0 0% 50%
Font System: Inter (primary), JetBrains Mono (data/numbers)
Scale
- Hero Headings: text-6xl/text-7xl font-bold (vehicle names)
- Section Headings: text-3xl/text-4xl font-semibold
- Card Titles: text-xl font-semibold
- Body Text: text-base/text-lg
- Small Data: text-sm font-medium
- Numeric Data: JetBrains Mono, text-2xl/text-3xl font-bold
Spacing Primitives: Use Tailwind units of 2, 4, 6, 8, 12, 16, 20, 24
Container Hierarchy
- Max Width: max-w-[1600px] (wide dashboard layout)
- Section Padding: px-6 md:px-12 lg:px-16
- Vertical Rhythm: py-12 md:py-16 lg:py-20 for sections
- Card Padding: p-6 for content cards
Grid Systems
- Vehicle Cards: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4
- Dashboard Widgets: grid-cols-1 lg:grid-cols-3 (2:1 split for auction:analysis)
- Stats Display: grid-cols-2 md:grid-cols-4
- Full-width cinematic vehicle photography (1920x800px minimum)
- Overlay gradient: from-black/80 via-black/50 to-transparent
- Live auction countdown timer (large, prominent)
- Featured vehicle title overlay with glass-morphism card
- Real-time bid activity feed (scrolling, right side)
- CTA: "View Live Auction" with electric blue glow effect
- Aspect ratio: 16:9 for main image
- Glass-morphism border: border border-white/10
- Hover state: scale-105 transition, electric blue border glow
- Live indicator: Pulsing dot (animate-pulse) with "LIVE NOW" badge
- AI confidence score: Circular progress indicator (top-right)
- Quick stats row: Year | Miles | Engine (icon + value pairs)
- Current bid: Large, bold with JetBrains Mono
- Fixed top bar with blur backdrop (backdrop-blur-xl bg-black/80)
- Logo left, search center, user/notifications right
- Secondary nav: Tabs for Live/Upcoming/Buy Now/Ended
- Mobile: Hamburger with slide-out drawer
- Left (60%): Large vehicle image carousel, countdown timer, current bid display, bid button
- Right (40%): Bid history feed (infinite scroll), AI price analysis chart, comparable sales
- Bid modal: Glass-morphism overlay with manual bid input + auto-bid toggle
- Line chart: Historical price trends (Chart.js or Recharts)
- Confidence meter: Semi-circular gauge (0-100%)
- Comparison cards: Grid of 3 comparable vehicles
- Market insights: Bullet points with trend indicators (↑↓)
- Sticky top position (below nav)
- Search input: VIN/Make/Model with icon
- Dropdown filters: Status, Price Range, Year, Body Type
- Sort: Dropdown (Ending Soon, Price Low-High, New Listings)
- Active filters: Pill badges with X to clear
- Sidebar navigation (left): Dashboard, Listings, Users, Sellers, Analytics
- Card-based stat widgets: Total Auctions, Active Bids, Revenue (with trend arrows)
- Data tables: Striped rows, sortable columns, action buttons
- Approval queue: Card layout with approve/reject actions
- Multi-step listing form: Glass-morphism cards for each step
- Image upload: Drag-drop zone with preview thumbnails
- Specification inputs: Two-column grid layout
- Auction settings: Date/time picker, reserve price, buy-now option
- Draft/publish toggle
- Tab navigation: Active Bids, Watchlist, Won Auctions, History
- Watchlist: Grid of vehicle cards with remove icon
- Bid tracking: List view with status badges (Winning/Outbid/Ended)
- Payment section: Invoice cards with pay button
Micro-interactions (Use sparingly)
- Bid increment: Number count-up animation (1 second)
- Live pulse: animate-pulse on red dot indicators
- Card hover: Smooth scale + border glow (200ms ease)
- Timer transitions: Flip animation for countdown digits
- Outbid alert: Slide-in notification from top-right
No animations on: Form inputs, tables, text content
Hero Section: Cinematic wide shot of luxury vehicle (e.g., Ferrari SF90 in dramatic garage lighting) - 1920x800px, high-quality JPEG
Vehicle Cards: Professional automotive photography - front 3/4 angle, clean background - 800x450px per card
Detail Gallery: 20+ high-resolution images per vehicle - exterior angles, interior details, engine bay, trunk - support 360° rotation placeholder
Background Elements: Subtle grid pattern overlay on dark background for depth
Dashboard: Chart/graph placeholders for AI price data visualization
- Mobile: Single column, stacked layout, bottom sheet modals
- Tablet: 2-column grids, side-by-side auction view
- Desktop: Full split-screen, 3-4 column grids, sidebar navigation
Design Principle: Every element serves luxury and precision—cinematic imagery meets real-time financial intelligence in a high-stakes auction environment.