Skip to content
DesignMunkDesignMunk Submit a site

Aria

helloaria.eu
Aria makes late payment irrelevant in B2B
Finance Fintech Next.js Tailwind WordPress Homepage F37Lineca STKBureau
Share Visit site
helloaria.eu DESKTOP · 1440
Aria

AI Breakdown

Design export

---
version: alpha
name: Aria
description: Aria makes late payment irrelevant in B2B
colors:
  primary: "#ffffff"
  secondary: "#15846c"
  tertiary: "#2dffcc"
  neutral: "#072929"
  border: "#374151"
  brand-armor-wash: "#040404"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: F37Lineca
    fontSize: 106px
    fontWeight: 450
    lineHeight: 1.2
    letterSpacing: -0.02em
  headline-md:
    fontFamily: F37Lineca
    fontSize: 71px
    fontWeight: 450
    lineHeight: 1.2
    letterSpacing: -0.013em
  headline-sm:
    fontFamily: F37Lineca
    fontSize: 48px
    fontWeight: 450
    lineHeight: 1.21
    letterSpacing: -0.015em
  headline-xs:
    fontFamily: F37Lineca
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.21
  body-md:
    fontFamily: STKBureau
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.4
rounded:
  sm: 4px
  md: 8px
spacing:
  xs: 12px
  sm: 20px
  md: 40px
  lg: 96px
  xl: 128px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px
---

# Aria: Neon Mint Accents on a Deep Teal Canvas

## Overview

Aria's UI is dark, technical, and confident—built for product, platform, and developer audiences. The palette is restrained: white type on deep teal with one mint accent for emphasis. Typography does most of the work: oversized headlines paired with readable 22px body copy. Spacing trends spacious at section level and compact within cards, producing clear scan paths without visual noise.

## Colors

- **primary (#ffffff):** Primary text and button fills on dark surfaces.
- **secondary (#15846c):** Supporting brand teal for subtle accents and charts.
- **tertiary (#2dffcc):** High-energy mint for key highlights, icons, and occasional CTAs.
- **neutral (#072929):** Base canvas for dark mode sections and cards.
- **border (#374151):** Low-key dividers, input borders, and card outlines in dark mode.
- **brand-armor-wash (#040404):** Deepest backdrop for full-bleed bands and footer.
- **surface ({colors.neutral}):** Default surface color (alias of neutral) for containers.
- **on-surface ({colors.primary}):** Default text color on dark surfaces (alias of primary).

## Typography

- Display: F37 Lineca (custom/self-hosted). Used for headlines at four steps—106px (lg, 450, -0.02em), 71px (md, 450, -0.013em), 48px (sm, 450, -0.015em), 33px (xs, 400). Purpose: assertive, geometric voice for product claims and section intros. Not freely hosted on Google Fonts. Substitutes: Outfit, Plus Jakarta Sans, or Space Grotesk (all Google fonts with similar modern geometry).
- Body: STK Bureau (custom/self-hosted). Used for paragraphs at 22px/1.4 and UI copy. Not available via Google Fonts. Substitutes: Roboto (available and already listed), Inter, or Source Sans 3 for neutral, readable body text.
- System fallback: Roboto is available via Google Fonts in multiple weights and can stand in across both headings and body when custom families are unavailable.
Use strong contrast (white on #072929) and keep headline tracking as specified to avoid crowding at large sizes.

## Layout

The spacing scale sets the rhythm: xs 12px for tight element gaps, sm 20px for control groups, md 40px for card gutters and column gaps, and lg 96px / xl 128px for section paddings. Pages read as stacked bands with generous vertical spacing and compact, content-first interiors. Cards use 16px internal padding with 40px inter-card gaps to keep density consistent. Align copy blocks and CTAs to a consistent content column; reserve xl spacing to separate major narrative sections.

## Elevation & Depth

Shadows are intentionally absent. Depth is conveyed through tonal layers (neutral #072929 vs. brand-armor-wash #040404), restrained borders in #374151, and whitespace. Emphasis comes from scale and contrast rather than blur—use larger type, a border, or a mint accent instead of elevation.

## Shapes

Two radii define the language: 4px (sm) for buttons and small controls, 8px (md) for cards and larger containers. Keep shapes squared and functional; rounded corners signal interactivity, not decoration.

## Components

Buttons
- Primary: 40px height, 8px x 16px padding inside, 4px radius. Fill #ffffff with #072929 text for maximum contrast on dark backgrounds.
- Secondary: 40px height, 8px x 16px padding, 4px radius. Text #ffffff on transparent or dark surfaces; pair with #374151 border when needed.
- Link: Text-only, 0px radius; reserve for inline and lightweight actions.

Card
- Background #072929, text #ffffff, 8px radius, 16px padding. Add a 1px #374151 border for separation when placed on the same neutral surface.

### Hero Billboard
- Center-stacked headline using headline-lg (106px/1.2, 450). Body uses body-md (22px/1.4). Primary CTA uses the primary button spec. Section padding: xl top/bottom.

### Logo Strip
- Monochrome client logos on the neutral surface with md horizontal gaps and a subtle #374151 divider above.

### Three-up Value Props
- "Pay Early / Pay Later / Embedded Financing" in a 3-column layout with headline-xs for titles, body-md for copy, md column gaps, and card borders to separate.

### Industry Solution Panels
- Repeating sections for Cards, Corporates, Marketplaces, SaaS. Use headline-sm for the claim, body-md for details, and a single link action. Section spacing: lg.

### Capability Stack
- Repeated pattern: small overline label, headline-sm or -xs title, paragraph, and a "Learn more" link. Use md vertical gaps between items and a border divider for long stacks.

### CTA Band
- "Start paying faster" section with headline-sm, one primary button. Apply lg padding and center alignment.

### Testimonial Highlight
- Quote set in body-md with author/meta below. Enclose in a card with 8px radius and a #374151 border when placed on the neutral surface.

### FAQ Accordion
- Question rows use headline-xs for triggers, body-md for answers. 1px #374151 dividers between items; md vertical spacing within each item.

### Footer Navigation Grid
- Multi-column link lists using body-md. Use brand-armor-wash background, lg section padding, and 1px #374151 separators where columns stack.

## Do's and Don'ts

- Do reserve #2DFFCC for highlights, small UI cues, and the occasional CTA; most actions should remain white on dark for consistency.
- Do keep headline tracking exactly as specified (e.g., -0.02em at 106px) to avoid crowding at large sizes.
- Do use #374151 borders and md (40px) gaps to separate modules; avoid adding drop shadows.
- Don't introduce light backgrounds that reduce contrast against #ffffff text unless you also adjust text color.
- Don't mix additional fonts; if customs are unavailable, switch the entire page to Roboto or Inter for consistency.
- Don't round components beyond the 4px/8px system unless a distinct pill pattern is defined globally.

## Agent Prompt Guide

Quick color reference
- Text: #ffffff
- Background: #072929
- Border: #374151
- Accent: #2dffcc (secondary brand accent), #15846c (supporting teal)

1) Build the hero
- Background #072929. Center a headline set in F37 Lineca (fallback Roboto), 106px, weight 450, line-height 1.2, letter-spacing -0.02em, color #ffffff. Add a supporting paragraph in STK Bureau (fallback Roboto), 22px, line-height 1.4, color #ffffff. Place a primary button 40px high with 8px 16px padding, 4px radius, background #ffffff, text #072929.

2) Three-up value props
- Create three cards in a row with 8px radius, 16px padding, background #072929, 1px border #374151. Card titles in F37 Lineca 33px/1.21, weight 400, #ffffff; copy in STK Bureau 22px/1.4. Use md (40px) gaps between cards.

3) Capability section block
- For each item: small label in STK Bureau 22px/1.4, muted #ffffff; title in F37 Lineca 48px/1.21, weight 450; body in STK Bureau 22px/1.4. Separate items with a 1px #374151 divider and md (40px) vertical spacing.

4) CTA band
- Full-width section with lg (96px) padding on #072929. Title in F37 Lineca 48px/1.21, body in STK Bureau 22px/1.4. Add a single primary button (40px height, 4px radius, #ffffff fill, #072929 text).

5) Footer grid
- Switch background to #040404. Build multi-column lists using STK Bureau 22px/1.4, links in #ffffff. Apply lg (96px) vertical padding and 1px #374151 borders for separators on stacked layouts.

## Similar Brands

- Adyen — Shares a disciplined green-on-dark palette; Aria runs darker with a neon mint accent and larger headline scale.
- Checkout.com — Similar developer-friendly tone and dark UI; Aria uses more expressive oversized display type.
- Stripe — Engineering-forward clarity with gradient illustrations; Aria is greener and more restrained, with fewer color stops.
- Modern Treasury — Operational finance story with crisp typography; Aria opts for dark mode whereas Modern Treasury is mostly light.
- Wise Business — Green brand with strong contrast; Aria's palette is darker and more minimal in everyday UI.

More like this

Browse Finance →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 13 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 · 4 days ago
quinngtl.com
Quinn Global Tax Law Finance
Quinn Global Tax Law
Protect what’s yours with integrated global tax and legal strategy
Homepage · 1 week ago