Personio

Overview

Personio is an enterprise HR platform that transforms people management through intelligent automation and adaptive workflows. The design system embodies 'Warm Enterprise Minimalism'—a movement that rejects cold corporate aesthetics in favor of human-centered, approachable interfaces without sacrificing professional credibility. The visual language combines a signature purple-to-peach gradient palette (primary #a533cc, secondary #8821ab, tertiary #427af0) with clean geometric forms, creating an interface that feels both sophisticated and inviting. The brand personality is confident yet empathetic: precise, action-oriented, and genuinely invested in helping HR teams focus on people rather than process. Voice example: 'Your team's potential is waiting. Let's unlock it together with smarter workflows, not busywork.'

Colors

The Personio color system is built on a vibrant primary accent (primary: #a533cc) paired with a warm, approachable surface palette anchored in off-white (#ffffff, #f8f7f6). The primary purple is reserved exclusively for interactive elements—buttons, links, focus states, and brand moments—ensuring it commands attention without overwhelming. Secondary (#8821ab) and tertiary (#427af0) provide supporting accent roles: secondary reinforces brand moments and elevated states, while tertiary (a bright blue) is used for informational elements, charts, and secondary CTAs. The surface stack progresses from bright (#fefefe) through container layers (#f0ede9, #ede9e5) to create subtle depth without relying on shadows. On-surface text is set to #141414 (near-black) for maximum readability at 16px body w

Typography

The typography system uses regolaNeue as the primary typeface family, a modern sans-serif that balances geometric precision with warmth. Display (72px, weight 600, line-height 84px, -0.02em tracking) anchors hero sections and major announcements, while headline-lg (40px, weight 600) and headline-md (28px, weight 600) structure page hierarchy. Body text is set at 16px weight 500 with 24px line-height for comfortable reading at standard viewing distances; body-lg (18px, weight 400) is reserved for introductory copy and callouts. Label-md (14px, weight 600, 0.01em tracking) is applied to buttons, badges, and form labels, while label-sm (12px, weight 500, 0.02em tracking) handles captions and metadata. All type scales maintain a 1.5x ratio between sizes, ensuring visual rhythm. Apply text-shad

Layout

Personio uses a fluid 12-column grid system with a maximum container width of 1280px, allowing the design to breathe on ultra-wide displays while maintaining focus on smaller screens. The spacing scale is semantic: xs (4px) for micro-interactions, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutter spacing is consistently 24px, creating a predictable rhythm across all breakpoints. White space is treated as a first-class design element—sections are separated by lg spacing (40px) minimum, and card-to-card padding uses md (24px) to prevent visual crowding. The container-max (1280px) is applied at breakpoint 1280px and above, ensuring content never stretches beyond comfortable readi

Elevation & Depth

Depth in Personio is achieved through a restrained shadow system and subtle background layering rather than aggressive depth cues. Level 1 (Base): flat surfaces at surface (#ffffff) with no shadow. Level 2 (Standard Card): background {colors.surface-container-low} with elevation.sm (0 1px 3px rgba(0, 0, 0, 0.06)), used for cards, modals, and contained components. Level 3 (Elevated/Hover): background {colors.surface-container-high} with elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)), applied on card-hover and interactive elevation. Level 4 (Modal/Overlay): background {colors.surface} with elevat

Shapes

The shape philosophy is 'Geometric Precision with Warmth'—sharp enough to feel modern and intentional, rounded enough to feel approachable. Buttons and primary interactive elements use rounded.lg (1rem / 16px), creating a friendly but professional appearance. Cards and containers use rounded.xl (1.5rem / 24px) for a softer, more inviting presence. Input fields use rounded.DEFAULT (0.5rem / 8px) for a compact, utilitarian feel that contrasts with the warmth of larger containers. Badges and pills use rounded.full (9999px) to signal completeness and status. Modals and overlays use rounded.xl (1.5

Components

Action Elements Buttons are the primary interaction mechanism and come in three variants: primary (background {colors.primary}, text {colors.on-primary}, rounded.lg, padding 12px 24px, height 48px), secondary (transparent background, text {colors.primary}, 1px border {colors.outline-variant}), and ghost (transparent, text {colors.on-surface}, no border). All buttons use label-md typography (14px, weight 600). Hover states apply a 200ms transition to background-color with cubic-bezier(0.2, 0, 0, 1) easing; primary-hover darkens to #8821ab, secondary-hover applies {colors.surface-container-high} background, ghost-hover applies {colors.surface-container-high}. Active states darken further: primary-active becomes #6a2183. Focus states add a 3px ring at rgba(165, 51, 204, 0.1) around the bu

Do's and Don'ts

**Do**

• Do use primary (#a533cc) exclusively for interactive elements—buttons, links, focus states, and brand moments. Never use it for backgrounds or body text.
• Do apply md spacing (24px) between major sections and lg spacing (40px) between hero and content to create visual breathing room.
• Do use elevation.sm (0 1px 3px rgba(0, 0, 0, 0.06)) for standard cards and elevation.md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover states; avoid stacking shadows.
• Do maintain a 200ms transition duration with cubic-bezier(0.2, 0, 0, 1) easing for all interactive state changes (hover, focus, active).
• Do use regolaNeue at weight 600 for all labels and headlines; weight 500 for body text at 16px ensures legibility without heaviness.

**Don't**

• Don't use primary color for backgrounds, body text, or non-interactive elements; it dilutes the accent's impact and reduces accessibility.
• Don't apply shadows to more than one level of hierarchy simultaneously; each elevation level should replace the previous, not accumulate.
• Don't use rounded.full (9999px) for buttons or inputs; reserve it for badges and status pills where completeness is the semantic intent.
• Don't exceed 1280px container width; content becomes difficult to scan and the design loses its intentional focus.
• Don't animate transitions faster than 150ms or slower than 300ms; faster feels jarring, slower feels sluggish and reduces perceived responsiveness.