# Qualpay Design System

> Corporate stability anchored by deep cobalt blues and high-contrast charcoal typography on a clean, structured grid.

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

## TL;DR
Qualpay utilizes a professional, high-trust palette dominated by Qualpay Blue (#015eb8) and Qualpay Charcoal (#545859). The system relies on the Museo Sans family, specifically using the ultra-light weight 100 for large, airy headlines and weight 300 for UI labels. Actionable elements are clearly defined by 5px rounded corners and high-saturation fills in blue or Qualpay Green (#8dc53e). Layouts are characterized by generous vertical padding (up to 60px) and a clear distinction between content zones using subtle Powder Blue (#b9d9eb) backgrounds.

## Signature DNA
1. **The Museo 100 Headline:** Large-scale display text (32px) is consistently set in Museosans 100 at weight 400, creating a sophisticated, thin-stroke aesthetic that balances the heavy brand colors.
2. **Dual-Action Primary CTAs:** The system uses two distinct primary button colors—Qualpay Blue (#015eb8) for general navigation and Qualpay Green (#8dc53e) for specific conversion points like "Savings Challenge"—both sharing a 5px radius.
3. **Powder Blue Zoning:** Subtle sectioning is achieved through the use of Powder Blue (#b9d9eb) as a background fill to separate white content blocks without using heavy dividers.

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--qualpay-blue` | `#015eb8` | Primary brand color, buttons, headers | 34 | 1 | CSS Variable |
| `--qualpay-charcoal` | `#545859` | Primary body text | 59 | 1 | CSS Variable |
| `--gray-dark` | `#333333` | High-contrast text | 73 | 0.8 | Computed Style |
| `--white` | `#ffffff` | Page canvas, button text | 84 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--powder-blue` | `#b9d9eb` | Section backgrounds, accent text | 7 | 1 | CSS Variable |
| `--qualpay-green` | `#8dc53e` | Secondary CTA (Savings Challenge) | 2 | 1 | CSS Variable |
| `--qp-turquoise` | `#00a3e0` | Decorative background (decorative_only) | 2 | 1 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Museosans 100 | 400 | Display Headlines, Body | Lato Light | Licensed |
| Museosans 300 | 700 | Subheadings, Nav Links | Lato Bold | Licensed |
| Museosans 500 | 500 | Footer Headings, Links | Lato Medium | Licensed |
| Museosans 700 | 800 | UI Labels, Designations | Lato Black | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h2}` | 32px | 41.6px | normal | 400 | Primary Section Head | `h2.heading-h2-primary` |
| `{type.h3}` | 20px | 26px | normal | 700 | Subsection Head | `h3.heading-h3` |
| `{type.body.lg}` | 18px | 25.2px | normal | 400 | Lead Paragraphs | `p.qualpay-paragraph` |
| `{type.footer.h}` | 18px | 23.4px | normal | 500 | Footer Column Head | `h4.footer-list-headings` |
| `{type.nav}` | 16px | 20px | normal | 700 | Main Navigation | `a.home-header-menu-links` |
| `{type.label}` | 15px | 21px | normal | 800 | Team Designations | `h5.team-people-designation` |
| `{type.body.sm}` | 14px | 20px | normal | 400 | Standard Body / Hero | `section.qp-hero-section` |
| `{type.caption}` | 11px | 15.4px | normal | 700 | Small Metadata | `h5.heading-34` |

### Principles
1. **Lightweight Display:** Headlines must use weight 400 (Museosans 100) to maintain brand elegance.
2. **Bold Navigation:** All interactive menu items and footer links use weight 700 to ensure clear affordance.
3. **Charcoal over Black:** Body text should default to #545859 rather than pure black to soften readability on white backgrounds.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 16 |
| `{space.sm}` | 10px | 28 |
| `{space.md}` | 15px | 68 |
| `{space.lg}` | 20px | 25 |
| `{space.xl}` | 30px | 13 |
| `{space.section}` | 60px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Content sections, surfaces | 228 occurrences |
| `{radius.interactive}` | 5px | Buttons, form inputs | Rounded Button component |
| `{radius.card}` | 20px | Specific feature cards | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.deep}` | `rgba(23, 73, 77, 0.15) 0px 20px 30px 0px` | Floating UI elements | 6 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Get Started, Login)
**Pages observed:** https://qualpay.com, https://qualpay.com/about
**Spec:** Background: #015eb8 | Text: #ffffff | Radius: 5px | Padding: 14px 30px | Font: 14px / 800
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button
**Role:** Alternative actions (Learn More)
**Pages observed:** https://qualpay.com
**Spec:** Background: transparent | Text: #015eb8 | Border: 1px solid #015eb8 | Radius: 5px | Padding: 14px 30px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Conversion Button
**Role:** High-priority conversion (Savings Challenge)
**Pages observed:** https://qualpay.com, https://qualpay.com/about
**Spec:** Background: #8dc53e | Text: #ffffff | Radius: 5px | Padding: 10px 25px | Font: 14px
**States observed:** Default | Hover: Not captured

#### Content Surface (Standard)
**Role:** Default section container
**Pages observed:** https://qualpay.com, https://qualpay.com/about
**Spec:** Background: #ffffff | Text: #333333 | Padding: 60px 15px 0px | Radius: 0px
**States observed:** Static

### Tier 3: Surface-specific

#### Accent Surface
**Role:** Visual break between white sections
**Pages observed:** https://qualpay.com, https://qualpay.com/about
**Spec:** Background: #b9d9eb | Text: #ffffff | Padding: 5px 0px | Radius: 0px
**States observed:** Static

#### Brand Header Surface
**Role:** Global navigation container
**Pages observed:** https://qualpay.com
**Spec:** Background: #015eb8 | Text: #ffffff | Padding: 40px 15px | Radius: 0px
**States observed:** Static

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Padding | 60px vertical |
| Column Gutter | 15px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 15px horizontal |
| Desktop | 1440px | Multi-column grid (up to 6 columns for industry icons) |

## Imagery & decoration
Qualpay uses literal, high-quality photography of professional environments (offices, servers) and stylized flat icons for industry categories (Nonprofit, Energy, etc.). Decorative elements include the "Platform as a Service" wheel graphic which uses the full brand color spectrum including turquoise and orange.

## Do's
- Use Museosans 100 for all H2 headlines.
- Apply a 5px border radius to all primary and secondary buttons.
- Use #b9d9eb (Powder Blue) for section backgrounds to create visual hierarchy.
- Ensure primary body text is set to #545859 (Qualpay Charcoal).
- Use Qualpay Green (#8dc53e) exclusively for "Savings" related conversion points.

## Don'ts
- **Wrong:** Using #00a3e0 (Turquoise) for primary buttons. **Right:** Use #015eb8. **Reason:** Turquoise is a decorative/accent token only.
- Do not use bold weights (700+) for large display headlines; stick to weight 400.
- Do not use pure black (#000000) for long-form body copy.
- Do not apply border radii to main content sections or surfaces.
- Do not mix button styles within the same button group (e.g., mixing 5px and 0px radii).

## Similar brands
- American Express (Corporate Blue/Gray)
- Chase (High-trust Finance Blue)
- Stripe (Early-era structural grid)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --qualpay-blue: #015eb8;
  --qualpay-green: #8dc53e;
  --qualpay-charcoal: #545859;
  --powder-blue: #b9d9eb;
  --white: #ffffff;
  --radius-interactive: 5px;
  --font-display: "Museosans 100", sans-serif;
  --font-ui: "Museosans 300", sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section with a background image, a headline in Museosans 100 weight 400, and a primary button using #015eb8 with a 5px radius."
- "Create a three-column feature grid using #545859 for text and 18px Museosans 100 for paragraph copy."
- "Design a call-to-action banner with a #b9d9eb background and a #8dc53e button labeled 'Take the Challenge'."

## Known gaps
- Hover and Focus states for buttons were not explicitly captured in the static evidence.
- The exact transition timing for the "Platform as a Service" wheel was not captured.
- Mobile-specific font size scaling for H1/H2 was not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://qualpay.com | 1440px | 2026-06-06 |
| About Page | https://qualpay.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://qualpay.com | 390px | 2026-06-06 |