Skip to content
DesignMunkDesignMunk Submit a site

Wave

waveapps.com
# Clear books. Confident decisions.
Finance Software Webflow Homepage Dinero Sans Stix Two
Share Visit site
waveapps.com DESKTOP · 1440
Wave

AI Breakdown

Design export

---
version: alpha
name: Wave
description: "# Clear books. Confident decisions."
colors:
  primary: "#001b66"
  secondary: "#147cfc"
  tertiary: "#0040ff"
  neutral: "#f9f4f1"
  brand-medium-electric-blue: "#0b4d9c"
  brand-ti-n-l-n-sky: "#5cb5fc"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Stix Two Text Variable
    fontSize: 41px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: -0.024em
  headline-md:
    fontFamily: Stix Two Text Variable
    fontSize: 34px
    fontWeight: 400
    lineHeight: 1.21
  headline-sm:
    fontFamily: Dinero Sans
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Dinero Sans
    fontSize: 23px
    fontWeight: 400
    lineHeight: 1.17
  body-md:
    fontFamily: Dinero Sans
    fontSize: 18.7px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 15px
  md: 29.9px
spacing:
  xs: 4px
  sm: 14px
  md: 22px
  lg: 38px
  xl: 60px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
    padding: 9.35614px 29.9396px
    height: 105px
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.md}"
    padding: 9.35614px 29.9396px
    height: 105px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.sm}"
    padding: 14.9698px
---

# Wave: Editorial Serif Headlines and Electric-Blue Pill CTAs

## Overview

Wave targets freelancers and small business owners who want clarity without complexity. The interface should feel trustworthy, approachable, and low-stress: cool navies for text, warm off-white surfaces, rounded shapes, and friendly spacing. Editorial headlines establish authority while UI copy stays concise. When tokens don't cover a case, bias toward clarity, comfortable contrast, and generous whitespace over decorative effects.

## Colors

- **primary (#001b66):** Primary text and navigation ink; use for headlines, body copy, and strong icons.
- **secondary (#147cfc):** Link blue and lightweight accents; use for inline links, subtle badges, and tertiary actions.
- **tertiary (#0040ff):** Primary action and emphasis; use for main CTAs and important interactive states.
- **neutral (#f9f4f1):** Warm off-white surface for sections and cards; reduces glare while keeping contrast with navy text.
- **brand-medium-electric-blue (#0b4d9c):** Supporting brand blue for borders, section dividers, or hovered text accents.
- **brand-ti-n-l-n-sky (#5cb5fc):** Light sky tint for highlights, chips, and soft info tags.
- **surface (#f9f4f1):** Base page background on light mode; pair with primary text for WCAG-friendly contrast.
- **on-surface (#001b66):** Default on-surface text color; apply to headings and paragraphs over surface backgrounds.

## Typography

- Headline (lg/md): Stix Two Text Variable, 41px and 34px at weight 400 for hero and section intros; editorial, high-contrast serif that reads confidently at large sizes. Availability: self-hosted/custom; not a Google font. Substitutes: STIX Two Text (Google), Source Serif 4 (Google), Spectral (Google).
- Headline (sm/xs) and Body: Dinero Sans at 28px/23px for subheads and 18.7px for body copy, line-height ~1.5 for readability. Availability: self-hosted/custom. Substitutes: Inter (Google), Manrope (Google), Nunito Sans (Google).
- Use the serif only for prominent headings; keep all UI labels, buttons, and microcopy in the sans for consistency and legibility.

## Layout

Spacing scale favors roomy blocks: xs 4px, sm 14px, md 22px, lg 38px, xl 60px. Build vertical rhythm on 22px and 38px multiples; reserve 60px for section padding and hero gutters. A 12-column grid with generous gutters fits the demo layout: wide text column paired with a media column for hero and feature rows. Keep max line length comfortable (~60–75 characters) using the lg/xl paddings on surface sections.

## Elevation & Depth

Depth is minimal. Only the sm shadow (rgba(0,0,0,0.2) 0 4px 16px) is used sparingly on floating elements like screenshots or popover cards. Most hierarchy comes from tonal contrast (navy on off-white), size contrast between serif headings and sans body, and whitespace. Prefer borders in brand-medium-electric-blue or subtle separators over heavy shadows.

## Shapes

Two radii define language: sm 15px for cards and panels; md 29.9px for pill buttons and chips. Use full-pill only on interactive elements. Keep imagery masks and screenshots on sm corners to match cards.

## Components

- Button — Primary: Background #0040ff, text #ffffff, 29.9px radius, padding 9.35614px 29.9396px. Use for the main CTA ("Get started now").
- Button — Secondary: Text #0040ff on transparent or surface background, 29.9px radius, same padding for parity.
- Button — Link: Text #001b66, radius 0; inline, no container.
- Card: Background #f9f4f1, text #0040ff, 15px radius, padding 14.9698px; add sm shadow only when the card needs lift.

Distinctive components on this page:
### Feature Promo Ribbon
- Full-width banner announcing a new feature. Background can use brand-ti-n-l-n-sky (#5cb5fc) with text in primary (#001b66); small badge chips use 29.9px radius and secondary (#147cfc) accents.
### Hero with Product Screenshot
- Left-aligned headline set in Stix Two Text Variable 41px/1.2. Supporting body in Dinero Sans 18.7px/1.5. Primary CTA in #0040ff. Right column holds a screenshot card with sm shadow and 15px radius.
### Four-Up Feature Grid
- Each tile is a card (15px radius) on a tinted surface, title in Dinero Sans 23–28px, body in 18.7px. Tile actions use secondary (#147cfc) links.
### Advisors Callout
- Two-column section with subhead in Dinero Sans 28px and a "Learn more" secondary button. Use md (22px) internal spacing and 38px section padding.
### Testimonials Section
- Quote set as paragraph in #001b66 on surface #f9f4f1; attribution in Dinero Sans. Use sm shadow on testimonial cards only if isolated from background.
### Persona Tiles ("Built for small business owners like you")
- Repeating card module: image top, role label in Dinero Sans 23px, caption body 18.7px, card corners 15px.
### Compare Grid
- List of competitor links styled as large link buttons using secondary (#147cfc) text and 29.9px radius where buttons are used.
### FAQ Accordion
- Question rows in Dinero Sans 23–28px with primary text color (#001b66). Content body 18.7px. Dividers or borders can use brand-medium-electric-blue (#0b4d9c).

## Do's and Don'ts

- Do reserve #0040ff for the primary CTA and high-emphasis interactive states.
- Do set all paragraph text and most headings in #001b66 over #f9f4f1 for reliable contrast.
- Do keep corners consistent: 15px for cards/panels, 29.9px for buttons and chips.
- Don't introduce heavy or layered shadows; use the single sm shadow sparingly.
- Don't mix secondary (#147cfc) and tertiary (#0040ff) within the same control; choose one intent per element.
- Don't set UI labels in the serif; keep Dinero Sans (or substitutes) for controls and small text.

## Agent Prompt Guide

Quick reference — Text: #001b66; Background: #f9f4f1; Border: #0b4d9c; Accent/CTA: #0040ff; Link: #147cfc.

1) Build a hero like Wave
- Background #f9f4f1, two columns.
- H1 in "Stix Two Text Variable" 41px/1.2, color #001b66 (fallback: STIX Two Text).
- Body in "Dinero Sans" 18.7px/1.5, color #001b66 (fallback: Inter).
- Primary button: background #0040ff, text #ffffff, radius 29.9px, padding 9.35614px 29.9396px.
- Right column screenshot card: background #f9f4f1, radius 15px, shadow rgba(0,0,0,0.2) 0 4px 16px, internal padding 22px.

2) Create a four-up feature grid
- Section background #f9f4f1; grid 4 columns with 22px gaps.
- Card: background #f9f4f1, radius 15px, padding 14.9698px.
- Title in Dinero Sans 23px, body 18.7px; link in #147cfc.
- Use icons or badges with brand-ti-n-l-n-sky #5cb5fc as a tint.

3) Advisors callout band
- Two columns on surface #f9f4f1 with 38px vertical padding.
- Heading in Dinero Sans 28px; paragraph 18.7px.
- Secondary button: text #0040ff, border 1px #0b4d9c, radius 29.9px, same padding as primary.

4) Testimonial card
- Card background #f9f4f1, radius 15px, padding 22px, optional shadow rgba(0,0,0,0.2) 0 4px 16px.
- Quote text color #001b66 in Dinero Sans 18.7px; attribution smaller in the same family; accent words may use #147cfc.

5) FAQ accordion row
- Row background #f9f4f1 with 1px bottom border #0b4d9c.
- Question in Dinero Sans 23px, answer in 18.7px; chevron/icon in #147cfc; expanded state link uses #0040ff.

## Similar Brands

- QuickBooks: Similar blue palette and friendly product screenshots; Wave leans more editorial in headings and uses warmer off-white surfaces.
- Xero: Minimal, airy finance UI; Xero skews cooler and flatter, while Wave uses a serif headline and softer cards.
- FreshBooks: Rounded shapes and approachable tone; FreshBooks employs more gradients and illustration, Wave keeps tones flatter.
- Square Invoices: Clean commerce UI with strong blues; Square is more geometric and monochrome, Wave is warmer with a serif-led voice.

More like this

Browse Finance →
strata.ws
Strata Productivity
Strata
The all-in-one real-time platform for your knowledge archive
Homepage · 1 hour ago
prismic.io
Prismic Blog Developer Tools
Prismic Blog
Move faster from brief to live pages
Blog · 2 hours ago
glideapps.com
Glide Blog Developer Tools
Glide Blog
A bold masthead titled The Column and an above-the-fold email capture lead into a clean two-column layout: a large, image-led feature on…
Blog · 14 hours ago
modulify.ai
Modulify AI
Modulify
Turn a prompt into a real website or web app—edit, refine, publish.
Homepage · 19 hours ago