# Payrails Design System

> High-contrast financial infrastructure anchored by deep navy foundations and a singular high-voltage orange kinetic accent.

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

## TL;DR
Payrails utilizes a "Finance OS" aesthetic that balances enterprise stability with fintech agility. The system is built on a foundation of off-white surfaces (`#fbfbfb`) and high-contrast dark navy text (`#001535`). The primary brand voltage is delivered through a single, highly saturated orange accent (`#d63d00`) used exclusively for primary actions and critical UI highlights. Typography is strictly **Archivo**, utilizing a range of weights from 300 for light subheaders to 600 for semi-bold body emphasis. Layouts are characterized by a rigid grid system often visualized with subtle hairline dividers, creating a modular, "block-based" feel.

## Signature DNA
1. **The Kinetic Accent** (The use of `#d63d00` as the sole chromatic driver against an otherwise monochrome canvas, observed on all primary CTAs across `payrails.com` and `payrails.com/pricing`).
2. **Modular Grid Scaffolding** (Visualized section dividers and "OS" style block containers that reinforce the "Operating System" product metaphor, evidenced in the hero and feature sections).
3. **Archivo Weight Duplexing** (The pairing of light weight 300 subheaders with medium weight 500 headers to create technical hierarchy without relying on traditional bolding).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.background}` | `#fbfbfb` | Primary page canvas and section backgrounds | 6 | 1.0 | `--background` |
| `{colors.text-black}` | `#001535` | Primary headings and deep navy brand text | 2 | 1.0 | `--color--text--black` |
| `{colors.text-strong}` | `#171717` | Standard high-contrast body text | 2 | 1.0 | `--text-strong` |
| `{colors.text-muted}` | `#404040` | Secondary descriptive text and sub-labels | 2 | 1.0 | `--text-muted` |
| `{colors.border-dark}` | `#121212` | Dark mode surfaces and high-contrast borders | 13 | 1.0 | `--_apps---colors--border-dark` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.primary}` | `#d63d00` | Primary CTA background and brand accent | 3 | 1.0 | `--button-primary-bg` |
| `{colors.primary-hover}` | `#be3600` | Hover state for primary actions | 1 | 1.0 | `--button-primary-bg-hover` |
| `{colors.primary-active}` | `#a32e00` | Active/Press state for primary actions | 1 | 1.0 | `--button-primary-bg-active` |
| `{colors.decorative-navy}` | `#001535` | Decorative brand navy (tagged decorative_only) | 2 | 1.0 | `computed_style` |

### Semantic
| Token | Hex | Role | Source |
| :--- | :--- | :--- | :--- |
| `{colors.success-bg}` | `#dbf6da` | Success status background | `--status-live-bg` |
| `{colors.warning-bg}` | `#fff4d1` | In-progress/Warning background | `--status-in-progress-bg` |
| `{colors.error}` | `#e03838` | Destructive actions and error states | `--_apps---colors--destructive` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Archivo | 300, 400, 500, 600 | All headings, body, and UI labels | Archivo (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.h1}` | 27px | 36px | normal | 500 | Primary page titles | `h1.font-['Archivo']` |
| `{type.h2-light}` | 21px | 30px | -0.48px | 300 | Editorial subheaders | `p.text-[var(--text-muted)]` |
| `{type.body-semi}` | 18px | 23.4px | normal | 600 | Emphasized body copy | `div.copytext.is-semi` |
| `{type.body-md}` | 18px | 23.4px | normal | 400 | Standard body copy | `div.copytext` |
| `{type.body-base}` | 16px | 22.4px | normal | 400 | Section descriptions | `section.section` |
| `{type.ui-label}` | 14px | 20px | -0.35px | 500 | Inline links and labels | `a.inline-flex` |
| `{type.button}` | 14px | 20px | normal | 500 | Button labels | `Card (component spec)` |
| `{type.caption}` | 12px | 1.4 | normal | 400 | Small annotations | Not captured in source |

### Principles
1. **Light Weight Subheaders:** Use Archivo 300 for long-form subheaders to create a sophisticated, technical feel.
2. **Tight Heading Tracking:** Larger display type uses negative letter-spacing (up to -0.48px) to maintain visual density.
3. **Navy over Black:** Use `#001535` for primary brand headings instead of pure black to maintain the "Finance OS" palette.

## Spacing
**Base unit:** 4px (implied)
Table: | Token | Value | Occurrences |
| :--- | :--- | :--- | :--- |
| `{spacing.section-gap}` | 51px | 4 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Sharp containers and grid blocks | 13 occurrences |
| `{radius.sm}` | 8px | Standard UI cards and buttons | Component spec |
| `{radius.full}` | 50px | Large pill-shaped panels and badges | 5 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{elevation.flat}` | none | All cards and buttons (system is flat) | Component spec |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action
**Pages observed:** `payrails.com`, `payrails.com/pricing`, `payrails.com/about`
**Spec:** Background `{colors.primary}` (#d63d00) / Text `#ffffff` / Border `none` / Radius `8px` / Padding `0px 20px` / Typography `{type.button}`
**States observed:** Default | Hover: `#be3600` | Active: `#a32e00` | Focus: Not captured

#### Secondary Button
**Role:** Alternative actions
**Pages observed:** `payrails.com/pricing`
**Spec:** Background `#ffffff` / Text `{colors.text-strong}` (#171717) / Border `1px solid #e4e4e7` / Radius `8px` / Padding `0px 20px`
**States observed:** Default | Hover: `#f4f4f5` | Active: `#e4e4e7`

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product capabilities
**Pages observed:** `payrails.com/about`
**Spec:** Background `{colors.primary}` (#d63d00) / Text `#ffffff` / Border `none` / Radius `8px` / Padding `24px`
**States observed:** Default: captured | Hover: not captured

#### Navigation Link
**Role:** Top-level site navigation
**Pages observed:** `payrails.com`
**Spec:** Background `transparent` / Text `{colors.text-black}` (#001535) / Typography `{type.ui-label}` (14px, 500)
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Status Badge
**Role:** Indicating feature status (e.g., "NEW")
**Pages observed:** `payrails.com` (footer)
**Spec:** Background `#ffedd5` / Text `{colors.primary}` (#d63d00) / Radius `9999px` / Typography `12px`
**States observed:** Default: captured

#### Grid Divider
**Role:** Structural scaffolding for the "OS" look
**Pages observed:** `payrails.com`
**Spec:** Border-top `1px solid #121212` (on dark) or `#e2e2e2` (on light)
**States observed:** Static

## Layout
| Property | Value |
| :--- | :--- |
| Max Width | 1440px |
| Column Grid | 12-column |
| Section Padding | 51px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked feature cards, hidden desktop nav, centered CTAs |
| Desktop | 1440px | Side-by-side feature grids, horizontal nav |

## Imagery & decoration
Payrails uses high-fidelity product screenshots and abstract "OS" metaphors (grids, nodes). It avoids illustrative "blob" art or generic stock photography. Decoration is strictly functional, using hairline borders to define the "Operating System" workspace.

## Do's
- Use `#d63d00` for the primary "Book a Demo" or "Contact Sales" button.
- Pair Archivo 300 with Archivo 500 for hierarchical contrast.
- Use `#fbfbfb` as the default background for all light-mode sections.
- Maintain sharp `0px` corners for large structural sections.
- Use `#001535` for primary headings to maintain brand depth.

## Don'ts
- **Wrong:** Using a generic blue for primary buttons. **Right:** Use `#d63d00`. **Reason:** Blue (`#0066ff`) is reserved for sub-brand or internal app logic, not the parent brand's primary CTA.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Keep cards flat with 1px borders. **Reason:** The system relies on a flat "OS" aesthetic.
- **Wrong:** Using pure black `#000000` for long-form body text. **Right:** Use `#171717`. **Reason:** Improves readability on the `#fbfbfb` canvas.

## Similar brands
- Stripe (technical precision)
- Linear (modular OS aesthetic)
- Vercel (monochrome with high-contrast accents)

## Quick start

### CSS Custom Properties
```css
:root {
  --payrails-primary: #d63d00;
  --payrails-navy: #001535;
  --payrails-bg: #fbfbfb;
  --payrails-text: #171717;
  --payrails-font: 'Archivo', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #d63d00;
  --color-navy: #001535;
  --color-canvas: #fbfbfb;
  --font-archivo: 'Archivo';
}
```

## Agent prompt examples
- "Create a primary action button using Payrails Orange #d63d00 with 8px border radius and Archivo Medium 14px text."
- "Design a feature section with an Archivo 300 subheader in #404040 and a 1px #121212 divider."
- "Generate a pricing card on a #fbfbfb background with a #d63d00 primary CTA."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the CSS variables.
- Mobile menu transition logic was not observed in the static evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://payrails.com | 1440px | 2026-06-06 |
| Pricing | https://payrails.com/pricing | 1440px | 2026-06-06 |
| About | https://payrails.com/about | 1440px | 2026-06-06 |