CarX Technologies

Overview

CarX Technologies is a high-performance racing game brand that channels the adrenaline and precision of motorsport into digital experiences. The design system embodies 'Aggressive Minimalism'—a movement that pairs stark, high-contrast layouts with explosive accent colors and bold, condensed typography to evoke speed, intensity, and competitive energy. The brand serves hardcore racing enthusiasts and casual gamers alike, delivering visceral drift mechanics wrapped in a cinematic, dark-themed hero experience punctuated by vivid red and yellow call-to-action elements.

The voice is commanding and direct: short, punchy sentences that mirror the rapid-fire pace of racing. Vocabulary leans into motorsport vernacular (drift, apex, throttle, early access) without pretension. The tone is confident, never apologetic, with an undercurrent of playful competition. Example: 'Immerse yourself in the world of RACING GAMES—master the drift, dominate the track, claim your crown.'

Colors

The color palette is built on high-contrast drama: a clean white surface (#ffffff) serves as the neutral canvas, while three aggressive accent colors command attention. Primary red (#e50026) is the signature brand color, deployed exclusively on critical CTAs (CARX STORE button, ACCEPT COOKIES), creating an unmistakable visual anchor that demands interaction. Secondary yellow (#ffd717) appears as a supporting accent for highlights and secondary UI elements, adding warmth and energy without competing with red. Tertiary blue (#2299dd) is reserved for tertiary actions, progress indicators, and supporting UI. The surface stack uses soft grays (#e9ecef for containers, #d0d0d0 for highest) to maintain visual hierarchy without introducing competing colors. On-surface text is pure black (#000000) f

Typography

The type system is built on two distinct families: Oswald (a condensed, geometric sans-serif) for all headlines and labels, and PT Sans Caption (a humanist sans-serif) for body text. This pairing creates visual tension—Oswald's tight letter-spacing (-0.02em on display, 0.02em on labels) and heavy weight (700) convey urgency and power, while PT Sans Caption's generous line-height (28px on body-lg, 22px on body-md) ensures readability and breathing room. Display text (72px, 700 weight) anchors hero sections with maximum impact; headline-lg (48px, 700) breaks up content zones. Body text defaults to 14px at 400 weight with 22px line-height, providing comfortable reading on both desktop and mobile. All label text uses Oswald at 17px, 700 weight with 0.02em letter-spacing to maintain the aggress

Layout

The page uses a 12-column grid with a 1280px max-width container, maintaining a fluid layout on mobile and tablet. The spacing scale is semantic: lg (40px) separates major content sections (hero from product showcase), md (24px) is the default gutter between cards and components, sm (12px) is used for internal component padding. The hero section spans full-width with a cinematic background image (the red racing car), overlaid with white text positioned on the left third of the viewport. Navigation is fixed at the top with minimal padding (0px) to maximize screen real estate. The cookie consent banner sits at the bottom with md spacing (24px) between the text and buttons. All interactive elements maintain a minimum 48px height for touch targets. White-space is aggressive—sections are separa

Elevation & Depth

Depth is conveyed through subtle shadows and strategic use of opacity rather than layering. The base elevation (sm: 0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and input fields to separate them from the white surface. Medium elevation (md: 0 4px 12px rgba(0, 0, 0, 0.08)) is used on hover states and dropdown panels (e.g., the custom select dropdown with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)). Large elevation (lg: 0 16px 40px rgba(0, 0, 0, 0.12)) is reserved for modals and overlays. The progress bar uses a glow effect (box-shadow: 0 0 10px #29d, 0 0 5px #29d) to signal active loading

Shapes

The shape philosophy is 'Angular Precision'—a nod to the sharp, geometric forms of racing vehicles and track layouts. Buttons and primary CTAs use zero border-radius (borderRadius: 0px) to reinforce the aggressive, motorsport-inspired aesthetic. Secondary containers and cards use subtle rounding (md: 0.75rem, approximately 12px) to soften the interface without compromising the sharp brand identity. Input fields and dropdowns use DEFAULT (0.5rem, 8px) rounding for a balanced, functional appearance. The custom select dropdown uses 4px border-radius to maintain consistency with form elements. Bad

Components

Action Elements Buttons are the primary interaction pattern. The primary button (button-primary) uses {colors.primary} (#e50026) background with white text, Oswald 17px 700 weight, 10px vertical and 24px horizontal padding, and zero border-radius. On hover, the background shifts to {colors.primary-container} (#ff4d5f) with a 200ms ease transition. The secondary button (button-secondary) uses a semi-transparent white background (rgba(217, 217, 217, 0.1)) with a 1px border at rgba(255, 255, 255, 0.3), maintaining white text for use over dark hero backgrounds. Both buttons maintain a 48px minimum height for touch accessibility.

Containers & Surfaces Cards use {colors.surface-container} (#e9ecef) background with {rounded.md} (12px) border-radius and {spacing.md} (24px) padding. On hov

Do's and Don'ts

**Do**

• Do use {colors.primary} (#e50026) exclusively on critical CTAs—CARX STORE, ACCEPT COOKIES, and primary actions. Never dilute the red by using it on secondary elements.
• Do apply Oswald typography at 700 weight for all headlines and labels to maintain the aggressive, condensed motorsport aesthetic.
• Do maintain zero border-radius on primary buttons and CTAs to reinforce the sharp, angular brand identity.
• Do use the lg spacing (40px) to separate major content sections, creating visual breathing room that emphasizes minimalism.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on small labels overlaid on photographic backgrounds to ensure contrast.
• Do use the 12-column grid with 1280px max-width to maintain consistent layout rhythm across all screen sizes.

**Don't**

• Don't use rounded corners on primary buttons or CTAs—maintain zero border-radius to preserve the aggressive motorsport aesthetic.
• Don't apply {colors.primary} (#e50026) to non-interactive elements like body text or backgrounds; reserve it exclusively for high-priority actions.
• Don't mix Oswald and PT Sans Caption weights arbitrarily—use Oswald 700 for all headlines/labels and PT Sans Caption 400 for body text.
• Don't reduce the visual contrast between surface colors and text; maintain pure black (#000000) on-surface text for maximum legibility.
• Don't add shadows to buttons—rely on color contrast and typography weight to signal interactivity.
• Don't use opacity below 35% for disabled states; anything lighter becomes illegible and confuses users about element status.