Emsisoft

Overview

Emsisoft is an enterprise cybersecurity platform designed for distributed IT teams managing heterogeneous endpoint environments. The brand embodies a "Technical Pragmatism" aesthetic: clean, authoritative, and human-centered. The UI prioritizes clarity and efficiency over visual ornamentation, using a restrained palette of professional blues (#0375b0 primary), warm action oranges (#f58634), and success greens (#37a43c) to guide users through complex security workflows. The emotional response is one of competence and reassurance—users trust that Emsisoft will handle threats while they focus on business continuity.

The brand voice is direct, precise, and jargon-aware without being condescending. Emsisoft speaks to IT professionals as peers: it explains *what* threats exist and *why* remediation matters, but assumes technical literacy. Tone examples: "Centrally managed cybersecurity for workstations, servers and remote teams" (clear value proposition); "Don't be the next victim" (urgency without panic); "Emsisoft simplifies your security" (confidence, not hype). The vocabulary favors concrete nouns (endpoints, malware, remediation) over abstract marketing language.

Colors

The color system is built on a foundation of trust and action. **Primary (#0375b0)** is a professional mid-tone blue used for navigation, active states, and key interactive elements—it signals authority and stability. **Secondary (#f58634)** is a warm, energetic orange reserved for primary CTAs ("Buy Now", "Get Started") and alerts requiring immediate attention; it creates visual urgency without aggression. **Tertiary (#37a43c)** is a balanced green used for success states, confirmations, and positive outcomes (e.g., "Free 30-Day Trial"). **Error (#d84315)** is a deep red-orange for critical warnings and threat indicators.

The surface stack uses near-white neutrals (#ffffff, #fafafa, #ebebeb) to maintain clarity and reduce cognitive load in data-dense interfaces. **On-surface (#2b3438)**

Typography

The type system pairs **HK Grotesk** (geometric sans-serif, 700 weight) for all headings and labels, creating a distinctive, modern voice that stands apart from body copy. **Segoe UI** (humanist sans-serif, 400 weight) is used for body text and UI labels, ensuring legibility at small sizes and across Windows/Mac/web platforms. The hierarchy is steep: display (56px), headline-lg (48px), headline-md (32px), body-lg (18px), body-md (17px), label-md (17px, 700 weight). This creates clear visual separation between sections and reduces scanning time for IT professionals reviewing dashboards. Letter-spacing is tight (-0.02em on display, -0.015em on headline-lg) to reinforce the technical, efficient brand personality. On small labels over busy backgrounds (e.g., status badges), apply text-shadow:

Layout

The layout uses a **fixed-width container model** with a max-width of 1320px and 15px horizontal gutters, creating a 12-column grid that adapts to tablet (980px) and mobile (100% - 30px padding) breakpoints. The hero section uses a 50/50 split (left: text content, right: background image) at desktop, collapsing to full-width stacked layout below 980px. Section spacing follows the lg token (40px) for vertical rhythm between major content blocks, with md (24px) used for intra-section spacing. The header is fixed at 69px height with a 2px primary-colored bottom border, consuming 71px of body padding-top to prevent content overlap. Container padding is consistently 15px on left/right, creating a 30px total gutter on mobile and maintaining alignment with the grid. The layout philosophy prioriti

Elevation & Depth

Depth is conveyed through **subtle, functional shadows** rather than dramatic layering. The system uses three elevation levels: **Level 1 (cards, inputs)** applies 0 1px 3px rgba(0,0,0,0.08)—barely perceptible, used to separate surface-container elements from the background. **Level 2 (hovered cards, dropdowns)** applies 2px 2px 14px hsla(195, 8%, 48%, 0.3)—a soft, slightly warmer shadow that indicates interactivity without distraction. **Level 3 (modals, popovers)** applies 0 13px 21px -10px rgba(0,0,0,0.3), 0 1px 4px rgba(0,0,0,0.3)—a compound shadow with both a large soft drop and a sharp n

Shapes

The design system employs **Geometric Minimalism** as its shape philosophy: border-radius values are small and precise, reflecting the technical, no-nonsense brand personality. **Buttons and inputs** use 4px (DEFAULT), a subtle rounding that softens hard edges without introducing organic curves. **Cards and containers** use 6px (md) for slightly more visual softness while maintaining geometric clarity. **Modals and elevated surfaces** use 8px (lg) to signal elevation and importance. **Badges and pills** use 9999px (full) for circular/pill shapes, creating visual distinction for status indicato

Components

Action Elements **Buttons** are the primary interaction mechanism. Primary buttons (bg: #0375b0, fg: white, 44px height, 12px 20px padding, 4px radius) use HK Grotesk 700 at 17px. On hover, the background shifts to #0056a7 (a 15% darkening) with a 0.2s ease-in-out transition. Secondary buttons (bg: #f58634, fg: white) follow the same sizing and transition rules, darkening to #e67e2a on hover. Tertiary buttons (bg: #37a43c, fg: white) darken to #2d8a31. All buttons have no border and use box-shadow: none at rest, relying on color contrast for definition. Focus states apply a 3px outline in primary color with 2px offset.

Navigation & Headers **Header navigation links** use Segoe UI 600 at 17px, with 20px 24px padding and a 2px transparent bottom border. On hover or active state, the

Do's and Don'ts

**Do**

• Do use primary (#0375b0) for navigation, active states, and focus indicators to maintain visual consistency and guide user attention through complex interfaces.
• Do apply the lg spacing token (40px) between major content sections to create clear visual rhythm and reduce cognitive load in data-dense dashboards.
• Do pair HK Grotesk headings (700 weight) with Segoe UI body text (400 weight) to create a distinctive, professional hierarchy that signals authority.
• Do use the three-level shadow system (0 1px 3px, 2px 2px 14px, 0 13px 21px) to convey elevation and interactivity without introducing visual clutter.
• Do apply 0.2s ease-in-out transitions to all interactive state changes (hover, focus, active) to provide responsive feedback without feeling sluggish.

**Don't**

• Don't use secondary (#f58634) or tertiary (#37a43c) for primary navigation or body text—reserve them for CTAs and status indicators to maintain visual hierarchy.
• Don't apply border-radius greater than 8px to buttons, inputs, or cards; the brand's geometric minimalism requires sharp, precise corners that signal technical competence.
• Don't use shadows greater than 0 13px 21px rgba(0,0,0,0.3) or apply multiple layered shadows; the professional aesthetic demands restraint and clarity.
• Don't mix font families within a single heading or button; HK Grotesk is reserved for headings/labels, Segoe UI for body/inputs. Mixing dilutes the distinctive brand voice.
• Don't apply text-shadow or text-stroke effects to body text or labels; use color contrast and weight variation instead to maintain legibility and technical clarity.