SVEL

Overview

SVEL is a 20-year industrial power and electrical engineering group serving critical infrastructure across Russia and beyond. The design system embodies **Industrial Confidence**—a visual language that combines technical precision with bold, unapologetic authority. The brand personality is direct, competent, and unwavering: SVEL doesn't whisper about capability; it demonstrates it through scale, clarity, and uncompromising quality. The UI evokes the industrial aesthetic of power plants and electrical substations—clean lines, high contrast, and functional beauty. Voice: precise, confident, never apologetic. Example: "Our 20-year track record powers critical infrastructure. We deliver on time, every time."

Colors

The color palette reflects industrial infrastructure: deep navy-grays (#35374e, #171930) anchor the system as the primary surface and text color, conveying stability and technical authority. The signature accent is a bold, unambiguous red (#ec1818), used exclusively on CTAs, alerts, and brand-critical interactive elements—it commands attention like a safety indicator on industrial equipment. Supporting neutrals (#9a9a9a, #a2a3ac, #777777) provide hierarchy and reduce cognitive load. White (#ffffff) serves as the primary surface, ensuring legibility of technical content. Primary (#ec1818) is applied to: call-to-action buttons (padding 20px 42px, border-radius 60px), active states, error indicators, and focus rings. Secondary (#35374e) is used for: primary buttons, navigation, and body text.

Typography

The type system uses RF Dewi and RF Dewi Extended exclusively, establishing a distinctive, technical voice. Display (80px, 700 weight, -0.02em tracking) anchors hero sections with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) create clear section hierarchy without visual noise. Body text (16px–18px, 400 weight, 24–28px line-height) prioritizes legibility for technical documentation and product descriptions. Labels use RF Dewi Extended at 14px (600 weight, 0.01em tracking) for buttons and 9px (600 weight, 0.05em tracking) for badges and micro-labels. Apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on display text overlaid on photographic backgrounds (hero sections) to ensure 4.5:1 contrast ratio. Use letter-spacing: -0.02em on display to tighten the

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on viewport. Container padding is 24px (md spacing) on desktop, reducing to 16px on tablet and 12px on mobile. Section separation uses lg spacing (40px) vertically to create breathing room between content blocks. The hero section occupies full viewport height with 100px top padding on h1 (from computed styles), establishing visual hierarchy immediately. White-space is used strategically: generous margins around CTAs (40px lg spacing), compact padding within cards (24px md spacing), and tight internal label spacing (12px sm spacing). Grid columns are fluid on mobile (single column), 2 columns on tablet, and 3–4 columns on desktop. The container max-width of 1280px ensures content remains scannable and prevent

Elevation & Depth

Depth is conveyed through a restrained shadow system and strategic use of contrast. Level 1 (Base): flat surfaces with no shadow, relying on color and border to define edges. Level 2 (Cards/Containers): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, modals, and lifted surfaces. Level 3 (Modals/Overlays): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), used for full-screen modals and critical overlays. The shadow system is minimal and functional—no blur-heavy glassmorphism or soft spreads. Elevation is reinforced through background color shifts: surface-container-high (#e9ecef) indica

Shapes

The shape philosophy is **Functional Precision**—rounded corners are minimal and purposeful, reflecting industrial design principles where every curve serves a function. Buttons use full border-radius (60px) to create pill-shaped affordances that feel modern yet industrial. Cards and containers use 4px (DEFAULT) or 8px (md) for subtle rounding that doesn't distract from content. Inputs use 4px (DEFAULT) with a 2px bottom border (rgba(53, 55, 78, 0.4)) instead of full enclosure, echoing technical line-drawing aesthetics. The back-to-top button uses 8px (md) to balance its 48px square footprint.

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background #ec1818, padding 20px 42px, border-radius 60px, font-size 14px, font-weight 600) use RF Dewi Extended for visual distinction. Hover state shifts to #ff6b6b with transition: background-color 0.2s ease. Secondary buttons (background #35374e) follow the same dimensions but use the darker palette. Tertiary buttons are transparent with a 2px solid border (#ec1818), filling on hover with rgba(236, 24, 24, 0.08). All buttons maintain 48px minimum height for touch targets.

Containers & Surfaces Cards use background #f9f9f9 (surface-container-lowest) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) and 24px padding. Hover state transitions to #e9ecef (surface-container-high) over 0.2s. Modals use full-

Do's and Don'ts

**Do**

• Do use #ec1818 (primary red) exclusively on CTAs and critical interactive elements—it's the brand's signature accent and must remain distinctive.
• Do maintain 48px minimum height on all interactive elements to ensure touch-friendly targets across devices.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to elevated surfaces (cards, modals) for consistent depth without visual noise.
• Do use RF Dewi Extended for button labels and badges to reinforce technical authority and visual hierarchy.
• Do respect the 1280px container max-width and 24px gutter spacing to maintain content legibility and scanability.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) on display text over photographic backgrounds to ensure 4.5:1 contrast.

**Don't**

• Don't use rounded corners >12px except on CTAs—excessive rounding dilutes the industrial precision aesthetic.
• Don't apply multiple shadow layers or glassmorphism effects; the system uses a single, functional shadow per elevation level.
• Don't introduce new accent colors; #ec1818 is the sole brand red—all alerts, CTAs, and focus states must use this hex.
• Don't use font families other than RF Dewi and RF Dewi Extended; system fonts undermine the technical brand voice.
• Don't exceed 75 characters per line on body text; use the 1280px container and 12-column grid to enforce readability.
• Don't apply transparency or gradients to primary surfaces (#ffffff, #35374e); maintain solid, high-contrast backgrounds for clarity.