# Hipay Design System

> Deep indigo canvases met with high-contrast white typography and vibrant orange functional accents.

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

## TL;DR
Hipay utilizes a "monochrome-plus" system where a deep indigo foundation `#2c0a64` acts as the primary brand surface, often replacing standard black. The system relies on the geometric sans-serif **Urbanist**, specifically utilizing its Light (300) weight for large display headlines to create a sophisticated, airy feel. Functional highlights and primary interactive cues use a high-visibility orange `#ff8c50`, while secondary brand moments leverage a periwinkle palette (`#6864e7`, `#d3d3f8`). Layouts are structured around generous vertical breathing room (80px section gaps) and sharp, 0px-radius containers, with 2px radii reserved strictly for interactive elements like buttons and inputs.

## Signature DNA
1. **The Indigo Canvas** (The use of `#2c0a64` as a primary background for feature blocks and headers, creating a high-contrast environment for white text.)
2. **Urbanist Light Display** (Headlines are consistently rendered at 400px or larger using weight 300, establishing a technical yet elegant brand voice.)
3. **Orange Functional Punctuation** (The specific use of `#ff8c50` for text links and iconography within dark surfaces to draw immediate visual attention.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 74 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary body text on light surfaces | 23 | 0.8 | computed_style |
| `{color.brand.deep}` | `#2c0a64` | Primary brand surface, hero backgrounds | 59 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.orange}` | `#ff8c50` | Primary action text, text buttons | 30 | 0.8 | computed_style |
| `{color.accent.periwinkle}` | `#6864e7` | Secondary accents, hover states | 19 | 0.8 | computed_style |
| `{color.accent.soft}` | `#d3d3f8` | Decorative surfaces, secondary backgrounds | 12 | 0.8 | computed_style |
| `{color.accent.muted}` | `#9999ef` | Tertiary decorative surfaces | 7 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Urbanist | 300, 400, 700 | All headlines and body | Urbanist (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 40px | 46px | normal | 300 | Main section titles | `h2.SliderDefaultstyled__SliderDefaultTitle` |
| `{type.heading.md}` | 30px | 34.5px | normal | 700 | Card titles | `h3.SliderDefaultCardstyled__SliderDefaultCardTitle` |
| `{type.body.lg.bold}` | 18px | 20.7px | normal | 700 | Navigation labels | `div.LinkTextstyled__Label` |
| `{type.body.lg}` | 18px | 23.4px | normal | 400 | Intro paragraphs | `p:nth-of-type(1)` |
| `{type.body.md}` | 16px | 18.4px | normal | 400 | Default body text | `section.blockstyled__Block` |
| `{type.body.md.bold}` | 16px | 20.8px | normal | 700 | Feature titles | `p.KeyPointstyled__KeyPointTitle` |
| `{type.body.sm}` | 14px | 16.1px | normal | 400 | UI labels, anchors | `button.CarouselAnchorsstyled__CarouselAnchorItem` |
| `{type.caption}` | 14px | 18.2px | normal | 400 | Small descriptions | `p` |

### Principles
1. **Weight Contrast:** Headlines use weight 300 for elegance, while UI labels use 700 for immediate legibility.
2. **Tight Line Height:** Display sizes maintain a tight 1.15x line height ratio to keep large type cohesive.
3. **Achromatic Body:** Running text is strictly `#000000` on white or `#ffffff` on indigo; color is reserved for interaction.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 6px | 3 |
| `{space.sm}` | 10px | 3 |
| `{space.md}` | 14px | 43 |
| `{space.lg}` | 24px | 5 |
| `{space.section}` | 80px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main containers, section blocks | 168 occurrences |
| `{radius.interactive}` | 2px | Buttons, form inputs | 20 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | All cards and surfaces | Component evidence (shadow: none) |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary Action)
**Role:** Main call to action on light surfaces.
**Pages observed:** https://hipay.com
**Spec:** Background `#ffffff` / Text `#2c0a64` / Border `none` / Radius `2px` / Padding `14px 24px` / Typography `Urbanist 16px 700`
**States observed:** Default | Hover: not captured

#### Rounded Button (Text Link)
**Role:** Inline actions or secondary triggers.
**Pages observed:** https://hipay.com
**Spec:** Background `transparent` / Text `#ff8c50` / Border `none` / Radius `2px` / Padding `14px 14px 14px 0px` / Typography `Urbanist 16px 400`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Feature Surface (Indigo)
**Role:** High-impact content blocks.
**Pages observed:** https://hipay.com
**Spec:** Background `#2c0a64` / Text `#ffffff` / Border `none` / Radius `0px` / Padding `0px` / Typography `Urbanist 16px`
**States observed:** Default

#### Feature Surface (Periwinkle)
**Role:** Secondary content blocks.
**Pages observed:** https://hipay.com
**Spec:** Background `#d3d3f8` / Text `#000000` / Border `none` / Radius `0px` / Padding `0px` / Typography `Urbanist 16px`
**States observed:** Default

### Tier 3: Surface-specific

#### Form Input
**Role:** Lead generation and contact forms.
**Pages observed:** https://hipay.com
**Spec:** Background `#ffffff` / Text `#000000` / Border `1px solid #d3d3f8` (inferred from accent) / Radius `2px` / Padding `10px`
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Section Gap | 80px |
| Content Max-Width | 1440px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Stacked feature cards, reduced padding |
| Desktop | 1440px | Multi-column layouts, 80px section spacing |

## Imagery & decoration
Hipay uses clean, flat vector iconography with thin strokes. Photography features high-key lighting and diverse subjects, often overlaid with the brand's indigo or periwinkle tints. Decorative elements include large-scale geometric shapes and subtle gradients within the periwinkle family.

## Do's
- Use **Urbanist 300** for all H2 section titles.
- Apply `#2c0a64` for primary brand backgrounds to maintain high contrast.
- Ensure all buttons have a `{radius.interactive}` of **2px**.
- Use `#ff8c50` for text-based "Learn more" links.
- Maintain **80px** vertical spacing between major content sections.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper theme) for primary UI buttons. **Right:** Use `#2c0a64` or `#ffffff`. **Reason:** Swiper blue is a library default, not a Hipay brand color.
- Do not use rounded corners (radius > 0) on large section containers.
- Do not use shadows on cards; the brand relies on flat color blocks for separation.
- Do not use weight 700 for display headlines; keep them at weight 300.
- Do not mix the orange `#ff8c50` with the periwinkle `#6864e7` in the same text block.

## Similar brands
- Stripe (clean typography, bold color blocks)
- Adyen (financial tech aesthetic, monochrome base)
- Wise (geometric sans, high-contrast surfaces)

## Quick start

### CSS Custom Properties
```css
:root {
  --hp-color-white: #ffffff;
  --hp-color-black: #000000;
  --hp-color-indigo: #2c0a64;
  --hp-color-orange: #ff8c50;
  --hp-color-periwinkle: #6864e7;
  --hp-color-periwinkle-light: #d3d3f8;
  
  --hp-font-main: 'Urbanist', sans-serif;
  
  --hp-radius-interactive: 2px;
  --hp-space-section: 80px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-brand-indigo: #2c0a64;
  --color-brand-orange: #ff8c50;
  --font-urbanist: "Urbanist", sans-serif;
  --radius-interactive: 2px;
  --spacing-section: 80px;
}
```

## Agent prompt examples
- "Create a hero section with a `#2c0a64` background, using `Urbanist` weight 300 for the title at 40px, and a white button with 2px border radius."
- "Design a feature grid where each card has a `#d3d3f8` background and 0px border radius, with text links in `#ff8c50`."
- "Generate a contact form using 2px border radius for inputs and a primary button with 14px 24px padding."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed evidence.
- Specific mobile-only typography tokens were not fully differentiated from desktop scales.

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