# Arive Design System

> A professional fintech canvas defined by deep obsidian anchors, vibrant cobalt actions, and a disciplined neutral-slate typographic hierarchy.

**Source:** [https://arive.com](https://arive.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Arive utilizes a "monochrome-plus-accent" strategy where the primary interface is built on a foundation of off-white surfaces (`#f5f7fa`) and deep obsidian-blue anchors (`#1f2432`). The brand voltage is concentrated in a high-contrast cobalt blue (`#2662fa`), which serves as the primary interactive signal for links and toggle states. Typography is exclusively **Inter**, relying on a medium weight (500) for display and a strict semantic hierarchy to establish authority. Layouts are characterized by generous vertical spacing (up to 118px) and a mix of sharp-edged sections contrasted with ultra-rounded "pill" geometry for high-priority calls to action.

## Signature DNA
1. **Obsidian Anchoring** (The use of `#1f2432` for primary buttons, footers, and high-contrast text creates a stable, institutional feel across all pages.)
2. **Cobalt Interactive Signal** (The specific use of `#2662fa` for text links and active UI states like the pricing toggle provides a singular, high-confidence action color.)
3. **Pill Geometry** (A consistent 1000px radius applied to primary CTAs and pricing cards to soften the otherwise rigid, professional grid.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--neutral-800` | `#1f2432` | Primary button BG, footer BG, display text | 66 | 1 | Computed Style |
| `--neutral-200` | `#f5f7fa` | Page background, secondary surface | 9 | 1 | Computed Style |
| `--white` | `#ffffff` | Card surfaces, button text | 46 | 0.8 | Computed Style |
| `--neutral-300` | `#d3d8e4` | Deemphasized body text | 9 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--primary-1` | `#2662fa` | Primary action text, active toggles, borders | 69 | 1 | Computed Style |
| `--neutral-600` | `#6d768d` | Secondary text, button text | 183 | 1 | Computed Style |
| `--neutral-400` | `#b3bbd0` | Muted labels | 51 | 1 | Computed Style |
| `--secondary-4` | `#fa267f` | Decorative surface (decorative_only) | 4 | 1 | Computed Style |
| `--secondary-1` | `#ffd233` | Decorative surface (decorative_only) | 3 | 1 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter | 400, 500, 600, 700 | All UI, Headings, Body | Inter (Google Fonts) | SIL Open Font |
| Icons Consulting X Template | 400 | Social icons, UI glyphs | FontAwesome | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-mega` | 60px | 78px | normal | 500 | Home hero | `h1.title.home-hero` |
| `display-lg` | 42px | 54.6px | normal | 500 | Achievement numbers | `div.achievement-number.counter` |
| `heading-md` | 34px | 44.2px | normal | 500 | Pricing titles | `h1.heading-38.pricing-yearly` |
| `heading-sm` | 25px | 32.15px | normal | 500 | Card values | `h3.title.card-value` |
| `title-footer` | 20px | 24px | normal | 600 | Footer headers | `div.footer-title` |
| `body-lg` | 18px | 30px | normal | 400 | Nav links, body | `li.nav-item-wrapper` |
| `button-text` | 18px | 20px | normal | 600 | Primary CTAs | `a.button-primary.header-button` |
| `body-sm` | 15px | 30px | normal | 400 | Feature lists | `li.list-item-19` |

### Principles
1. **Medium Weight Dominance.** Display headings (H1, H2) consistently use weight 500 rather than bold (700) to maintain a clean, modern aesthetic.
2. **Generous Line Heights.** Body text at 18px uses a 30px line height (1.66x) to ensure readability on data-dense pages.
3. **Semantic Color for Type.** Primary headings use `#1f2432`, while secondary descriptions and metadata shift to `#6d768d`.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `space-xs` | 16px | 53 |
| `space-sm` | 32px | 51 |
| `space-md` | 40px | 37 |
| `space-section` | 100px | 3 |
| `space-hero-top` | 118px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-sharp` | 0px | Section containers, footers | 381 occurrences |
| `radius-sm` | 8px | Pricing plan cards | Pricing page |
| `radius-pill` | 1000px | Primary buttons, active state pills | Home, Pricing |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `flat` | none | Default section state | Global |
| `elevated` | `rgba(31, 36, 50, 0.12) 0px 5px 20px 0px` | Hovered pricing cards | Pricing page |

## Components

### Tier 1: Foundational

#### Pill Button (Primary)
**Role:** Main call to action (e.g., "Create New Account")
**Pages observed:** Home, Pricing, About
**Spec:** Background: `#1f2432` / Text: `#ffffff` / Radius: `1000px` / Padding: `20px 30px` / Typography: `Inter 18px/600`
**States observed:** Default | Hover: captured | Active: captured

#### Pill Button (Secondary)
**Role:** Inverted actions on dark backgrounds
**Pages observed:** Home, About
**Spec:** Background: `#ffffff` / Text: `#2662fa` / Border: `1px solid #2662fa` / Radius: `1000px` / Padding: `24px 40px`

### Tier 2: Patterns

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing
**Spec:** Background: `#ffffff` / Border: `2px solid #e1e6f1` / Radius: `8px` / Shadow: `rgba(31, 36, 50, 0.12) 0px 5px 20px 0px` (on hover)

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** Home, Pricing, About
**Spec:** Background: `#1f2432` / Text: `#6d768d` / Padding: `101px 0px 45px` / Typography: `Inter 16px`

### Tier 3: Surface-specific

#### Achievement Counter
**Role:** Social proof metrics
**Pages observed:** Home, About
**Spec:** Text: `#1f2432` / Typography: `Inter 42px/500` / Subtext: `#6d768d`

#### Pricing Toggle
**Role:** Switch between Yearly/Monthly billing
**Pages observed:** Pricing
**Spec:** Container Background: `#ffffff` / Active Pill Background: `#2662fa` / Active Text: `#ffffff` / Radius: `1000px`

## Layout
| Property | Value |
| :--- | :--- |
| Max Container Width | 1200px |
| Section Padding (Vertical) | 100px - 118px |
| Column Gap | 32px |

## Do's
- Use `#2662fa` for all text links and primary interactive indicators.
- Apply `1000px` radius to all primary and secondary buttons.
- Maintain a weight of 500 for all display headings in Inter.
- Use `#f5f7fa` as the default background for alternating page sections.
- Ensure primary buttons use `#1f2432` as the background for maximum contrast.

## Don'ts
- **Wrong:** Using `#2662fa` as a background for primary "Submit" buttons. **Right:** Use `#1f2432`. **Reason:** Brand identity anchors on obsidian for primary actions; cobalt is for secondary/interactive signals.
- Do not use border-radius on section containers; keep them at `0px` for a professional grid feel.
- Do not use weights above 600 for body text; reserve 700 for specific UI labels only.
- Avoid using pure black `#000000` for text; use the obsidian-blue `#1f2432` instead.

## Quick start

```css
/* CSS Variables */
:root {
  --primary-cobalt: #2662fa;
  --neutral-obsidian: #1f2432;
  --neutral-slate: #6d768d;
  --canvas-off-white: #f5f7fa;
  --font-main: 'Inter', sans-serif;
  --radius-pill: 1000px;
}
```

```json
{
  "colors": {
    "primary": "#2662fa",
    "surface": "#f5f7fa",
    "text": "#1f2432",
    "muted": "#6d768d"
  }
}
```

## Known gaps
- Hover and focus states for the "Icons Consulting X Template" font were not fully captured.
- Mobile-specific menu transition speeds were not documented in the source.
- Error and Success semantic states (Form validation) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Home | https://arive.com | 1440px | 2026-06-06 |
| Pricing | https://arive.com/pricing | 1440px | 2026-06-06 |
| About | https://arive.com/about | 1440px | 2026-06-06 |