CURATED · OPEN · FREE

Pleo

Centralized business spending and expense management platform

fintechsaas

↓ Download design system (6 MB)Open in OpenDesign

Visit: https://www.pleo.io

📦 Browse pack contents →

Identity DNA

financial efficiencybusiness spendingautomationcontrol

a modern financial operating system

Color

#FFFFFFAccent

#000000Ink

#333333Ink soft

#F5F5F5BG soft

#888888Muted

rgba(0, 0, 0, 0.1)Line

High-contrast monochromatic palette for clarity and trust

Typography

neo-grotesque-sans · monospace

display64px · 400
h245px · 400
body23px · 400
caption16px · 400

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

generous vertical rhythm with 80px section padding

Surfaces

sm · 4px

md · 4px

lg · 8px

pill · 159984px

1px solid rgba(0, 0, 0, 0.1) on interactive elements

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

centered single-column hero followed by alternating content blocks

Motion & Interaction

130msmicro

230mssmall

400msmedium

cubic-bezier(0.4, 0, 1, 1)easing

smooth color and background transitions on hover

subtle color transitions or background shifts · immediate response with minimal delay

Components

button pill-shaped with high contrast (black bg/white text or white bg/black text)
card subtle background blocks with rounded corners
hero massive bold headline with concise supporting text and dual CTA buttons

Voice & Don'ts

Tone direct, empowering, and professional
Headlines imperative and benefit-driven
CTAs clear and actionable

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
Avoid: jargon
Avoid: complex financial terminology
Avoid: aggressive sales language

Inside the pack — real screenshots

Pleo — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

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.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko