Leaders Today

Overview

Leaders Today is a premium Russian-language publication serving urban elites, business leaders, and cultural influencers across Siberia and Europe. The design system embodies 'Editorial Authority with Warmth'—a philosophy that combines journalistic credibility with accessible, human-centered design. The aesthetic draws from print publishing traditions (bold serif headlines, generous whitespace, high-contrast layouts) while maintaining digital-first responsiveness. The burnt-orange primary color (#e64323) acts as the brand's signature accent, appearing on calls-to-action, section headers, and key interactive elements to signal premium content and editorial importance.

The brand voice is authoritative yet approachable: precise, opinionated, and grounded in real expertise. Tone vocabulary includes 'leaders,' 'energy,' 'authenticity,' and 'perspective'—never breathless or sensational. Example sentence in brand voice: 'Высокие технологии меняют стандарты красоты прямо сейчас' (High technologies are reshaping beauty standards right now).

Colors

The color system prioritizes editorial clarity and premium positioning through a high-contrast, neutral-dominant palette anchored by a distinctive burnt-orange accent. Primary (#e64323) is reserved exclusively for calls-to-action, section headers, and interactive focus states—it appears sparingly but commands attention. Secondary (#333333) provides the neutral foundation for navigation, body text, and structural elements, ensuring legibility at all sizes. Tertiary (#428bca) is used for supplementary links and informational highlights, creating visual hierarchy without competing with primary. The surface stack (white #ffffff down to light gray #cccccc) maintains editorial whitespace and prevents visual fatigue during long-form reading. On-surface text (#111111) ensures WCAG AAA contrast (18

Typography

The type system separates editorial content (Cuprum for headlines, Open Sans for body) to create visual rhythm and hierarchy. Cuprum, a geometric sans-serif, conveys modern authority and is used exclusively for display, headline-lg, and headline-md sizes (56px, 40px, 28px respectively) with tight line-heights (64px, 48px, 36px) and negative letter-spacing (-0.02em to -0.01em) to create visual impact and save vertical space. Open Sans handles all body and label typography (18px down to 11px), maintaining 1.4–1.7 line-height ratios for comfortable reading. Labels use 0.05em letter-spacing to enhance legibility at small sizes. Apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) on small labels (12px and below) when placed over images or colored backgrounds to ensure readability. Font weights foll

Layout

The layout system uses a 12-column responsive grid with a fixed container max-width of 1200px, maintaining editorial margins of 24px (gutter) on desktop and 12px on tablet. Page rhythm is established through consistent section spacing: 40px (lg) between major sections, 24px (md) between subsections, and 12px (sm) between related content blocks. Whitespace is treated as a design element—never fill empty space with decorative elements. The primary content column typically spans 8–9 columns, with a 3–4 column sidebar for related articles, magazine covers, or supplementary navigation. Hero sections use full-width layouts (1200px) with 30px padding on all sides, creating breathing room around featured images and headlines. Cards and content blocks maintain consistent 24px padding internally and

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than aggressive drop-shadows. Level 1 (Base/Surface): no shadow, white background (#ffffff). Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on article cards, input fields, and modals. Level 3 (Elevated/Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), reserved for full-screen modals, dropdown menus, and floating action elements. Hover states elevate cards from Level 2 to Level 3 with a 200ms ease-in-out transition. Section headers use no shadow but employ a solid background color (#333333) to

Shapes

The shape philosophy is 'Minimal Geometric Precision'—sharp corners and minimal rounding that conveys professionalism and editorial authority. Border-radius follows a strict scale: 2px (sm) for input fields and small UI elements, 4px (DEFAULT) for buttons and cards, 6px (md) for larger containers, and 9999px (full) for badges and pill-shaped elements only. Buttons use 4px radius with no border; inputs use 2px radius with a 1px solid border in outline-variant (#999999). Section headers and major containers use 0px radius (sharp corners) to reinforce structural hierarchy. The reasoning: sharp co

Components

Action Elements Buttons follow a two-tier system: primary (burnt-orange #e64323, white text, 12px Open Sans 600) for main calls-to-action like 'Новый номер' (New Issue), and secondary (dark gray #333333, light gray text, 14px Open Sans 400) for navigation and secondary actions. Primary buttons use 44px height with 12px 24px padding and 4px border-radius; hover state darkens to #d63a1a with a 200ms transition. Secondary buttons maintain the same height but use 11px 23px padding to accommodate different font sizes. Both button types must have a minimum touch target of 44px height per WCAG guidelines.

Containers & Surfaces Cards use white backgrounds (#ffffff) with 24px padding and 3px 8px rgba(0, 0, 0, 0.15) shadow. On hover, cards elevate to 8px 24px rgba(0, 0, 0, 0.12) shadow and

Do's and Don'ts

**Do**

• Do use primary (#e64323) exclusively for CTAs, focus states, and section headers—never for body text or backgrounds.
• Do maintain 24px gutter spacing on desktop and 12px on tablet; never collapse margins below 12px.
• Do apply Cuprum 700 for all headlines (display, headline-lg, headline-md) with -0.02em letter-spacing to create visual impact.
• Do use 4px border-radius on buttons and cards; sharp corners (#333333 headers) signal editorial authority.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and inputs; elevate to 0 8px 24px on hover with 200ms transition.
• Do ensure all interactive elements have a minimum 44px height for touch accessibility.
• Do use Open Sans 400–500 for body text at 14–18px with 1.4–1.7 line-height for comfortable reading.

**Don't**

• Don't use primary color (#e64323) for body text, backgrounds, or decorative elements—reserve it for interactive states only.
• Don't apply border-radius larger than 6px to cards or containers; the brand rejects rounded, playful aesthetics.
• Don't use drop-shadows larger than 24px blur radius; avoid glassmorphism or heavy depth effects that contradict editorial clarity.
• Don't mix typefaces within a single headline; Cuprum is for headlines, Open Sans is for body—never reverse this hierarchy.
• Don't collapse whitespace below 12px between sections; generous margins are core to the editorial aesthetic.
• Don't use secondary color (#333333) for CTAs or interactive elements; it's reserved for navigation and structural elements.
• Don't apply text-shadow to body text; use it only on small labels (12px and below) over images or colored backgrounds.