# Payapps Design System

> High-contrast construction fintech anchored by deep navy foundations and vibrant electric blue actions.

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

## TL;DR
Payapps utilizes a "Deep Sea" palette where a dark navy (#0f145b) and royal blue (#24297e) provide the structural weight for a high-trust construction environment. Interaction is driven by a high-voltage electric blue (#007aff) used for primary CTAs, often paired with white text for maximum legibility. The system relies heavily on Gotham for all typographic layers, maintaining a professional, geometric clarity. Layouts alternate between clean white canvases and full-bleed navy sections, using generous 100px vertical spacing to separate complex product information.

## Signature DNA
1. **The Navy Anchor** (Deep navy #0f145b and royal #24297e are used as full-bleed section backgrounds to frame white content cards, creating a "contained" professional feel.)
2. **Electric Interaction** (Primary actions use #007aff, a high-saturation blue that stands out against both white and navy surfaces, signaling "system utility" over "marketing decoration".)
3. **Geometric Gotham** (The exclusive use of Gotham across all weights—from 300 for light body to 900 for price integers—provides a unified, architectural voice.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and card fill | 197 | 1.0 | Computed Style |
| `{color.ink}` | `#333333` | Primary body text color | 187 | 0.8 | Computed Style |
| `{color.navy.deep}` | `#0f145b` | Hero backgrounds and high-contrast sections | 32 | 0.8 | Computed Style |
| `{color.navy.royal}` | `#24297e` | Footer background and secondary surfaces | 55 | 0.8 | Computed Style |
| `{color.ghost}` | `#f5f7fc` | Subtle section backgrounds and card offsets | 32 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#007aff` | Primary button background (Electric Blue) | 4 | 1.0 | `--swiper-theme-color` |
| `{color.primary.deep}` | `#003fba` | Alternative button background and text links | 57 | 0.8 | Computed Style |
| `{color.accent.light}` | `#307aff` | Decorative text and iconography | 35 | 0.8 | Computed Style |
| `{color.accent.vivid}` | `#0091ff` | Interactive text and small UI highlights | 15 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Gotham | 300, 400, 500, 600, 700, 900 | Primary Heading & Body | Montserrat | Proprietary |
| Arial | 400, 900 | Fallback / Video UI | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 56px | 67.2px | -0.5px | 400 | Hero Headlines | `h3.elementor-heading-title` |
| `{type.display.md}` | 43px | 34.4px | normal | 900 | Pricing Integers | `span.elementor-price-table__integer-part` |
| `{type.heading.lg}` | 40px | 48px | normal | 700 | Section Headers | `h2.elementor-heading-title` |
| `{type.heading.sm}` | 24px | 28.8px | normal | 700 | Feature Titles | `h3.elementor-image-box-title` |
| `{type.body.lg}` | 20px | 32px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `section.elementor-section` |
| `{type.button}` | 16px | 16px | 0.9px | 500 | CTA Labels | `a.elementor-button` |
| `{type.caption}` | 12px | 21.6px | -0.1px | 700 | Small Metadata | `p` |

### Principles
1. **Heavy Price Points:** Use Gotham 900 for numerical values in pricing tables to emphasize scale.
2. **Spaced CTAs:** Button text uses 0.9px letter spacing to improve legibility on saturated backgrounds.
3. **Tight Display:** Large hero headlines (56px) use negative tracking (-0.5px) to maintain visual density.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 26 |
| `{space.sm}` | 16px | 20 |
| `{space.md}` | 25px | 34 |
| `{space.lg}` | 45px | 7 |
| `{space.section}` | 100px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, footer | 459 occurrences |
| `{radius.md}` | 10px | Standard buttons | Rounded Button component |
| `{radius.lg}` | 15px | Content cards | Card component |
| `{radius.pill}` | 50px | Primary Hero CTAs | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.18) 0px 0px 19px -2px` | Floating feature cards | Card component |
| `{shadow.button}` | `rgba(0, 0, 0, 0.16) 0px 10px 30px -9px` | Primary CTA depth | Rounded Button component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.primary}` (#007aff) or `{color.navy.royal}` (#24297e) | Text: #ffffff | Radius: 50px | Padding: 17px 25px | Typography: `{type.button}`
**States observed:** Default | Hover: captured (shadow increases) | Active: captured

#### Surface
**Role:** Sectional containment
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.ghost}` (#f5f7fc) or `{color.navy.deep}` (#0f145b) | Radius: 0px | Padding: 70px 0px
**States observed:** Default

### Tier 2: Patterns

#### Card
**Role:** Feature highlights and pricing tiers
**Pages observed:** Homepage, Pricing
**Spec:** Background: #ffffff | Radius: 15px | Padding: 45px | Shadow: `{shadow.card}`
**States observed:** Default | Hover: captured

#### Footer
**Role:** Global site navigation
**Pages observed:** Homepage, Pricing
**Spec:** Background: `{color.navy.royal}` (#24297e) | Border-top: 1px solid rgba(255, 255, 255, 0.19) | Padding: 15px 0px 31px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Gap | 100px |
| Column Grid | 12-column desktop |

## Do's
* Use Gotham 900 for pricing integers to create a clear visual hierarchy.
* Apply `{color.navy.deep}` (#0f145b) for full-bleed backgrounds behind white cards.
* Ensure all primary buttons have a `{radius.pill}` (50px) for a soft but professional look.
* Maintain 100px vertical padding between major homepage sections.
* Use #ffffff text on all navy or electric blue backgrounds.

## Don'ts
* **Wrong:** Using a 4px radius on cards. **Right:** Use 15px. **Reason:** The brand uses softer, more approachable corners for content containers.
* **Wrong:** Placing #333333 text on a navy background. **Right:** Use #ffffff. **Reason:** Contrast ratios must be maintained for legibility.
* **Wrong:** Mixing Montserrat with Gotham. **Right:** Use Gotham exclusively. **Reason:** Gotham is the core typographic identity.

## Quick start

```css
:root {
  --color-primary: #007aff;
  --color-navy-deep: #0f145b;
  --color-navy-royal: #24297e;
  --color-ink: #333333;
  --color-canvas: #ffffff;
  --radius-card: 15px;
  --radius-button: 50px;
  --shadow-cta: 0 10px 30px -9px rgba(0, 0, 0, 0.16);
}
```

## Known gaps
* Hover states for secondary navigation items were not explicitly captured in the token stream.
* Mobile-specific font scaling for display sizes (56px) was not fully mapped across all breakpoints.

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