# I-payout Design System

> A corporate fintech canvas of deep indigo and high-contrast vermilion, anchored by geometric sans-serif typography and structured information grids.

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

## TL;DR
I-payout utilizes a "monochrome" base system that is heavily reliant on a deep indigo primary color `#2c317a` and a vibrant vermilion accent `#e75426`. The interface is characterized by clean, white surfaces `#ffffff` and light blue-gray sectioning `#e8ecf2`. Typography is strictly modern, pairing the geometric **Roobert** for body and interface elements with the more architectural **FK Display** for large-scale headlines. Interactive elements are defined by generous 64px pill-shaped radii for primary CTAs and 16px radii for content cards, often featuring a soft indigo glow shadow.

## Signature DNA
1. **The Vermilion Punctuation** (The use of `#e75426` for primary actions and icon accents against the deep indigo `#2c317a` text creates a high-energy fintech aesthetic. Observed on Homepage and About page.)
2. **Architectural Display Type** (FK Display at 80px with -1.6px letter spacing creates a massive, structural feel for data and hero headlines. Observed on Homepage "By the Numbers" section.)
3. **Indigo Glow Elevation** (The use of `rgba(155, 162, 255, 0.7)` as a 40px spread shadow on primary buttons creates a "neon" lift effect against light backgrounds. Observed on primary CTAs.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--base-color-neutral--white` | `#ffffff` | Page background, alternate text | 20 | 1 | computed_style |
| `--text-light-1` | `#e8ecf2` | Secondary surface background | 3 | 1 | computed_style |
| `--text-dark` | `#1f2149` | Primary body text, dark surfaces | 127 | 1 | computed_style |
| `--background-primary` | `#000000` | Footer background, primary text | 1 | 1 | declared_token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--red` | `#e75426` | Primary CTA background, brand accent | 18 | 1 | computed_style |
| `--blue-2` | `#2c317a` | Primary brand color, heading text | 154 | 1 | computed_style |
| `--pink-light` | `#9ba2ff` | Border color, button shadow source | 19 | 1 | computed_style |
| `--violet` | `#7076c2` | Tertiary text | 6 | 1 | computed_style |
| `--pink-2` | `#ccd0ff` | Decorative surface (decorative_only) | 1 | 1 | computed_style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `--background-color--background-success` | `#cef5ca` | Success state background |
| `--background-color--background-error` | `#f8e4e4` | Error state background |
| `--background-color--background-warning` | `#fcf8d8` | Warning state background |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| FK Display | 400 | Display Headlines | Inter Tight | Licensed |
| Roobert | 400, 600 | Body, UI, Subheadings | Inter | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 80px | 72px | -1.6px | 400 | Hero Stats | `h2.cal-year-text-e` |
| `{type.display.xl}` | 64px | 76.8px | -1.28px | 400 | Mobile Hero | `div.hero_heading.mobile` |
| `{type.display.lg}` | 56px | 67.2px | -1.12px | 400 | Section Heads | `h2.platf-ben-head-e` |
| `{type.display.md}` | 40px | 48px | -0.8px | 400 | Feature Heads | `div.home-hero-item-head-e` |
| `{type.heading.sm}` | 24px | 31.2px | -0.24px | 400 | Card Titles | `h2.heading-style-h4` |
| `{type.subheading}` | 18px | 27px | -0.16px | 600 | Team Names | `h4.team-member_heading` |
| `{type.body.md}` | 16px | 24px | -0.16px | 400 | Default Body | `section.section_home-hero` |
| `{type.body.sm}` | 14px | 21px | -0.16px | 600 | Category Tags | `div.blog-item-cat-b` |

### Principles
1. **Negative Tracking on Display**: All FK Display sizes above 20px use negative letter spacing ranging from -0.24px to -1.6px.
2. **Standardized Body Leading**: Body text at 16px maintains a consistent 1.5x line height (24px).
3. **Weight Contrast**: Interface labels and buttons use weight 600 (Semi-bold) to distinguish from 400 (Regular) body prose.

## Spacing
**Base unit:** 8px (derived from 8, 16, 24, 40px clusters)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 16px | 14 |
| `{space.md}` | 24px | 6 |
| `{space.lg}` | 40px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers, sharp cards | 236 occurrences |
| `{radius.sm}` | 8px | Small tags/badges | 21 occurrences |
| `{radius.md}` | 16px | Feature cards | 13 occurrences |
| `{radius.pill}` | 64px | Primary CTA buttons | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Glow | `rgba(155, 162, 255, 0.7) 0px 0px 40px 0px` | Primary CTA lift | Observed on "Learn More" buttons |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action
**Pages observed:** Homepage, About
**Spec:** Background `#e75426` / Text `#1f2149` / Border `#e75426` / Radius 64px / Padding 15px 31px / Shadow `rgba(155, 162, 255, 0.7) 0px 0px 40px 0px`
**States observed:** Default | Hover: Not captured

#### Surface: Neutral
**Role:** Section background or container
**Pages observed:** Homepage, About
**Spec:** Background `#e8ecf2` / Text `#1f2149` / Border none / Radius 0px / Padding 0px
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit or Industry display
**Pages observed:** Homepage
**Spec:** Background `transparent` / Text `#1f2149` / Border 1px `#9ba2ff` / Radius 16px / Padding 40px 24px
**States observed:** Default

#### Industry Icon Plate
**Role:** Decorative industry representation
**Pages observed:** Homepage
**Spec:** Background `transparent` / Border 1px `#e75426` / Radius 8px / Padding 7px 11px / Typography 14px Roobert
**States observed:** Default

### Tier 3: Surface-specific

#### Footer Container
**Role:** Global site navigation footer
**Pages observed:** Homepage, About
**Spec:** Background `#000000` / Text `#ffffff` / Border none / Radius 0px / Typography 16px Roobert
**States observed:** Default

#### Hero Stat Block
**Role:** Data visualization in hero sections
**Pages observed:** Homepage
**Spec:** Typography 80px FK Display / Color `#e75426` / Alignment Center
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 80px - 120px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero heading font-size drops to 64px; 1-column grid for feature cards. |
| Desktop | 1440px | 3-column grid for industry cards; 1200px container max-width. |

## Imagery & decoration
- **Geometric Wireframes**: Uses orange and blue wireframe globes to represent "Global Payouts."
- **Linear Gradients**: Subtle text gradients observed on display headlines (`text-linear-1`).
- **Avoids**: Photography with busy backgrounds; uses isolated studio portraits for team members.

## Do's
- Use `#e75426` for the primary CTA background.
- Apply `-1.6px` letter spacing to headlines at 80px.
- Use 64px border-radius for all primary buttons to create the "pill" effect.
- Ensure all body copy uses the Roobert family at 16px.
- Use `#2c317a` for secondary text emphasis and headings.

## Don'ts
- **Wrong:** Using `#2c317a` for primary CTA backgrounds. **Right:** Use `#e75426`. **Reason:** Vermilion is the designated action color; indigo is for structure.
- **Wrong:** Applying shadows to standard content cards. **Right:** Keep cards flat with 1px `#9ba2ff` borders.
- **Wrong:** Using FK Display for body prose. **Right:** Use Roobert. **Reason:** FK Display is optimized for display-scale architectural impact only.
- Do not use border radii between 16px and 64px; stick to the defined scale.
- Do not use pure black `#000000` for body text; use the indigo-tinted `#1f2149`.

## Similar brands
- Stripe (Grid structure, typography clarity)
- Airwallex (Fintech color palette, high-contrast accents)
- Wise (Global network imagery, clean sans-serif type)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary-indigo: #2c317a;
  --color-accent-vermilion: #e75426;
  --color-surface-white: #ffffff;
  --color-surface-soft: #e8ecf2;
  --font-display: "FK Display", sans-serif;
  --font-body: "Roobert", sans-serif;
  --radius-pill: 64px;
  --shadow-glow: 0px 0px 40px 0px rgba(155, 162, 255, 0.7);
}
```

## Agent prompt examples
- "Create a primary button using `#e75426` background, `#1f2149` text, and a 64px border radius with a soft indigo glow shadow."
- "Design a feature card with a 1px `#9ba2ff` border, 16px corner radius, and 40px of internal padding."
- "Generate a hero headline using FK Display at 80px with -1.6px letter spacing in `#2c317a`."

## Known gaps
- Hover and Active states for buttons were not captured in the source evidence.
- Mobile-specific navigation menu transitions were not sampled.
- Form validation error messaging UI was not present in the analyzed pages.

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