TeamViewer Brand Design System Deep-Dive

1. Brand Overview

TeamViewer’s design language is exactly what you’d expect from a remote connectivity software giant — functional, confident, and a little corporate, but without feeling cold. It’s a brand aimed at global IT teams, enterprise decision-makers, and technically savvy operators, so the visual system leans hard into clarity over decoration.

The vibe: professional, secure, and slightly conservative. Colors are restrained; typography is crisp and sans-serif; spacing follows a strict 8px grid. This is not a brand experimenting with wild gradients or irregular shapes — it’s about reliability and trust. And that makes sense: if you’re pitching remote access and device control, your users need to feel you’re rock-solid.

The design philosophy here is “consistency = trust.” The primary blue tones and deep navy convey authority and stability. Neutral grays dominate the UI scaffolding, with strategic pops of saturated colors for CTAs. The button states are textbook: clear hover feedback, visible focus outlines, no surprises. Even shadows are used sparingly and with low opacity, reinforcing a clean, flat aesthetic.

One thing that stands out: the typography stack is custom (TeamViewerSans) with fallbacks to Noto Sans and Verdana. That’s a deliberate move — it keeps brand personality while ensuring cross-platform legibility. They don’t rely on web-hosted fonts from Google or Adobe, which reduces dependency and keeps control over rendering.

Who’s this for? IT managers, enterprise buyers, and end-users who value stability. The design doesn’t try to “delight” in a playful sense; it reassures. Every pixel says: “We’re professional, we’re secure, and we’ll just work.”

2. Color System

2.1 Primary Colors

The primary brand color in use is rgb(84, 84, 84) (#545454) for semantic “primary” in the data, but in practice, the real brand-driving hues are deep navy rgb(5, 10, 82) (#050a52) and bright blue rgb(48, 86, 239) (#3056ef). The navy shows up in buttons, borders, and headings — it’s an anchor. The bright blue is an accent for links and CTAs.

From a psychology standpoint:

• Deep navy (#050a52) — trust, authority, security. Common in finance and enterprise tech.
• Bright blue (#3056ef) — action, modernity, tech-forward. Used sparingly for emphasis.

Compared to competitors like AnyDesk or Zoom, TeamViewer’s blue is richer and darker; Zoom leans light and airy, while TeamViewer’s palette says “enterprise first.”

2.2 Complete Palette

2.3 Color Relationships

The palette leans heavily on high-contrast combinations: white text on deep navy, navy text on white. Accessibility is solid — deep navy (#050a52) on white gives a contrast ratio well above WCAG AA. The bright blue (#3056ef) on white is borderline for small text but passes for larger UI elements.

Dark mode isn’t explicitly addressed here — the transparent blacks and nav grays suggest a light-first design.

2.4 Usage Guide

• Works well: Deep navy with white text — core brand combo. Bright blue for CTAs on white backgrounds.
• Avoid: Bright blue on deep navy — contrast drops. Orange CTA buttons should not sit next to bright blue — they compete.
• Neutrals: Gray borders (#c4c4c4, #dedede) keep UI modular without adding noise.
• Overlays: Transparent black (#141414 at 0.3) works for subtle layering without heavy drop shadows.

3. Typography

3.1 Font Families

Primary: TeamViewerSans — custom brand font.
Fallbacks: Noto Sans, Verdana — both safe, legible, sans-serif options.
No Google or Adobe font dependencies. No variable fonts.

3.2 Type Scale

3.3 Hierarchy

Large headings (32–52px) establish strong visual anchors. Mid-range sizes (18–24px) are used for subheads and buttons — this keeps CTAs visually weighted without overpowering. Captions drop to 12–14px, often bold or uppercase for label clarity. The consistent line heights (mostly 1.25 or 1.5) keep vertical rhythm tight.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px grid. Everything is multiples or sub-multiples of 8px, with a few odd values (2.8px, 12.5px) for pixel-perfect alignment.

4.2 Layout

Breakpoints range from 400px up to 1440px, covering mobile, tablet, and desktop. The presence of 1200px, 1400px, and 1440px suggests desktop containers are wide but not full-bleed.

5. Visual Elements

• Border Radius: Dominated by 4px and 8px values. 4px for small elements (inputs, buttons), 8px for modals and cards. There are extremes like 150px for large top-rounded sections, and 50% for circular avatars.
• Shadows: Used sparingly. Most common: rgba(5, 10, 82, 0.08) 0px 12px 24px — subtle depth. No heavy, high-contrast shadows.
• Borders: 1px solid in grays (#dedede, #c4c4c4) dominate. Navy borders for emphasis. White borders in inverted contexts.

6. Components

6.1 Buttons

Orange CTA (14px, weight 400)

• Default: bg #ea704b, white text, 8px 16px padding, radius 4px, border #ea704b.
• Hover: text #0f161c, bg rgba(15,22,28,0.05), opacity 0.6, border #162891, scale 1.05.
• Active: bg rgba(15,22,28,0.05), white text, border rgba(162,192,169,0.5).
• Focus: outline black 1px, bg #1eaedb, white text.

White Button (16px, weight 700)

• Default: bg white, navy text, padding 12.5px 32px, radius 8px.
• Hover: subtle overlay, border accent.
• Focus: bg #1eaedb, white text.

Transparent Button (16px, weight 700)

• Default: transparent, white text, radius 8px, white border.
• Hover: same as above.

Navy Button (14px, weight 600)

• Default: bg navy #050a52, white text, padding 10px 16px, radius 8px.
• Hover: bg #1eaedb, scale 1.05.
• Focus: outline black 2px, bg #1eaedb.

6.2 Links

Seven variants, e.g.:

• Black text (#141414), underline default, hover bright blue (#3860be).
• White text, hover bright blue.
• Navy text bold, hover bright blue.
• Gray text, hover bright blue.

6.3 Forms

No detailed input styles extracted — likely standard 1px gray borders, 4–8px radius.

6.4 Cards

Radius 8px, border 1px light gray (#dedede), subtle shadows in some contexts.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #545454;
  --color-secondary: transparent;
  --color-navy: #050a52;
  --color-bright-blue: #3056ef;
  --color-white: #ffffff;
  --color-mid-gray: #c4c4c4;
  --color-light-gray: #dedede;
  --color-medium-gray: #747474;
  --color-transparent-black: rgba(20, 20, 20, 0.3);
  --color-bright-blue-hover: #005fcc;
  --color-orange-cta: #ea704b;
  --color-success-green: #32ae88;

  /* Typography */
  --font-primary: 'TeamViewerSans', 'Noto Sans', verdana;
  --font-secondary: 'Sequel100';
  --font-caption: 'Inter';

  /* Spacing */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-65: 65px;
  --space-108: 108px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 150px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-navy-soft: rgba(5, 10, 82, 0.08) 0px 12px 24px 0px, rgba(5, 10, 82, 0.08) 0px 0px 8px 0px;

}

8. AI Coding Assistant Prompt

# TeamViewer Design System Specification

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

## Brand Context
TeamViewer’s design is professional, security-focused, and minimal. Colors are restrained, typography is crisp, and spacing follows a strict 8px grid. Shadows are subtle, borders are clean.

## Color Palette
- Primary: #545454 — UI scaffolding, nav borders
- Secondary: transparent — background resets
- Deep Navy: #050a52 — buttons, banners, headers
- Bright Blue: #3056ef — links, CTAs
- White: #ffffff — background, text on dark
- Mid Gray: #c4c4c4 — image borders
- Light Gray: #dedede — dividers
- Medium Gray: #747474 — muted text
- Transparent Black: rgba(20,20,20,0.3) — overlays
- Bright Blue Hover: #005fcc — hover/focus accents
- Orange CTA: #ea704b — primary action buttons
- Success Green: #32ae88 — success states

## Typography
- Headings: TeamViewerSans, Noto Sans, verdana
- Secondary Heading: Sequel100
- Captions: Inter

| Level         | Size | Weight | Line Height | Use For |
|---------------|------|--------|-------------|---------|
| H1            | 52px | 700    | 1.25        | Page titles |
| H1 alt        | 46px | 700    | 1.25        | Hero headings |
| Heading       | 32px | 700    | 1.25        | Section headings |
| Body          | 18px | 400    | 1.50        | Paragraphs |
| Button        | 16px | 700    | 1.50        | CTAs |
| Caption       | 14px | 400    | 1.50        | Labels |

## Spacing & Grid
Base: 8px. Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 65px, 108px.
Use multiples for padding and margins.

## Border Radius
- sm: 4px — inputs, small buttons
- md: 8px — cards, modals
- lg: 150px — large top-rounded sections
- full: 50% — avatars

## Shadows & Depth
- Soft Navy: rgba(5, 10, 82, 0.08) 0px 12px 24px, rgba(5, 10, 82, 0.08) 0px 0px 8px

## Component Specifications

### Primary Button
Default: bg #ea704b, color #ffffff, padding 8px 16px, radius 4px, border #ea704b.
Hover: color #0f161c, bg rgba(15,22,28,0.05), scale 1.05.
Focus: outline 1px solid #000, bg #1eaedb, color #fff.

### Secondary Button
Default: bg #ffffff, color #050a52, padding 12.5px 32px, radius 8px.
Hover: overlay, border accent.
Focus: bg #1eaedb, color #fff.

### Navigation Links
Default: color varies, no underline.
Hover: bright blue (#3860be), no underline.

### Input Fields
Border: 1px solid #dedede, radius 4px.

### Card
Radius 8px, border 1px solid #dedede, optional soft navy shadow.

## Layout & Responsive Rules
Max content width: ~1440px.
Breakpoints: 400px, 768px, 992px, 1200px, 1400px.

## Interaction Rules
Transition timing: 150ms ease.
Focus indicators: visible outline.
Loading states: opacity 0.5 for disabled.

## DO
- Use only palette colors
- Maintain 8px grid
- Use TeamViewerSans for headings
- Keep shadows subtle
- Maintain consistent border radius per component type

## DON'T
- Use unapproved colors
- Overuse shadows
- Mix sharp and rounded corners
- Reduce contrast below WCAG AA

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #ea704b;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #ea704b;
  font-size: 14px;
  font-weight: 400;
  transition: all 150ms ease;
}
.btn-primary:hover {
  color: #0f161c;
  background: rgba(15,22,28,0.05);
  transform: scale(1.05);
}
.btn-primary:focus {
  outline: 1px solid #000;
  background: #1eaedb;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #dedede;
  padding: 24px;
  box-shadow: rgba(5,10,82,0.08) 0px 12px 24px;
}
```

9. Summary

TL;DR — TeamViewer’s design is clean, corporate, and confidence-building. Navy anchors, bright blue accents, strict 8px grid, and a custom sans-serif typeface keep the brand consistent and trustworthy.

Brand Keywords:

• enterprise-secure
• blue-authority
• grid-disciplined
• minimal-depth
• trust-first