Depend Exotics

Overview

Depend Exotics is a luxury exotic car rental service that embodies the aesthetic of 'Prestige Minimalism'—a design philosophy that pairs restrained, elegant interfaces with bold, high-contrast visual moments. The brand serves discerning clients who demand both sophistication and performance, transforming the car rental experience into a curated luxury journey. The UI evokes confidence and exclusivity through a clean white canvas punctuated by a vivid electric blue accent (#0099ff), mirroring the precision and power of the vehicles themselves. The emotional response is one of aspiration tempered by accessibility: users feel they are entering an elite space, yet the interface remains approachable and direct.

The brand voice is authoritative yet conversational, speaking to clients as peers rather than customers. Vocabulary emphasizes curation, boldness, and dependability—words like 'elite,' 'curated,' and 'trusted' appear throughout. The tone avoids hyperbole; instead, it lets the product (luxury vehicles) speak for itself. Example sentence in brand voice: 'Your dream car awaits—select from our curated fleet of elite exotics, trusted by the bold.'

Colors

The color system is anchored in a high-contrast, minimalist palette designed to convey luxury and precision. Primary (#0099ff) is the electric blue accent used exclusively on interactive elements—call-to-action buttons, links, and focus states—creating a striking visual anchor that draws the eye without overwhelming the interface. Secondary (#858585) is a neutral gray deployed for supporting text, dividers, and secondary UI elements, providing visual hierarchy without competing for attention. The surface stack ranges from pure white (#ffffff) for the main canvas to carefully calibrated grays (#f2f4f7, #e4e7ec, #d0d5dd) for container backgrounds, creating subtle depth through luminance shifts of 2–5% rather than dramatic color changes. On-surface text is set to near-black (#0a0a0a) for maxi

Typography

The type system employs a two-font strategy: Manrope (fontFamily: 'Manrope', weights 500–700) for headlines and display text, and Inter (fontFamily: 'Inter', weights 400–500) for body and label text. This pairing creates a clear hierarchy: Manrope's geometric, modern character commands attention at large sizes (display: 75px, headline-lg: 48px), while Inter's neutral, highly legible design ensures readability at smaller scales (body-md: 16px, label-sm: 12px). Display text (75px, fontWeight 500, lineHeight 84px) is reserved for hero sections and primary messaging, with a tight letterSpacing of -0.02em to enhance visual impact. Headline-lg (48px, fontWeight 600) is used for section titles, while body-md (16px, fontWeight 400, lineHeight 24px) serves as the default reading text. All interacti

Layout

The page layout follows a fluid, centered-column model with a maximum container width of 1200px, ensuring content remains readable on ultrawide displays while maintaining focus on mobile. The grid system uses 12 columns with a 24px gutter, providing flexibility for both single-column (mobile) and multi-column (desktop) layouts. Spacing is semantic and hierarchical: lg spacing (40px) separates major sections (hero, feature blocks, footer), md spacing (24px) divides subsections and card groups, and sm spacing (12px) provides breathing room within components. The hero section occupies full viewport height with centered, vertically-stacked content (logo, headline, tagline, CTA), creating an immersive entry point. Below the fold, content is organized in card-based grids with consistent 24px pad

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids the heavy, diffuse shadows common in Material Design. The elevation stack consists of three levels: Level 1 (Base) uses no shadow, relying on background color and borders for definition. Level 2 (Cards & Containers) applies a subtle shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating a soft lift of 4–12px. Level 3 (Modals & Overlays) uses a more pronounced shadow: 0 16px 40px rgba(0, 0, 0, 0.12), suggesting a 16–40px elevation. Interactive elements (buttons, inputs) receive a composite shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgb

Shapes

The shape philosophy is 'Refined Geometry'—combining sharp, architectural precision with subtle softness to balance modernity and approachability. Buttons and primary interactive elements use a full border-radius (9999px, or {rounded.full}), creating pill-shaped forms that feel contemporary and friendly while maintaining visual clarity. Cards and containers use a moderate radius ({rounded.lg}: 1rem or 16px), providing enough curvature to feel polished without appearing overly rounded or playful. Input fields and secondary UI elements use a smaller radius ({rounded.DEFAULT}: 0.5rem or 8px), mai

Components

Action Elements Buttons are the primary interaction mechanism and use a 48px minimum height with 12px vertical and 24px horizontal padding to meet accessibility touch-target guidelines. Primary buttons (#0099ff on white) use {rounded.full} for maximum visual impact, while secondary buttons employ a semi-transparent white background (rgba(255, 255, 255, 0.48)) with the same blue text color, creating a visual hierarchy through opacity rather than color inversion. Hover states transition the background color over 200ms (cubic-bezier(0.2, 0, 0, 1)) to #0080cc (primary-hover), providing immediate feedback without jarring animation. Active states darken further to #0066cc (primary-active). All buttons include the composite shadow (0px 2px 4px rgba(0, 0, 0, 0.1) + 1px white border) to suggest

Do's and Don'ts

**Do**

• Do use the primary blue (#0099ff) exclusively on interactive elements—buttons, links, focus states—to create a clear visual hierarchy and guide user attention.
• Do maintain a minimum 48px touch target for all interactive elements (buttons, links, inputs) to ensure accessibility on mobile and tablet devices.
• Do apply the full border-radius ({rounded.full}) to primary buttons and the moderate radius ({rounded.lg}) to cards to reinforce the visual hierarchy and brand aesthetic.
• Do use the surface-container tokens (#f8f6f4, #f2f4f7, #e4e7ec) for backgrounds and containers to create subtle depth through luminance shifts rather than introducing new colors.
• Do transition interactive states (hover, focus, active) over 200ms using cubic-bezier(0.2, 0, 0, 1) easing to provide smooth, responsive feedback.
• Do pair Manrope (headlines) with Inter (body text) consistently across all pages to maintain typographic coherence and brand recognition.

**Don't**

• Don't use colors outside the defined palette—avoid introducing new accent colors, gradients, or decorative hues that dilute the minimalist aesthetic.
• Don't apply shadows heavier than {elevation.lg} (0 16px 40px rgba(0, 0, 0, 0.12)) as this creates visual heaviness and contradicts the prestige-minimalist philosophy.
• Don't use border-radius values smaller than {rounded.DEFAULT} (8px) on cards or containers, as this creates a harsh, utilitarian appearance that conflicts with the luxury brand positioning.
• Don't mix typefaces beyond Manrope and Inter—avoid system fonts, serif fonts, or additional display fonts that introduce visual noise and reduce brand coherence.
• Don't apply opacity or transparency to primary text (on-surface: #0a0a0a) below 80%, as this reduces legibility and creates a tentative, uncertain visual tone.
• Don't use the secondary gray (#858585) for primary CTAs or interactive elements—reserve it for supporting text, dividers, and disabled states only.