Avast Design System Deep-Dive

1. Brand Overview

Avast’s visual language is what you’d expect from a security brand that’s been in the game for decades: serious, trustworthy, but still approachable enough to appeal to everyday consumers. The site is clearly built for non-technical users as much as for corporate buyers—big, bold typography, clear CTAs, minimal noise. They’re not trying to wow you with avant-garde layouts; the design says: “We’ve got you covered. Let’s keep you safe.”

The vibe is confident but not flashy. They use a strong blue primary (#0070f6)—classic “trust” territory in brand psychology. It's paired with deep navy (#071d2b) and clean whites, plus muted steel blues and grays. No neon greens, no playful splashes—this is a brand that knows its audience is here for security and reliability, not entertainment.

The design philosophy leans heavily into clarity and readability. The typography choices—custom MierB03 for headings/buttons, Helvetica/Arial fallbacks—signal a blend of branded personality and web-safe fallbacks for consistency. The weights skew heavy (800, 750), which reinforces the “solid” feeling.

Rounded corners everywhere—some insanely large radii (400px pill buttons)—tell you they want to soften the security brand stiffness. Shadows are subtle but present; they’re not flat-design purists. This is about depth for emphasis, but never enough to feel ornamental.

It’s built on an 8px spacing system—standard for clean, scalable UI—and the breakpoints suggest a mobile-first approach, with multiple sub-tablet breakpoints for fine control. The tech stack includes Vuetify, which explains the clean component structure and consistent spacing.

In short: Avast’s design system is about trust through clarity, approachability through rounded forms, and consistency through a tight grid and palette. If you’re building in this system, you’re working with a structured, opinionated set of rules—don’t fight them.

2. Color System

2.1 Primary Colors

Primary Blue: #0070f6 (rgb(0, 112, 246))
This is the hero. It’s the CTA color, the “download” button color, the focus indicator. Blue here is textbook security branding—trusted, stable, calm. Compared to competitors: Norton goes gold/black for premium feel; McAfee uses red for urgency. Avast’s blue says “We’re safe, and we don’t need to shout.”

Primary is never used for large backgrounds—it’s reserved for interactive elements and key highlights. That’s important for accessibility: blue-on-white or white-on-blue keeps contrast high.

2.2 Complete Palette

2.3 Color Relationships

Deep Navy (#071d2b) + White is the core high-contrast pair. Primary Blue (#0070f6) works with both—white text on blue for CTAs, blue text on white for links. Steel Blue (#21455c) is the subtle hover background for dark buttons—it’s lower contrast, so it’s used sparingly.

Accessibility-wise, most combos pass WCAG AA easily. White text on Primary Blue is solid. Blue text on white is fine. The only mild risk is Light Blue Gray (#c5d6e0) on white—low contrast—so it’s only used for borders, not text.

Dark mode? This palette could invert nicely—Deep Navy as background, White for text, Primary as accent—but Avast’s current site doesn’t do dark mode.

2.4 Usage Guide

Works well:

• White text on Primary Blue for CTAs.
• Deep Navy text on white for body.
• Primary Blue text links in white sections.

Avoid:

• Light Blue Gray for text—it’s too faint.
• Primary Blue as large background—it’s too loud.
• Combining Steel Blue + Deep Navy for text/background—low contrast.

3. Typography

3.1 Font Families

• Primary: MierB03 (custom), fallbacks: Helvetica, Arial.
• Secondary: Helvetica Neue, Helvetica, Arial (system safe).
• Custom Source: No Google Fonts, no Adobe Fonts—this is likely self-hosted.

MierB03 is used for headings, buttons, and many links. It’s bold, geometric, and heavy. Helvetica/Arial covers body text and captions when needed.

3.2 Type Scale

(Full list from data—truncated here for brevity in table)

3.3 Hierarchy

The scale is tight—only a few big jumps (56 → 46 → 34), then it drops quickly to 22/20/18px for most UI. This makes the UI feel compact and efficient. Heavy weights (800) on headings/buttons make them pop even at smaller sizes. Body text sits at 18px or 16px depending on context—comfortable for readability.

4. Spacing & Layout

4.1 Spacing Scale

Base grid: 8px.
They use multiples, sometimes odd values for specific cases.

4.2 Layout

Breakpoints (px): 320, 576, 768, 992, 1280, 1366, 1600.
This is a standard mobile → tablet → desktop progression, with extra midpoints for fine control. Vuetify’s grid system is in play—expect 12-column layouts with these breakpoints.

5. Visual Elements

Border Radius

They go big:

• 0px 16px 16px — small rounded corners for modals/cards.
• 16px — standard radius for modals, cards, headings.
• 32px — larger cards/dialogs.
• 40px — image corners.
• 40px 40px 32px 32px — custom button shape.
• 400px — pill buttons (Primary CTA).
• 50% — perfect circles (avatars/buttons).

Shadows

Subtle but layered:

• rgba(7, 29, 43, 0.32) 0px 16px 32px -16px, rgba(0, 112, 246, 0.32) 0px 8px 32px -16px — dual-color emphasis.
• rgba(7, 29, 43, 0.12) 0px 16px 32px — soft depth.
• Inset borders as shadows for neutral elements.

Borders

Mostly 1px solids for dividers. Colors: Deep Navy (#071d2b) and Light Blue Gray (#c5d6e0). Rare use of dotted white borders for links.

6. Components

6.1 Buttons

Primary CTA (.c-btn.c-download--btn):

• Default: bg #0070f6, text #fff, padding 0 40px, radius 400px, no border, heavy shadow.
• Hover: bg #fff, text #fff (odd—likely an inversion animation), scale(1.1), solid outline #5c7a8c, border 1px solid #071d2b.
• Focus: text #0070f6, dashed outline #345970, no border.

Secondary (.c-btn):

• Default: bg #fff, text #0070f6, padding 0 28px, radius 400px, no shadow.
• Hover: same odd inversion to white + white text, same outline/border as primary.

Link-type (.c-slider__carousel-item.c-btn--link-type):

• Default: transparent bg, text #071d2b, padding 32px, radius 40px 40px 32px 32px.
• Hover: bg #21455c, text #fff.

6.2 Links

Styles vary by context:

• White text links: hover → navy + underline.
• Navy text links: underline always.
• Blue text links: hover → navy underline.

6.3 Forms

No text inputs in extracted data—likely Vuetify defaults styled with palette.

6.4 Cards

Radius 16px or 32px, shadows subtle (rgba(7, 29, 43, 0.12)), padding from spacing scale (24px, 32px).

7. Design Tokens (CSS Variables)

:root {
  /* Colors */
  --color-primary: #0070f6;
  --color-deep-navy: #071d2b;
  --color-white: #ffffff;
  --color-steel-blue: #21455c;
  --color-light-blue-gray: #c5d6e0;
  --color-charcoal: #191919;
  --color-black: #000000;

  /* Typography */
  --font-primary: "MierB03", Helvetica, Arial;
  --font-secondary: "Helvetica Neue", Helvetica, Arial;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-112: 112px;

  /* Border Radius */
  --radius-sm: 16px;
  --radius-md: 32px;
  --radius-lg: 40px;
  --radius-pill: 400px;
  --radius-circle: 50%;

  /* Shadows */
  --shadow-primary: rgba(0, 112, 246, 0.4) 0px 16px 40px -16px, rgba(7, 29, 43, 0.4) 0px 32px 40px -16px;
  --shadow-soft: rgba(7, 29, 43, 0.12) 0px 16px 32px 0px;
}

8. AI Coding Assistant Prompt

# Avast Design System Specification

System Prompt:
You are an Avast design expert. Build UIs matching their visual language exactly.

Brand Context:
Avast's design language focuses on trust, clarity, and approachability. Rounded corners and bold typography convey confidence, while a disciplined blue-and-navy palette ensures consistency. Depth is subtle—shadows are used sparingly and purposefully.

Color Palette:
- Primary Blue: #0070f6 — CTAs, primary buttons, focus outlines
- Deep Navy: #071d2b — Headers, footers, text
- White: #ffffff — Backgrounds, text on dark
- Steel Blue: #21455c — Hover states for dark elements
- Light Blue Gray: #c5d6e0 — Borders, dividers
- Charcoal: #191919 — Body text
- Black: #000000 — Icons, nav active

Typography:
- Font Primary: "MierB03", Helvetica, Arial — Headings, buttons
- Font Secondary: "Helvetica Neue", Helvetica, Arial — Body text, captions

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 lg | 56px | 800 | 1.29 | Hero titles |
| H1 md | 46px | 800 | 1.30 | Section titles |
| H1 sm | 34px | 800 | 1.29 | Sub-sections |
| Body lg | 22px | 400 | 1.64 | Lead paragraphs |
| Body md | 18px | 400 | 1.67 | Standard text |
| Button lg | 20px | 800 | 1.20 | Primary CTAs |
| Caption | 14px | 400 | 1.57 | Small labels |

Spacing & Grid:
Base: 8px. Scale: 1px, 2px, 4px, 8px, 16px, 24px, 32px, 48px, 64px, 80px, 112px.
Use multiples for all margins, paddings, and gaps.

Border Radius:
- sm: 16px — cards, modals
- md: 32px — larger modals
- lg: 40px — images
- pill: 400px — buttons
- circle: 50% — avatars

Shadows & Depth:
- Primary CTA shadow: rgba(0, 112, 246, 0.4) 0px 16px 40px -16px, rgba(7, 29, 43, 0.4) 0px 32px 40px -16px
- Soft card shadow: rgba(7, 29, 43, 0.12) 0px 16px 32px

Component Specifications:

Primary Button:
```css
.btn-primary {
  background: #0070f6;
  color: #ffffff;
  padding: 0 40px;
  border-radius: 400px;
  font-weight: 800;
  font-size: 20px;
  border: none;
  box-shadow: var(--shadow-primary);
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  color: #ffffff;
  transform: scale(1.1);
  box-shadow: rgba(7, 29, 43, 0.08) 0px 32px 56px;
  outline: 1px solid #5c7a8c;
  border: 1px solid #071d2b;
}
.btn-primary:focus {
  color: #0070f6;
  outline: 2px dashed #345970;
}
```

Secondary Button:
```css
.btn-secondary {
  background: #ffffff;
  color: #0070f6;
  padding: 0 28px;
  border-radius: 400px;
  font-weight: 800;
  font-size: 16px;
  border: none;
}
.btn-secondary:hover {
  background: #ffffff;
  transform: scale(1.1);
  outline: 1px solid #5c7a8c;
  border: 1px solid #071d2b;
}
```

Navigation Links:
- White text on dark bg: hover → navy + underline.
- Blue text on white: hover → navy + underline.

Layout & Responsive Rules:
- Max content width: 1280px
- Padding: 16px mobile, 32px desktop
- Breakpoints: 320, 576, 768, 992, 1280, 1366, 1600

Interaction Rules:
- Transitions: 150ms ease
- Focus indicators: dashed outlines in brand colors

DO:
- Use only palette colors
- Stick to 8px grid
- Keep buttons pill-shaped
- Use heavy weights for CTAs
- Maintain high-contrast text

DON'T:
- Invent new colors
- Mix sharp and rounded corners
- Use shadows excessively
- Use low-contrast text

Code Examples:

Primary Button:
```css
<button class="btn-primary">Download</button>
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-soft);
}
```

Form Input:
```css
.input {
  border: 1px solid #c5d6e0;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 16px;
}
.input:focus {
  border-color: #0070f6;
  outline: none;
}
```

9. Summary

TL;DR: Avast’s design language is structured, confident, and approachable—heavy blue brand color, bold custom typography, pill-shaped buttons, and an 8px grid keep everything consistent. Shadows are subtle, borders are clean, and the palette is locked down.

Brand Keywords:

• trust-first
• rounded-confidence
• tech-stable
• clarity-driven
• approachable-security