TP-Link Design System Deep Dive

1. Brand Overview

TP-Link’s design language is exactly what you’d expect from a global networking hardware brand: clean, utilitarian, and built for trust. This is not a brand chasing visual trends — it’s a brand that wants you to believe your router will work flawlessly for five years straight. The site gives off a “function first” vibe, with a dash of approachable personality through its turquoise accent (#10c1d0) and occasional rounded corners.

They lean heavily into a corporate sans-serif (AktivGrotesk-Corp) with Helvetica as fallback. This is a safe choice — modern enough to signal tech, neutral enough to not alienate enterprise buyers. Typography is tight and consistent, with no wild line-height experiments. The palette is restrained: lots of black (#000000), off-whites, and muted greys, punctuated by that turquoise for interactive states.

Shadows are subtle. Nothing here screams “material design” — depth cues are there to separate layers, not to show off. Border radii hover mostly around 4px, 5px, and 10px — enough to soften without going full-pill. Layout clearly follows an 8px scale, with occasional 4px and 5px spacings for micro-adjustments — the kind of micro-grid tweaks you see when designers care about pixel alignment.

The target audience? Tech-savvy consumers, small businesses, and corporate IT departments. TP-Link needs to speak to “your network is safe” and “your Wi-Fi is fast” in the same breath. The design system supports that: readable typography, clear hierarchy, conservative color use, and components that look like they belong in a product manual and on a consumer product page.

2. Color System

2.1 Primary Colors

The main brand accent is turquoise — #10c1d0 — used sparingly, often as a hover/focus state. This color is a sweet spot between blue (trust) and green (freshness). It’s bright enough to stand out against a neutral background but not so saturated that it feels playful. Compare this to Netgear’s purple or ASUS’s neon — TP-Link is calmer, more professional.

Their “primary” text and structural color is straight black (#000000). This is the anchor — used for text, icons, and certain borders. The rest of the palette is built around greys (#36444b, #606266, #1d2529) and whites (#ffffff, #f2f7fa), with one odd throwback: the old-school link blue (#0000ee).

2.2 Complete Palette

2.3 Color Relationships

Black (#000000) on white (#ffffff) is maximum contrast — WCAG AAA compliant. Turquoise (#10c1d0) on white has enough contrast for large text but would fail for small UI text unless bold. Link blue (#0000ee) is safe — it’s a web default — but it’s visually jarring compared to the rest of the palette.

The greys (#606266, #36444b) are close in luminance — borderline for accessibility if used together without clear hierarchy.

No obvious dark mode system is in place — overlays use semi-transparent darks (#1d2529 at 70% opacity) to create modal backgrounds.

2.4 Usage Guide

• Use black for primary text and icons.
• Keep turquoise for interactive states — don’t use it for static headings.
• Pair light ice (#f2f7fa) backgrounds with dark text for accessibility.
• Avoid using link blue next to turquoise — the clash feels unstyled.
• Greys are for subtle hierarchy — don’t stack them without a strong size/weight difference.

3. Typography

3.1 Font Families

Primary: AktivGrotesk-Corp, Helvetica — corporate sans-serif, clean and modern.
Secondary: Arial, Helvetica — fallback for certain headings and captions.

No Google Fonts or Adobe Fonts detected — likely self-hosted or licensed.

3.2 Type Scale

(Full scale in extracted data includes many variants at same sizes with different weights.)

3.3 Hierarchy

Headings scale down gradually — no massive jumps. The 40px and 36px H1s anchor hero sections. Body text sits around 16–20px, which is generous for readability. Captions at 12–14px with high line-heights (up to 2.86) make footers airy. Consistent family choice keeps the system coherent — Arial only creeps in for legacy or fallback contexts.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid.
They use multiples and half-steps: 4px, 5px, 6px for micro-adjustments.

4.2 Layout

Breakpoints:

• 414px — mobile portrait
• 736px — mobile landscape / small tablet
• 1024px — tablet / small desktop
• 1440px — desktop
• 1680px — large desktop / widescreen

Responsive behavior is classic: content scales in containers, with spacing tokens adjusting at breakpoints.

5. Visual Elements

Border Radius

They keep corners modest — 4px and 10px dominate. 50% and 100% are reserved for circular avatars/icons.

Shadows

Subtle, low-opacity shadows:

• rgba(54, 68, 75, 0.1) 0px 0px 4px, 0px 2px 6px — small depth, used 16 times.
• rgba(60, 80, 170, 0.1) 0px 10px 30px — soft large shadow for hero elements.
• rgba(19, 110, 248, 0.3) 0px 0px 0px 5px — focus rings.

Borders

Mostly 1px solid neutrals (#bdbeC0, #808080) for dividers. Some 2px outset black for old-school buttons — looks legacy. Rare 3px solid blue-ish for links.

6. Components

6.1 Buttons

Cookie Accept Button

• Default: background: #4acbd6, color black, padding 0 16px, radius 3px, border none, font-weight 300, font-size 16px.
• No hover/active/focus states defined in data — likely handled via JS.

Banner Icon Button

• Default: semi-transparent white background, radius 4px, no padding, font-size 0 (icon only).

6.2 Links

Variants:

1. Black text, underline — font-weight 300.
2. Dark grey (#1f2533) no underline — font-weight 400.
3. Link blue (#0000ee), underline — font-weight 300.
4. Grey (#36444b), underline — font-weight 500.

6.3 Forms

Text inputs: transparent background, black text, no border, radius 4px, padding 0 24px. Minimalist — relies on container styling.

6.4 Cards

No explicit card component in data — likely styled divs with 10px radius, subtle shadows (rgba(54, 68, 75, 0.1)).

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-black: #000000;
  --color-dark-slate: #36444b;
  --color-white: #ffffff;
  --color-cool-grey: #606266;
  --color-dark-overlay: #1d2529;
  --color-link-blue: #0000ee;
  --color-light-ice: #f2f7fa;
  --color-turquoise-accent: #10c1d0;

  /* Typography */
  --font-primary: 'AktivGrotesk-Corp', Helvetica, sans-serif;
  --font-secondary: Arial, Helvetica, sans-serif;

  /* Spacing */
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-12: 12px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-30: 30px;
  --space-32: 32px;
  --space-35: 35px;
  --space-40: 40px;
  --space-52: 52px;
  --space-100: 100px;

  /* Border Radius */
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-list: 5px;
  --radius-lg: 10px;
  --radius-xl: 30px;
  --radius-round: 50%;
  --radius-full: 100%;

  /* Shadows */
  --shadow-sm: rgba(54, 68, 75, 0.1) 0px 0px 4px 0px, rgba(54, 68, 75, 0.1) 0px 2px 6px 0px;
  --shadow-lg: rgba(60, 80, 170, 0.1) 0px 10px 30px 0px;
  --shadow-focus: rgba(19, 110, 248, 0.3) 0px 0px 0px 5px;
}

8. AI Coding Assistant Prompt

# TP-Link Design System Specification

You are a TP-Link design expert. Build UIs matching their visual language exactly.

## Brand Context
TP-Link’s design language is functional, neutral, and trustworthy. It uses a restrained palette with a turquoise accent for interactivity. Typography is corporate sans-serif with consistent sizing and spacing on an 8px grid.

## Color Palette
- Black: #000000 — Primary text, icons, structural UI
- Dark Slate: #36444b — Secondary text, muted headings
- White: #ffffff — Backgrounds, header text
- Cool Grey: #606266 — Neutral text, UI chrome
- Dark Overlay: #1d2529 — Overlay backgrounds
- Link Blue: #0000ee — Hyperlinks
- Light Ice: #f2f7fa — Panel backgrounds
- Turquoise Accent: #10c1d0 — Hover/focus states

## Typography
- Primary: 'AktivGrotesk-Corp', Helvetica, sans-serif
- Secondary: Arial, Helvetica, sans-serif

| Level      | Size   | Weight | Line Height | Use For           |
|------------|--------|--------|-------------|-------------------|
| H1         | 40px   | 700    | 1.50        | Hero titles       |
| H1 Alt     | 36px   | 700    | 1.30        | Section headers   |
| Button Lg  | 36px   | 700    | 1.40        | Banner buttons    |
| H2         | 32px   | 500    | 1.25        | Subheadings       |
| Body Lg    | 20px   | 400    | 1.60        | Main body text    |
| Link       | 20px   | 500    | 1.25        | Navigation links  |
| Caption    | 14px   | 400    | 2.86        | Footer text       |

## Spacing & Grid
Base: 8px grid.  
Scale: 4px, 5px, 6px, 8px, 12px, 16px, 20px, 30px, 35px, 40px, 52px, 100px.

## Border Radius
- sm: 3px — small buttons
- md: 4px — inputs, buttons
- list: 5px — list items
- lg: 10px — cards, images
- xl: 30px — large buttons
- round: 50% — avatars
- full: 100% — icons

## Shadows & Depth
- Small: rgba(54, 68, 75, 0.1) 0px 0px 4px, 0px 2px 6px
- Large: rgba(60, 80, 170, 0.1) 0px 10px 30px
- Focus ring: rgba(19, 110, 248, 0.3) 0px 0px 0px 5px

## Components

### Primary Button
Default: background #4acbd6, color #000000, padding 0 16px, radius 3px, border none, font-weight 300, font-size 16px.

```css
.btn-primary {
  background: #4acbd6;
  color: #000000;
  padding: 0 16px;
  border-radius: 3px;
  font-weight: 300;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:focus {
  outline: 2px solid #10c1d0;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Input Field
```css
.input {
  background: transparent;
  color: #000000;
  border: none;
  border-radius: 4px;
  padding: 0 24px;
  font-family: 'AktivGrotesk-Corp', Helvetica, sans-serif;
}
.input:focus {
  outline: 2px solid #10c1d0;
}
```

## Layout & Responsive Rules
Breakpoints: 414px, 736px, 1024px, 1440px, 1680px.

## Interaction Rules
- Transition timing: 150ms ease for state changes.
- Focus indicators: 2px solid turquoise accent.
- Disabled states: 50% opacity.

## DO List
- Use only colors from the palette.
- Maintain 8px grid spacing.
- Use AktivGrotesk for headings.
- Keep corners consistent (4px, 10px).
- Use shadows sparingly.

## DON'T List
- Don’t use link blue for non-link elements.
- Don’t mix 100% radius with square corners in same component.
- Don’t invent new accent colors.
- Don’t overload sections with multiple greys.

## Code Examples

Primary Button:
```css
.btn-primary { background: #4acbd6; color: #000; padding: 0 16px; border-radius: 3px; }
```

Card:
```css
.card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: var(--shadow-sm); }
```

Input:
```css
.input { border-radius: 4px; padding: 0 24px; background: transparent; }
```

9. Summary

TL;DR — TP-Link’s design system is corporate-clean with a turquoise wink. Tight typography, restrained color palette, and an 8px grid make it predictable for developers and safe for a global tech audience.

Brand Keywords

• corporate-functional
• tech-reliable
• turquoise-accented
• grid-consistent
• shadow-subtle