# Peakflo Design System

> A professional fintech canvas defined by high-contrast navy ink, vibrant sky-blue accents, and structured information density.

**Source:** https://peakflo.co | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Peakflo utilizes a "Corporate Tech" aesthetic that leans heavily on a high-contrast pairing of deep navy `#385d8d` and pure white `#ffffff`. The interface is punctuated by a bright action blue `#3f97ff` used for primary CTAs and interactive borders. Typography is strictly functional, relying on system stacks (-apple-system) and Noto Sans to maintain a neutral, utility-first voice. Layouts are characterized by generous vertical spacing (80px-96px section gaps) and a rigorous 8px grid system that organizes complex financial data into digestible cards and modules.

## Signature DNA
1. **The "HeadBlue" Anchor** (The use of `#385d8d` for all primary headings and active UI states creates a stable, trustworthy financial atmosphere across the homepage and pricing pages.)
2. **Action Blue Elevation** (Primary interactive elements use `#3f97ff`, providing a high-visibility "voltage" that guides the user toward conversion points like "Schedule a Demo".)
3. **Information Tiering** (Complex product features are broken into cards with 8px to 12px radii, often utilizing subtle background shifts to `#f4f7fc` to separate functional zones.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, primary surface | 25 | 1.0 | Computed Style |
| `{colors.black}` | `#000000` | Primary text, high-contrast labels | 122 | 0.8 | Computed Style |
| `{colors.gray-muted}` | `#757575` | Secondary body text, descriptions | 101 | 0.8 | Computed Style |
| `{colors.border-light}` | `#e5e7eb` | Default 1px dividers and card borders | 31 | 0.8 | Computed Style |
| `{colors.surface-subtle}` | `#f4f7fc` | Alternating section backgrounds | 11 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.navy-ink}` | `#385d8d` | Primary headings, active navigation | 66 | 1.0 | `--text-color` |
| `{colors.action-blue}` | `#3f97ff` | Primary buttons, active borders | 85 | 0.8 | Computed Style |
| `{colors.deep-blue}` | `#134185` | Button text on light backgrounds | 43 | 0.8 | Computed Style |
| `{colors.brand-pink}` | `#e91e63` | Secondary CTA buttons (Get Started) | 4 | 0.6 | Computed Style |
| `{colors.soft-blue}` | `#e1eeff` | Badge backgrounds, icon plates | 20 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Noto-Sans | 400, 500, 600, 700 | Primary Brand Sans | Noto Sans | Google Fonts |
| -apple-system | 400, 500, 600, 700 | UI & System Heading | Inter | System |
| sans-serif | 400, 600 | Fallback/General | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 64px | 96px | normal | 700 | Hero display | `h3.text-[64px].font-bold` |
| `{type.h2}` | 32px | 38.4px | normal | 600 | Section headers | `h2` |
| `{type.h3}` | 30px | 36px | normal | 700 | Sub-section titles | `h2.text-2xl.px-4` |
| `{type.heading-sm}` | 24px | 32px | normal | 700 | Feature titles | `div.bg-[#ECF4FE]` |
| `{type.body-lg}` | 20px | 32px | normal | 400 | Intro paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard body | `section.marquee-container` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Captions, metadata | `p.text-[#757575].text-sm` |
| `{type.label-bold}` | 14px | 20px | normal | 700 | Small headings | `h2.text-left.text-headBlue` |

### Principles
1. **Heading Color Lockup:** All major headings (H1-H3) must use `{colors.navy-ink}` (#385d8d) to maintain brand authority.
2. **System-First UI:** Interactive UI elements (buttons, inputs) use `-apple-system` to ensure native-feeling performance.
3. **High Contrast Ratios:** Body text never drops below `#757575` on white, ensuring a minimum 4.6:1 contrast ratio.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 84 |
| `{space.md}` | 16px | 91 |
| `{space.lg}` | 24px | 40 |
| `{space.xl}` | 32px | 61 |
| `{space.section}` | 80px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers | 247 occurrences |
| `{radius.sm}` | 6px | Form inputs | Observed on pricing page |
| `{radius.md}` | 8px | Standard cards | 61 occurrences |
| `{radius.lg}` | 12px | Feature blocks | 16 occurrences |
| `{radius.pill}` | 9999px | CTA Buttons | 35 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default state | Universal |
| Raised | `rgba(0, 0, 0, 0.1) 0px 10px 15px -3px` | Hovered cards | Card component |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main site conversion (Schedule a Demo)
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#e91e63` / Text: `#ffffff` / Radius: `9999px` / Padding: `12px 24px`
**States observed:** Default: Captured | Hover: Not captured

#### Ghost Button
**Role:** Secondary actions (Explore more)
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` / Text: `#3f97ff` / Border: `2px solid #3f97ff` / Radius: `8px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product capabilities
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` / Border: `1px solid #f3f4f6` / Radius: `8px` / Padding: `24px`
**States observed:** Default: Captured | Hover: Captured (Shadow applied)

#### Status Badge
**Role:** Category labeling (e.g., "AP Automation")
**Pages observed:** Success Stories section
**Spec:** Background: `#e1eeff` / Text: `#3f97ff` / Radius: `9999px` / Padding: `4px 16px`
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Integration Tile
**Role:** Partner logo display
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Border: `1px solid #e5e7eb` / Radius: `8px` / Padding: `8px`
**States observed:** Default: Captured

#### Pricing Tier
**Role:** Product plan selection
**Pages observed:** Pricing page
**Spec:** Background: `#f9fbf4` / Border: `1px solid #e5e7eb` / Radius: `12px` / Padding: `32px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1280px |
| Section Gap | 80px - 96px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding-x reduces to 16px; cards stack vertically. |
| Desktop | 1440px | 1280px container centered; horizontal feature grids (3-up or 4-up). |

## Do's
- Use `{colors.navy-ink}` (#385d8d) for all H1 and H2 headings.
- Apply `{radius.pill}` (9999px) to primary conversion buttons.
- Maintain a minimum of 80px vertical spacing between major homepage sections.
- Use `{colors.surface-subtle}` (#f4f7fc) for alternating background bands to improve scannability.
- Ensure all body text uses `{type.body-md}` (16px) for optimal readability.

## Don'ts
- **Wrong:** Using `#3f97ff` (Action Blue) for large blocks of body text. **Right:** Use `#000000` or `#757575`. **Reason:** Accessibility and readability.
- **Wrong:** Mixing sharp corners with rounded cards. **Right:** Use `{radius.md}` (8px) for all UI cards.
- **Wrong:** Using the sub-brand accent color for parent-level navigation items.
- Do not use `#e91e63` (Brand Pink) for anything other than primary CTA buttons.
- Do not exceed 32px of padding inside standard feature cards.

## Similar brands
- Bill.com (Financial structure)
- Brex (Clean fintech typography)
- Ramp (Information density)

## Quick start
```css
/* CSS Variables */
:root {
  --peakflo-navy: #385d8d;
  --peakflo-blue: #3f97ff;
  --peakflo-pink: #e91e63;
  --peakflo-bg-subtle: #f4f7fc;
  --peakflo-radius-card: 8px;
  --peakflo-radius-pill: 9999px;
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://peakflo.co | 1440x900 | 2026-06-06 |
| Pricing | https://peakflo.co/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://peakflo.co | 390x844 | 2026-06-06 |