Objektiv

Overview

Objektiv is a B2B SaaS platform for retail, hospitality, and service businesses that combines AI-powered video analysis with real-time conversation quality monitoring. The brand embodies 'Technical Minimalism'—a design philosophy that strips away decorative elements to reveal functional clarity, using a bold accent color (vivid orange #ff5b24) against a warm, neutral palette to create visual hierarchy without visual noise. The UI evokes a sense of professional control and transparency: users feel empowered to monitor their teams with precision, not surveillance anxiety. The emotional response is calm confidence—the interface says 'you're in control, and the data is clear.'

The brand voice is direct, pragmatic, and slightly conversational. Objektiv speaks in active voice, uses concrete metrics over abstractions, and avoids corporate jargon. The vocabulary favors action words (слушает, оценивает, приходит) and business outcomes (качество, внимание, результат). Example sentence in brand voice: 'Каждый разговор записывается и оценивается в тот же день — вы видите результат, не ждёте недели.'

Colors

The color system is built on a warm, light foundation (#fafaf7 surface) paired with a high-contrast dark ink (#121210) for text, creating 4.5:1+ WCAG AA compliance on all body copy. Primary accent is a vivid, energetic orange (#ff5b24, RGB 255 91 36) used exclusively for call-to-action buttons, focus states, and brand-critical interactive elements—this color is the visual signature of the product and appears on the hero CTA 'Записаться' and throughout the interface to signal actionable moments. Secondary accent (#2aabee, a sky blue) supports data visualization and secondary actions, while tertiary (#6a4dff, a purple) is reserved for status indicators and advanced UI states. The surface stack progresses from #fafaf7 (base) through #efefea (container-lowest) to #e0dfda (container-highest), p

Typography

The type system uses Onest (a geometric, humanist sans-serif from Google Fonts) for all UI text, paired with JetBrains Mono for labels, timestamps, and data-dense contexts. The hierarchy is built on a 50px headline (fontWeight 500, lineHeight 56px, letterSpacing -0.04em) that anchors hero sections, stepping down through 42px headlines (fontWeight 500) for section titles, 20px title-lg (fontWeight 600) for card headers, and 16px body-md (fontWeight 400, lineHeight 24px) for body copy. The 15px label-md (fontWeight 500, letterSpacing 0.01em) is used on buttons and form labels to signal interactivity. Mono labels at 11px (JetBrains Mono, fontWeight 400, letterSpacing 0.06em) appear on timestamps, status badges, and technical metadata (e.g., 'REC · Стойка'). All headlines use negative letter-s

Layout

The page uses a fluid 12-column grid with a max-width of 1280px, centered with auto margins and 24px horizontal gutters on desktop (reduced to 20px on tablet, 16px on mobile). The hero section spans full width with a 2-column split at lg breakpoint (1024px+): left column for headline and CTA, right column for the dark notification preview card. Section spacing follows the lg token (40px) between major content blocks, with md spacing (24px) for subsections and sm spacing (12px) for component-level gaps. The container-max-width of 1280px is applied via the .section utility class, ensuring consistent horizontal rhythm across all pages. White-space is generous but purposeful: the hero headline has 5px margin-top before the lead paragraph, and the lead paragraph has 8px margin-top before the CT

Elevation & Depth

Depth is conveyed through a layered shadow and background system rather than pure darkness. Level 1 (Base): surface #fafaf7 with no shadow, representing the page canvas. Level 2 (Standard Card): surface-container #efeeea with box-shadow 0 3px 8px rgba(0, 0, 0, 0.15), used for content cards and form containers. Level 3 (Elevated/Modal): surface-container-high #e9e8e3 with box-shadow 0 8px 24px rgba(0, 0, 0, 0.12), used for modals, popovers, and floating panels. The dark notification preview card (bg-dark, #121210) uses a radial-gradient overlay (rgba(143, 180, 224, 0.18) at 85% 0%, rgba(255, 91

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used strategically to soften hard edges and guide visual flow, but never so aggressively as to obscure function. Buttons use 22px border-radius (rounded.2xl, 1.375rem) to create a pill-like appearance that signals 'clickable' without being cartoonish. Cards use 30px border-radius (rounded.3xl, 1.875rem) for primary content containers, creating a softer, more approachable feel. Input fields use 16px border-radius (rounded.lg, 1rem) to balance usability (easy to tap on mobile) with visual hierarchy (less prominent than buttons). S

Components

Action Elements Buttons are the primary interaction pattern. The button-primary component uses background #ff5b24, text color #121210, 15px Onest fontWeight 500, 22px border-radius, 14px vertical padding + 16px horizontal padding, and 48px height. On hover, the background shifts to #ff6f3d with a 200ms transition. On focus, a 4px ring of rgba(255, 91, 36, 0.2) appears at 2px offset, creating a glowing effect. The button-secondary variant uses transparent background with a 1px border at #d0d0d0, same text color as primary, and 40px height (11px vertical + 18px horizontal padding). Secondary buttons are used for non-critical actions like 'Learn more' or 'Cancel'.

Containers & Surfaces Cards are the primary content container. The card component uses background #efeeea (surface-contai

Do's and Don'ts

**Do**

• Do use the primary orange (#ff5b24) exclusively on CTAs, focus states, and brand-critical moments—never on passive elements or backgrounds.
• Do apply 200ms cubic-bezier(0.2, 0, 0, 1) transitions to all interactive state changes (hover, focus, active) for smooth, predictable feedback.
• Do maintain 4.5:1+ contrast ratio on all body text by pairing #121210 text on #fafaf7+ backgrounds; test with WCAG AA checkers.
• Do use the surface-container stack (#efeeea to #e0dfda) to create visual depth in cards and modals; never use pure white or pure black for surfaces.
• Do apply 22px border-radius on buttons and 30px on primary cards to signal hierarchy and approachability without sacrificing professionalism.
• Do use JetBrains Mono at 11px with 0.06em letter-spacing for timestamps, labels, and technical metadata to create visual distinction from body text.

**Don't**

• Don't use secondary or tertiary colors on primary CTAs—the orange accent is the brand signature and must remain exclusive to critical interactions.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on standard cards; excessive shadows flatten the visual hierarchy and feel dated.
• Don't mix Onest and JetBrains Mono in the same line of body text; reserve mono for labels, timestamps, and data-dense contexts only.
• Don't use border-radius smaller than 16px on interactive elements (buttons, inputs); small radii feel cold and reduce tap-target clarity on mobile.
• Don't apply focus rings smaller than 4px or with opacity below 0.15; weak focus indicators fail accessibility and confuse keyboard users.
• Don't use the surface-variant color (#e9ecef) for primary content backgrounds; it's reserved for disabled states and secondary UI only.