Polytechnik

Overview

Polytechnik is a Russian industrial B2B e-commerce platform specializing in seals, gaskets, and elastomer components for automotive and machinery applications. The brand embodies 'Technical Pragmatism'—a design aesthetic that prioritizes clarity, scanability, and rapid task completion over decorative flourish. The UI conveys industrial reliability through a bold navy-and-cyan color palette (primary #1f2283, secondary accent #00a8e8) paired with clean geometric layouts and high-contrast typography. Users—procurement specialists, engineers, and fleet managers—expect instant access to product specifications, pricing, and order placement without friction.

The voice is direct, professional, and solution-oriented. Polytechnik speaks in the language of technical specifications and delivery timelines, never in marketing hyperbole. Example sentence: 'Доставка в Нижний Новгород: 2–3 рабочих дня. Уточните наличие перед заказом.' The brand personality is trustworthy, efficient, and deeply familiar with the constraints of industrial procurement—long lead times, bulk ordering, and the need for reliable supplier relationships.

Colors

The color system is anchored by a deep navy primary (#1f2283) used exclusively for primary CTAs, active navigation states, and brand-critical interactive elements. This color appears on the main search button, the 'ОФОРМИТЬ ЗАКАЗ' (Place Order) CTA, and the primary navigation bar background. The secondary accent is a vivid cyan (#00a8e8), deployed on hover states, secondary buttons, and status indicators to create visual rhythm without competing with the primary. A supporting blue (#1200ff) is reserved for links and secondary CTAs like 'Напишите нам, мы онлайн!' (Write to us, we're online!). The surface stack uses a neutral grayscale: #ffffff (surface), #f5f5f5 (surface-dim), #dddddd (surface-container-low), #999999 (surface-container-high), and #333333 (on-surface text). Error states use

Typography

The type system uses PT Sans as the single typeface family across all scales, with weight variation (300, 400, 600, 700) driving hierarchy rather than font-family switching. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major page titles; headline-lg (40px, 600 weight) anchors section breaks; headline-md (28px, 600 weight) introduces product categories and news items. Body text defaults to 15px at 300 weight (matching the live DOM), creating a light, airy reading experience suited to dense product listings. Labels and buttons use 14px at 600 weight with 0.01em letter-spacing to add visual weight and improve scannability in navigation and form contexts. When displaying product specifications or technical data, use body-md (15px, 300 weight, 24px line-

Layout

The page layout follows a 12-column grid with a fixed max-width of 1199px, centered on the viewport. The header occupies a full-width band (background: #1f2283) with 24px vertical padding and 24px horizontal gutter, containing the logo, search bar, and contact info. The main content area uses a two-column layout: a 3-column left sidebar (categories, filters) and a 9-column right content zone (product grid, news feed). Spacing between major sections (categories, featured products, news) is lg (40px) to create visual breathing room. Cards within product grids use md (24px) padding and are separated by md (24px) gaps. The search bar sits at 860px width (observed container max-width), centered in the header, with a 4px border-radius and a cyan search button (background: #00a8e8) positioned at

Elevation & Depth

Depth in this system is achieved through subtle shadows and strategic use of borders rather than layered glassmorphism. The base layer (Level 1) is the white surface (#ffffff) with no shadow. Level 2 (cards, dropdowns, modals) applies a 0 3px 8px rgba(0, 0, 0, 0.15) shadow with a 1px solid border in #e0e0e0 (surface-variant), creating a gentle lift. Level 3 (hover states, expanded modals, overlays) escalates to 0 2px 9px rgba(0, 0, 0, 0.6)—a more pronounced shadow that signals interactive elevation. On-hover transitions for cards should animate the box-shadow property over 200ms with ease-in-o

Shapes

The shape language is 'Geometric Precision'—sharp, minimal corner radii that convey technical competence and industrial efficiency. Buttons use a 4px border-radius (DEFAULT), creating a subtle softness without compromising the utilitarian aesthetic. Cards and containers use 6px (md), providing slightly more breathing room for larger surfaces. Input fields and small UI elements default to 4px (DEFAULT). The search button and prominent CTAs use 4px to maintain visual consistency with the button family. Avoid full-radius (9999px) except for badge components and icon buttons, where a circular or p

Components

Action Elements Buttons follow a strict hierarchy: primary buttons use navy (#1f2283) background with white text, 40px height, 8px vertical and 20px horizontal padding, and a 4px border-radius. On hover, the background shifts to #3c3fa8 (primary-container) with a 200ms ease-in-out transition. Secondary buttons use cyan (#00a8e8) background with the same padding and height. Ghost buttons (outline style) have a transparent background, navy text, and a 1px solid navy border; on hover, they fill with #dddddd (surface-container-low). All buttons use PT Sans 14px at 600 weight with 0.01em letter-spacing. The search button is a special case: cyan background (#00a8e8), white text, 36px height, 12px padding, and positioned absolutely within the search input container.

Containers & Surfaces

Do's and Don'ts

**Do**

• Do use the navy primary (#1f2283) exclusively for CTAs, active states, and brand-critical elements—never dilute it with secondary uses.
• Do maintain a minimum 4.5:1 contrast ratio between text and background; test small labels (≤12px) over product images with a text-shadow 0 1px 2px rgba(0, 0, 0, 0.1).
• Do apply 200ms ease-in-out transitions to all hover state changes (background-color, box-shadow, border-color) for a polished, responsive feel.
• Do use PT Sans exclusively across all scales; weight variation (300, 400, 600, 700) drives hierarchy, not font-family switching.
• Do organize product listings in a 3-column grid on desktop with 24px gaps between cards; use 6px border-radius and 1px solid #e0e0e0 borders.
• Do reserve the cyan accent (#00a8e8) for secondary CTAs, hover states, and status indicators—never use it as a primary background.

**Don't**

• Don't use rounded corners larger than 6px on cards or containers; the brand voice is technical and precise, not soft or playful.
• Don't apply shadows to text elements; use text-shadow only on small labels over busy backgrounds, never on body copy or headlines.
• Don't mix typefaces; PT Sans is the single family across all scales. Avoid system fonts, serif fonts, or monospace fonts in the UI.
• Don't place interactive elements (buttons, links) without a clear hover state; every interactive element must have a 150–200ms transition to a visually distinct state.
• Don't use the error color (#a94442) for non-error content; reserve it exclusively for validation messages, alerts, and destructive actions.
• Don't exceed a 1199px container max-width; the layout is optimized for this constraint and wider layouts break the visual hierarchy.