# Pleo · Design system migration spec

> Source: https://www.pleo.io  ·  Curated by OpenDesign  ·  en

> An excellent example of a refined, trust-focused fintech interface that relies on typography and whitespace rather than decorative elements.

## 1. Identity DNA

The design system for Pleo operates like a modern financial operating system: a centralized, structured environment where every element serves a clear functional purpose. Its identity is defined by a vocabulary of financial efficiency, business spending, automation, and control, manifesting as a centralized platform for expense management.

**One-liner:** Centralized business spending and expense management platform
**Keywords:** financial efficiency · business spending · automation · control
**Analogy:** a modern financial operating system

## 2. Color

The color system is built on a principle of high-contrast monochrome for maximum clarity and trust. A strict palette of black, white, and light gray surfaces eliminates visual noise, focusing attention entirely on content and function.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#F5F5F5` | card background |
| `--ink` | `#000000` | body text |
| `--ink-soft` | `#333333` | secondary text |
| `--muted` | `#888888` | placeholder |
| `--accent` | `#FFFFFF` | single accent |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast monochromatic palette for clarity and trust

The guiding principle is that color should communicate hierarchy and state through contrast alone, not through decorative hue.

## 3. Typography

Typography employs a clean neo-grotesque sans-serif voice, chosen for its directness and legibility across digital interfaces. The scale is structured to guide the eye from massive, bold hero headlines down through section titles, lead paragraphs, and functional UI text.

- **Display:** neo-grotesque-sans
- **Body:** neo-grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 64px | 1.1 | 400 | -1px | Hero headline |
| h2 | 45px | 1.2 | 400 | normal | Section titles |
| body | 23px | 1.6 | 400 | normal | Lead paragraphs |
| caption | 16px | 1.5 | 400 | normal | UI text and small copy |

## 4. Spacing

Spacing follows a generous vertical rhythm, anchored by 80px section padding, to create breathing room and a clear information hierarchy.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous vertical rhythm with 80px section padding

## 5. Surfaces

Surfaces are rendered with a flat, minimalist treatment, avoiding decorative depth in favor of clarity. Borders are used sparingly as a 1px solid line on interactive elements, providing subtle definition without adding weight.

- **Radius:** sm 4px · md 4px · lg 8px · pill 159984px
- **Borders:** 1px solid rgba(0, 0, 0, 0.1) on interactive elements

## 6. Layout

The layout skeleton begins with a centered, single-column hero designed for immediate impact. This is followed by alternating content blocks separated by generous vertical spacing, creating a steady, scannable rhythm.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** centered single-column hero followed by alternating content blocks

## 7. Motion & Interaction

Motion philosophy is minimalist and strictly functional, reserved for communicating state changes. Transitions are fast (130ms) with a custom cubic-bezier easing, providing immediate feedback on hover and click interactions without decorative flourish.

- **Durations:** micro 130ms · small 230ms · medium 400ms
- **Easing:** `cubic-bezier(0.4, 0, 1, 1)`
- **Patterns:**
  - smooth color and background transitions on hover

- **Hover:** subtle color transitions or background shifts
- **Click:** immediate response with minimal delay
- **Transition:** fast 130ms cubic-bezier transitions for UI state changes
- **Keyboard:** standard focusable elements

## 8. Voice & Don'ts

The editorial voice is direct, empowering, and professional, using imperative headlines that are benefit-driven and clear, actionable calls-to-action. It deliberately avoids jargon, complex financial terminology, and aggressive sales language.

- **Tone:** direct, empowering, and professional
- **Headline style:** imperative and benefit-driven
- **CTA style:** clear and actionable
- **Avoid:** jargon / complex financial terminology / aggressive sales language

### Don'ts
- ❌ don't use decorative gradients — screenshot shows flat, solid color backgrounds
- ❌ don't use drop shadows on cards — screenshot shows flat surfaces with subtle borders
- ❌ don't use heavy font weights — screenshot shows consistent 400 weight typography
- ❌ don't use vibrant accent colors — screenshot shows a strict monochrome palette
- ❌ don't use complex multi-column layouts in the hero — screenshot shows centered, single-column hero
- ❌ don't use rounded rectangles with small border-radius — screenshot shows full pill-shaped buttons

The system's strength lies in what it consistently omits: decorative gradients, heavy shadows, vibrant accents, and complex layouts that would compromise its core principle of trust-focused efficiency.

## System Prompt (paste into AI tool)

```
This is a premium fintech SaaS platform focused on business expense management. The design utilizes a refined, minimalist aesthetic with a strict monochromatic palette (black, white, and light grays) to convey trust and efficiency. The typography is a clean neo-grotesque sans-serif with a large, high-contrast hero section. Key hex colors are #000000, #FFFFFF, and #F5F5F5. Critical design constraints include: no decorative gradients or heavy drop shadows, using a consistent font weight of 400, and implementing pill-shaped buttons instead of standard rounded rectangles. Avoid complex multi-column hero layouts or vibrant accent colors.
```