# Fidelapi Design System

> High-contrast technical canvas pairing electric blue accents with a stark monochrome foundation and soft-radius geometry.

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

## TL;DR
Fidelapi utilizes a "Developer-First Monochrome" aesthetic, defined by a stark white background (`#ffffff`) and deep obsidian text (`#000000`). The system's "voltage" is concentrated in a single primary brand blue (`#2653f0`), used for high-intent CTAs and critical text links. A secondary lime accent (`#cbf265`) provides high-visibility highlights for badges and secondary actions. Layouts are structured with generous vertical rhythm (up to 144px) and a consistent 16px border radius for content containers, creating a balance between technical precision and approachable modern software design.

## Signature DNA
1. **Electric Primary Action** (The use of `#2653f0` as a singular high-contrast signal against a white or deep navy `#2d2b55` background to drive conversion.)
2. **Technical Eyebrows** (Bold, tracked-out uppercase labels in Aeonik, often paired with the lime `#cbf265` accent to categorize technical content.)
3. **Soft-Box Containers** (Content is grouped in cards with a consistent `16px` radius and subtle `1px` borders in `#e0e0e0`, avoiding heavy shadows in favor of clean hairlines.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--swatch--dark` | `#000000` | Primary text, headings, and main button borders | 216 | 1 | Computed Style |
| `--swatch--light` | `#ffffff` | Page background, primary surface, button text | 30 | 1 | Computed Style |
| `--text-muted` | `#3d3d3d` | Secondary body text and descriptive labels | 54 | 0.8 | Computed Style |
| `--text-deemphasized`| `#797979` | Tertiary text, captions, and footer links | 27 | 0.8 | Computed Style |
| `--surface-soft` | `#f1f1f1` | Secondary button backgrounds and section fills | 12 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--swatch--brand-primary` | `#2653f0` | Primary CTA background, active links | 6 | 1 | CSS Variable |
| `--accent-lime` | `#cbf265` | High-visibility badges, secondary CTAs | 9 | 0.6 | Computed Style |
| `--surface-navy` | `#2d2b55` | Dark mode section backgrounds (Hero/CTA) | 3 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Aeonik | 400, 500, 700 | Display, Headings, Buttons | Lexend | Proprietary |
| Inter | 300, 400, 700 | Body, UI Labels, Captions | Inter (Google) | SIL OFL |
| Arial | 400 | Fallback body | Helvetica | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-lg` | 64px | 64px | -2.56px | 400 | Hero H1 | `h2.u-h2` |
| `display-md` | 48px | 48px | -0.96px | 400 | Section Headers | `h3.layout_split_title` |
| `heading-sm` | 20px | 26px | normal | 500 | Card Titles | `div.u-h5` |
| `body-lg` | 18px | 26.4px | normal | 400 | Hero Intro Text | `header.hero_wrap` |
| `body-md` | 16px | 28.8px | -0.28px | 500 | Default Body | `div.btn_main_text` |
| `eyebrow` | 16px | 26.4px | 2.4px | 700 | Section Labels | `div.g_eyebrow_text` |
| `label-bold` | 14px | 26.4px | 2px | 700 | Footer Headers | `div.footer_links_title` |
| `caption` | 14px | 20.8px | normal | 400 | Disclaimers | `div.footer-disclaimer` |

### Principles
1. **Tight Display Tracking**: Large display type (64px) uses aggressive negative letter-spacing (-2.56px) to create a compact, "locked" visual.
2. **Eyebrow Spacing**: Section labels use 2px to 2.4px letter-spacing at weight 700 to distinguish metadata from prose.
3. **Aeonik for Structure**: Aeonik is reserved for structural elements (headers, buttons, footer titles), while Inter handles high-density reading.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 12px | 12 |
| `space-sm` | 16px | 21 |
| `space-md` | 32px | 24 |
| `space-lg` | 56px | 12 |
| `section-v` | 144px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sm` | 8px | Buttons and small inputs | `Rounded Button` |
| `radius-md` | 16px | Standard content cards | `Card` |
| `radius-lg` | 22px | UI element wrappers | `Surface` |
| `radius-pill` | 1440px | Decorative circular elements | `Card (lime)` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | 0px | Default state for all cards and surfaces | Component Evidence |
| `outline` | 1px solid `#e0e0e0` | Card definition on white canvas | `Card` |

## Components

### Tier 1: Foundational

#### Rounded Button (Primary)
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background: `#2653f0` | Text: `#ffffff` | Radius: `8px` | Padding: `12px 24px` | Font: Aeonik 17.6px
**States observed:** Default | Hover: `#466df6` | Active: Captured

#### Rounded Button (Secondary)
**Role:** Alternative actions (e.g., Contact Sales)
**Pages observed:** All
**Spec:** Background: `#f1f1f1` | Text: `#000000` | Border: `1px solid #a8a8a8` | Radius: `8px` | Padding: `12px 24px`

### Tier 2: Patterns

#### Content Card
**Role:** Feature and product grouping
**Pages observed:** All
**Spec:** Background: `#f2f0ee` (or transparent) | Border: `1px solid #e0e0e0` | Radius: `16px` | Padding: `32px`

#### Navigation
**Role:** Global header
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#000000` | Height: Not specified | Font: Aeonik 17.6px

### Tier 3: Surface-specific

#### Dark Hero Section
**Role:** High-impact value proposition
**Pages observed:** [pricing, about]
**Spec:** Background: `#2d2b55` | Text: `#ffffff` | Padding: `144px 0px`

#### Footer
**Role:** Site-wide navigation and legal
**Pages observed:** All
**Spec:** Background: `#ffffff` | Border-top: `1px solid #b9b9bd` | Padding: `56px 0px 0px`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Section Gap | 144px |
| Mobile Side Padding | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Horizontal split layouts, 3-column grids |
| Mobile | 390px | Stacked cards, center-aligned headers, hidden nav menu |

## Imagery & decoration
Fidelapi uses technical diagrams and UI mockups featuring card-linking flows. Visuals often include credit card abstractions (Visa/Mastercard logos) and code snippets in dark blocks (`#141414`). The brand avoids generic stock photography, favoring clean, vector-based product representations.

## Do's
- Use `#2653f0` for the primary path to conversion.
- Apply `16px` border radius to all content-containing cards.
- Maintain a `144px` vertical gap between major homepage sections.
- Use Aeonik weight 700 with `2.4px` tracking for technical eyebrows.
- Ensure all cards on white backgrounds have a `1px` border in `#e0e0e0`.

## Don'ts
- **Wrong:** Using `#cbf265` (Lime) for primary text. **Right:** Use `#000000`. **Reason:** Accessibility and brand hierarchy.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use `1px` borders. **Reason:** Fidelapi is a flat, technical system.
- **Wrong:** Mislabeling sub-brand colors as parent primary. **Right:** Only `#2653f0` is the parent primary.
- Do not use serif fonts; the system is strictly sans-serif (Aeonik/Inter).
- Do not use the primary blue for large background surfaces; keep it for actions.

## Similar brands
- Stripe (Technical precision, monochrome base)
- Plaid (Fintech utility, clean typography)
- Marqeta (API-first, high-contrast UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --fidel-blue: #2653f0;
  --fidel-lime: #cbf265;
  --fidel-black: #000000;
  --fidel-white: #ffffff;
  --fidel-gray: #3d3d3d;
  --radius-card: 16px;
  --font-display: 'Aeonik', sans-serif;
  --font-body: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a feature card using a `#f2f0ee` background, `16px` border radius, and an Aeonik 500 heading in `#000000`."
- "Generate a primary button with a `#2653f0` background, `8px` radius, and white Aeonik text."
- "Design a technical section eyebrow using uppercase Aeonik 700, `16px` size, and `2.4px` letter spacing in `#cbf265`."

## Known gaps
- Hover states for secondary buttons were not fully captured in the CSS variable trace.
- Mobile navigation transition speeds were not recorded.
- Specific shadow tokens were absent from the rendered evidence, suggesting a flat design preference.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://fidelapi.com | 1440px | 2026-06-06 |
| Pricing | https://fidelapi.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://fidelapi.com | 390px | 2026-06-06 |