A business banking website that shows the money, not the promises

What Ovelo is

Ovelo is a business account built for small teams. Instead of a bank for the money, a card provider for spending, an invoicing tool for getting paid and a spreadsheet to hold it all together, a team gets one account: company cards with their own limits, invoices with pay links, approvals for spend, receipts matched automatically and balances in 38 currencies.

The people choosing it are a founder or a finance lead at a company of 5 to 50. They are busy, careful with money and quick to leave a site that feels like it is selling to them.

The problem the site had to solve

• Earn trust in seconds. A banking product is judged on whether it looks finished and serious. Anything that feels like a template loses the visitor before the first scroll.
• Make abstract features concrete. Spend controls, approval rules and receipt matching are hard to picture from a sentence. Each one had to be shown.
• Speak to two readers at once. The founder wants less admin. The finance lead wants control. The same page has to answer both.
• Work in two themes. The brand needed a dark site and a light site that feel like the same product, not two designs.

Show the money, not the promise

The first screen is a working dashboard. The headline, Business money, minus the busywork, sits above a product window with a total balance, three account pots and a six-month chart. Beside it, three company cards fan out, and a small panel shows the day’s activity as it arrives: an invoice paid, a receipt matched, a limit raised.

Nothing on that screen needs explaining. A visitor sees what Ovelo does before reading a feature list, and the activity panel keeps updating, so the page feels alive without anything spinning for the sake of it.

One section, one job

Below the hero, every section answers one question a buyer has, in the order they tend to ask it.

• What can it do? A feature grid: cards with limits per person, invoices that chase themselves, 38 currencies, one-tap approvals and sync with the accounting tools teams already use.
• Can I control the spend? Three tabs, budgets, approval rules and receipts, each opening a real panel over a photograph of a working studio.
• Is my money safe? A security section where the freeze switch works: flip it and the card in the photograph turns grey.
• What does it cost? Three plans with a monthly and yearly switch, then the questions a careful buyer asks before signing up.

The brand system

The palette is deliberately small. A near black base, raised surfaces a few steps lighter, and one soft lavender for the moments that matter: the main buttons, the front card and one statement panel. Text accents and numbers that come in, like a paid invoice, pick up the same lavender, so colour always means something.

One typeface, Familjen Grotesk, carries everything from the 96 pixel headline to the 11 pixel labels on a card. Corners share one radius, 16 pixels for panels and cells, so the dashboard, the grid and the pricing cards read as one product.

Photography follows the same rule. Every photo is tinted to the brand lavender, which turns three unrelated stock images into one family and keeps the product panels on top of them easy to read.

One design, two themes

The light version is not a second design. It is the same page with its colours swapped, generated from one source file, so a change to the layout reaches both themes at once.

Swapping colours is the easy part. Getting light right meant a few deliberate changes. Lavender text is too faint on white, so text accents use a deeper lavender. Shadows turn soft and slightly violet instead of black. Photos are lifted so they do not sit heavily on a white page. The closing photo band stays dark in both versions, so the page still ends on a strong moment.

Motion with a purpose

Every animation on the page explains something. The headline rises line by line out of a mask. The cards fan in, then spread and tilt toward the pointer. The balance chart draws itself from left to right. New activity slides in at the top of the Today panel every few seconds and pauses while you read it.

• Hover that responds. Cards tilt in 3D under the pointer, and a thin border highlight follows the cursor around each feature cell.
• Controls that work. Tabs switch panels, switches toggle, the freeze switch greys out the card, and the pricing toggle changes every price.
• Scroll that stays smooth. Sections reveal once as they arrive, photos drift slightly, and scrolling is eased without hijacking it.
• Calm by request. For visitors who ask their system for reduced motion, every animation is off and the page is complete without it.

Fast, smooth and readable

A finance product that stutters loses trust, so performance was part of the design, not a later fix.

• Light to load. The page loads in four requests and about 113 KB. The typeface and animation code are served from the site itself, with nothing to wait for from other servers.
• Smooth to scroll. The brand tint is built into the photo files instead of being calculated on every frame, and the sticky navigation skips the costly blur effect. Nothing on the page shifts as it loads.
• Easy to read. Every visible line of text passes the WCAG AA contrast standard, in both themes, on desktop and on phones.

Built for phones, not squeezed onto them

On a phone the page is recomposed rather than stacked. The card deck scales as one object, so every label stays whole. The activity panel shows the latest update only. The feature grid becomes a single column with the cards re-cropped to fit, and the navigation folds into a menu.

Ready for Webflow

Ovelo was designed for a Webflow build from the first section. Class names follow the Finsweet Client-First system, sections are self-contained so each one becomes a Webflow component, and the colours, type and spacing sit in a small set of shared variables. The two themes can map to a single variable swap, and the animations are written with GSAP, the same engine behind Webflow Interactions.