Skip to content
DesignMunkDesignMunk Submit a site

Argyle

argyle.com
Verify income, employment, and assets more efficiently with direct-source real-time data.
Fintech Technology Webflow Homepage Martina Plantijn Plain
Share Visit site
argyle.com DESKTOP · 1440
Argyle

AI Breakdown

Design export

---
version: alpha
name: Argyle
description: Verify income, employment, and assets more efficiently with direct-source real-time data.
colors:
  primary: "#000000"
  tertiary: "#214e48"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Martina Plantijn
    fontSize: 62.4px
    fontWeight: 500
    lineHeight: 1.15
    letterSpacing: -0.011em
  headline-md:
    fontFamily: Martina Plantijn
    fontSize: 39.7px
    fontWeight: 500
    lineHeight: 1.2
  headline-sm:
    fontFamily: Martina Plantijn
    fontSize: 21.3px
    fontWeight: 500
    lineHeight: 1.32
  headline-xs:
    fontFamily: Plain
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Plain
    fontSize: 14.2px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 36px
  lg: 68px
  xl: 184px
components:
  button-primary:
    backgroundColor: "#1d1d1d"
    textColor: "{colors.neutral}"
    rounded: "{rounded.full}"
    padding: 11.34px 22.68px
    height: 42px
  button-secondary:
    textColor: "#1d1d1d"
    rounded: "{rounded.full}"
    padding: 11.34px 22.68px
    height: 42px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Argyle: Editorial Serif Headlines, Pill CTAs, Quiet Greens

## Overview

Argyle's UI is calm, editorial, and evidence-led. It targets enterprise buyers and lenders, so the tone is serious, minimal, and spacious. Monochrome surfaces carry most of the work, with a single deep green accent used for data graphics and UI highlights. Generous vertical spacing keeps sections distinct and readable on dense, information-heavy pages.

## Colors

- Primary (#000000): Core ink for headlines, body text, and icons.
- Tertiary (#214e48): Reserved accent for charts, links, and key UI highlights.
- Neutral (#ffffff): Page canvas, cards, and neutral surfaces.
- Border (#e5e7eb): Subtle rules, dividers, and card outlines.
- Surface ({colors.neutral}): Default background for cards and sections.
- On-surface ({colors.primary}): Text and icon color when placed on neutral surfaces.

## Typography

Headlines use Martina Plantijn at 500 weight for a classic, editorial voice: 62.4px (headline-lg) for hero, 39.7px (headline-md) for section intros, 21.3px (headline-sm) for subheads. Martina Plantijn is custom/self-hosted; use obtainable substitutes with similar character if the font isn't available: Source Serif 4, Libre Baskerville, or EB Garamond.
Body and interface copy use Plain at 14.2px (body-md) with a 1.5 line height; headline-xs (18px) serves compact labels and small section intros. Plain is custom/self-hosted; suitable substitutes include Inter, IBM Plex Sans, or Work Sans. Pair serif display with the sans body consistently; avoid mixing substitutes within a single page.

## Layout

Spacing is built from a concise scale: xs 6px, sm 16px, md 36px, lg 68px, xl 184px. Use xl for hero top/bottom paddings and major section breaks, lg for section interiors, md for card and grid gutters, sm for component padding, and xs for icon/text nudges. Content favors a centered column with generous white margins; features and industry sections read as 2–3 column grids on desktop and a single column stack on mobile. Keep nav and footer dense but orderly—short labels and predictable groupings.

## Elevation & Depth

Depth is minimal. One soft shadow is available (sm: rgba(0,0,0,0.12) 0 4px 20px) for floating elements and occasional media. Most hierarchy is handled with whitespace, strong type contrast, and subtle borders (#e5e7eb). Avoid heavy shadows; md/lg/xl are explicitly none.

## Shapes

Corners communicate function through two radii: 8px for cards and containers, 9999px for pills. Buttons, badges, and input chips should use the full pill radius; structural elements like cards remain at 8px. Do not mix square and rounded variants within the same component family.

## Components

Buttons
- Primary: Background #1d1d1d, text #ffffff, pill radius 9999px, height 42px, padding 11.34px 22.68px. Default CTA across the site.
- Secondary: Text #1d1d1d on neutral surface, pill radius 9999px, same height and padding. Employ a light border (#e5e7eb) when contrast is needed.
- Link: Text #000000, no radius. For inline actions within copy.

Card
- Background #ffffff, text #000000, radius 8px, padding 16px, optional border #e5e7eb or sm shadow for lift.

### Global header
Sticky, white surface with left-aligned logotype and compact menus. Text in #000000; sign-in as link, "Contact sales" uses the primary pill (42px). Spacing sm–md; dividers use #e5e7eb as needed.

### Hero with dual CTAs
Headline at 62.4px (Martina Plantijn 500), supporting line in body-md. Primary and secondary pills sit on one row; vertical padding xl (184px) and centered layout.

### Trust line
A single sentence asserting customer trust set in body-md with subtle spacing md above the platform section. Optional logo row can live in a card with border #e5e7eb.

### Three-step verification flow
A horizontal or vertical three-stage stepper: numbered markers, short headings in headline-sm (21.3px), and body-md descriptions. Use card containers (8px radius), light borders, and tertiary #214e48 for connectors or icons.

### Benefits grid
Four tiles in a 2×2 grid: headline-sm titles, body-md copy. Use md gutters and keep icons minimal; reserve #214e48 for emphasis only.

### Industry card grid
Six cards link to industry pages. Each card uses 8px radius, 16px padding, and a headline-sm title. Add hover: sm shadow and a subtle translate if motion is allowed.

### Implementation links row
Four compact link tiles (POS, LOS, API, Console). Layout as a responsive row with md gaps; text in headline-xs (18px) or body-md with clear chevrons.

### Testimonial cards
Quote text in headline-sm for emphasis, attribution in body-md. Use a card with 8px radius and optional sm shadow; link to case study as a link-style CTA.

### Stats band
Three large KPIs with short labels. Numbers in headline-md (39.7px), labels in body-md. Keep the band on a white surface with md–lg vertical padding and thin dividers (#e5e7eb).

## Do's and Don'ts

- Do reserve headline-lg (62.4px) for the main hero only; use headline-md for section intros to preserve hierarchy.
- Do keep CTAs at 42px height with full pill radius; pair primary (#1d1d1d) with a clear secondary on white or add a subtle border for contrast.
- Do use #214e48 sparingly for accents, charts, and active states—not as a section background.
- Do prefer borders (#e5e7eb) and whitespace over heavy shadows; only the sm shadow is available.
- Don't mix additional brand colors or gradients; the system is largely monochrome with one accent.
- Don't round cards to pill shapes or square off buttons—stick to 8px for containers and 9999px for pills.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #ffffff
- Border: #e5e7eb
- Accent: #214e48

1) Build the hero
- Background #ffffff. H1 using "Martina Plantijn" 500 at 62.4px (or substitute Source Serif 4 600). Subhead in "Plain" 14.2px (or Inter 14px) at 1.5 line height. Primary button: #1d1d1d text #ffffff, 42px height, 11.34px 22.68px padding, radius 9999px. Secondary button: text #1d1d1d on white with a 1px #e5e7eb border, same size. Apply vertical padding 184px.

2) Create a 2×2 benefits grid
- Four cards on #ffffff, each card radius 8px, padding 16px, border #e5e7eb. Titles in 21.3px "Martina Plantijn" 500; body in 14.2px "Plain". Grid gap 36px. Accent icons, if any, in #214e48.

3) Three-step verification flow
- Use a horizontal layout with md gaps (36px). Step numbers in 18px headline-xs, step titles in 21.3px headline-sm, copy in 14.2px body-md. Connectors or markers in #214e48. Place steps inside a light card with 8px radius and optional sm shadow (rgba(0,0,0,0.12) 0 4px 20px).

4) Stats band
- White surface with lg vertical padding (68px). Three columns: numbers set in 39.7px "Martina Plantijn", labels in 14.2px "Plain". Use #000000 for text, thin dividers #e5e7eb between columns on desktop.

5) Industry card grid
- Six linked cards using the card token: background #ffffff, text #000000, radius 8px, padding 16px. Titles in 21.3px, copy in 14.2px. Hover: add sm shadow and change link chevron to #214e48.

## Similar Brands

- Plaid: Similar monochrome base with restrained blue/green accents; Plaid is denser in data visualizations and leans more toward geometric sans throughout.
- Stripe: Editorial headings over a white canvas and disciplined components; Stripe uses more color variety and motion.
- Brex: Minimal black-on-white with pill CTAs; Brex pushes bolder contrast blocks and heavier brand patterns.
- Ramp: Calm financial UI with sparse accent color and strong typography; Ramp's sans-only approach feels more utilitarian than Argyle's serif display.

More like this

Browse Fintech →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 14 hours ago
checkoutpage.com
Checkout Page Ecommerce
Checkout Page
One platform for everything you sell
Homepage · 3 days ago
finera.com
Finera Finance
Finera
The Art of Payments.
Homepage · 5 days ago
cubefabs.com
Cubefabs AI
Cubefabs
Revolutionize manufacturing with AI factories for next-gen materials.
Homepage · 7 days ago