Skip to content
DesignMunkDesignMunk Submit a site

Novo

novo.co
Banking built for independent businesses
Finance Fintech Next.js Homepage Founders Grotesk
Share Visit site
novo.co DESKTOP · 1440
Novo

AI Breakdown

Design export

---
version: alpha
name: Novo
description: Banking built for independent businesses
colors:
  primary: "#000000"
  secondary: "#3c44e3"
  neutral: "#f3f3f0"
  brand-aster-flower-blue: "#9ca8e0"
  brand-iris-ice: "#e1e2f1"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Founders Grotesk
    fontSize: 400px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Founders Grotesk
    fontSize: 282px
    fontWeight: 400
    lineHeight: 1.2
  headline-sm:
    fontFamily: Founders Grotesk
    fontSize: 198px
    fontWeight: 400
    lineHeight: 1.2
  headline-xs:
    fontFamily: Founders Grotesk
    fontSize: 140px
    fontWeight: 400
    lineHeight: 1.2
  body-md:
    fontFamily: Founders Grotesk
    fontSize: 98.4px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 4px
  md: 48px
spacing:
  xs: 8px
  sm: 20px
  md: 32px
  lg: 44px
  xl: 64px
components:
  button-primary:
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 9px 17px
    height: 34px
  button-secondary:
    textColor: "#ffffff"
    rounded: "{rounded.sm}"
    padding: 9px 17px
    height: 34px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.primary}"
    textColor: "#ffffff"
    rounded: "{rounded.md}"
    padding: 28px 44px
---

# Novo: Billboard Grotesk Headlines with Lavender Highlight Stripes

## Overview

Novo's UI is direct and typographic: oversized grotesk headlines, a warm neutral surface, and a single cool accent. The target audience is small business owners who need clarity and speed. The experience should feel confident, sparse, and trustworthy—more billboard than brochure. When in doubt, prefer large type, clean spacing, and minimal decoration.

## Colors

- **primary (#000000):** Core ink for headlines, body text, icons, and strong borders.
- **secondary (#3c44e3):** Accent blue for links, active states, and key UI elements; use sparingly to preserve hierarchy.
- **neutral (#f3f3f0):** Warm surface that softens contrast and differentiates the brand from stark white fintech palettes.
- **brand-aster-flower-blue (#9ca8e0):** Lavender highlight stripe for emphasis treatments and background bands behind key words.
- **brand-iris-ice (#e1e2f1):** Pale lavender for subtle section backdrops and hover fills when a softer tone is required.
- **surface (#f3f3f0):** Default page background; keep large uninterrupted fields to maintain the airy feel.
- **on-surface (#000000):** Text and icon color on the neutral surface for maximum readability.

## Typography

Founders Grotesk (custom, self-hosted) is the single voice across display and body. As a proprietary face, it should not be auto-loaded by agents. Close, obtainable substitutes: Inter (Google), Work Sans (Google), and Space Grotesk (Google). Roles: headline-lg 400px for hero lockups; headline-md 282px and headline-sm 198px for major section intros; headline-xs 140px for sub-sections; body-md 98.4px for large explanatory copy on hero and summary lines. Maintain line-height 1.2 for display, 1.5 for body. Use tight word counts and line breaks to create strong, scannable shapes.

## Layout

Spacing follows a compact, modular scale: 8, 20, 32, 44, 64. Use xl (64px) for section padding and vertical rhythm between major blocks; lg (44px) for intra-section group spacing; md (32px) for card padding and grids; sm (20px) and xs (8px) for element gutters and control spacing. Favor wide, single-column stacks at large breakpoints with occasional 2x2 feature grids. Keep generous negative space around billboard headlines.

## Elevation & Depth

Depth is mostly typographic and tonal. Shadows are minimal—use sm only for floating elements such as chat launchers or dropdowns; other levels are none. Hierarchy is driven by scale, weight, and the contrast between #000000 type and the #f3f3f0 surface, plus occasional lavender highlight bands. Borders are rare; rely on whitespace and section spacing to separate content.

## Shapes

Two radii set the language: sm 4px for buttons and small controls; md 48px for large cards and pill-like containers. Use the 48px radius to make feature and testimonial blocks feel friendly and substantial; keep controls crisp with 4px to preserve precision.

## Components

Buttons and cards
- Primary button: 34px height, 9px 17px padding, 4px radius, white text. Use a filled background (brand black or indigo) with strong contrast.
- Secondary button: Same metrics as primary; use when the action is supportive.
- Link button: Unrounded, text-only control in #000000 for inline actions.
- Card: Black background, white text, 48px radius, 28px x 44px padding. Use for standout promos or dark sections.

### Mega Navigation
Multi-column dropdowns under Products and Resources. Use #f3f3f0 background, #000000 text, and 20–32px gutters. Active items may use #3c44e3 for emphasis.

### Hero Billboard Headline
Three-line uppercase headline using headline-lg/md, centered. Emphasize one word with a full-width highlight band in #9ca8e0. Supporting copy uses body-md below, then a primary CTA.

### Trust Marquee
A slim line above the hero repeating "Trusted by 250,000+...". Set in #000000 on #f3f3f0 with small avatars or icons; low elevation and tight padding (8–20px).

### "How to Put Novo to Work" Grid
Four feature blocks in a 2x2 layout. Each gets a concise title and sentence, 32px internal spacing, and optional 48px-radius containers on light backgrounds.

### AI Banner
One-row announcement describing AI partners. Keep copy compact, with a small icon row and indigo highlights for key terms.

### Testimonial Cards
Stacked or carousel cards with customer name, role, and quote. Use 48px radius, generous padding (28–44px), and keep quotes short for scanability.

### Product Pillars
A four-item navigation ("Get Paid," "Send and Pay," "Spend," "Plan and Protect"). Use link treatments in #3c44e3 with concise one-line descriptions; arrange in a horizontal row on large screens, stacked on small.

### Help Links Grid
A compact list of questions and answers linking to Help. Keep each tile lightly separated with spacing; avoid heavy borders and shadows.

## Do's and Don'ts

- Do keep the page background at #f3f3f0 and set all core text in #000000 for contrast and clarity.
- Do reserve #3c44e3 for links, active states, and a small number of CTAs; let type scale do most of the work.
- Do emphasize a single keyword with a #9ca8e0 highlight band in key headlines; avoid multiple highlights per block.
- Do use 48px radii for major cards and 4px for controls to maintain the system's friendly-but-precise tone.
- Don't add additional shadow layers; use the sm shadow sparingly and rely on whitespace for separation.
- Don't compress headline sizes below headline-xs (140px) on desktop; preserve the billboard feel and adjust with responsive scaling instead.

## Agent Prompt Guide

Quick color reference
- Text: #000000
- Background: #f3f3f0
- Border: #000000
- Accent: #3c44e3

1) Build a hero with billboard headline and highlight
- Background #f3f3f0, center container with 64px vertical padding.
- Headline in Founders Grotesk (or Inter fallback), 282px size, line-height 1.2, #000000.
- Wrap one keyword in a full-width block behind it using #9ca8e0.
- Add supporting copy at 98.4px, line-height 1.5, #000000.
- Primary button 34px height, padding 9px 17px, radius 4px, white text.

2) Create a 2x2 feature grid
- Four tiles, each a 48px-radius container on #f3f3f0 with 32px internal padding.
- Titles in 198px, body in 98.4px; all #000000.
- Use #3c44e3 for inline links labeled "Learn more".

3) Testimonial card
- Container with radius 48px, padding 28px 44px, light surface.
- Quote in 140px, name/role below at 98.4px.
- Optional avatar; keep borders off; no shadow or sm only if floating.

4) Product pillar row
- Four inline links each with bold label and one-line description.
- Labels in #3c44e3; descriptions #000000; 20px gap between label and text; 44px gaps between pillars.

5) Help links list
- Column of question links, each with 20px vertical padding and a right arrow.
- Text #000000; hover background #e1e2f1 for a gentle cue.
- Keep overall section padding at 64px top/bottom.

## Similar Brands

- Mercury: Similar warm neutrals and oversized grotesk; Mercury leans slightly more monochrome with fewer lavender accents.
- Brex: Bold type and high contrast; Brex uses sharper corners and heavier dark sections.
- Ramp: Minimal chrome and strong typography; Ramp's green accent replaces Novo's blue/lavender duo.
- Cash App: Flat surfaces and confident type; more vibrant color fields and heavier iconography than Novo.

More like this

Browse Finance →
privy.io
Privy Developer Tools
Privy
Build products that hold, move, and grow digital assets.
Homepage · 15 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
helloaria.eu
Aria Finance
Aria
Aria makes late payment irrelevant in B2B
Homepage · 7 days ago