# Finyard Design System

> High-contrast financial precision anchored by deep midnight surfaces and airy, light-weight typography.

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

## TL;DR
Finyard utilizes a "Midnight and Cream" palette that eschews standard corporate blues for a more sophisticated, high-contrast aesthetic. The system is built on **Inter Tight**, specifically leveraging the **300 weight** for massive display headers (up to 180px) to create an editorial, tech-forward atmosphere. Surfaces alternate between pure white (#ffffff), a warm cream (#fcf6ec), and a deep midnight teal (#03212c). Accent colors like "Hot Sunset" orange (#fe6336) are used sparingly for primary actions, while secondary sections use a muted "Light Teal" (#d7ecee) to maintain a calm, professional rhythm.

## Signature DNA
1. **Light-Weight Mega Display** (Inter Tight at weight 300, rendered at 180px for hero background text, creates a layered, architectural depth on the homepage and about pages).
2. **Midnight Canvas Transitions** (Full-width sections using #03212c as a background color to signal a shift from corporate information to product technology).
3. **Pill-to-Sharp Geometry** (Primary CTAs use extreme pill radii (3000px), while content containers and section blocks remain strictly sharp with 0px radius).

## Family Map
Not captured in source. No sub-brands identified in topology.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| Midnight | `#03212c` | Primary text, dark section backgrounds, borders | 25 | 0.8 | Computed Style |
| Ink | `#212529` | Default body text | 28 | 1.0 | `--bs-dark` |
| Paper | `#ffffff` | Primary page background, button text | 5 | 1.0 | `--wp--preset--color--white` |
| Cream | `#fcf6ec` | Secondary section backgrounds, subtle text | 9 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| Hot Sunset | `#fe6336` | Primary CTA buttons, text links | 3 | 0.6 | Computed Style |
| Light Teal | `#d7ecee` | Decorative backgrounds, secondary headings | 4 | 0.6 | Computed Style |
| Peach | `#fac8b1` | Decorative text accents | 16 | 0.8 | Computed Style |
| Electric Blue | `#0d6efd` | Decorative only (Bootstrap default) | 2 | 1.0 | `--bs-primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter Tight | 300, 400, 500, 600 | All headings, display, body, and UI | Inter Tight (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.mega}` | 180px | 223.15px | normal | 300 | Hero background text | `span:nth-of-type(1)` |
| `{type.display.xl}` | 60px | 60px | normal | 500 | Section headers | `span` |
| `{type.display.lg}` | 48px | 57.6px | normal | 400 | Hero H1 | `h1.light-teal.mb-0` |
| `{type.h4.bold}` | 24px | 28px | normal | 600 | Feature titles | `h4.h4-bold` |
| `{type.h5}` | 24px | 36px | normal | 400 | Sub-headings | `h5.light-teal.mb-0` |
| `{type.body.lg}` | 20px | 30px | normal | 400 | Lead paragraph | `p.midnight-blue.mb-0` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default body text | `section.heroHeader` |
| `{type.link.bold}` | 16px | 24px | normal | 500 | Inline text links | `a.hot-sunset` |

### Principles
1. **Weight Contrast:** Pair 300 weight display text with 600 weight sub-headers to create clear information hierarchy.
2. **Tight Line Heights:** Display sizes (60px+) use a 1:1 or near 1:1 line height to keep large type blocks compact.
3. **Color-Coded Headers:** Use "Light Teal" (#d7ecee) for headers on dark backgrounds and "Midnight" (#03212c) for headers on light backgrounds.

## Spacing
**Base unit:** 8px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 5px | 16 |
| `{space.xs}` | 8px | 8 |
| `{space.sm}` | 16px | 6 |
| `{space.md}` | 32px | 6 |
| `{space.lg}` | 40px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default for sections, cards, and containers | 73 occurrences |
| `{radius.sm}` | 4px | Form inputs and secondary buttons | 4 occurrences |
| `{radius.pill}` | 3000px | Primary CTA buttons | 1 occurrence |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All observed surfaces | 0 shadows captured |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main site actions (Contact, Learn More)
**Pages observed:** https://finyard.com, https://finyard.com/about
**Spec:** Background: `#fe6336` / Text: `#ffffff` / Radius: `3000px` / Typography: `Inter Tight 500`
**States observed:** Default: captured | Hover: not captured

#### Secondary Button (Outline)
**Role:** Low-emphasis actions
**Pages observed:** https://finyard.com/pricing
**Spec:** Background: `transparent` / Text: `#03212c` / Border: `1px solid #03212c` / Radius: `4px`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Global Footer
**Role:** Site navigation and legal
**Pages observed:** All
**Spec:** Background: `#03212c` / Text: `#ffffff` / Typography: `Inter Tight 400` / Padding: `40px 0px`
**States observed:** Default: captured

#### Cookie Banner
**Role:** Compliance
**Pages observed:** https://finyard.com
**Spec:** Background: `#ffffff` / Text: `#212529` / Border: `1px solid #dee2e6` / Radius: `0px` / Padding: `40px 32px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Stats Pill
**Role:** Data visualization on About/Home
**Pages observed:** https://finyard.com
**Spec:** Background: `#fcf6ec` / Radius: `2000px` / Padding: `30px 0px`
**States observed:** Default: captured

#### Feature Card (Dark)
**Role:** Technology product showcase
**Pages observed:** https://finyard.com
**Spec:** Background: `#03212c` / Text: `#ffffff` / Radius: `0px` / Padding: `80px 0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1320px (Bootstrap Container) |
| Section Padding | 80px - 100px (Vertical) |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Display Mega (180px) text is hidden or significantly reduced. |
| Desktop | 1440px | Standard 12-column grid active. |

## Imagery & decoration
- **Curved Masks:** Large circular or organic curved masks for team and office photography.
- **Abstract Line Art:** Subtle, light-colored concentric line patterns used as background textures behind hero text.
- **Avoids:** Drop shadows, heavy gradients, and sharp-cornered image frames.

## Do's
- Use **Inter Tight 300** for any text larger than 48px.
- Alternate section backgrounds between `#ffffff` and `#fcf6ec` to define content blocks.
- Use `#fe6336` (Hot Sunset) exclusively for the primary conversion point on a page.
- Maintain **0px radius** for all structural containers.
- Ensure text on Midnight (#03212c) backgrounds uses White (#ffffff) or Light Teal (#d7ecee).

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap Blue) for primary buttons. **Right:** Use `#fe6336`. **Reason:** Blue is a framework default, not a brand accent.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders or background color shifts.
- **Wrong:** Using bold weights (700+) for display headers. **Right:** Use weight 300 or 400.
- **Wrong:** Mixing pill-shaped containers with pill-shaped buttons. **Right:** Only buttons and specific stat-pills use radii; sections remain sharp.

## Similar brands
- Wealthfront
- Qonto
- Linear
- Ramp

## Quick start

```css
/* CSS Variables */
:root {
  --finyard-midnight: #03212c;
  --finyard-sunset: #fe6336;
  --finyard-cream: #fcf6ec;
  --finyard-paper: #ffffff;
  --finyard-font-main: 'Inter Tight', sans-serif;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-midnight: #03212c;
  --color-sunset: #fe6336;
  --color-cream: #fcf6ec;
  --font-inter: 'Inter Tight';
  --radius-pill: 3000px;
}
```

## Agent prompt examples
- "Create a hero section with a Midnight #03212c background, featuring a heading in Inter Tight 300 at 60px in Light Teal #d7ecee."
- "Generate a primary CTA button using Hot Sunset #fe6336 with a 3000px border radius and white Inter Tight 500 text."
- "Design a content grid where sections alternate between white and Cream #fcf6ec backgrounds with 0px border radius."

## Known gaps
- Hover and Active states for buttons were not captured in the static crawl.
- Specific mobile font scaling for the 180px display type was not fully documented.
- Shadow tokens are absent as the brand appears strictly flat.

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