Kleinanzeigen Design System Deep Dive

1. Brand Overview

Kleinanzeigen is Germany’s go-to marketplace for second-hand goods, local services, and community exchange. It's busy by nature — the product is all about users creating listings, searching, negotiating. But the new iteration of their design language comes across as friendly-minimalist, leaning toward clean shapes and muted greens, with touches of the brand’s lime accent to keep things lively.

First impression: this is utility done with warmth. Green tones dominate for brand recognition, but the typography sticks to dependable sans-serifs: Helvetica Neue with a fallback stack of Helvetica, Arial. No fancy typefaces here. This works because the brand needs to feel accessible to everyone — from the casual seller unloading a bike to a small shop owner listing furniture. Serif or display fonts would add noise; Kleinanzeigen is keeping the focus on the content, the listings.

The vibe tilts toward "familiar" digital UI — big pill-shaped CTAs, subtle shadows in only a few places, and borders instead of heavy depth. Their design philosophy is clarity over decoration. Green is the hero, white is the stage, and typography does the supporting work.

The entire system rides an 8px spacing scale as the backbone. This ties things together across breakpoints, which are well thought out: six in total, starting at 640px for small devices up to 1536px for huge desktop screens. The interface adapts without collapsing into "app mode" — even mobile holds onto the breathing room.

If you’re building something new in this style, take note: Don’t try to innovate with flashy gradients or loud animations — their system avoids those entirely. Kleinanzeigen’s brand goal is trust and efficiency. Everything in their UI is designed to reduce friction and build confidence between buyers and sellers.

2. Color System

2.1 Primary Colors

Primary: rgb(233, 248, 198) → #e9f8c6. Odd choice for a "primary" — it’s a pale, almost pastel green. This reads more as a secondary background than a punchy CTA tone. The actual “action green” in buttons is #b5e941 — bright, almost lime — this is where the brand energy comes in.

Compared to competitors (like eBay Kleinanzeigen in its old form or Facebook Marketplace), Kleinanzeigen leans softer. No dark blues or heavy reds — the greens communicate "eco", "community", "safe exchange". Psychologically, green reassures and invites. Here, the pale green (#e9f8c6) serves as the thematic anchor while bright lime (#b5e941) triggers interaction.

2.2 Complete Palette

2.3 Color Relationships

They use high-contrast between lime #b5e941 and deep green text #1d4b00. This passes WCAG AA easily — bright background + deep saturated text. Pale green backgrounds (#e9f8c6) with black text (#0c0c0b) also pass comfortably.

Accessibility: gray tones (#77756f) stay above the 4.5:1 contrast ratio against white, so captions are legible even for low-vision users. Kleinanzeigen avoids low-contrast text except in rare hover states like violet (#5a33ae), which isn’t primary UI.

No real “dark mode” here. Background stays white, palette simply flips between greens for emphasis.

2.4 Usage Guide

• Use Bright Lime (#b5e941) exclusively for primary actions. Pair with Forest Green text.
• Deep Green (#326916) for text links or outlines — never for big fills.
• Pale Green (#e9f8c6) is for semantic highlighting and backgrounds, not for CTAs.
• Light Gray (#dddbd5) is strictly for borders/dividers. Avoid using it for text.
• Violet hover states are rare — don't introduce them unless following existing interactive patterns.
• Black (#0c0c0b / #000000) is always for text/icons — never backgrounds.
• Keep the green ecosystem intact: don't mix in unrelated blues or oranges.

3. Typography

3.1 Font Families

• Primary font: Helvetica Neue
• Fallbacks: Helvetica, Arial — all system sans-serif defaults.
• No Google Fonts or Adobe Fonts; fully system-reliable.
• No variable fonts — weight changes are handled via discrete font weights (400, 600).

The choice is conservative — Helvetica is neutral, clear, timeless. This matches their “function first” philosophy.

3.2 Type Scale

3.3 Hierarchy

They don’t lean on huge size jumps — H1 is just 18px. Typography hierarchy relies on weight (600 vs 400) and color, not massive scaling. This keeps the interface tight, content-heavy without feeling chaotic. Buttons and links live in the 12–14px range, captions often shrink to 12px. Readability is fine at these sizes because font choice is crisp.

4. Spacing & Layout

4.1 Spacing Scale

Base scale: 8px. Values are mostly multiples of 4px, with a few odd decimals (e.g., 85.1094px — likely image sizes).

4.2 Layout

Breakpoints: 640px, 768px, 970px, 1024px, 1280px, 1536px.
Grid: Responsive stack at small, multi-column at medium+, fixed max widths after 970/1280.

5. Visual Elements

• Border Radius:
  • 2px (list items, badges)
  • 4px (small elements)
  • 8px (dialogs)
  • Full pill: 99999px (buttons, forms, pills) — this is everywhere.
• Shadows:
  • Only subtle: rgba(159, 157, 152, 0.3) 0px 0px 8px — content cards.
  • Mostly flat design otherwise.
• Borders: Lots of 1px solid, light gray dividers. 2px borders on buttons.

6. Components

6.1 Buttons

Primary CTA
Default: bg #b5e941, text #1d4b00, padding 0px 16px, border-radius 99999px, border 2px solid #b5e941, font-weight 600, font-size 14px.
Hover/Active/Focus: Not specified — likely minor tone shifts.

Outline Secondary
bg transparent, text #326916, border 2px solid #95958e, same pill radius.

Solid Dark Green
bg #326916, text white, border 0, pill radius.

Icon Button (overlay)
bg rgba(255, 255, 255, 0.64), text #0c0c0b, pill radius.

Tab Button
bg #f4f2ef, text #0c0c0b, padding 8px 16px, radius 4px 4px 0px 0px.

6.2 Links

• Deep Green #326916 underlined — main link style.
• Darker greens and black for non-underlined link-like elements.
• Weight: 400–600 depending on function.

6.3 Forms

Text input: white bg, black text, no border, padding 8px 4px. Focus state not specified.

6.4 Cards

No explicit card data, but shadows imply subtle depth for group blocks.

7. Design Tokens

:root {
  /* Colors */
  --color-black-ui: #0c0c0b;
  --color-deep-green: #326916;
  --color-warm-gray: #77756f;
  --color-forest-green: #1d4b00;
  --color-white: #ffffff;
  --color-true-black: #000000;
  --color-bright-lime: #b5e941;
  --color-light-gray: #dddbd5;
  --color-pale-green: #e9f8c6;
  --color-violet: #5a33ae;
  --color-pastel-green: #d3f28d;

  /* Typography */
  --font-primary: "Helvetica Neue", Helvetica, Arial;
  --font-size-18: 1.13rem;
  --font-size-16: 1rem;
  --font-size-14: 0.88rem;
  --font-size-12: 0.75rem;
  --line-height-130: 1.30;
  --line-height-150: 1.50;
  --line-height-100: 1.00;
  --weight-400: 400;
  --weight-600: 600;

  /* Spacing */
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-85: 85.1094px;

  /* Radius */
  --radius-2: 2px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-pill: 99999px;

  /* Borders */
  --border-light-gray: 1px solid #dddbd5;

  /* Shadows */
  --shadow-soft: rgba(159, 157, 152, 0.3) 0px 0px 8px 0px;
}

8. AI Coding Assistant Prompt

# Kleinanzeigen Design System Specification

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

## Brand Context
Kleinanzeigen’s design is functional, community-focused, and trust-driven. It uses soft greens, helpful white space, and neutral typography to make listings the hero. Components are minimal but friendly, with pill shapes and subtle depth.

## Colors
- Black UI Text: #0c0c0b — Body text, headings
- Deep Green: #326916 — Link text, accents, outline buttons
- Warm Gray: #77756f — Secondary text, captions
- Forest Green: #1d4b00 — Text inside lime buttons
- White: #ffffff — Background, cards, inputs
- True Black: #000000 — Icons, overlays
- Bright Lime: #b5e941 — Primary button background
- Light Gray: #dddbd5 — Dividers, table borders
- Pale Green: #e9f8c6 — Light background sections
- Violet: #5a33ae — Rare hover focus accents
- Pastel Green: #d3f28d — Hover states on lime buttons

## Typography
Font family: "Helvetica Neue", Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 18px | 600 | 1.30 | Page titles |
| H1 small | 16px | 600 | 1.30 | Section headings |
| Body/Link | 14px | 400 | 1.50 | Paragraphs, inline links |
| Button | 14px | 600 | 1.30 | Primary CTA |
| Caption | 12px | 400 | 1.30 | Meta info |
| Caption bold | 12px | 600 | 1.00 | Tag labels |

## Spacing & Grid
Base: 8px  
Scale: 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 12px, 16px, 24px, 85.1094px  
All spacing must align to this system.

## Border Radius
- sm: 2px — Badges, list items  
- md: 4px — Tabs  
- lg: 8px — Dialogs  
- full: 99999px — Buttons, pills, forms  

## Shadows & Depth
- Soft shadow: rgba(159, 157, 152, 0.3) 0px 0px 8px — Cards
Mostly flat elsewhere. Use borders as separators.

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: #b5e941;
  color: #1d4b00;
  padding: 0px 16px;
  border-radius: 99999px;
  border: 2px solid #b5e941;
  font-weight: 600;
  font-size: 14px;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #326916;
  border: 2px solid #95958e;
  padding: 0px 16px;
  border-radius: 99999px;
  font-weight: 600;
  font-size: 14px;
}
```

### Input Field
```css
.input-text {
  background: #ffffff;
  color: #0c0c0b;
  border: 0;
  padding: 8px 4px;
}
```

## Layout & Responsive Rules
Max content width: 1280px on desktop  
Breakpoints: 640px, 768px, 970px, 1024px, 1280px, 1536px  

## Interaction Rules
- Transition for state changes: 150ms ease
- Focus indicators must be visible and color-appropriate
- Hover states slight tone shifts only

## DO
- Use ONLY palette colors
- Maintain 8px spacing logic
- Keep corner styles consistent
- Use Helvetica Neue for all text
- Ensure high contrast for text

## DON'T
- Add new colors
- Mix rounded and sharp radii in a single component
- Use heavy shadows
- Increase font sizes outside scale

## Code Examples

Primary Button in Tailwind:
```html
<button class="bg-[#b5e941] text-[#1d4b00] px-4 py-0 rounded-full border-2 border-[#b5e941] font-semibold text-sm">Click Me</button>
```

Card:
```html
<div class="bg-white rounded-[8px] p-4 shadow-[rgba(159,157,152,0.3)_0px_0px_8px]">Card content</div>
```

Text Input:
```html
<input type="text" class="bg-white text-[#0c0c0b] border-0 px-1 py-2" />
```

9. Summary

TL;DR — Kleinanzeigen’s system is green-first, pill-shaped, and typography-straightforward. It’s a functional marketplace with clean, accessible UI. Build on the 8px grid, keep greens pure, avoid decor beyond subtle shadows.

Brand Keywords

• community-functional
• green-minimalist
• trust-focused
• pill-consistent
• accessible-neutral