# Spendflo Design System

> High-contrast monochrome utility anchored by Pp Neue Montreal headlines and warm-neutral card surfaces.

**Source:** https://spendflo.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** Parent | **Related brands:** None

## TL;DR
Spendflo utilizes a strict monochrome foundation where absolute black (#000000) and pure white (#ffffff) define the primary interactive and structural layers. The system introduces warmth through a light beige/grey surface palette (#f4f3f2, #eeece6) used for content grouping and cards. Typography is a sophisticated pairing of Pp Neue Montreal for high-impact display moments and Inter for functional body copy. While the parent brand is achromatic, the system allows for high-saturation functional accents (Amber #b45309, Blue #1d4ed8) specifically within pricing and feature-tagging contexts.

## Signature DNA
1. **Achromatic Hierarchy** (The interface is driven by #000000 primary actions on #ffffff or #f4f3f2 backgrounds, ensuring maximum contrast for procurement data. Seen on Home and Pricing.)
2. **Grotesque Display Pairing** (Pp Neue Montreal at weight 500 is used exclusively for display and section headers, creating a premium "tech-utility" feel. Seen on Home and Pricing.)
3. **Soft-Neutral Containment** (Large-scale cards use a 20px to 40px radius with #f4f3f2 backgrounds to soften the high-contrast typography. Seen on Home and Pricing.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.black}` | `#000000` | Primary text, button backgrounds, borders | 275 | 1.0 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, button text | 72 | 1.0 | Computed Style |
| `{color.surface.neutral}` | `#f4f3f2` | Card backgrounds, section alternating | 32 | 1.0 | `--card-bg` |
| `{color.text.muted}` | `#858482` | Secondary text, subtle borders | 62 | 1.0 | `--procure-grey` |
| `{color.surface.warm}` | `#eeece6` | Secondary surface background | 2 | 1.0 | `--beige` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.accent.amber}` | `#b45309` | Feature tags, pricing highlights | 50 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#1d4ed8` | Secondary feature indicators | 6 | 0.6 | Computed Style |
| `{color.decorative.violet}`| `#c73a88` | Decorative text (pricing only) | 1 | 1.0 | `--medium-violet-red-2` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Pp Neue Montreal | 400, 500 | Display, Headings | Inter Tight | Proprietary |
| Inter | 300, 400, 500, 600 | Body, UI, Navigation | Inter (Google) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.lg}` | 48px | 57.6px | normal | 500 | Hero H1 | `h1.heading-279.ai` |
| `{type.display.md}` | 42px | 42px | normal | 400 | Sub-hero display | `div.text-block-691.left` |
| `{type.heading.lg}` | 36px | 43.2px | normal | 500 | Section headers | `div.section-header-text` |
| `{type.heading.sm}` | 22px | 26.4px | normal | 500 | Card titles | `div.card-title-ai.large` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Primary body | `div.updated-page-wrapper.new-home-lp` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Secondary body | `div.new-lp-home-description` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Captions/Descriptions | `div.card-title-description.small` |
| `{type.label.xs}` | 12px | 12px | normal | 500 | Small UI labels | `div.text-block-766.small` |

### Principles
1. **Display weight is locked to 500.** Pp Neue Montreal is never used at heavy weights; it relies on size for hierarchy.
2. **Body copy uses generous line heights.** 1.5x to 1.75x line height is standard for body copy (e.g., 16/28px).
3. **Monochrome interaction.** Links and primary buttons rely on black/white inversion rather than color shifts.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.1}` | 4px | 6 |
| `{space.2}` | 8px | 24 |
| `{space.2.5}` | 10px | 69 |
| `{space.4}` | 16px | 11 |
| `{space.5}` | 20px | 29 |
| `{space.7.5}` | 30px | 27 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Default containers, sections | 370 occurrences |
| `{radius.sm}` | 8px | Buttons, small cards | Rounded Button component |
| `{radius.lg}` | 20px | Feature cards, pricing tiers | Radii role: card |
| `{radius.xl}` | 40px | Large content blocks | Card component |
| `{radius.pill}` | 9999px | Badges, specific UI toggles | Radii role: pill |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | Standard cards and sections | 90% of components |
| Decorative | `rgb(255, 0, 128) 19px 50px 100px -40px` | Pink glow for specific AI-themed surfaces | Shadow evidence |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary CTA
**Pages observed:** Home, Pricing
**Spec:** Background: `#000000` | Text: `#ffffff` | Radius: `8px` | Padding: `5px 10px` | Typography: `Inter 14px`
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Surface
**Role:** Structural page sections
**Pages observed:** Home, Pricing
**Spec:** Background: `#fdfcfc` | Text: `#000000` | Radius: `0px` | Typography: `Inter 18px`
**States observed:** Default

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and testimonials
**Pages observed:** Home, Pricing
**Spec:** Background: `#f4f3f2` | Radius: `40px` | Padding: `0px` | Typography: `Inter 16px`
**States observed:** Default

#### Pricing Tag
**Role:** Status and add-on indicators
**Pages observed:** Pricing
**Spec:** Background: `rgba(180, 83, 9, 0.08)` | Text: `#b45309` | Radius: `20px` | Padding: `8px 13px` | Typography: `Inter 12px`
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation
**Role:** Global header
**Pages observed:** Home, Pricing
**Spec:** Background: `transparent` | Text: `#000000` | Typography: `Pp Neue Montreal 15px`
**States observed:** Default

#### AI Surface
**Role:** AI-specific feature containers
**Pages observed:** Home
**Spec:** Background: `#000000` | Border: `1px solid rgba(139, 138, 138, 0.46)` | Shadow: `rgb(255, 0, 128) ...`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px (approx) |
| Section padding | 40px to 50px |
| Card internal padding | 25px to 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Desktop | 1440px | Horizontal navigation, multi-column grids |
| Mobile | 390px | Stacked cards, hamburger menu, reduced display type sizes |

## Imagery & decoration
Spendflo uses grayscale partner logos and high-contrast UI screenshots. Decoration is limited to a single "AI glow" shadow (`rgb(255, 0, 128)`) used to highlight specific product surfaces. It avoids photography, preferring abstract UI representations and clean typography.

## Do's
- Use `#000000` for all primary buttons and headings.
- Set display headers in Pp Neue Montreal at weight 500.
- Use `#f4f3f2` for large-scale card backgrounds to separate content from the white canvas.
- Apply a `20px` radius to standard cards and `40px` to feature sections.
- Ensure body text has at least `24px` line height for legibility.

## Don'ts
- **Wrong:** Using a sub-brand color (like Amber #b45309) as the primary button background. **Right:** Use #000000. **Reason:** The parent brand is monochrome; colors are for semantic tagging only.
- Do not use Pp Neue Montreal for long-form body copy; use Inter.
- Do not use drop shadows on standard cards; use background color shifts or 1px borders.
- Do not use bold weights (>600) for Inter body text.

## Similar brands
- Linear (monochrome utility, grotesque type)
- Ramp (fintech utility, high contrast)
- Vercel (achromatic foundation, geometric type)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-surface-neutral: #f4f3f2;
  --color-text-muted: #858482;
  --font-display: "Pp Neue Montreal", sans-serif;
  --font-body: "Inter", sans-serif;
  --radius-card: 20px;
  --radius-feature: 40px;
}
```

## Agent prompt examples
- "Generate a Spendflo-style feature card using a #f4f3f2 background, 40px border radius, and a Pp Neue Montreal heading at 22px weight 500."
- "Create a primary CTA button with a #000000 background, 8px border radius, and 14px Inter medium text."
- "Design a pricing tag with #b45309 text on a 8% opacity amber background with a pill radius."

## Known gaps
- Hover and Active states for buttons were not fully captured in the automated crawl.
- Complex form input states (error/focus) were not present on analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Home | https://spendflo.com | 1440px | 2026-06-06 |
| Pricing | https://spendflo.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://spendflo.com | 390px | 2026-06-06 |