--- version: alpha name: Pleo description: Danish spend-management fintech — pure white canvas with near-black Neue Haas Grotesk at weight 400, black pill buttons, a rich product-app category-color palette, and a monochromatic restraint that signals enterprise trust without corporate stiffness. colors: # Canvas / surface background: "#ffffff" surface: "#ffffff" surface-alt: "#f5f5f5" # light off-white alternate section /* estimated */ # Text / ink ink: "#222222" # primary near-black — detected rgb(34,34,34) ink-secondary: "#424242" # secondary body text /* estimated */ ink-muted: "#737373" # --colorContentInteractivePlaceholder — placeholder / tertiary on-dark: "#ffffff" # text on dark surfaces # Brand primary (marketing: near-black) primary: "#222222" # black pill CTA — detected rgb(34,34,34) on-primary: "#ffffff" # white text on black buttons primary-hover: "#000000" # darker on hover — detected rgb(0,0,0) # Outlined secondary secondary-border: "#222222" # outlined button border on-secondary: "#000000" # outlined button text # Product-app category colors (from CSS vars — used in spend categorisation UI) category-travel: "#c66876" # --colorContentCategoryTravel category-meals: "#3a9555" # --colorContentCategoryMealsAndDrinks category-software: "#9b850c" # --colorContentCategorySoftware category-marketing: "#8374ca" # --colorContentCategoryMarketing category-office: "#5086cd" # --colorContentCategoryOffice category-equipment: "#c66c3d" # --colorContentCategoryEquipment category-service: "#9d75bd" # --colorContentCategoryService category-supplies: "#718d3e" # --colorContentCategorySupplies # Discover / purple accent discover: "#7363c5" # --colorBorderDiscover — purple-violet accent stripe discover-loud: "#43387a" # --colorContentDiscoverLoud — deep purple for text discover-tint: "#dcd7f4" # --colorBackgroundPresentationalPurple — light lavender # Semantic success: "#2c8354" # --colorBorderPositive success-loud: "#255937" # --colorContentPositiveLoud success-tint: "#c6ecd2" # --colorBackgroundPresentationalGreen error: "#e91c1c" # --colorBorderNegative error-hover: "#a51d1d" # --colorContentNegativeHover warning: "#dfc538" # --colorBorderWarning warning-tint: "#fbe360" # --colorBackgroundWarning info: "#286ecc" # --colorContentInfo info-loud: "#27589b" # --colorContentInfoLoud # Borders border: "#cccccc" # --colorBorderStaticLoud border-subtle: "#e5e5e5" # light divider /* estimated */ # Shadow tint shadow-soft: "#000000" # was rgba(0,0,0,0.28) — flattened for hex typography: display-hero: fontFamily: "Neue Haas Grotesk Display, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 64px fontWeight: 400 lineHeight: 1.10 letterSpacing: -0.5px heading-section: fontFamily: "Neue Haas Grotesk Display, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 45px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.3px heading-sub: fontFamily: "Neue Haas Grotesk Display, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 32px fontWeight: 400 lineHeight: 1.25 letterSpacing: -0.2px body-large: fontFamily: "Neue Haas Grotesk Display, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 23px fontWeight: 400 lineHeight: 1.60 letterSpacing: 0px body: fontFamily: "Neue Haas Grotesk Text, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px body-medium: fontFamily: "Neue Haas Grotesk Text, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.50 letterSpacing: 0px button-ui: fontFamily: "Neue Haas Grotesk Display, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px nav-link: fontFamily: "Neue Haas Grotesk Display, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px caption: fontFamily: "Neue Haas Grotesk Text, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0px caption-bold: fontFamily: "Neue Haas Grotesk Text, system-ui, Helvetica Neue, Arial, sans-serif" fontSize: 14px fontWeight: 800 lineHeight: 1.75 letterSpacing: 0px mono: fontFamily: "Spezia Monospace SemiMono, Helvetica Neue, Arial, monospace" fontSize: 16px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0px spacing: xs: 4px sm: 8px md: 14px lg: 20px xl: 28px 2xl: 40px 3xl: 80px rounded: none: 0px sm: 4px md: 12px pill: 9999px components: # Buttons button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-primary-active: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.on-secondary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 13px 27px button-secondary-hover: backgroundColor: "{colors.surface-alt}" textColor: "{colors.on-secondary}" button-secondary-focus: backgroundColor: "{colors.background}" textColor: "{colors.on-secondary}" # Cards card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.sm}" padding: 20px card-dialog: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 24px # Inputs input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 14px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" # Navigation nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 20px nav-link: textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 8px 14px nav-link-hover: textColor: "{colors.ink}" # Badge / category tag badge: backgroundColor: "{colors.surface-alt}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 8px badge-discover: backgroundColor: "{colors.discover-tint}" textColor: "{colors.discover-loud}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 8px badge-success: backgroundColor: "{colors.success-tint}" textColor: "{colors.success-loud}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 8px # Category indicator (product app) category-pill: textColor: "{colors.ink}" typography: "{typography.caption-bold}" rounded: "{rounded.pill}" padding: 4px 10px --- # Pleo Design System ## Overview Pleo's design occupies a rare position in fintech: absolute monochromatic confidence. Where competitors reach for coral gradients and electric brand hues to telegraph innovation, Pleo's marketing canvas is near-pure white (`{colors.background}`) dressed in deep near-black Neue Haas Grotesk. The headline "Stop spending time on expenses" lands in 64px Display weight 400 — no bold, no tracking extremes, just the optically refined authority of a classic Swiss grotesque doing what it was built for. This restraint is not timidity. It is the brand saying: the product is the color. The typography engine is a two-cut system: Neue Haas Grotesk Display for all marketing headings and navigation, Neue Haas Grotesk Text for body and UI copy, and Spezia Monospace SemiMono as a distinctive third voice for data strings, amounts, and product UI. Neue Haas is self-hosted and used at weight 400 across display sizes — the system trusts letterspacing and size over weight variation to build hierarchy. This is the aesthetic of Scandinavian product companies: functional, unhurried, legible at distance and at detail. The brand accent strategy splits cleanly between marketing and product. The marketing layer deploys black (`{colors.primary}`) pill buttons as its only interactive color, an almost audacious choice. The product app beneath runs a full semantic category-color system — fourteen distinct hues mapped to expense categories including travel, meals, software, marketing, and equipment — giving the transactional interface the visual grammar it needs without contaminating the marketing surface's calm. **Key Characteristics:** - Pure white canvas (`{colors.background}`) with no dark hero, no hero photography — the product app mockup *is* the hero - Neue Haas Grotesk Display at 64px weight 400 — hierarchy through scale, not weight - Two-cut grotesque: Display cut for headings/UI, Text cut for body reading text - Spezia Monospace SemiMono as a distinctive third voice for financial data and amounts - Black pill buttons (`{colors.primary}`, 9999px radius) — monochromatic interaction signal with maximum contrast - Outlined black pill secondary buttons — same radius, same weight, differentiated by fill only - Rich product-layer category palette: 8+ hues mapping to expense types (`{colors.category-travel}`, `{colors.category-software}`, `{colors.category-marketing}`) - Lavender-purple discover accent (`{colors.discover-tint}` → `{colors.discover}`) for upsell / feature highlight moments - 4px as the dominant border-radius for cards, inputs, and UI chrome — structural, not decorative softness - Tailwind CSS with arbitrary values for layout; spacing cadence anchored on 8px base with 14px, 20px, 28px, 40px, 80px as the measured scale ## Colors ### Canvas - **White** (`{colors.background}`): Primary surface for all marketing and product UI — the system's foundation. - **Off-White** (`{colors.surface-alt}`): Alternate section backgrounds and input fill — subtle rhythm without border dividers. ### Text / Ink - **Near-Black** (`{colors.ink}`): Primary text on all light surfaces — the system's primary readable value. - **Secondary** (`{colors.ink-secondary}`): Supporting body text and labels. - **Muted** (`{colors.ink-muted}`): Placeholder text, tertiary metadata, disabled labels. - **On-Dark White** (`{colors.on-dark}`): Text on any dark or product app panel. ### Brand Primary - **Pleo Black** (`{colors.primary}`): Primary CTA buttons, active nav states — total contrast on white canvas. - **Hover Black** (`{colors.primary-hover}`): Deepens to pure black on hover — a subtle but detectable shift. ### Discover / Purple Accent - **Discover Purple** (`{colors.discover}`): Bordered accent for upsell, feature discovery, "Beta" labels. - **Discover Deep** (`{colors.discover-loud}`): Dark purple text in discover contexts. - **Discover Tint** (`{colors.discover-tint}`): Lavender background for discover badge and feature callout panels. ### Product Category Colors The product-app category palette provides distinct hues for expense categorization. Each is calibrated to the same perceived lightness to read as a coherent system on the product dashboard: - Travel: `{colors.category-travel}` (dusty rose) - Meals: `{colors.category-meals}` (forest green) - Software: `{colors.category-software}` (muted amber) - Marketing: `{colors.category-marketing}` (soft violet) - Office: `{colors.category-office}` (periwinkle blue) - Equipment: `{colors.category-equipment}` (terra cotta) - Service: `{colors.category-service}` (lavender) - Supplies: `{colors.category-supplies}` (olive) ### Semantic - **Success** (`{colors.success}`): Positive balance states, approved transactions. - **Success Tint** (`{colors.success-tint}`): Success badge and card backgrounds. - **Error** (`{colors.error}`): Negative transactions, declined states. - **Warning** (`{colors.warning}`): Budget thresholds, caution flags. - **Info** (`{colors.info}`): Informational callouts, link accents. ### Borders - **Loud** (`{colors.border}`): Standard component borders and dividers. - **Subtle** (`{colors.border-subtle}`): Low-contrast section separators. ## Typography ### Font Family - **Primary (Display)**: `Neue Haas Grotesk Display`, with fallbacks: `system-ui, Helvetica Neue, Arial, sans-serif` - **Primary (Text)**: `Neue Haas Grotesk Text`, with fallbacks: `system-ui, Helvetica Neue, Arial, sans-serif` - **Monospace**: `Spezia Monospace SemiMono`, with fallbacks: `Helvetica Neue, Arial, monospace` - Both Neue Haas cuts and Spezia are self-hosted as woff2. Lato (Google Fonts) appears as a tertiary fallback in some third-party embedded contexts. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly rather than hardcoding values. | Token | Use | |---|---| | `display-hero` | 64px NHG Display 400 — primary marketing headline | | `heading-section` | 45px NHG Display 400 — section and feature headings | | `heading-sub` | 32px NHG Display 400 — sub-section, card titles | | `body-large` | 23px NHG Display 400 — hero sub-copy, lead paragraphs | | `body` | 16px NHG Text 400 — standard body reading text | | `body-medium` | 16px NHG Text 500 — emphasized body, list items | | `button-ui` | 16px NHG Display 400 — all button and CTA labels | | `nav-link` | 16px NHG Display 400 — navigation and link text | | `caption` | 14px NHG Text 400 — metadata, footnotes, badge text | | `caption-bold` | 14px NHG Text 800 — strong labels, amounts | | `mono` | 16px Spezia SemiMono 400 — financial amounts, data strings, code | ### Principles - **Weight 400 as the default**: Neue Haas Grotesk does not rely on bold weight — size and scale create hierarchy. This is a deliberate departure from most fintech brands. - **Two cuts for two contexts**: Display cut (wider optical metrics) for headings and labels; Text cut (tighter optical metrics, better at small sizes) for body reading. - **Monospace as a functional voice**: Spezia SemiMono appears in the product UI for financial amounts and transaction data — a typographic signal that says "this is an exact number." - **Generous line-heights**: 1.60 at 23px and 1.50 at 16px — the system is built for reading complex financial content, not skimming. - **Minimal tracking**: letterSpacing at or near 0 across all sizes — Neue Haas has carefully set optical letter spacing built in; additional tracking would interrupt its precision. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit: 8px. The common spacing cadence follows 14px, 20px, 28px, 40px, 80px — slightly tighter than a pure 8px scale at the small end, with a large jump to 80px (`{spacing.3xl}`) for major section separations. ### Grid & Container - Max content width: approximately 1200px (Tailwind's default `max-w-screen-xl`) - Hero: centered content, no full-bleed photography — the product app mockup centers in a constrained container - Marketing sections: 1–2 column layouts with generous lateral whitespace - Product app mockup: split panel (sidebar at ~200px + main content area) ### Whitespace Philosophy - Whitespace *is* the brand — the marketing pages breathe with 80px section gaps that treat emptiness as a design element - Content is never crowded — the system implies calm and control, mirroring what the product claims to bring to expense management - Internal card and list spacing at 14–20px keeps the product UI readable without visual noise ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Primary page surfaces, navigation, cards on white | | Dialog / Float (Level 1) | `rgba(0,0,0,0.28) 0px 8px 28px 0px` | Dropdowns, overlays, floating panels | | Focus Ring | `0 0 0 3px {colors.border}` | Keyboard focus outline on inputs and buttons | **Shadow Philosophy**: Pleo's shadow system is almost entirely flat. The one detected shadow — `rgba(0,0,0,0.28) 0px 8px 28px 0px` — is reserved for modal dialogs and dropdown overlays. The marketing surface uses zero shadow, trusting whitespace and border structure to separate elements. This is intentional fintech confidence: real-world financial tools don't require decorative depth. ## Shapes The complete radius scale lives in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Dividers, full-bleed surfaces | | `sm` | 4px | Input fields, cards, badges, UI chrome — the dominant radius | | `md` | 12px | Dialog containers, modal overlays | | `pill` | 9999px | All button variants — the only soft shape in the system | The radius philosophy is binary-with-one-exception: 4px covers nearly all UI elements (inputs, cards, comboboxes, badges), while buttons exclusively use the pill (9999px). Dialogs sit at a mid-point 12px. This creates a clear visual grammar: structural elements are crisp, interactive call-to-action buttons are distinctively rounded. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly rather than reconstructing them. ### Button Variants - **`button-primary`** — Black pill (`{colors.primary}`, 9999px radius), white text, 14px 28px padding. Hover: pure black (`{colors.primary-hover}`). The only color in the marketing layer. Used as the singular conversion CTA. - **`button-secondary`** — White fill with black 1px border, black text, 13px 27px padding (1px less to match primary visual height). Hover: light gray fill. Used for secondary actions like "Explore" alongside the primary. ### Cards - **`card`** — White background, 4px radius, 20px padding. Standard information and feature cards. - **`card-dialog`** — White background, 12px radius, 24px padding. Modal and overlay containers. ### Inputs Standard field with 4px radius and 10px 14px padding. Focus ring uses border gray at 3px offset. Placeholder text uses `{colors.ink-muted}`. ### Badges / Tags - **`badge`** — Off-white background, near-black text — neutral classification label. - **`badge-discover`** — Lavender tint (`{colors.discover-tint}`), deep purple text (`{colors.discover-loud}`) — feature discovery and Beta labels. - **`badge-success`** — Green tint background, dark success text — positive states. ### Category Pills (Product App) Each expense category maps to a hue from the product-app palette. The pills share 4px radius and caption typography — the colors do the semantic differentiation work. ### Navigation - **`nav-bar`** — White background, near-black text. Clean horizontal link row with the primary black pill "Get started" CTA at the right edge. - Nav links transition between gray and near-black on hover via a 0.13s ease-in color shift. ## Do's and Don'ts ### Do - Keep the marketing canvas pure white (`{colors.background}`) — the design's calm authority comes from its restraint - Use Neue Haas Grotesk Display at weight 400 for all headings — do not bold display text; scale alone creates hierarchy - Apply `{colors.primary}` (black) only to the primary CTA pill — one dominant button per section, maximum contrast - Use `{rounded.pill}` exclusively for interactive buttons — every other element uses `{rounded.sm}` (4px) - Use `{typography.mono}` (Spezia SemiMono) for all financial amounts, transaction IDs, and code strings — it signals precision - Deploy the category-color palette (`{colors.category-travel}`, `{colors.category-marketing}`, etc.) only in the product app layer — never on marketing surfaces - Use `{colors.discover-tint}` for upsell and Beta feature callouts — the lavender accent is the system's one moment of brand color expression - Separate major sections with 80px spacing (`{spacing.3xl}`) — whitespace is structural in this design ### Don't - Don't introduce colored backgrounds on marketing sections — the system is white + product mockup, not white + colorful cards - Don't use bold or heavy weight (700+) for Neue Haas display headings — weight 400 is the deliberate choice; heavier weights would undermine the Swiss grotesque aesthetic - Don't mix border-radius systems — inputs and cards are 4px (`{rounded.sm}`), buttons are pill (9999px), dialogs are 12px (`{rounded.md}`); these zones do not overlap - Don't use the product-app category palette for marketing badges or UI chrome — those hues belong inside the product dashboard only - Don't apply the drop shadow (`rgba(0,0,0,0.28) 0px 8px 28px`) to marketing cards — only floating dialogs and dropdowns receive elevation - Don't introduce Lato or system fallbacks as intentional choices — Neue Haas and Spezia are the intended voices; Lato appears only in third-party embeds - Don't use tight letter-spacing at body sizes — Neue Haas Text is set at 0 spacing at 16px; negative tracking breaks its optical calibration --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <480px | Single column, hero headline scales to ~36px | | Mobile | 480–768px | Stacked layout, nav collapses to hamburger | | Tablet | 768–1024px | Two-column feature sections, partial product mockup visible | | Desktop | 1024–1280px | Full layout with centered container and product mockup hero | | Large Desktop | >1280px | Max-width cap, lateral whitespace increases | ### Touch Targets - Pill buttons have 14px 28px padding — at 16px font size this produces a minimum 44px tap height - Nav collapses to a hamburger icon at mobile breakpoints ### Collapsing Strategy - Hero headline scales proportionally from 64px (desktop) down to ~36px (mobile) - Product app mockup hero transitions from full panel-split view to a cropped card view at mobile - Feature sections collapse from two-column to single-column with stacked copy and image ### Image Behavior - Product app mockup screenshots are contained in constrained-width cards — never full-bleed - No hero photography — the product UI is the primary visual element at all breakpoints --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Muted / placeholder: `{colors.ink-muted}` - Primary CTA: `{colors.primary}` - On-primary text: `{colors.on-primary}` - Border: `{colors.border}` - Discover accent: `{colors.discover-tint}` ### Example Component Prompts - "Create a Pleo hero section: white background (`{colors.background}`), centered layout, max-width 1200px. Headline at 64px Neue Haas Grotesk Display weight 400, letterSpacing -0.5px, color `{colors.ink}`. Sub-copy at 23px NHG Display 400, lineHeight 1.60, color `{colors.ink-secondary}`. Two pill buttons: primary (background `{colors.primary}`, color `{colors.on-primary}`, 9999px radius, 14px 28px padding) and secondary (transparent fill, 1px solid `{colors.secondary-border}`, color `{colors.on-secondary}`, 13px 27px padding). Below: product app mockup in a white rounded card." - "Build a Pleo product dashboard sidebar: white background, 200px wide, border-right `1px solid {colors.border}`. Navigation items at 16px Neue Haas Grotesk Text 400, color `{colors.ink-secondary}`, 8px 14px padding, 4px radius. Hover: background `{colors.surface-alt}`. Active: background `{colors.surface-alt}`, color `{colors.ink}`. Logo at top-left, 'Get started' black pill CTA at bottom." - "Create a Pleo expense transaction row: white row, 1px bottom border `{colors.border-subtle}`. Avatar (32px circle, gray fill) + Name in 16px NHG Text 400 `{colors.ink}` + Amount in 16px Spezia SemiMono 400 `{colors.ink}` right-aligned. Category pill: 14px NHG Text 400, 4px 10px padding, 9999px radius, category-specific background and text colors." - "Build a Pleo feature card: white background, 4px border-radius, 20px padding, no shadow. Overline label in 14px NHG Text 800 `{colors.ink-muted}` uppercase, margin-bottom 8px. Title in 32px NHG Display 400 `{colors.ink}`, lineHeight 1.25. Body copy in 16px NHG Text 400 `{colors.ink-secondary}`, lineHeight 1.50. CTA: inline text link in `{colors.ink}` with underline on hover." - "Create a Pleo discover/upsell badge: background `{colors.discover-tint}` (#dcd7f4), color `{colors.discover-loud}` (#43387a), 14px Neue Haas Grotesk Text 400, 4px border-radius, 4px 8px padding. Use for 'Beta', 'New', and 'Discover' feature labels. Pair with a purple border stripe `{colors.discover}` on the left edge of the parent card." - "Build a Pleo navigation bar: white background, 1px bottom border `{colors.border-subtle}`, 0px 20px padding, height 60px. Left: Pleo wordmark SVG in `{colors.ink}`. Center: horizontal link list at 16px NHG Display 400 `{colors.ink-secondary}`, 8px 14px padding; hover shifts to `{colors.ink}` over 0.13s ease-in. Right: 'Log in' text link + 'Get started' black pill button (background `{colors.primary}`, color `{colors.on-primary}`, 14px 28px, 9999px radius)." ### Iteration Guide 1. Start with the canvas: pure white (`{colors.background}`) everywhere — no colored hero, no dark sections; the product app mockup is the only visual element that introduces color 2. Typography is size-driven: use `{typography.display-hero}` (64px) → `{typography.heading-section}` (45px) → `{typography.body-large}` (23px) → `{typography.body}` (16px) as the hierarchy steps; weight stays at 400 throughout 3. One black CTA per section: `{colors.primary}` for the pill primary button; secondary actions get the outlined variant in the same pill shape 4. Use `{typography.mono}` for every financial figure — Spezia SemiMono is the signal that distinguishes a real number from a label 5. All non-button elements use 4px radius (`{rounded.sm}`) — only buttons get the pill (`{rounded.pill}`) 6. Category colors are product-only: deploy `{colors.category-*}` tokens inside dashboard tables and expense lists, never on marketing pages 7. Section breathing room: `{spacing.3xl}` (80px) between major sections — the large whitespace gap is as structural as the typography --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Pleo. Brand names and trademarks belong to their respective owners.