# Paynau Design System

> High-contrast monochrome infrastructure anchored by deep navy voids and vibrant electric-blue accents.

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

## TL;DR
Paynau utilizes a high-density "monochrome-plus" system where a foundational white canvas (#ffffff) and deep obsidian (#000000) or navy (#0c062c) surfaces are punctuated by high-voltage electric blue (#3641e7) and cyan (#01c6c4) accents. Typography is strictly sans-serif, relying on **Inter** for structural clarity and **Plus Jakarta Sans** for high-impact display moments. The system favors extreme pill geometry (9999px) for interactive elements and generous card radii (16px to 25px) for content containers. Layouts are characterized by dense information clusters (e.g., the 1 API / US$40+ BN hero stats) set against expansive, dark-mode section blocks.

## Signature DNA
1. **The Infrastructure Pill** (Pill-shaped badges and buttons with 9999px radii used for everything from "Payments Simplified" labels to primary "Get Started" CTAs, creating a consistent "capsule" language across all pages).
2. **Electric Voids** (Large-scale sections using #0c062c or #000000 backgrounds with white text and #3641e7 accents, signaling technical "infrastructure" depth).
3. **Data Density Blocks** (The use of 32px semi-bold Inter headings for quantitative metrics like "US$40+ BN", creating a visual hierarchy that prioritizes scale and volume).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 252 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#1d1e25` | Default body text and headings | 96 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#000000` | High-contrast headings and dark section backgrounds | 11 | 1.0 | Computed Style |
| `{color.surface.soft}` | `#f1f3f6` | Secondary card backgrounds and neutral UI elements | 25 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.electric}` | `#3641e7` | Primary brand voltage, button backgrounds, and text emphasis | 11 | 0.8 | Computed Style |
| `{color.accent.cyan}` | `#01c6c4` | Secondary brand accent, decorative surface backgrounds | 3 | 0.6 | Computed Style |
| `{color.accent.navy}` | `#0c062c` | Deep background for hero and technology sections | 21 | 0.8 | Computed Style |
| `{color.accent.slate}` | `#909da2` | Muted text and secondary button labels | 50 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `__Inter_8b3a0b` | 400, 500, 600, 700 | Primary UI, Body, and Metric Headings | Inter | Google Fonts |
| `__Plus_Jakarta_Sans_3c4d47` | 700 | High-impact display headings | Plus Jakarta Sans | Google Fonts |
| `__Poppins_c169f5` | 600 | Secondary display text | Poppins | Google Fonts |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.xl}` | 32px | 48px | normal | 600 | Metric highlights | `span.styles_flag__AOycX` |
| `{text.display.lg}` | 32px | 39px | -0.64px | 600 | Section headings | `h2.text-2xl` |
| `{text.display.md}` | 28px | 33.6px | -0.84px | 600 | Tab navigation | `button#headlessui-tabs-tab` |
| `{text.heading.md}` | 24px | 28.8px | normal | 700 | Sub-section titles | `p.relative.text-center` |
| `{text.heading.sm}` | 22px | 28px | -0.66px | 700 | Feature titles | `h3.mt-4` |
| `{text.body.lg}` | 16px | 24px | normal | 400 | Hero body copy | `section#hero` |
| `{text.body.md}` | 14px | 24px | normal | 400 | Default body text | `p.text-sm/6` |
| `{text.caption}` | 12px | 18px | normal | 600 | Small labels/badges | `span.text-center.text-xs` |

### Principles
1. **Metric Dominance:** Quantitative data (numbers) always use `{text.display.xl}` at 32px to convey scale.
2. **Tight Heading Tracking:** Display sizes 28px and above utilize negative letter-spacing (-0.64px to -0.84px) for a compact, architectural feel.
3. **Sans-Serif Exclusivity:** No serifs are permitted; the brand identity is built on the geometric precision of Inter and Plus Jakarta Sans.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 38 |
| `{space.sm}` | 16px | 25 |
| `{space.md}` | 32px | 30 |
| `{space.lg}` | 40px | 17 |
| `{space.xl}` | 96px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.pill}` | 9999px | Buttons, badges, and tag-style cards | 91 occurrences |
| `{radius.panel}` | 25px | Large section containers | 6 occurrences |
| `{radius.card}` | 16px | Content and feature cards | 16 occurrences |
| `{radius.input}` | 8px | Form fields | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.input}` | `rgb(198, 206, 220) 0px 0px 0px 1px inset` | Form field borders | 8 occurrences |
| `{shadow.card}` | `rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset` | Dark mode card outlines | 4 occurrences |

## Components

### Tier 1: Foundational

#### Primary CTA (Pill)
**Role:** Main site actions (Get Started)
**Pages observed:** paynau.com, paynau.com/pricing
**Spec:** Background: `{color.accent.electric}` (#3641e7) | Text: `{color.canvas}` (#ffffff) | Radius: `{radius.pill}` (9999px) | Padding: 11px 15px | Typography: `{text.caption}` (11px/700)
**States observed:** Default | Hover: captured (visual shift to brighter blue)

#### Ghost Button
**Role:** Secondary actions (Contact Us)
**Pages observed:** paynau.com
**Spec:** Background: transparent | Border: 1px solid `{color.canvas}` (#ffffff) | Text: `{color.canvas}` (#ffffff) | Radius: `{radius.pill}` (9999px)
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Metric Badge
**Role:** Displaying infrastructure stats (1 API, 26+ Methods)
**Pages observed:** paynau.com
**Spec:** Background: `{color.surface.soft}` (#f1f3f6) | Text: `{color.ink.primary}` (#1d1e25) | Radius: `{radius.pill}` (9999px) | Padding: 8px 32px | Typography: `{text.body.lg}` (16px/600)
**States observed:** Static

#### Feature Card (Dark)
**Role:** Highlighting technical capabilities
**Pages observed:** paynau.com
**Spec:** Background: rgba(255, 255, 255, 0.03) | Text: `{color.accent.slate}` (#909da2) | Radius: `{radius.card}` (16px) | Padding: 32px 40px | Shadow: `{shadow.card}`
**States observed:** Static

### Tier 3: Surface-specific

#### Form Input
**Role:** Lead generation and contact
**Pages observed:** paynau.com
**Spec:** Background: `{color.canvas}` (#ffffff) | Text: `{color.accent.navy}` (#0c062c) | Radius: `{radius.input}` (8px) | Padding: 26px 16px 8px | Shadow: `{shadow.input}`
**States observed:** Default | Focus: captured (border color shift)

#### Industry Tab
**Role:** Filtering content by sector (Ecommerce, Fintech)
**Pages observed:** paynau.com
**Spec:** Typography: `{text.display.md}` (28px/600) | Color: `{color.accent.slate}` (#909da2) | Active Color: `{color.ink.primary}` (#1d1e25)
**States observed:** Default | Active: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1280px |
| Section Vertical Gap | 96px |
| Grid Gutter | 32px |

## Imagery & decoration
- **Abstract Gradients:** Uses soft mesh gradients in blue and purple behind feature cards.
- **App Mockups:** Clean, high-fidelity mobile UI frames with 16px corner radii.
- **Partner Logos:** Grayscale treatment with #909da2 for non-active states.

## Do's
- Use `{radius.pill}` (9999px) for all primary and secondary buttons.
- Apply negative letter-spacing (-0.64px) to all headings above 24px.
- Use `{color.accent.navy}` (#0c062c) for full-width technical sections.
- Ensure quantitative metrics use `{text.display.xl}` (32px) weight 600.
- Maintain a 96px vertical rhythm between major content sections.

## Don'ts
- **Wrong:** Using a 4px or 8px radius on buttons. **Right:** Always use 9999px. **Reason:** The pill shape is a core brand identifier.
- **Wrong:** Using serif fonts for any display copy. **Right:** Use Plus Jakarta Sans or Inter. **Reason:** Paynau is a modern infrastructure brand.
- **Wrong:** Using saturated colors like #3641e7 for large background areas. **Right:** Use it for accents or buttons only. **Reason:** Large areas of high-saturation blue break the "monochrome-plus" professional aesthetic.

## Similar brands
- Stripe (Infrastructure focus, high-contrast typography)
- Marqeta (Fintech, navy/blue palette)
- Adyen (Clean, metric-heavy layouts)

## Quick start

### CSS Custom Properties
```css
:root {
  --paynau-canvas: #ffffff;
  --paynau-ink-primary: #1d1e25;
  --paynau-accent-electric: #3641e7;
  --paynau-accent-navy: #0c062c;
  --paynau-surface-soft: #f1f3f6;
  --paynau-radius-pill: 9999px;
  --paynau-radius-card: 16px;
}
```

### Tailwind v4 @theme
```javascript
@theme {
  --color-canvas: #ffffff;
  --color-ink-primary: #1d1e25;
  --color-accent-electric: #3641e7;
  --color-accent-navy: #0c062c;
  --radius-pill: 9999px;
  --font-display: "__Plus_Jakarta_Sans_3c4d47", sans-serif;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Paynau pill geometry (9999px) with a #3641e7 background and white 11px semi-bold Inter text."
- "Create a feature card with a 16px radius, #f1f3f6 background, and a 32px Inter heading for a metric."
- "Design a dark-mode section using #0c062c as the background with white headings and electric blue accent icons."

## Known gaps
- Hover states for ghost buttons were not captured in the source.
- Mobile-specific typography scaling for display sizes was partially captured but requires further validation for intermediate breakpoints.

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