Carwow

Overview

Carwow is a digital-first automotive marketplace that transforms car buying, selling, and leasing into a transparent, energetic experience. The brand serves UK consumers seeking simplicity and confidence in automotive transactions, employing a "Vibrant Maximalism" aesthetic that combines bold cyan accents (#1cdce8), playful color-blocking (lime green #38c498, golden yellow #fed500, coral red #e25834), and dramatic black backgrounds to create visual excitement without sacrificing clarity. The interface feels contemporary, optimistic, and purposefully designed to demystify automotive commerce.

Carwow's voice is conversational, confident, and occasionally playful—never corporate or intimidating. The brand uses direct language, active verbs, and concrete benefits: "Save up to £7,719," "Explore sale deals," "Meet the ultimate 7-seater SUV." Typography is bold and commanding (south-east-cn at 56–90px for headlines, gt-walsheim at 16–18px for body), reinforcing the brand's refusal to whisper. Example sentence in Carwow's voice: "Experience the TIGGO 8 Super Hybrid with 0% APR and zero deposit—available exclusively in September."

Colors

Carwow's color system is built on high-contrast, high-energy accents layered over a dark, neutral canvas. Primary (#1cdce8, a vivid cyan) is the brand's signature accent, deployed on all interactive CTAs (buttons, search icons, links), focus states, and brand-critical UI elements. This cyan appears frequently enough to anchor the visual identity but sparingly enough to maintain impact—it's the color users click, the color that signals action. Secondary (#38c498, a fresh lime green) and Tertiary (#fed500, a warm golden yellow) provide supporting accent roles for status indicators, promotional badges, and secondary CTAs. Error (#e25834, a coral-red) communicates destructive actions and validation failures.

The surface stack is anchored in near-black (#171717 for surface, #0a0a0a for surface

Typography

Carwow employs a two-family type system: south-east-cn (a bold, geometric sans-serif at 700 weight only) for all headlines and display text, and gt-walsheim (a humanist sans-serif at 400 and 700 weights) for body, labels, and UI copy. The plate font (wowplate, monospace, 700 weight) is reserved for numeric inputs and registration plates, adding a technical, authentic touch. Display text (90px, 85px line-height, -1px letter-spacing) commands attention; headline-lg (56px, 52px line-height) anchors major sections; headline-md (32px, 28px line-height) introduces subsections. Body-lg (18px, 28px line-height) and body-md (16px, 24px line-height) maintain readability at all zoom levels. Label-md (14px, 700 weight, 0.01em letter-spacing) and label-sm (12px, 500 weight) are used for buttons, chips,

Layout

Carwow uses a fluid 12-column grid with a max-width of 1024px and responsive padding: 16px on mobile (< 651px), scaling to 40px on desktop (≥ 1440px). The grid-padding CSS variable (--grid-padding) controls horizontal breathing room, ensuring content never feels cramped. Sections are separated using lg spacing (40px) for major breaks and md spacing (24px) for subsections, creating a clear visual rhythm. The hero section occupies the full viewport height with a dark background and centered content, establishing visual hierarchy immediately. Cards and containers use md spacing (24px) for internal padding, with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to lift them subtly from the surface. The container-max-width of 1024px ensures readability on ultra-wide displays while maintaining focus. Wh

Elevation & Depth

Depth in Carwow is achieved through a three-tier shadow system and strategic use of the primary cyan accent. Level 1 (Base): the dark surface (#171717) with no shadow, establishing the foundation. Level 2 (Standard Card/Container): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow that lifts elements 4–8px from the base, used for cards, modals, and secondary containers. Level 3 (Elevated/Modal/Overlay): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25), a deeper shadow suggesting 16–24px elevation, reserved for modals, dropdowns, and hero overlays. Interactive elements (buttons, inputs) use no

Shapes

Carwow employs a "Soft-Technical" shape philosophy: rounded corners are used consistently but with intentional variation to signal component hierarchy and function. Buttons use full-radius (9999px) for primary CTAs, creating a pill shape that feels friendly and clickable. Secondary buttons and chips use DEFAULT (10px) or md (16px) radius, balancing softness with clarity. Input fields use sm (5px) radius, a subtle curve that feels precise and form-like. Cards use DEFAULT (10px) radius, matching secondary buttons to create visual cohesion. Large containers and modals use lg (24px) or xl (48px) r

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use full-radius (9999px), 44px height, 10px 24px padding, cyan background (#1cdce8), and black text (label-md, 700 weight). On hover, the background shifts to the primary-container (#33e9f2, a brighter cyan) with no text change. Secondary buttons use DEFAULT (10px) radius, 40px height, 9px 16px padding, transparent background with a 1px outline-variant border (#505050), and white text. On hover, the background becomes surface-container-high (#242424). Ghost buttons (used for tertiary actions) use transparent background with rgba(255, 255, 255, 0.05), DEFAULT radius, and primary text; on hover, the background becomes rgba(255, 255, 255, 0.1). All buttons use no box-shadow by default; on focus, apply 0 0 5px 2

Do's and Don'ts

**Do**

• Do use cyan (#1cdce8) exclusively for primary CTAs, focus states, and brand-critical interactive elements—never for backgrounds or passive text.
• Do pair bold south-east-cn headlines (56px+) with generous whitespace and dark backgrounds to maximize impact and readability.
• Do apply the three-tier shadow system (none, 0 3px 8px, 0 8px 24px) to create clear depth hierarchy without visual clutter.
• Do use full-radius (9999px) buttons for primary actions and DEFAULT (10px) radius for secondary containers to signal interaction priority.
• Do maintain 16px minimum horizontal padding on mobile and 40px on desktop to ensure content breathing room and prevent edge-touching text.
• Do apply 150ms ease-out transitions to all interactive state changes (hover, focus, active) for smooth, responsive feedback.

**Don't**

• Don't use cyan for body text, backgrounds, or passive elements—reserve it exclusively for interactive and brand-critical UI.
• Don't mix south-east-cn and gt-walsheim in the same line; use south-east-cn for headlines only and gt-walsheim for all body and UI copy.
• Don't apply shadows to buttons or inputs; use the cyan focus glow (0 0 5px 2px rgba(28, 220, 232, 0.5)) instead for interactive feedback.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break visual consistency.
• Don't place text directly on the dark background without sufficient contrast; always use white (#ffffff) or on-surface-variant (#e7e7e7) for legibility.
• Don't disable focus states or remove the cyan glow on interactive elements; accessibility and visual feedback are non-negotiable.