We set only the cookie that remembers this choice. Analytics and marketing cookies stay off unless you allow them. Cookies policy

Start a brief

Room 07 · B2B invoice approval software · Concept

Billane

Approved before lunch.

Billane, a fictional invoice approval tool. The site is one paper document with a status rail that the visitor moves through by pressing a real button.

Concept project — fictional brand. This project was created by ARTLOGIC to demonstrate a possible brand and digital experience. The organization, name, people, prices, and data shown are fictional. This is not client work and does not represent measured business results.

Explore the concept site

Opening screen of the Billane site on a wide display: Approved before lunch.
Opening screen, desktop

01 The brief

The brand
Billane is fictional B2B software for approving supplier invoices. Its tagline is "Approved before lunch."
The problem
Finance managers at companies of 20 to 200 people handle supplier invoices. The site shows one process, from invoice to approval to payment, by letting the visitor run it.

02 The idea

A live invoice on a status rail

What you see
A perforated rail with four frames (Received, Matched, Approved, Paid) sits fused to the top of a sheet. The visitor presses Approve and the invoice moves through each status, with a trail of timestamped events. A pricing calculator, a rule tester and a dashboard preview use the same sheet.
How it works
The product is shown as working UI built in code, not as illustration. Status, calculator and rule logic live in a shared module that the components read. State is shown as a mark and a word.

03 Design system

  • Warm Paper#D8DCD3 groundPage background and the punched-hole fill.
  • Ledger Ink#14171C inkText, borders and table rules.
  • Signal Cobalt#4B2C8F accentReserved for what is live: primary button, current status, focus ring.
  • Carbon Grey#454A52 mutedLedes, hints, labels and upcoming states.
  • Sheet White #FFFFFF. Fill of every document, panel and field.
  • Cobalt Wash #EEF1FF. Faint tint behind the live frame and selected row.
Type
  • Geist
    Headings and sentences.
  • Geist Mono
    Numbers, IDs and status words, with tabular figures.
Edges
One sheet idiom for every container: white fill, 1px ink border, 0px radius. The only circles are the punched holes of the rail.
Motion
Motion is minimal, and smooth scrolling is turned off under reduced motion.

04 Process

  1. Pre-production

    The product and design documents set the audience, the single workflow to show and the paper-sheet idea before building.

  2. Build

    The site was built against that direction, with the status logic and the sheet components first, then the walkthrough, calculator and forms.

  3. Finish review

    Impeccable finish-review rounds compared the finished build with the direction and design system.

  4. Fixes

    Material findings were fixed and the pages checked again.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Four-status invoice walkthrough
  • Pricing calculator for users and invoices per month
  • Rule tester
  • Dashboard preview built in code
Access
  • Status told twice, as a mark and a word, never by colour alone
  • Walkthrough and filter buttons expose pressed state; changes go to live regions
  • Form errors use aria-invalid with status messages
  • Mobile menu closes on Escape
  • Visible focus ring; smooth scroll off under reduced motion
Tests
Covered by its own Playwright end-to-end spec.

06 Honest notes

Billane is a fictional product and a concept project by Artlogic. The invoices, plans, prices and figures are invented, and integrations appear only as generic categories.

The demo request form stores nothing and the page says so.

There are no photographs. The product is shown through interface built in code, and the logo and mark are original SVG, so no stock imagery was needed.

07 See it

Explore the concept site

Fictional prototype. A concept by ARTLOGIC for a fictional brand. English only.