# Gain.pro Design System

> High-contrast financial intelligence delivered through electric violet accents on a stark monochrome foundation.

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

## TL;DR
Gain.pro utilizes a high-voltage "Electric Violet" (`#632bfc`) as its primary brand signal against a clinical white (`#ffffff`) and deep obsidian (`#141017`) canvas. The typography is anchored by **Nohemi Medium**, a geometric sans-serif used for massive display headers (up to 80px) and section titles, paired with **Geist** for functional body copy and UI labels. The system relies on extreme scale contrasts and tight border radii (2px to 4px) for a precise, data-driven aesthetic. Interactive elements are strictly defined by the violet accent, while deep dark-mode sections provide rhythmic breaks in the long-form marketing pages.

## Signature DNA
1. **Geometric Scale** (Massive 80px Nohemi Medium headers paired with tight 14px Geist body text creates a "Super App" authority, observed on the homepage hero and section headers.)
2. **Violet Connectivity** (The use of `#632bfc` for primary CTAs, text highlights, and connecting UI lines creates a "thread" of intelligence across the data-heavy layout.)
3. **Obsidian Footers** (The transition from white canvas to `#141017` deep-dark surfaces for footers and CTA bands provides a professional, "terminal" feel to the financial platform.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 98 | 1.0 | Computed Style |
| `{color.ink.primary}` | `#000000` | Primary text and dark borders | 126 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#141017` | Dark-mode section backgrounds and footer ink | 21 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#6b6c6d` | Secondary body text and metadata | 88 | 0.8 | Computed Style |
| `{color.ink.subtle}` | `#393a3b` | Tertiary text and deemphasized labels | 15 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.violet}` | `#632bfc` | Primary brand accent, CTAs, and active states | 52 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#0000ee` | Legacy link blue and specific text highlights | 158 | 0.8 | Computed Style |
| `{color.accent.dark}` | `#0f0726` | Decorative text and deep violet shadows | 9 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Nohemi Medium | 500 | Display and Headings | Inter Medium | Proprietary |
| Geist | 400, 500 | UI Labels and Subheadings | Inter | Open Source |
| Geist Regular | 400 | Body Copy | Inter | Open Source |
| Inter | 400, 600 | Secondary Headings | Inter | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 80px | 80px | 0.5px | 500 | Homepage Hero | `h1.framer-text` |
| `{type.display.lg}` | 62px | 74.4px | -0.62px | 500 | Large Section Leads | `p.framer-text` |
| `{type.display.md}` | 48px | 57.6px | 0.4px | 500 | Page Headers | `h1.framer-styles-preset-cgaxk7` |
| `{type.heading.lg}` | 40px | 48px | 0.4px | 500 | Section Headers | `h2.framer-styles-preset-13adeb1` |
| `{type.heading.md}` | 32px | 38.4px | 0.4px | 500 | Sub-section Headers | `h3.framer-styles-preset-s928az` |
| `{type.heading.sm}` | 24px | 28.8px | 0.4px | 500 | Feature Titles | `h4.framer-styles-preset-1ie4any` |
| `{type.body.lg}` | 18px | 18.24px | normal | 500 | Lead Paragraphs | `p.framer-text` |
| `{type.body.md}` | 16px | 16px | normal | 400 | Default Body | `p.framer-text` |
| `{type.body.sm}` | 14px | 14px | -0.28px | 400 | UI Labels / Small Copy | `p.framer-styles-preset-j0p7jm` |
| `{type.caption}` | 10px | 12px | -0.2px | 500 | Overlines / Badges | `h6.framer-styles-preset-ttmzos` |

### Principles
1. **Nohemi for Impact**: All primary display text must use Nohemi Medium at 500 weight; never use Geist for display.
2. **Tight Tracking on Small Copy**: As Geist sizes decrease (14px and below), letter spacing tightens to -0.28px to maintain density.
3. **Vertical Rhythm**: Line heights for display sizes are strictly 1.2x the font size (e.g., 40/48, 32/38.4).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 23 |
| `{space.sm}` | 12px | 20 |
| `{space.md}` | 16px | 10 |
| `{space.lg}` | 24px | 5 |
| `{space.xl}` | 48px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers | 304 occurrences |
| `{radius.sm}` | 2px | Cards and primary buttons | 108 occurrences |
| `{radius.md}` | 4px | Form inputs and secondary cards | 10 occurrences |
| `{radius.lg}` | 12px | Hover states and specific UI panels | 14 occurrences |
| `{radius.full}` | 100px | Pill badges and tags | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default card state | Observed across all pages |
| `{shadow.floating}` | `rgba(0, 0, 0, 0.28) 0px 16px 24px -12px` | Hovered cards / Modals | 5 occurrences |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.08) 0px 0px 15px 2px` | Subtle UI separation | 3 occurrences |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Start free trial")
**Pages observed:** All
**Spec:** Background `{color.accent.violet}` (#632bfc) / Text `{color.canvas}` (#ffffff) / Radius `{radius.sm}` (2px) / Typography `{type.body.sm}` (14px / 500)
**States observed:** Default | Hover: Captured (darker violet)

#### Navigation Bar
**Role:** Global site header
**Pages observed:** All
**Spec:** Background `{color.canvas}` (#ffffff) / Text `{color.ink.primary}` (#000000) / Padding 0px 40px / Height 64px
**States observed:** Default | Fixed on scroll

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying platform capabilities
**Pages observed:** Homepage, About
**Spec:** Background `{color.canvas}` (#ffffff) / Radius `{radius.sm}` (2px) / Padding 14px / Border none
**States observed:** Default | Hover: `{shadow.floating}`

#### Pill Badge
**Role:** Category labeling (e.g., "Private Equity")
**Pages observed:** All
**Spec:** Background `{color.accent.violet}` (#632bfc) / Text `{color.canvas}` (#ffffff) / Radius `{radius.full}` (100px) / Padding 4px 8px
**States observed:** Default

### Tier 3: Surface-specific
#### Dark CTA Band
**Role:** Bottom-of-page conversion
**Pages observed:** Homepage, Pricing
**Spec:** Background `{color.ink.deep}` (#141017) / Text `{color.canvas}` (#ffffff) / Padding 48px 48px 24px
**States observed:** Default

#### Pricing Card (Primary)
**Role:** Featured pricing tier
**Pages observed:** Pricing
**Spec:** Background `{color.accent.violet}` (#632bfc) / Text `{color.canvas}` (#ffffff) / Radius `{radius.sm}` (2px) / Padding 18px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding (Vertical) | 80px - 120px |
| Column Grid | 12-column desktop |
| Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales down to 32px-40px. |
| Desktop | 1440px | Full horizontal navigation; 1200px container centering. |

## Do's
- Use **Nohemi Medium** for all text above 24px.
- Apply `#632bfc` (Electric Violet) for all primary interactive elements.
- Maintain a strict **2px border radius** for data cards and primary buttons.
- Use `#141017` for large-scale dark section backgrounds to create visual rhythm.
- Ensure all body copy uses **Geist** at 14px or 16px for legibility.

## Don'ts
- **Wrong:** Using `#0000ee` for primary brand buttons. **Right:** Use `#632bfc`. **Reason:** `#0000ee` is a legacy/secondary accent, not the primary brand driver.
- **Wrong:** Applying rounded corners (e.g., 12px) to primary data cards. **Right:** Use 2px. **Reason:** The brand identity is sharp and geometric.
- **Wrong:** Using Nohemi for long-form body text. **Right:** Use Geist. **Reason:** Nohemi is optimized for display, not readability at small scales.

## Similar brands
- PitchBook
- CB Insights
- Ramp
- Mercury

## Quick start
```css
/* CSS Custom Properties */
:root {
  --gain-violet: #632bfc;
  --gain-obsidian: #141017;
  --gain-white: #ffffff;
  --gain-ink: #000000;
  --gain-radius-sm: 2px;
  --gain-font-display: "Nohemi Medium", sans-serif;
  --gain-font-body: "Geist", sans-serif;
}
```

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://gain.pro | 1440x900 | 2026-06-06 |
| Pricing | https://gain.pro/pricing | 1440x900 | 2026-06-06 |
| About | https://gain.pro/about | 1440x900 | 2026-06-06 |