Skip to case study
All portfolio workApp concept · Personal financeOpen experience
Independent concept projectPersonal financeReference measured · review required

Pennybeam

A browser-based banking experience covering setup, balances, cards, transfers, bills, savings, insights, and security with deterministic mock money.

Launch interactive experience Browse all 20 screens
Project type
Independent concept
Format
Browser-based app
Experience scope
20 connected screens
Industry
Personal finance
Fidelity status
Reference measured · review required
01 · Design rationale

A product direction built around a complete journey.

A browser-based banking experience covering setup, balances, cards, transfers, bills, savings, insights, and security with deterministic mock money. The case study exposes the project’s structure and delivery boundaries so visitors can assess the visual system, route coverage, and intended interactions without mistaking a concept for commissioned client work.

  1. 01

    Young-adult neobank simulation

    The route architecture is organised around young-adult neobank simulation, with each named screen assigned a specific interaction role.

  2. 02

    Project-specific visual direction

    Soft-brutalist mint and black, oversized numerals, tactile card motion, bold state colour, and transparent financial hierarchy.

  3. 03

    Original asset plan

    Original card artwork, fictional transactions and institutions, CSS charts, and generated profile illustrations.

02 · Experience architecture

Navigate the complete app map.

Every named screen opens directly, making the concept’s scope inspectable and shareable without loading every experience route on this page.

20Connected screens

Routes describe the frontend experience. A visible route does not by itself claim a live backend integration or native store release.

03 · Evidence and boundaries

Original presentation, documented provenance.

Reference research and implementation status are stated separately. Third-party screenshots, logos, and branded assets are not used in this presentation.

Toss reference study

Reference record

The Toss links below document private clean-room measurement. They do not imply affiliation, endorsement, human approval, or permission to republish source screens.

System
A01 · ios
Studied
2026-08-13
Entry family
toss-identity-step
Status
reference-measured · human review required

Automated targets: structural changed pixels ≤ 2.0%, full changed pixels ≤ 8.0%, MAE ≤ 0.015, RMSE ≤ 0.035. These are measurement targets, not pixel-perfect certification.

Asset record: Original card artwork, fictional transactions and institutions, CSS charts, and generated profile illustrations. Reference imagery is research-only. Public experiences ship original or licensed assets with source records.

  • Toss primary screen

    stacked account and insight cards with right-aligned inline actions

    • 6–8 px gaps separate full-width balance modules
    • Cards use approximately 16–20 px corner radii
  • Toss alternate state

    transfer controls open a focused amount sheet; balances and disclosure cards drill into detail

    • The visible type ladder is approximately 24/17/14/12 px
    • Five persistent destinations sit in a roughly 64 px bottom bar

Explore Pennybeam from its first screen.

Open the browser experience, then use its connected navigation to inspect the complete concept route by route.

Launch Pennybeam