Xing Design System Deep Dive

1. Brand Overview

Xing is one of those brands you immediately recognize if you've spent time in the German-speaking professional networking scene. It’s a platform aimed squarely at career-minded individuals—job seekers, recruiters, and professionals looking to network. While LinkedIn plays the globally dominant card, Xing’s visual language feels more locally tuned, distinctly German in its restraint and precision.

Open the site and you get a crisp, clean, utilitarian impression. This is not a “fun” or “playful” brand—it’s efficient, serious, and direct. Colors are muted, typography is unpretentious but well-considered, and the UI elements are built to be unobtrusive helpers rather than scene-stealers. You’re meant to focus on the content: jobs, connections, messages. The brand’s UI doesn’t try to over-style, it tries to get out of the way while still being coherent.

This design philosophy says: “We’re here to facilitate professional growth and opportunities, not entertain you.” Buttons have logical padding. Border radii are consistent. Shadows are light and subtle—used for separation, not drama. The grid is based on an 8px system, signaling a clear, mathematical approach to spacing and proportions.

What strikes me is the marriage of corporate professionalism with small touches of warmth. The muted teal (#007b80) and deep purple (#8a2ce8) accents break the monotony of grays and whites. It’s enough to make the brand feel slightly distinctive without distracting from core functionality.

So who’s this for? Primarily professionals in Germany, Switzerland, and Austria. People who value directness, efficiency, and trusted networks. This is a “no nonsense” brand—it does what it says on the tin. Xing’s design system reflects that through clean lines, consistent spacing, and a predictable visual language. It's professional social infrastructure in pixels—and it’s designed to be invisible when it needs to be, visible when it counts.

2. Color System

2.1 Primary Colors

Xing’s primary action color is a teal (#007b80). It’s deep enough to feel trustworthy, lively enough to catch the eye. Teal communicates stability (blue) with a hint of growth/optimism (green). That’s a clever choice for a professional network—confidence without aggression.

The other standout is a high-saturation purple (#8a2ce8). This is unusual for a corporate/professional brand. It’s clearly used for secondary emphasis—marketing blocks, callouts. Purple has connotations of creativity and ambition, and here it injects personality without feeling whimsical.

The primary neutral is a near-black (#1d2124) used widely for text and UI outlines. It reads as “serious and readable.” These three—teal, purple, dark gray—form the brand's main identity triad.

2.2 Complete Palette

Here’s every color extracted from the site:

These colors are used consistently—no random shades from outside the palette.

2.3 Color Relationships

Contrast is solid: dark text on white easily clears WCAG AA; teal on white is borderline for small text but fine for buttons/links; white on teal is highly legible.

There’s no “dark mode” in the extracted data—no inversion palette detected. Shades are chosen for high contrast against each other, suggesting accessibility was a guardrail in the design process.

Purple and teal are never touching—they’re separated by a buffer of neutral grays or whites. This keeps the palette from getting loud.

2.4 Usage Guide

Works well:

• Teal buttons on light gray or white background.
• Purple callouts with white text.
• Dark gray text over light gray panels.

Avoid:

• Teal over purple—low readability.
• Purple over teal—same issue.
• Mixing multiple accents in one small area—competes for attention.

3. Typography

3.1 Font Families

Xing uses "XING Sans"—their own custom font. Fallbacks: "Trebuchet MS", Arial, Helvetica Neue. No Google or Adobe Fonts here, meaning they control rendering quality and licensing completely.

The custom font is utilitarian, humanist sans-serif. It reads clean at small sizes, holds weight at large headlines. The fallback stack keeps style consistent for non-supported environments.

3.2 Type Scale

All sizes extracted:

3.3 Hierarchy

The scale supports strong hierarchy: Big, bold headers at 54px and 42px, stepping down methodically. The jump from 54 → 42 → 32 is smooth, keeping visual rhythm.

Line heights are tight at large sizes (0.96 for 54px) to give heavy headings more punch. Smaller text opens up (1.43 for 14px) to aid readability.

4. Spacing & Layout

4.1 Spacing Scale

Clearly an 8px baseline (also includes smaller increments for fine-grain control):

4.2 Layout

Breakpoints suggest a progressive responsive strategy:

• Small devices: 539px, 540px
• Mid: 739px, 740px, 883px
• Larger tablets/desktops: 1023px, 1024px, 1113px, 1268px, 1310px, 1356px
• Large desktop: up to 1920px

They’re tuning components for very specific widths—not a generic “mobile/tablet/desktop” split.

5. Visual Elements

Border Radius

All values:

• 0px 16px 16px 0px — rare, maybe table or split card edges
• 4px — small elements (72 usage instances)
• 8px — cards, badges (74 uses)
• 14px — job listing cards (16 uses)
• 16px — buttons, product panels (112 uses)
• 16px 16px 0 0 — a specific top-rounded container
• 22px — specialized job category buttons
• 24px — bigger cards
• 30px — marketing CTAs
• 32px — buttons, cards (88 uses)
• 50px — pill buttons/tabs (49 uses)
• 92px — rare, maybe large rounded inputs
• 50% — circular buttons/icons (22 uses)

The system is consistent: small radius <=8px for dense UI, up to 50% for circular elements.

Shadows

Two shadows found:

• rgba(33, 42, 54, 0.08) 0px 2px 14px 2px — light drop shadow for cards.
• rgba(33, 42, 54, 0.08) 0px -8px 14px 2px — rare, maybe for sticky elements.

Shadows are subtle; no hard outlines.

Borders

• Mostly 2px solid #ffffff — white borders around elements.
• Some transparent borders for spacing consistency.

6. Components

6.1 Buttons

One example detected: “Interactive Tag”:

Default:

• background: rgb(239, 239, 239)
• color: #1d2124
• padding: 1px 8px
• radius: 32px
• border: none
• shadow: none
• font size: 14px, weight: 400

Hover:

• background: var(--xdlColorButtonSecondaryHover) (not extracted exact value)
• text: var(--xdlColorText)

Focus:

• outline: 2px solid var(--xdlColorFocusRing)

Opinion: Padding is tight—this is for small, chip-like buttons.

6.2 Links

4 link styles based on color:

• Dark Gray (#1d2124), bold — default text links, underline on hover.
• White (#ffffff) — for dark backgrounds.
• Teal (#007b80) — accent links.
• Gray-blue (#5e737d) — subdued, for secondary navigation.

All remove underline on default, add underline on hover.

6.3 Forms

No detailed input styles extracted—likely standard Vuetify defaults with brand colors.

6.4 Cards

Shadows and radii match the earlier section. Likely use 8px or 16px radius with subtle shadow. White background.

7. Design Tokens

:root {
  /* Colors */
  --color-dark-gray: #1d2124;
  --color-white: #ffffff;
  --color-purple: #8a2ce8;
  --color-gray-blue: #5e737d;
  --color-teal: #007b80;
  --color-light-gray: #f4f4f5;
  --color-soft-lavender: #f2e8ff;

  /* Typography */
  --font-primary: "XING Sans", "Trebuchet MS", Arial, "Helvetica Neue";
  --font-size-h1-xl: 54px;
  --font-size-h1-lg: 42px;
  --font-size-h1-md: 32px;
  --font-size-h1-sm: 24px;
  --font-size-h1-xs: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-body-sm: 14px;
  --font-size-caption: 12px;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-7_5: 7.5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11: 11px;
  --space-12: 12px;
  --space-16: 16px;
  --space-19: 19px;
  --space-24: 24px;
  --space-32: 32px;
  --space-36: 36px;
  --space-42: 42px;
  --space-48: 48px;
  --space-68: 68px;
  --space-76: 76px;
  --space-92: 92px;
  --space-395: 395px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-xxl: 22px;
  --radius-card-lg: 24px;
  --radius-marketing: 30px;
  --radius-pill: 32px;
  --radius-tab: 50px;
  --radius-full: 50%;
  --radius-input-lg: 92px;

  /* Shadows */
  --shadow-card: rgba(33, 42, 54, 0.08) 0px 2px 14px 2px;
  --shadow-inverted: rgba(33, 42, 54, 0.08) 0px -8px 14px 2px;
}

8. AI Coding Assistant Prompt

# Xing Design System Specification

System Prompt:
You are a Xing design expert. Build UIs matching their visual language exactly.

Brand Context:
Xing designs for professionals who value clarity, efficiency, and trust. The palette is muted with teal and purple accents, typography is clean sans-serif, spacing is strictly grid-based. Shadows are subtle, borders are consistent.

Color Palette:
- Dark Gray: #1d2124 — Primary text, headings, icons
- White: #ffffff — Backgrounds, text on dark
- Purple: #8a2ce8 — Secondary accents, marketing highlights
- Gray-Blue: #5e737d — Secondary text, muted UI elements
- Teal: #007b80 — Primary action buttons, key links
- Light Gray: #f4f4f5 — Card backgrounds, panels
- Soft Lavender: #f2e8ff — Accent backgrounds for informational blocks

Typography:
- Font: "XING Sans", "Trebuchet MS", Arial, "Helvetica Neue"
- H1 XL: 54px / 700 / 0.96 — Hero headlines
- H1 LG: 42px / 700 / 1.20 — Section headlines
- H1 MD: 32px / 700 / 1.25 — Sub-headings
- H1 SM: 24px / 400 / 1.25 — Intro text
- H1 XS: 20px / 700 / 1.25 — UI titles
- Body LG: 18px / 400–700 / 1.25–1.50 — Main reading text
- Body MD: 16px / 400–700 / 1.25 — Secondary text
- Body SM: 14px / 400–700 / 1.43 — Buttons, links, captions
- Caption XS: 12px / 400–700 / 1.25–1.33 — Labels

Spacing & Grid:
Base: 8px
Scale: 1px, 2px, 4px, 6px, 7.5px, 8px, 10px, 11px, 12px, 16px, 19px, 24px, 32px, 36px, 42px, 48px, 68px, 76px, 92px, 395px
Use scale strictly across padding/margins.

Border Radius:
- sm: 4px — inputs, chips
- md: 8px — cards, badges
- lg: 14px — job cards
- xl: 16px — buttons, panels
- category: 22px — job category pills
- card-lg: 24px — large cards
- marketing: 30px — CTAs
- pill: 32px — tags
- tab: 50px — pill buttons
- full: 50% — circular buttons
- input-lg: 92px — specific rounded inputs

Shadows & Depth:
- Card shadow: rgba(33, 42, 54, 0.08) 0 2px 14px 2px
- Inverted shadow: rgba(33, 42, 54, 0.08) 0 -8px 14px 2px

Component Specifications:

Primary Button:
```css
.btn-primary {
  background: #007b80;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 16px;
  font-weight: 700;
  font-size: 16px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: var(--xdlColorButtonSecondaryHover); }
.btn-primary:focus { outline: 2px solid var(--xdlColorFocusRing); outline-offset: 2px; }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
```

Secondary Button (Chip Tag style):
```css
.btn-secondary {
  background: #efefef;
  color: #1d2124;
  padding: 1px 8px;
  border-radius: 32px;
  font-weight: 400;
  font-size: 14px;
  border: none;
}
.btn-secondary:hover { background: var(--xdlColorButtonSecondaryHover); color: var(--xdlColorText); }
.btn-secondary:focus { outline: 2px solid var(--xdlColorFocusRing); }
```

Navigation Links:
```css
.nav-link {
  color: #1d2124;
  text-decoration: none;
  font-weight: 700;
}
.nav-link:hover { text-decoration: underline; }
```

Input Fields:
```css
.input {
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  outline: 2px solid var(--xdlColorFocusRing);
}
```

Cards:
```css
.card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: rgba(33, 42, 54, 0.08) 0px 2px 14px 2px;
  padding: 24px;
}
```

Layout & Responsive Rules:
- Breakpoints: 539px, 540px, 739px, 740px, 883px, 1023px, 1024px, 1113px, 1268px, 1310px, 1356px, 1428px, 1440px, 1572px, 1680px, 1920px
- Max content width: 1440px
- Padding: multiples of 8px
- Grid gap: 24px typical

Interaction Rules:
- Transition: 150ms ease on state changes
- Focus indicators: 2px solid focus ring color
- Loading states: reduce opacity, no layout shift

DO:
- Use only palette colors
- Keep 8px grid discipline
- Use XING Sans everywhere
- Apply subtle shadows for depth
- Respect defined border radii

DON'T:
- Invent new colors
- Mix sharp and heavily rounded corners in same container
- Overuse purple in functional elements
- Remove hover underline for links unless specified
- Stack multiple shadows

Code Examples:

Primary Button:
```css
.btn-primary { ... }
```

Secondary Button:
```css
.btn-secondary { ... }
```

Card:
```css
.card { ... }
```

9. Summary

TL;DR — Xing’s design system is disciplined, muted, professional. Teal drives action, purple accents marketing. XING Sans anchors typography. Spacing is math-driven at 8px increments. Shadows are light, borders understated.

Brand Keywords:

• german-professional
• muted-precision
• teal-driven
• disciplined-grid
• subtle-depth