Zarya Legal Group

Overview

Zarya Legal Group is a nationwide Russian legal services firm serving individuals and businesses across 170+ branches. The design system embodies 'Corporate Clarity with Human Warmth'—a sophisticated yet approachable aesthetic that conveys professional authority without coldness. The brand operates in a high-stakes domain (bankruptcy, civil rights) where users seek reassurance and competence; the UI achieves this through a deep navy foundation (surface: #0a1428) paired with a confident primary blue (primary: #00489a) that signals trust and stability. Accent colors—a vibrant magenta (secondary: #ee2f53) for promotional highlights and a warm gold (tertiary: #ffc40d) for success states—inject personality and prevent the interface from feeling austere. The emotional response is one of calm confidence: 'I can trust this firm with my legal matter.'

The brand voice is direct, reassuring, and solution-focused. Zarya speaks in clear, declarative sentences without jargon—'Более 170 филиалов по всей РФ' (170+ branches nationwide) conveys scale and reach in plain language. The tone avoids both corporate stiffness and false friendliness; instead, it projects competence and availability. Example sentence in brand voice: 'Мы защитим ваши права и вернём вам спокойствие' (We will protect your rights and restore your peace of mind).

Colors

The color system is anchored in a deep, professional navy surface palette (surface: #0a1428, surface-container: #141f3a) that evokes trust, stability, and the gravitas of legal practice. This dark foundation is not cold or alienating; it's paired with high-contrast white text (on-surface: #ffffff) and warm accent colors to create visual warmth within a professional frame.

Primary (hex #00489a) is the brand's signature legal-authority blue, used exclusively on primary CTAs ('Консультация', 'Оставить заявку'), focus states, and key interactive elements. It reads as confident and trustworthy without aggression. Secondary (hex #ee2f53) is a vibrant magenta reserved for promotional badges, limited-time offers ('ВЫГОДА до 15 000 ₽'), and attention-grabbing highlights—it creates visual excitemen

Typography

The typography system uses Golos Text exclusively—a contemporary Russian typeface optimized for screen legibility and corporate contexts. The hierarchy spans from display (72px, 600 weight) for hero headlines down to label-sm (12px, 500 weight) for metadata and form hints. Display and headline-lg use a tight -0.02em letter-spacing to create visual density and authority; body text (16px, 400 weight) uses default spacing for readability. All headlines employ 600 weight to signal hierarchy; body copy uses 400 weight for neutral, accessible reading. Line heights are generous (1.5x to 1.75x font size) to ensure comfort on screens and accommodate Cyrillic diacritics. When small labels (12px) appear over busy backgrounds or promotional imagery, apply a text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to

Layout

The layout uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. Horizontal padding (gutter: 24px) is applied at all breakpoints to maintain breathing room. The page rhythm is built on a semantic spacing scale: lg (40px) separates major sections (hero, services, testimonials), md (24px) divides cards and content blocks, and sm (12px) provides internal breathing within components. The hero section spans full width with a dark navy background (surface: #0a1428) and uses display typography (72px) for the main headline; CTAs are positioned in the lower-left quadrant at 48px height with 18px vertical padding. Service cards are arranged in a 3-column grid on desktop, each 1fr width, with md spacing between columns. Form inputs use a fixed height of 48px with md paddin

Elevation & Depth

Depth is conveyed through a restrained shadow system and layered surface colors rather than dramatic drop shadows. Level 1 (Base): the surface background (surface: #0a1428) with no shadow, establishing the foundation. Level 2 (Standard Cards): surface-container (#141f3a) with a subtle shadow (box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15)) and a 1px border at outline-variant (#505560) to define edges. Level 3 (Elevated/Modals): surface-container-highest (#2a3555) with a deeper shadow (box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25)) and a 1px border. Hover states elevate cards from Level 2 to Level 3 by

Shapes

The shape philosophy is 'Refined Geometry'—rounded corners are used strategically to soften the corporate aesthetic while maintaining precision. Buttons and primary CTAs use lg (1rem / 16px) border-radius, creating a modern, approachable form that feels less rigid than sharp corners but more professional than fully rounded pill shapes. Cards and modal content use xl (1.5rem / 24px) border-radius to signal containment and elevation. Input fields use md (0.75rem / 12px) border-radius as a visual distinction from buttons—smaller radius signals a form element rather than an action. Badges and tags

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses primary (#00489a) background with white text, 48px height, 18px vertical padding, and lg border-radius (16px). On hover, the background shifts to primary-container (#0066b3) and the shadow elevates to lg (0 8px 24px rgba(0, 0, 0, 0.25)), creating a tactile lift. On active/press, the background darkens to #003d7a and shadow reduces to md. button-secondary uses a transparent background with a 2px primary border and primary text; on hover, the background fills with rgba(0, 72, 154, 0.08) without changing the border, maintaining visual distinction from primary. All buttons use label-md typography (14px, 600 weight) and transition all properties over 150ms cubic-bezier(0.4, 0, 0.2, 1) for smooth interaction f

Do's and Don'ts

**Do**

• Do use primary (#00489a) exclusively for primary CTAs and focus states—never use it for decorative elements or backgrounds.
• Do maintain the 24px gutter on all sides at desktop breakpoints; reduce to 16px on tablet and 12px on mobile to preserve the rhythm.
• Do apply the md shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to all cards and elevated surfaces; never use drop shadows larger than lg (0 8px 24px) except for full-screen modals.
• Do use Golos Text 600 weight for all headlines and 400 weight for body text; never mix weights within a single text block.
• Do ensure all interactive elements (buttons, inputs, links) have a minimum 48px height or width to meet touch-friendly accessibility standards.

**Don't**

• Don't use secondary (#ee2f53) or tertiary (#ffc40d) as primary button colors—reserve them for badges, highlights, and promotional elements only.
• Don't apply border-radius smaller than md (12px) to buttons or cards; sharp corners or tiny radii conflict with the Refined Geometry philosophy.
• Don't layer multiple shadows or use blur effects on text; the dark background already provides sufficient contrast without additional effects.
• Don't use system fonts or fallback sans-serif; always load Golos Text from Google Fonts to maintain brand consistency across all devices.
• Don't exceed surface-container-highest (#2a3555) for background colors—deeper colors reduce legibility and violate the Material 3 surface stack hierarchy.