Trend Micro Design System Deep-Dive

1. Brand Overview

Trend Micro’s business site is a study in corporate cybersecurity aesthetics. They’re not chasing flashy gradients or microinteractions—this is a security company, and the design reflects that. The palette is anchored in stark whites, deep neutrals, and a signature red that says “alert” without screaming panic. The typography is heavy on Interstate, a corporate sans with multiple weights and cuts, backed up by Open Sans as the fallback. It’s confident, functional, and devoid of whimsy.

The vibe is straightforward: you’re here to protect your enterprise, not browse a lifestyle catalogue. Buttons are utilitarian but have clear hover/focus affordances. Borders and radii are restrained—4px and 10px corners dominate, with occasional circles for social icons. Shadows exist but are rare, used sparingly for depth cues; most UI relies on contrast and clear separation rather than skeuomorphic depth.

This is designed for IT decision-makers, CISOs, and enterprise buyers. The layout is responsive across a detailed breakpoint ladder—from 400px mobile tweaks to 1600px wide desktops—hinting at a complex, component-heavy site that needs to work in every environment. The system combines Bootstrap’s structural grid with Vuetify’s component ecosystem. That means consistency in spacing and alignment, but also a layer of Material-inspired interactions (outlined focus rings, inset shadows, scale transforms).

Security brands often overdo the “dark and scary” motif. Trend Micro avoids that trap. The primary red (#d71920) is used for CTAs and key interactive elements, not as a background wash. The rest of the UI breathes with white space (#ffffff) and a dark neutral (#414042) for text and secondary surfaces. It’s a clean, corporate look that trades emotional warmth for trustworthiness.

2. Color System

2.1 Primary Colors

The main brand color is #d71920 — an intense, saturated red. Psychologically, this signals urgency, importance, and action. In cybersecurity, red is often associated with alerts, but here it’s repurposed as a brand anchor for CTAs, buttons, and accent elements. It’s not used for backgrounds; instead, it pops against white or dark grey surfaces.

Competitively, many security brands lean on blues (#007aff, #1738f5) for trust and stability. Trend Micro’s choice of red differentiates them visually—it’s more aggressive, more assertive. That fits their positioning as a proactive threat prevention company.

2.2 Complete Palette

These are not broad tonal ranges—each is a fixed, hard-coded value. No tints/tones in the extracted data except for opacity variants in state changes.

2.3 Color Relationships

Contrast-wise:

• #d71920 on #ffffff: high contrast, meets WCAG AA easily for normal text and AAA for large text.
• #414042 on #ffffff: also comfortably above AA.
• #ffffff on #d71920: strong contrast, safe for buttons.

The only watch-out is #bcbec0 on white—contrast is low. This is fine for subtle UI, but not for critical text.

No dark mode variant is present. The palette is designed for a light background context; dark neutrals serve as text colors, not surfaces.

2.4 Usage Guide

Works well:

• Brand red (#d71920) for buttons, with white text.
• Dark neutral (#414042) for text-heavy sections.
• White (#ffffff) as the dominant canvas.

Avoid:

• Red on dark grey—it kills contrast.
• Light grey (#bcbec0) for text—too low contrast.
• Mixing accent blue (#1738f5) with brand red unless it’s for focus states; they can clash.

3. Typography

3.1 Font Families

Primary: Interstate — multiple weights (Bold, Black, ExtraLight, Light, Regular)
Fallbacks: Open Sans equivalents (SemiBold, Light, Regular)
Icons: Material Symbols Outlined, Material Icons Outlined

No Google Fonts or Adobe Fonts detected; likely self-hosted.

This is a corporate sans, engineered for clarity. Interstate’s condensed forms work well for dense headings without feeling cramped.

3.2 Type Scale

Here’s a condensed selection of the extracted sizes:

The data includes dozens of variants—InterstateBold at 24px, OpenSansSemiBold at 20px, etc. This complexity suggests granular control over weight/size combos for specific components.

3.3 Hierarchy

They’re using size jumps (56 → 48 → 36 → 28 → 24 → 20 → 18 → 16 → 14 → 12px) to signal hierarchy. The large H1 at 56px is for hero titles; 48px for section headers; 36px for subheads. Body text sits at 16–18px with generous line heights (up to 2.0 for capitalized headings).

Readability: Interstate’s heavier cuts give headings authority. Open Sans handles body copy, balancing legibility with neutrality.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px — confirmed by frequency.

Common values:

• 8px (566 uses) — micro-gaps, padding in small components
• 16px (136 uses) — standard padding
• 24px, 32px, 40px, 48px — larger gaps for cards/sections
• 80px, 160px — macro spacing for hero sections

They even have odd decimals (7.72px, 16.51px, 39.19px), likely from responsive scaling or Vuetify’s rem conversions.

4.2 Layout

Breakpoints:

• Starts as low as 400px for mobile tweaks.
• Multiple midpoints (530px, 641px, 890px) — fine-tuned component shifts.
• Desktop tiers at 1024px, 1200px, 1280px.
• Wide screens at 1600px.

Bootstrap grid ensures consistent containers, while Vuetify’s v- components handle responsive behavior.

5. Visual Elements

Border Radius System

Values:

• 2px — rare, small buttons
• 3px — buttons
• 4px — most buttons
• 8px — list items
• 10px — divs, images, buttons
• 20px — avatars, rounded blocks
• 50% — circles (social icons)

This is not a “super-round” system; corners are modest, except for full circles.

Shadows

Shadows are minimal:

• rgba(255, 255, 255, 0.082) 3px 2px 0px 0px — subtle white glow
• rgba(0, 0, 0, 0.176) 0px 6px 12px — rare depth
• rgba(0, 0, 0, 0.2) variants — used sparingly

Mostly flat. Borders are used more for separation.

Borders and Dividers

Common:

• 1px solid white
• 0px 0px 2px solid white — underlines
• 1px solid #414042 — dividers

6. Components

6.1 Buttons

Several patterns:

Primary (Brand Red):

• Default: bg #d71920, white text, 4px radius, no border
• Hover: bg white, scale 1.15, white glow shadow
• Active: bg white, red border, translateY(65px) (!!)
• Focus: inset 3px blue outline (#1738f5), semi-transparent bg

Secondary (White outline):

• Default: transparent bg, white text, 1px white border
• Hover: bg white, scale 1.15
• Active: bg white, red border
• Focus: inset blue outline

Utility (Grey):

• Default: bg #efefef, dark text, 4px radius, 2px outset border
• Hover: bg blue (#1eaedb), opacity .7
• Focus: bg blue, opacity .7

Pagination bullets:

• Default: white bg, opacity .2
• Hover: rotate 90°, red border

6.2 Links

Variants:

• Brand red (#d71920) text — hover to dark grey
• White text — hover to dark grey
• Dark grey text — hover to lighter grey

No underlines except in one variant.

6.3 Forms

Text input:

• Default: bg #f9f9f9, border 1px solid #58595b, radius 10px
• Focus: bg blue (#1eaedb), white text, black border

6.4 Cards

No explicit card data, but from borders/radius: likely white bg, 10px radius, subtle divider borders.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-dark-neutral: #414042;
  --color-black: #000000;
  --color-brand-red: #d71920;
  --color-light-grey: #bcbec0;
  --color-accent-blue: #1738f5;
  --swiper-theme-color: #007aff;
  --equally-action-color: #4d4d4f;

  /* Typography */
  --font-primary: "Interstate", "OpenSans", sans-serif;
  --font-secondary: "OpenSans", sans-serif;
  --font-icon-material: "Material Symbols Outlined";
  --font-icon-material-alt: "Material Icons Outlined";

  /* Spacing (px) */
  --space-1: 1px;
  --space-7-72: 7.72px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-16: 16px;
  --space-16-51: 16.51px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-35: 35px;
  --space-39-19: 39.19px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-160: 160px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-3: 3px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-10: 10px;
  --radius-20: 20px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-white-glow: rgba(255,255,255,0.082) 3px 2px 0px 0px;
  --shadow-soft: rgba(0,0,0,0.176) 0px 6px 12px;
  --shadow-medium: rgba(0,0,0,0.2) 0px 0px 18px;
  --shadow-card: rgba(0,0,0,0.2) 0px 4px 10px;
}

8. AI Coding Assistant Prompt

# Trend Micro Design System Specification

You are a Trend Micro design expert. Build UIs matching their visual language exactly.

## Brand Context
Trend Micro’s design language is corporate, precise, and security-focused. It uses a clean light background, dark neutrals for text, and a bold red for primary actions. Shadows are minimal; depth comes from borders and spacing.

## Color Palette
- Primary Brand Red: #d71920 — CTAs, primary buttons
- White: #ffffff — page background
- Dark Neutral: #414042 — headings, body text
- Black: #000000 — icons, text on light
- Light Grey: #bcbec0 — subtle dividers
- Accent Blue: #1738f5 — focus outlines
- Swiper Theme Blue: #007aff — carousel accents
- Action Neutral: #4d4d4f — icon color

## Typography
- Primary: "Interstate", "OpenSans", sans-serif — headings, UI labels
- Secondary: "OpenSans", sans-serif — body copy
- Icons: "Material Symbols Outlined", "Material Icons Outlined"

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56px | 400 | 1.20 | Hero titles |
| H1 alt | 48px | 400 | 1.19 | Section titles |
| H2 | 36px | 700 | 1.50 | Subheadings |
| Button lg | 28px | 400 | 1.20 | Large button text |
| Body lg | 24px | 400 | 1.50 | Paragraphs |
| Body sm | 16px | 400 | 1.43 | UI copy |
| Caption | 12px | 400 | 2.00 | Labels |

## Spacing & Grid
Base: 8px grid. Scale includes 1px, 7.72px, 8px, 10px, 11px, 16px, 16.51px, 18px, 20px, 22px, 24px, 30px, 32px, 35px, 39.19px, 40px, 48px, 64px, 80px, 160px.

## Border Radius
- xs: 2px — small buttons
- sm: 3px — buttons
- md: 4px — standard buttons
- lg: 10px — cards, inputs
- xl: 20px — avatars
- full: 50% — circular icons

## Shadows & Depth
Minimal use:
- White glow: rgba(255,255,255,0.082) 3px 2px
- Soft shadow: rgba(0,0,0,0.176) 0px 6px 12px

## Component Specifications

### Primary Button
Default: bg #d71920, color #ffffff, padding 9px 10px, radius 4px, no border.  
Hover: bg #ffffff, scale 1.15, box-shadow white glow.  
Active: bg #ffffff, border 1px solid #d71920, translateY(65px).  
Focus: outline inset 3px #1738f5, semi-transparent bg.

### Secondary Button
Default: transparent bg, color #ffffff, border 1px solid #ffffff.  
Hover: bg #ffffff, scale 1.15.  
Active: bg #ffffff, border #d71920.  
Focus: inset outline #1738f5.

### Input Fields
Default: bg #f9f9f9, border 1px solid #58595b, radius 10px, padding 8px.  
Focus: bg #1eaedb, color #ffffff, border 1px solid #000000.

### Links
Red variant: #d71920, hover to #565656.  
White variant: #ffffff underline, hover to #565656.

## Layout & Responsive Rules
Breakpoints: 400px, 530px, 641px, 890px, 1024px, 1200px, 1280px, 1600px.  
Use Bootstrap container/row/col structure.

## Interaction Rules
- Transition timing: 150ms ease for state changes.
- Focus indicators: inset blue (#1738f5) rings.
- Hover scale: 1.15 on buttons.

## DO List
- Use only palette colors.
- Maintain 8px spacing grid.
- Use Interstate for headings, Open Sans for body.
- Keep corner radii consistent per component type.
- Use white space generously for clarity.

## DON'T List
- Don't invent new colors.
- Don't mix sharp and rounded corners.
- Don't apply heavy shadows.
- Don't reduce button padding below 8px.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #d71920;
  color: #ffffff;
  padding: 9px 10px;
  border-radius: 4px;
  border: none;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #ffffff;
  transform: scale(1.15);
  box-shadow: rgba(255,255,255,0.4) 0px 2px 6px;
}
.btn-primary:focus {
  outline: #1738f5 inset 3px;
}

Input Field

.input {
  background: #f9f9f9;
  border: 1px solid #58595b;
  border-radius: 10px;
  padding: 8px;
}
.input:focus {
  background: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
}

---

## 9. Summary

**TL;DR**: Trend Micro’s design is corporate-clean with a bold red accent, Interstate typography, and an 8px spacing grid. Corners are modestly rounded, shadows are rare, and focus states use blue outlines. It’s built for clarity and trust in a high-stakes cybersecurity context.

**Brand Keywords**:
- corporate-minimal
- security-focused
- red-accent
- typography-driven
- grid-disciplined