---
name: Pleo
description: "An excellent example of a refined, trust-focused fintech interface that relies on typography and whitespace rather than decorative elements."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#000000"
  secondary: "#333333"
  tertiary: "#FFFFFF"
  neutral: "#888888"
  bg-soft: "#F5F5F5"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: neo-grotesque-sans
    fontSize: 64px
    lineHeight: 1.1
    fontWeight: 400
    letterSpacing: "-1px"
  h2:
    fontFamily: neo-grotesque-sans
    fontSize: 45px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  body:
    fontFamily: neo-grotesque-sans
    fontSize: 23px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: neo-grotesque-sans
    fontSize: 16px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 4px
  md: 4px
  lg: 8px
  pill: 159984px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

Centralized business spending and expense management platform

*a modern financial operating system*

## Colors

High-contrast monochromatic palette for clarity and trust

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Secondary text (`#333333`)** — uses `ink-soft` token
- **Accent (`#FFFFFF`)** — uses `accent` token
- **Muted (`#888888`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

## Layout

centered single-column hero followed by alternating content blocks

*Rhythm:* generous vertical rhythm with 80px section padding

## Elevation & Depth

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

## Shapes

- `sm`: 4px
- `md`: 4px
- `lg`: 8px
- `pill`: 159984px

## 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

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

```
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.
```