Инженеры Продаж

Overview

Инженеры Продаж is a B2B digital marketing agency serving Russian enterprises with search engine optimization and lead generation services. The design system embodies "Technical Precision Minimalism"—a movement that prioritizes conversion clarity, data-driven hierarchy, and unambiguous call-to-action patterns over decorative flourish. The interface evokes confidence and expertise: deep charcoal backgrounds (#1d1f20) contrast sharply with electric blue accents (#2722f1), creating a high-contrast, no-nonsense aesthetic that signals technical competence and business focus. Every visual decision serves conversion: button placement, color contrast ratios (7.2:1 on primary CTAs), and typography scale are calibrated for B2B decision-makers scanning quickly.

The brand voice is direct, results-oriented, and data-backed. Vocabulary emphasizes outcomes ("лидов", "продаж", "рейтинг") over process. Tone avoids hype; instead, it states facts with quiet authority. Example sentence in brand voice: "Мы занимаем первое место в рейтинге SEO-агентств по России и СНГ — это результат 2025 года, подтвержденный независимыми рейтингами."

Colors

The color system is built on a dark-first foundation optimized for B2B SaaS and agency websites. Surface (#1d1f20) and its container stack (surface-container #1f2224, surface-container-high #292c2f) create a sophisticated, low-fatigue reading environment for long-form content and data tables. The primary accent, electric blue (#2722f1), is reserved exclusively for high-intent CTAs ("Получить консультацию", "Получить коммерческое предложение") and interactive states. This color achieves a 7.2:1 contrast ratio against white text, meeting WCAG AAA standards for accessibility and ensuring visibility in all contexts. Secondary (#eaeaea) and tertiary (#c7d2e9) provide supporting hierarchy: secondary is used for neutral UI elements and borders, while tertiary (a softer blue-gray) appears in secon

Typography

The type system pairs GoshaSans (a geometric sans-serif with strong personality) for display and headline levels with Montserrat (a versatile, open-source humanist sans-serif) for body and label text. This pairing creates visual distinction between marketing-facing headlines (GoshaSans, 80px, -0.02em letter-spacing for tight, confident presence) and functional UI copy (Montserrat, 16px, 0.015em letter-spacing for legibility). Display (80px, 700 weight, 88px line-height) is used exclusively for hero headlines and major section titles; headline-lg (48px, 700 weight) anchors subsections; headline-md (32px, 700 weight) introduces card groups and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is applied to introductory paragraphs and case study descriptions, while body-md (16px, 4

Layout

The layout system uses a 12-column grid with a max-width of 1280px, maintaining consistent horizontal rhythm across all breakpoints (1200px, 960px, 640px, 480px). Vertical spacing follows an 8px unit scale: lg (40px) separates major sections, md (24px) groups related content blocks, and sm (12px) provides breathing room within components. The gutter (24px) defines left/right padding on the container, ensuring content never touches viewport edges. Hero sections occupy 100vh or 80vh depending on context, with the primary CTA positioned at 40% from the top (using md spacing for internal padding). Case study cards and testimonial blocks use a 2-column grid on desktop (960px+), collapsing to single-column on tablet and mobile. White-space philosophy: generous margins between sections (lg spacin

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than bright highlights or gradients. Level 1 (Base): no shadow; surface color alone (#1d1f20) establishes the foundation. Level 2 (Cards, inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) creates a soft, close elevation for interactive elements like cards and form fields. Level 3 (Modals, dropdowns, popovers): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2) with a 1px border at rgba(255, 255, 255, 0.1) creates distinct separation from the background. Hover states on cards transition from Level 2 to Level 3 over 200ms (cubic-bezier(0.4, 0,

Shapes

The shape philosophy is "Functional Softness"—rounded corners are applied strategically to reduce visual harshness while maintaining geometric clarity. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a pill-like appearance that draws the eye and signals clickability. Cards and containers use md (0.75rem / 12px) border-radius, a subtle curve that softens edges without appearing playful. Input fields use DEFAULT (0.5rem / 8px) border-radius, a minimal curve that maintains form-like precision. Badges and small UI elements use full (9999px) border-radius for a fully rounded a

Components

Action Elements Buttons are the primary conversion mechanism. button-primary uses #2722f1 background with white text, 48px height, 16px horizontal padding, and lg (16px) border-radius. On hover, the background transitions to primary-fixed-dim (#3a37e1) over 200ms; on active, it darkens to #1a17c0 and gains an lg shadow (0 8px 24px rgba(0, 0, 0, 0.2)). The label-md typography (14px, 600 weight) ensures text is compact and scannable. button-secondary mirrors the primary button structure but uses secondary (#eaeaea) background with on-secondary (#1d1f20) text and a 1px border at outline-variant (#454545). button-ghost is transparent with a 1px primary-colored border and primary text; on hover, it gains a subtle rgba(39, 34, 241, 0.08) background. All buttons include a 200ms transition on

Do's and Don'ts

**Do**

• Do use primary (#2722f1) exclusively for high-intent CTAs and interactive focus states; never use it for passive UI elements or backgrounds.
• Do maintain at least 4.5:1 contrast ratio between text and background; test all color combinations with WCAG contrast checkers before deployment.
• Do apply lg (16px) border-radius to all primary buttons and md (12px) to cards; this consistency signals affordance and reduces cognitive load.
• Do use GoshaSans for headlines (display, headline-lg, headline-md) and Montserrat for body text; never mix these families within a single text block.
• Do separate major sections with lg spacing (40px); this white-space hierarchy guides the eye and improves scannability for B2B audiences.
• Do transition all interactive states (hover, active, focus) over 200ms using cubic-bezier(0.4, 0, 0.2, 1); this timing feels responsive without appearing laggy.

**Don't**

• Don't use primary (#2722f1) on more than 12% of the viewport; overuse dilutes its conversion power and creates visual fatigue.
• Don't apply drop-shadows exceeding 24px blur radius; this breaks the grounded, professional aesthetic and makes the interface feel disconnected.
• Don't mix rounded and sharp corners on related components (e.g., button and input in the same form); maintain consistent border-radius within component families.
• Don't use system fonts (Arial, sans-serif) as fallbacks without specifying GoshaSans or Montserrat first; the fallback chain must preserve the intended type personality.
• Don't apply text-shadow to body text or labels; reserve text-shadow for display-level headlines over photographic backgrounds only.
• Don't animate state changes faster than 150ms or slower than 300ms; transitions outside this range feel either jarring or sluggish to B2B users accustomed to desktop software.