ESET Brand Design System Deep-Dive

1. Brand Overview

ESET’s visual language screams "premium cybersecurity" without shouting. It’s clean, composed, and intentional. The vibe isn’t playful—it’s serious, grounded, and technology-driven. You can feel their heritage in digital security woven into a design that’s meant to communicate trust and competence. This is not a “startup” aesthetic—it’s corporate, but modern.

The palette is dominated by teal and deep grays. Teal (#00717f) is active throughout as the anchoring brand color. It pops against white and cool grays without feeling aggressive. There are also high-contrast elements—white-on-teal, teal-on-white—but it’s never overwhelming. ESET clearly wants to feel like the safe pair of hands rather than the flashy new disruptor.

Typography is carefully chosen. We see Fedra, Segoe UI, Tahoma, and even Georgia. That mix is unusual but serves distinct uses—Fedra for brand character, Segoe UI for UI legibility, and Georgia in rare cases for more formal content. The type weights lean light for headings (100) and regular for body (400), keeping the tone sophisticated and easy to read.

The layout system follows an 8px base grid, a common choice in digital design. Spacing values are multiples of 1–4px, but heavily standardized around the 8px rhythm. Breakpoints are unusually granular—they’ve clearly tested exact boundaries for different content layouts.

Overall, ESET’s design system is about clarity, restraint, and confident consistency. It’s made for professional audiences—IT managers, corporate buyers, prosumers—people who expect straightforward design that won't distract from functionality. And while there's room to critique some typographic redundancy, the system works: fast-loading, accessible, and instantly recognizable.

2. Color System

2.1 Primary Colors

The clear hero color is rgb(0, 113, 127) / #00717f. This teal is fresh but not youthful—it sits in the security space comfortably. Psychologically, teal suggests trust, calm, and competence—fitting for a cybersecurity brand. Compared to competitors like Norton (yellow) or McAfee (red), ESET's teal is more modern and less aggressive.

White (#ffffff) plays a massive role too—it’s not just background but a neutral canvas that lets teal do the heavy lifting. Secondary elements lean into cool grays, which preserve a tech/professional feel.

2.2 Complete Palette

2.3 Color Relationships

Teal (#00717f) on white passes WCAG AAA for normal text—high contrast, safe for accessibility. White on teal works too for large text. The bright cyan (#6ff1f1) is strong and can fail contrast standards if used for body text on white—use only for accents.

The cool gray (#cdd0d3) helps in layering but should be balanced carefully—too much can feel cold. Charcoal (#3b3b3b) gives strong text readability, especially against white or light gray.

Dark mode? Not natively indicated—they haven’t built a reversed palette, but the color choices could easily translate.

2.4 Usage Guide

• Do: Pair teal (#00717f) with white backgrounds for primary calls to action.
• Do: Use dark gray (#424d56) in navigation and structural UI elements.
• Avoid: Using bright cyan (#6ff1f1) for long text—it’s better as an icon accent.
• Avoid: Mixing charcoal (#3b3b3b) and dark gray (#424d56) in the same text cluster—it muddies hierarchy.

3. Typography

3.1 Font Families

• Fedra (custom) — fallback: Tahoma
• Segoe UI — fallback: Helvetica Neue, Helvetica, Arial
• Tahoma — no fallbacks
• Georgia — fallback: Times, Times New Roman

Sources: Google Fonts includes Lato, Tahoma is local system font. No Adobe usage.

Fedra is clearly the brand-typeface choice—used for major headings and link styles that need personality. Segoe UI is the system’s workhorse for UI elements—clear, legible, native to Windows systems (ESET’s customer base skews Windows-heavy).

3.2 Type Scale

There’s a ton of granularity—sizes move in small steps rather than big jumps. This makes text layout flexible but can get messy if not documented well.

3.3 Hierarchy

They rely on weight and spacing more than size jumps. Many headings are 100 weight (super light), which keeps a refined tone. Segoe UI elements are regular weight (400), used for clarity. Georgia's rare appearances at 24px bold are surprising—it feels like an editorial nod.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid.

Values range from 1px micro-adjustments to large 114px section padding.

4.2 Layout

Breakpoints (partial list):

• 374px, 420px, 479px — micro mobile tweaks
• 768px — tablet switch
• 990px, 991px — possible test split
• 1200px — desktop content max
• 1550px — large screens

ESET’s layout responsiveness is tuned with very specific breakpoints—clearly measured against QA devices.

5. Visual Elements

Border radius

We have everything from square (0px) to massive pills (100px).

The 100px pill style is distinctive—it screams “brand button.”

Shadows

Two types dominate: functional subtle drop shadows and decorative glow.

• rgba(0, 0, 0, 0.2) 0px 10px 16px 4px — main depth shadow
• Glow: rgba(255, 255, 255, 0.4)... rgba(102, 245, 255, 0.4) — for hover states on buttons

Borders

Transparency used extensively—rgba(255, 255, 255, 0.25) for subtle inputs. Some buttons get 2px solid charcoal.

6. Components

6.1 Buttons

Variant 1 — Flat with bottom radius

• Default: bg #f4f5f4, text #181c20, radius 0 0 6px 6px
• Hover: bg #f7f7f7, text #424d56
• Active/Focus: box-shadow #51cbee 0 0 2px 3px

Variant 2 — Outlined charcoal

• Default: bg transparent, text #3b3b3b, radius 3px
• Hover: scale(1.2), glow shadow, bg #f7f7f7
• Active: Focus shadow same as primary

Variant 3 — Pill teal text

• Default: bg #fff, text #01717f, radius 100px
• Hover: Glow, transform scale(1.2)

Variant 4 — Solid green CTAs

• Default: bg #428400, text #fff, radius 3px
• Hover: scales same way as others (odd—green not in palette list)

6.2 Links

Multiple link colors:

• Charcoal (#3b3b3b) — base nav link; underline on hover
• Teal shades (#006e7e, #01717f, #008193) — brand links
• White — overlay links
• Cyan (#6ff1f1) — accent links

6.3 Forms

Number input example:

• Default: bg rgba(255,255,255,0.1), text #fff, border 1px solid rgba(255,255,255,0.25), radius 3px.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-teal-primary: #00717f;
  --color-gray-dark: #424d56;
  --color-gray-light: #cdd0d3;
  --color-cyan-bright: #6ff1f1;
  --color-charcoal: #3b3b3b;
  --color-white: #ffffff;

  /* Typography */
  --font-fedra: "Fedra", Tahoma;
  --font-segoe: "Segoe UI", "Helvetica Neue", Helvetica, Arial;
  --font-tahoma: Tahoma;
  --font-georgia: Georgia, Times, "Times New Roman";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-25: 25px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --space-50: 50px;
  --space-66: 66px;
  --space-100: 100px;
  --space-114: 114px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --radius-xxl: 50px;
  --radius-pill: 100px;
  --radius-round: 50%;

  /* Shadows */
  --shadow-main: rgba(0, 0, 0, 0.2) 0px 10px 16px 4px;
  --shadow-glow: rgba(255, 255, 255, 0.4) 0px 0px 15px, rgba(102, 245, 255, 0.4) 0px 0px 50px, rgba(102, 245, 255, 0.4) 0px 0px 30px;
}

8. AI Coding Assistant Prompt

# ESET Design System Specification

You are an ESET design expert. Build UIs matching their visual language exactly.

## Brand Context
ESET values professionalism, clarity, and trust. Their aesthetic is modern but restrained, favoring teal and cool grays. Typography balances brand personality (Fedra) and legibility (Segoe UI) with light weights and clean spacing.

## Color Palette
- Primary Teal: #00717f — Main CTAs, primary brand accents.
- Dark Gray: #424d56 — Navigation background, UI containers.
- Light Gray: #cdd0d3 — Surfaces, section backgrounds.
- Bright Cyan: #6ff1f1 — Accent highlights and icons.
- Charcoal: #3b3b3b — Text, titles, nav links.
- White: #ffffff — Page background, text on teal.

## Typography
- Fedra, Tahoma — Headings, branding text.
- Segoe UI, Helvetica Neue, Helvetica, Arial — UI, body copy.
- Tahoma — Legacy UI elements.
- Georgia, Times — Formal content.

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 135px | 100 | 1.05 | Hero headings |
| H2 | 45px | 100 | 1.11 | Section headings |
| H3 | 40px | 100 | 1.25 | Subheaders |
| Body Large | 32px | 400 | 1.00 | Lead paragraphs |
| Body | 17px | 400 | 1.53 | Standard copy |
| Caption | 13px | 100 | 1.23 | Labels, annotations |

## Spacing & Grid
Base: 8px. Multiples: 1, 2, 3, 4, 5, 6, 8, 10, 15, 20, 25, 30, 32, 40, 50, 66, 100, 114px.

## Border Radius
- none: 0px — Square elements
- sm: 3px — Inputs, small buttons
- md: 6px — Tooltips
- lg: 16px — Directional containers
- xl: 32px — Large divs
- xxl: 50px — Large rounded containers
- pill: 100px — Primary pill buttons
- round: 50% — Circular avatars/icons

## Shadows
- Main Drop: rgba(0, 0, 0, 0.2) 0px 10px 16px 4px
- Glow: rgba(255, 255, 255, 0.4) 0px 0px 15px, rgba(102, 245, 255, 0.4) 0px 0px 50px, rgba(102, 245, 255, 0.4) 0px 0px 30px

## Components

### Primary Button
```css
.btn-primary {
  background: #f4f5f4;
  color: #181c20;
  padding: 6px 8px;
  border-radius: 0 0 6px 6px;
  font-size: 16px;
  font-weight: 400;
  box-shadow: none;
}
.btn-primary:hover {
  background: #f7f7f7;
  color: #424d56;
}
.btn-primary:focus {
  box-shadow: #51cbee 0 0 2px 3px;
}

Secondary Button

.btn-secondary {
  background: transparent;
  color: #3b3b3b;
  border: 2px solid #3b3b3b;
  border-radius: 3px;
  padding: 8px 20px;
}
.btn-secondary:hover {
  transform: scale(1.2);
  box-shadow: var(--shadow-glow);
}

Input Field

.input-number {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  padding: 5px 0;
}

Layout & Responsive Rules

• Max content width: 1200px
• Mobile padding: 20px
• Breakpoints: 374px, 420px, 479px, 768px, 990px, 1200px, 1550px

Interaction Rules

• State changes animate at 150ms ease.
• Focus highlights match hover glow for buttons.

DO List

• Use exact hex values for brand colors
• Maintain 8px spacing multiple
• Use Fedra for headings
• Reserve bright cyan for accents only
• Keep button radii consistent

DON'T List

• Don't invent new teal shades
• Don't mix rounded and sharp corners in the same element
• Avoid using bright cyan for text blocks
• Don't exceed specified breakpoints

Code Examples

See component blocks above for usage.

---

## 9. Summary

**TL;DR** — ESET’s design system is teal-driven, typography-smart, and laid out on an 8px grid with crisp UI polish. Buttons have distinct personalities (especially the teal-pill), and the system manages to feel professional without being sterile.

**Brand Keywords**:
- teal-confident
- security-clean
- professional-ui
- grid-disciplined
- restrained-depth