Pleo

Overview

Pleo is a European business spend management platform designed for companies that want to simplify how they handle expenses, cards, and accounting. The design system embodies "Confident Minimalism"—a philosophy that combines Scandinavian clarity with warm, approachable accents. The brand personality is pragmatic yet human: it speaks to finance professionals and business leaders who value efficiency without sacrificing personality. The UI prioritizes clarity through generous whitespace (surfaces at #fafcfc, #ffffff), bold typography (Pleo Scandi Gellix Headline at 58px, 400 weight), and a signature hot-pink primary accent (#feb6fe) that signals action and trust. The emotional response is one of calm confidence: "Your spend is under control, and it's easy to manage."

Voice and vocabulary reflect a brand that demystifies business finance. Tone is conversational but precise—never jargon-heavy, never breathless. Example sentence in Pleo's voice: "Issue cards, pay bills, and automatically sync your books in the background." The brand avoids corporate clichés and instead uses concrete, action-oriented language. Personality traits: approachable, efficient, European (understated elegance), and slightly playful through color choices. The design system supports this by using a restrained palette (mostly neutrals with strategic pink and blue accents) and typography that feels modern but grounded.

Colors

The color system is built on a light, neutral foundation with three strategic accent colors that drive interaction and hierarchy. **Surface Stack**: The background is a soft off-white (#fafcfc, rgb(250, 252, 252)) that feels clean without being sterile. Container layers progress from #f0f2f2 (surface-container-lowest) through #ececec (surface-container) to #d9dfe3 (surface-container-highest), creating subtle depth for cards, modals, and layered UI. The outline color (#737373) is used for borders and dividers, while outline-variant (#b3b3b3) provides softer separation. **Primary Accent (#feb6fe)**: This hot pink is the signature brand color, applied to all primary CTAs ("Get started", "Get in touch"), interactive states, and brand moments. It commands attention without aggression—a warm, in

Typography

The type system uses two custom Pleo Scandi Gellix typefaces (Headline and Text variants) paired with Neue Haas Grotesk as fallback, creating a distinctive, modern voice. **Display (58px, 400 weight, -0.02em tracking)** is reserved for hero headlines like "First in Europe for business spend"—large, confident, and slightly condensed through negative letter-spacing. **Headline-lg (40px, 400 weight)** and **Headline-md (28px, 400 weight)** handle section titles and feature headlines, maintaining the same light weight for a sophisticated, uncluttered appearance. **Body-lg (18px, 400 weight, 28px line-height)** and **Body-md (16px, 400 weight, 24px line-height)** are used for descriptive copy and longer-form content, with generous line-height (1.56x and 1.5x respectively) ensuring readability o

Layout

The layout system uses a 12-column grid with a max-width of 1280px (container-max), centered on the viewport with symmetric margins. Page rhythm is established through a semantic spacing scale: **lg spacing (40px)** separates major sections (hero, features, testimonials), **md spacing (24px)** creates breathing room within sections and between cards, and **sm spacing (12px)** is used for internal component padding and tight groupings. The gutter (24px) is applied consistently to left/right margins on mobile and tablet, scaling to 40px on desktop. Whitespace is treated as a design element—the light background (#fafcfc) is never crowded. Cards and containers use 24px padding (md spacing) internally, with 24px gaps between grid items. Hero sections employ full-width backgrounds with centered

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. **Level 1 (Base)**: The background (#fafcfc) is flat with no shadow. **Level 2 (Standard Cards & Dropdowns)**: Cards and standard UI containers use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, close shadow that lifts the element slightly from the surface. This shadow is applied to cards, input fields on focus, and dropdown panels. **Level 3 (Elevated/Modals)**: Modals, popovers, and highly interactive elements use box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28), a larger, more diffuse shadow that crea

Shapes

The shape philosophy is **"Soft Geometric"**—rounded corners are used strategically to soften the interface without sacrificing clarity or modernity. **Buttons and primary CTAs** use full border-radius (9999px / rounded-full), creating pill-shaped buttons that feel approachable and clickable. This is the most prominent shape in the system and appears on all primary and secondary action buttons. **Cards and containers** use rounded-lg (0.75rem / 12px), a moderate radius that feels modern and slightly softer than sharp corners, without being overly rounded. **Input fields and smaller components*

Components

Action Elements Buttons are the primary interaction pattern and come in three variants. **Button-primary** (background: #feb6fe, text: #131414, padding: 12px 24px, height: 48px, border-radius: 9999px) is used for the main CTA on every page—"Get started", "Get in touch", "Accept All". The hot-pink background is unmissable and invites action. On hover, the background transitions to #ffc8d0 (primary-container) over 0.2s ease-out, maintaining the pink family while providing tactile feedback. **Button-secondary** (background: transparent, border: 1px solid #feb6fe, text: #feb6fe, same padding and radius) is used for alternative actions like "Log in" or "Talk to us"—it maintains brand color but with lower visual weight. On hover, background becomes #e9ecef (surface-container-high). **Button-

Do's and Don'ts

**Do**

• Do use the hot-pink primary (#feb6fe) exclusively on CTAs and interactive elements—it's the brand's signature and should never appear as background or neutral fill.
• Do maintain 24px (md spacing) as the standard gap between sections and 12px (sm spacing) for internal component padding—this creates the calm, spacious feel that defines the brand.
• Do apply full border-radius (9999px) only to buttons; use 12px (rounded-lg) for cards and 8px (rounded-md) for inputs to maintain visual hierarchy.
• Do use Pleo Scandi Gellix Headline at 400 weight for all display and headline text—the light weight is essential to the premium, Scandinavian aesthetic.
• Do transition all interactive states (hover, focus, active) over 0.2–0.3s with cubic-bezier(0.4, 0, 0.2, 1) easing to create smooth, responsive feedback.

**Don't**

• Don't use primary pink (#feb6fe) on non-interactive elements or as a background fill—it dilutes the signal and confuses users about what's clickable.
• Don't apply shadows darker than 0 8px 28px rgba(0, 0, 0, 0.28) or use drop-shadow filters; the system uses only box-shadow for clean, predictable depth.
• Don't mix typefaces—always use Pleo Scandi Gellix (Headline for display/headlines, Text for body/labels) with Neue Haas Grotesk as fallback. Never use system-ui or generic sans-serif.
• Don't reduce line-height below 1.5x for body text or below 1.25x for headlines; generous line-height is core to readability and the spacious aesthetic.
• Don't use rounded corners smaller than 8px (rounded-md) on interactive elements; the system avoids sharp corners entirely to maintain the warm, approachable brand voice.