# Ppaya.co.uk Design System

> High-contrast utility meets renewable energy depth, anchoring deep navy surfaces with vibrant cyan accents and structured sans-serif typography.

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

## TL;DR
Ppaya.co.uk utilizes a high-contrast "Navy and Light" system that balances deep, authoritative surfaces with a clean, white-canvas utility. The primary brand voltage is generated by the interplay between a deep navy (`#001533`) and a high-energy accent cyan (`#00faca`), used sparingly for highlights and badges. Typography is strictly `ui-sans-serif`, leaning on weight and negative letter-spacing for hierarchy rather than decorative font families. Layouts are defined by generous vertical spacing and a mix of sharp and rounded (`14px`) geometry, creating a professional, data-driven atmosphere for renewable energy transactions.

## Signature DNA
1. **The Navy Anchor** (Deep navy surfaces at `#001533` or `#00224e` provide the primary structural weight for heroes and footers, contrasting against a pure white `#ffffff` canvas.)
2. **Cyan Voltage** (Vibrant cyan `#00faca` is used as a high-contrast signal for labels and badges, often set at small sizes with wide tracking to maximize visibility.)
3. **Tight Display Tracking** (Large display headlines at 72px utilize a significant `-1.8px` letter-spacing, giving the standard sans-serif a custom, editorial density.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-background` | `#ffffff` | Primary page floor and surface background | 44 | 1 | `css_variable` |
| `--color-foreground` | `#0d1117` | Primary text and high-contrast card foreground | 105 | 1 | `css_variable` |
| `--color-border` | `#d0d7de` | Default 1px divider and input outline | 18 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color-primary` | `#005dd5` | Primary action color, buttons, and success signals | 28 | 1 | `css_variable` |
| `--color-heading-navy`| `#001533` | Primary heading color on light backgrounds | 33 | 1 | `css_variable` |
| `#00224e` | `#00224e` | Secondary dark surface background (Hero/Footer) | 5 | 1 | `css_variable` |
| `--color-accent-cyan` | `#00faca` | High-voltage labels and decorative accents | 12 | 1 | `css_variable` |
| `--color-textMuted` | `#6e7681` | Secondary body text and metadata | 59 | 1 | `css_variable` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--color-success` | `#005dd5` | Confirmation and positive status (Primary Blue) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| `ui-sans-serif` | 400, 500, 600, 700 | All roles (Display, Heading, Body, UI) | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 72px | 72px | -1.8px | 600 | Homepage Hero H1 | `h1.text-secondary-foreground` |
| `{type.h2-lg}` | 36px | 40px | -0.9px | 700 | Section Headlines | `h2.text-heading-navy.text-3xl` |
| `{type.h2-md}` | 30px | 36px | -0.75px | 600 | Secondary Headlines | `h2.text-heading-navy.text-2xl` |
| `{type.h3}` | 24px | 32px | -0.6px | 600 | Card/Group Titles | `div.text-heading-navy.text-xl` |
| `{type.body-lg}` | 18px | 28px | normal | 600 | Lead paragraphs | `h3.text-heading-navy` |
| `{type.body}` | 16px | 24px | normal | 400 | Default running text | `section#home-hero` |
| `{type.body-sm}` | 14px | 20px | normal | 500 | UI labels, small text | `p.text-heading-navy.mb-1` |
| `{type.caption}` | 12px | 16px | 0.6px | 600 | Cyan labels/badges | `p.text-accent-cyan.text-xs` |
| `{type.micro}` | 10px | 15px | 0.5px | 600 | Tiny metadata | `span.text-accent-cyan.text-[10px]` |

### Principles
1. **Negative Tracking on Display:** All headlines 24px and above must use negative letter-spacing (ranging from -0.6px to -1.8px).
2. **Weight-Based Hierarchy:** Use weight 600 for emphasis in body and 700 for primary section headers.
3. **Cyan for Attention:** Small caps or wide-tracked cyan text is reserved for "Recognition" or "Status" labels.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 10 |
| `{space.sm}` | 12px | 15 |
| `{space.md}` | 16px | 27 |
| `{space.lg}` | 24px | 21 |
| `{space.xl}` | 32px | 4 |
| `{space.section}` | 64px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Footer, Sharp sections | 233 occurrences |
| `{radius.md}` | 10px | Primary buttons, small cards | `radius: 10px` |
| `{radius.lg}` | 14px | Content cards, surface panels | `radius: 14px` |
| `{radius.pill}` | 9999px | Badges, status pills | 22 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | None | Default canvas | `#ffffff` |
| Raised | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | Content cards on white | Observed on `/about` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** `ppaya.co.uk`, `ppaya.co.uk/pricing`
**Spec:** Background: `#005dd5` / Text: `#ffffff` / Radius: `10px` / Padding: `0px 32px` / Typography: `16px weight 500`
**States observed:** Default | Hover: `#1a6ee0` | Focus | Active | Disabled: Captured

#### Pill Badge
**Role:** Status or category indicator
**Pages observed:** `ppaya.co.uk`
**Spec:** Background: `rgba(0, 250, 202, 0.1)` / Text: `#00faca` / Border: `1px rgba(0, 250, 202, 0.4)` / Radius: `9999px` / Typography: `14px`

### Tier 2: Patterns
#### Content Card
**Role:** Feature display
**Pages observed:** `ppaya.co.uk/about`
**Spec:** Background: `#fefdfb` / Text: `#0d1117` / Border: `1px #d0d7de` / Radius: `14px` / Padding: `24px` / Shadow: `rgba(0, 0, 0, 0.1) 0px 1px 3px`

#### Hero Section
**Role:** Page introduction
**Pages observed:** `ppaya.co.uk`
**Spec:** Background: `#00224e` / Text: `#ffffff` / Radius: `0px` / Padding: `64px vertical`

### Tier 3: Surface-specific
#### Recognition Card
**Role:** Award and recognition display
**Pages observed:** `ppaya.co.uk`
**Spec:** Background: `rgba(0, 0, 0, 0)` / Text: `#ffffff` / Border: `1px #d0d7de` / Radius: `14px` / Padding: `24px 0px`

#### Footer
**Role:** Global navigation and legal
**Pages observed:** `ppaya.co.uk`
**Spec:** Background: `#001533` / Text: `#ffffff` / Border: `1px rgba(255, 255, 255, 0.1) top` / Radius: `0px` / Padding: `20px 0px`

## Layout
| Property | Value |
|----------|-------|
| Max Width | 1280px (approx) |
| Grid | 12-column desktop |
| Section Gap | 64px - 96px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked cards, reduced display type size, hamburger menu |
| Desktop | 1440px | Multi-column grids, full navigation |

## Imagery & decoration
- **Abstract Shapes:** Large, soft-edged circular orbs in cyan and navy used as background depth.
- **Dot Grids:** Subtle light gray dot patterns used to fill whitespace in technical sections.
- **Avoid:** Overly playful illustrations; the brand uses professional, clean-lined icons and high-contrast photography.

## Do's
- Use `#001533` for primary section backgrounds to establish authority.
- Apply negative letter-spacing to any headline above 24px.
- Reserve `#00faca` for small-scale accents and badges only.
- Use `14px` border radius for all content-containing cards.
- Ensure primary buttons use the `#005dd5` blue with white text.

## Don'ts
- **Wrong:** Using `#00faca` (Cyan) for large text blocks. **Right:** Use `#0d1117` or `#ffffff`. **Reason:** Legibility and brand hierarchy.
- **Wrong:** Using sharp corners for cards. **Right:** Use `{radius.lg}` (14px). **Reason:** Consistency with the "Modern Way" visual language.
- **Wrong:** Mislabeling the cyan accent as a primary background color. **Right:** Cyan is an accent; Navy is the primary background.

## Similar brands
- Octopus Energy
- Bulb
- Stripe (for technical utility)
- Gridserve

## Quick start

```css
:root {
  --color-primary: #005dd5;
  --color-heading-navy: #001533;
  --color-accent-cyan: #00faca;
  --color-foreground: #0d1117;
  --color-background: #ffffff;
  --color-muted: #6e7681;
  --radius-card: 14px;
  --radius-button: 10px;
}
```

## Agent prompt examples
- "Generate a feature card using a white background, a 1px #d0d7de border, and a 14px border radius. Use #001533 for the title and #6e7681 for the body text."
- "Create a hero section with a #001533 background. The main headline should be 72px, weight 600, with -1.8px letter-spacing in white."
- "Design a badge component with a pill shape, using #00faca text on a 10% opacity cyan background with a 1px 40% opacity cyan border."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Specific mobile breakpoint transition values (e.g., 768px vs 1024px) were not in the provided evidence.

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