Avtovykup Odessa

Overview

Avtovykup Odessa is a rapid automotive buyback service brand that combines technical precision with emergent urgency—designed for time-pressed vehicle owners seeking immediate, fair-market transactions. The design system embodies 'Functional Minimalism with Accent Urgency': a clean, professional white canvas punctuated by a vibrant emerald green (#10b981) that signals trust, growth, and action. The brand personality is direct and reassuring—no jargon, no delays. The UI conveys speed ("5-minute appraisal", "24/7 intake") through tight spacing, bold typography, and a dark-overlay hero that anchors the user's attention on the call-to-action. Voice example: "Your car, your price, your timeline—we handle the rest in one hour."

Colors

The color system is built on a light, neutral foundation (#ffffff surface, #f9fafb surface-dim) that conveys professionalism and clarity, anchored by a signature emerald primary (#10b981) used exclusively on CTAs, active states, and key accent elements. Primary (#10b981) appears on the main 'ЗАЯВКА' (Application) button, form highlights, and status indicators—it is the visual signal of urgency and trust. Secondary (#444ce7, a deep indigo) supports secondary actions and highlights, while tertiary (#f59e0b, amber) is reserved for warnings or secondary callouts. The dark inverse surface (#1e293b) is used for hero overlays and high-contrast sections, paired with inverse-on-surface (#f1f5f9) for white text. On-surface (#1d2939) is the primary text color for body copy and headings on light backg

Typography

The type system pairs Roboto (700 weight) for all display and headline levels, signaling authority and precision, with Open Sans (400 weight) for body and label text, ensuring legibility at small sizes. Display (48px, 700, -0.02em letter-spacing) anchors the hero with the main value proposition; headline-lg (36px, 700) breaks up major sections; headline-md (28px, 700) introduces subsections. Body-lg (18px, 400) and body-md (16px, 400) carry descriptive copy and form labels. Label-md (14px, 600) and label-sm (12px, 500) are used for buttons, badges, and metadata. All headlines use negative letter-spacing (-0.01em to -0.02em) to tighten the visual weight and convey urgency. On small labels over busy backgrounds (e.g., badges on dark overlays), apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3)

Layout

The page uses a fluid 12-column grid with a max-width of 1280px, centered with auto margins. The hero section spans full-width with a dark overlay (rgba(30, 41, 59, 0.95)) and background image, creating a high-contrast stage for the headline and form. Section spacing follows the lg token (40px) between major blocks, with md (24px) used for internal card and list spacing. The form container (right side of hero) uses a semi-transparent dark background with 24px padding and a 1px primary-tinted border, creating a visual 'frame' that draws the eye. Container max-width is 1280px; gutter (24px) is applied to left/right margins on mobile and tablet. White-space is generous but purposeful: the hero headline has 56px line-height to breathe, while form fields use 12px vertical padding to remain comp

Elevation & Depth

Depth is achieved through a layered shadow and border system that avoids heavy drop-shadows in favor of subtle, directional lighting. Level 1 (Base): flat white surface (#ffffff) with no shadow. Level 2 (Cards & Inputs): 0 1px 3px rgba(0, 0, 0, 0.08) with a 1px border in outline-variant (#94a3b8), creating a soft, recessed appearance. Level 3 (Elevated Cards & Modals): 0 4px 12px rgba(0, 0, 0, 0.12) with the same border, lifting the element slightly. Level 4 (Hero Overlay & Form Container): a semi-transparent dark background (rgba(30, 41, 59, 0.95)) with a 1px border in primary-tinted rgba (rg

Shapes

The shape philosophy is 'Soft-Technical Precision': rounded corners are used sparingly and strategically to soften the professional aesthetic without sacrificing clarity. Buttons and primary CTAs use md (0.75rem / 12px) border-radius, balancing approachability with authority. Cards and containers use lg (1rem / 16px) for a slightly more relaxed appearance. Input fields use DEFAULT (0.5rem / 8px) to remain compact and form-like. Badges and pills use full (9999px) for a modern, badge-like appearance. The hero section and form container use lg (1rem / 16px) to echo the card aesthetic. This gradua

Components

Action Elements Buttons are the primary interaction driver. The button-primary component uses {colors.primary} (#10b981) background with {colors.on-primary} (white) text, label-md typography, md border-radius (12px), and 12px vertical / 24px horizontal padding, resulting in a 48px height. On hover, the background darkens to #059669 and the shadow expands to 0 4px 16px rgba(16, 185, 129, 0.3), with a -1px vertical translate to lift the button. On active/press, the background becomes #047857 with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)) to create a pressed effect. Button-secondary uses a transparent background with a 2px primary border and primary text, inverting on hover to show the primary-container background. All button transitions use 200ms ease-out timing.

Containe

Do's and Don'ts

**Do**

• Do use the primary green (#10b981) exclusively on CTAs, active states, and urgency indicators—never on passive elements or backgrounds.
• Do maintain the 48px button height and 24px horizontal padding across all primary actions for consistent touch targets and visual rhythm.
• Do apply the dark overlay (rgba(30, 41, 59, 0.95)) with backdrop-filter: blur(8px) to form containers and modals to create visual separation and urgency.
• Do use Roboto 700 for all headlines and display text to convey authority; reserve Open Sans 400 for body copy and labels.
• Do pair every interactive element with a subtle shadow (0 2px 8px rgba(16, 185, 129, 0.2) for primary, 0 1px 3px rgba(0, 0, 0, 0.08) for secondary) to signal clickability.
• Do use the lg spacing token (40px) between major sections and md (24px) between cards and internal elements for consistent visual rhythm.

**Don't**

• Don't use the primary green on non-interactive elements, backgrounds, or text that isn't a CTA—it dilutes urgency and confuses the visual hierarchy.
• Don't apply heavy drop-shadows (> 0.15 opacity) or blur effects to buttons; keep shadows subtle (0.08–0.12 opacity) to maintain clarity.
• Don't mix Roboto and Open Sans weights within a single headline or body paragraph; maintain consistent weight pairing (Roboto 700 for headlines, Open Sans 400 for body).
• Don't use border-radius > lg (16px) on buttons or inputs; keep them sharp and technical to reinforce precision and trust.
• Don't place text directly on the dark overlay without a 1px border or shadow; always add a 1px primary-tinted border (rgba(16, 185, 129, 0.3)) to form containers to signal interactivity.
• Don't exceed 1280px container max-width; maintain the 12-column grid structure and 24px gutter for responsive consistency across breakpoints.