kununu

Overview

kununu is a professional employer review and job discovery platform serving the German-speaking labor market. The brand embodies a "Direct & Trustworthy" aesthetic—combining bold, action-oriented design with clean, accessible information architecture. The platform empowers employees to share authentic workplace feedback and helps job seekers make informed career decisions. The visual language is confident yet approachable, using vibrant accent colors (primary orange #ff603b, secondary blue #3c4ee3, tertiary yellow #feca14) against a neutral, light surface (#f7f7f8) to create visual hierarchy and guide user attention to critical actions.

The brand voice is conversational, empowering, and direct. kununu speaks to professionals as peers—no corporate jargon, no false promises. Tone examples: "Erst kununu, dann bewerben" (kununu first, then apply) conveys confidence and pragmatism. "Finde den Arbeitgeber, der wirklich zu dir passt" (Find the employer that truly fits you) emphasizes authenticity and personal agency. The vocabulary favors clarity over complexity; messaging is action-oriented and outcome-focused.

Colors

The color system is built on a light, neutral foundation with three strategic accent roles. **Primary (#ff603b)** is the signature call-to-action color, used exclusively on primary buttons ("Arbeitgeber bewerten"), interactive CTAs, and focus states. It commands attention without aggression—a warm, energetic orange that signals opportunity and forward momentum. Hover state (#e65435) darkens by ~8% luminance; pressed state (#cd4a2f) darkens further by ~15%, providing tactile feedback. **Secondary (#3c4ee3)** is a professional blue reserved for secondary actions, links, and informational highlights (e.g., company ratings, badge accents). It conveys trust and stability, complementing the primary orange without competing. **Tertiary (#feca14)** is a warm yellow used sparingly for star ratings,

Typography

The type system pairs two distinct font families to create visual hierarchy and emotional resonance. **SharpGrotesk23** (600–700 weight) is reserved for headlines and display text—its geometric, confident letterforms communicate authority and clarity. Used at 60px (display), 40px (headline-lg), and 28px (headline-md), it anchors page structure and draws the eye to key messaging. **InterUI** (400–600 weight) handles body copy, labels, and UI text—its humanist proportions and open counters ensure readability at small sizes (12px labels, 16px body) and maintain warmth in dense information layouts. Line heights are generous (1.5x for body, 1.2x for headlines) to support scanning and reduce cognitive friction. Letter-spacing is minimal (-0.04em on display, -0.02em on headlines) to create visual

Layout

The layout system uses a 12-column fluid grid with a max-width of 1280px, enabling responsive scaling from mobile (single column) to desktop (multi-column card layouts). The gutter is consistently 24px, applied as margin between grid items and padding within containers. Spacing follows a semantic scale: **xs (4px)** for micro-interactions (icon spacing), **sm (12px)** for compact grouping (label-to-input distance), **md (24px)** for standard section separation, **lg (40px)** for major section breaks, and **xl (64px)** for page-level rhythm. The hero section uses lg spacing above and below to create breathing room; card grids use md spacing between items. Container max-width of 1280px prevents line lengths from exceeding ~80 characters on desktop, maintaining readability. Whitespace is inte

Elevation & Depth

Depth is conveyed through a three-level shadow system that creates clear visual separation without relying on color shifts. **Level 1 (sm):** 0 1px 2px rgba(0,0,0,0.06)—used for subtle elevation on hover states and secondary interactive elements (e.g., list items). **Level 2 (md):** 0 3px 8px rgba(0,0,0,0.15)—applied to cards, input fields, and standard containers; this is the default elevation for most UI surfaces. **Level 3 (lg):** 0 8px 24px rgba(0,0,0,0.12)—reserved for modals, dropdowns, and floating elements that demand maximum prominence. Shadows use a 0px horizontal/vertical offset to

Shapes

The shape philosophy is **"Soft-Technical"**—combining subtle, human-friendly curves with the precision of a professional tool. Border-radius follows a deliberate scale: **sm (4px)** for compact UI elements (buttons, small badges, input fields), **DEFAULT (8px)** for standard containers and cards, **md (12px)** for larger cards and modals, **lg (16px)** for hero sections and full-width containers, and **full (9999px)** for circular badges and pill-shaped buttons. The reasoning: small radius (4px) on buttons conveys efficiency and precision; medium radius (8px) on cards feels approachable witho

Components

Action Elements **Primary Button** uses {colors.primary} (#ff603b) background with {colors.on-primary} (white) text, 4px radius, and 4px 12px padding for a compact, high-impact appearance. Hover state transitions to #e65435 (8% darker) over 200ms; pressed state uses #cd4a2f (15% darker) for tactile feedback. Apply no border; rely on color contrast for clarity. **Secondary Button** uses rgba(255,96,59,0.05) background with {colors.primary} text and a 1px {colors.outline} border. On hover, background increases to rgba(255,96,59,0.1) and border becomes {colors.primary}. This creates a subtle, reversible interaction that feels less committal than primary buttons—ideal for "Learn More" or "Cancel" actions.

Containers & Surfaces **Card** is the foundational container: {colors.surface-br

Do's and Don'ts

**Do**

• Do use {colors.primary} (#ff603b) exclusively for primary CTAs and focus states—it is the brand's signature accent and must remain distinctive.
• Do maintain consistent 24px (md) spacing between major sections and 12px (sm) spacing within component groups to create visual rhythm and reduce cognitive load.
• Do apply {rounded.DEFAULT} (8px) minimum to all interactive elements, including buttons and inputs, to maintain the soft-technical aesthetic.
• Do use {typography.label-md} (14px, 600 weight) for all button text and {typography.body-md} (16px, 400 weight) for body copy to ensure clear hierarchy.
• Do transition all interactive state changes (hover, focus, pressed) over 200ms with ease-in-out timing to feel responsive and polished.
• Do apply {elevation.md} (0 3px 8px rgba(0,0,0,0.15)) as the default shadow for cards and containers; reserve {elevation.lg} for modals and floating elements only.

**Don't**

• Don't use {colors.primary} on body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and focus indicators to maintain visual hierarchy.
• Don't apply border-radius values below 4px or use sharp corners (0px) anywhere in the interface; the soft-technical aesthetic requires consistent subtle curves.
• Don't mix font families within a single headline or button label; use SharpGrotesk23 for headlines and InterUI for all UI text and body copy.
• Don't apply shadows deeper than {elevation.lg} (0 8px 24px) or use multiple layered shadows; the three-level system is sufficient for all depth requirements.
• Don't use secondary colors ({colors.secondary} or {colors.tertiary}) as primary CTAs or dominant interactive elements; they are supporting accents only.
• Don't apply padding less than 12px (sm) inside containers or spacing less than 24px (md) between major sections; whitespace is a core design principle.