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 09 · Personal finance and savings · Concept

Sumvale

See your money clearly.

Sumvale, a fictional personal-finance concept. A ten-year paper tape slides under a read-head and shows what savings could become.

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 Sumvale site on a wide display: See your money clearly.
Opening screen, desktop

01 The brief

The brand
Sumvale is a fictional personal-finance and savings service with an educational slant. Its line is "See your money clearly."
The problem
People who want to understand their own money are put off by pressure and by charts they cannot check. The site lets them change a few numbers and read, in plain words and in a table, what changed and why.

02 The idea

Ten years on a paper tape

What you see
The home page headline is a live readout. Below it a cream adding-machine tape runs under a fixed read-head, one column per year. The visitor drags the paper or moves one slider to scrub through time, and can print a second tape to compare two scenarios.
How it works
The calculator is a set of pure functions with documented formulas and unit tests. The tape is drawn from the same numbers as the year-by-year table, which is always available next to it.

03 Design system

  • Ledger Green#F4F1EA groundThe dark desk the paper lies on (#0F261D).
  • Desk Cream#111111 inkText on the desk (#EFE9D6).
  • Brass#1F8A63 accentHighlights on the desk (#E3B64C).
  • Muted Sage#5C5A55 mutedSecondary text on the desk (#A9B9AB).
  • Tape Paper #F1EBD8. The adding-machine paper.
  • Ledger Red #A8281D. Accent on paper.
  • Series Blue #2B3FD6. Ink of the second scenario tape.
Type
  • Martian Mono
    Headings, labels, buttons and every figure, set in tabular numerals with a slashed zero.
  • Newsreader
    Running text.
Edges
Dashed perforation lines for rules, keycap-style buttons with a short pressed shadow, underlined inputs and one serrated tear edge on each sheet. No cards and no charts.
Motion
The tape slides quickly and the keys press down a few pixels. Both stop under reduced motion.

04 Process

  1. Pre-production

    Pre-production set the thesis, the direction, the nine routes and the formulas. The test vectors for the calculator were checked against an independent simulation before the build.

  2. Build

    The build followed a written plan with the calculator as the product. A later uniqueness pass replaced the original chart with the tape and changed the palette and type, leaving the maths untouched.

  3. Finish review

    Impeccable finish-review rounds compared the built pages with the direction contract and listed fixes in order of importance.

  4. Fixes

    The fixes were applied and checked again. The design notes were updated to describe the tape version.

05 Technology and accessibility

Stack
Next.js 16, Tailwind CSS 4 and TypeScript, inside the studio's single application.
Particular to this site
  • Pure TypeScript calculator with unit tests
  • Drag-to-scrub tape built from HTML and CSS
  • Plain-words summary generated from the same numbers
Access
  • One range slider with a spoken value for the scrubbed month
  • PageUp and PageDown move the tape by a year
  • A table with the same figures is always available as an alternative
  • Skip link and visible focus ring on every page
  • Prefers-reduced-motion switches off the tape slide and key press
  • A "Not financial advice" notice on every page
Tests
Covered by its own Playwright end-to-end spec and a unit test file for its logic.

06 Honest notes

Sumvale is a fictional brand and this site is a concept by Artlogic. Rates, plans and example figures are illustrative, nothing is sold and no account can be connected.

The contact form is a demo. It stores nothing and says so on the page, and the calculator keeps nothing between visits.

There are no photographs. The tape and tables are built in code, because photos of money or phones would add nothing to a site about reading numbers.

The shared registry still lists the earlier sand-and-green palette. The colours above describe the current tape design.

07 See it

Explore the concept site

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