Design by Maayan Kedem Bhonker
A Customizable Clearing System
A clearing system for a small thriving business — built so Queentect can brand every receipt, report and invoice down to the last pixel.
Student project — UI/UX studies at Codesigner
A case study
Every screen on this page is rebuilt in live HTML and CSS from the original Figma file — nothing here is a flat image.
CodePay is a clearing system. It’s designed for small businesses so that they can manage their accounts on their own.
CodePay’s system is customizable and allows its user to design their interface, receipts, annual reports and more.
Queentect is a young and dynamic company that produces marketing and content writing for women, By Women.
Queentect uses CodePay’s system to track their revenue and brand down to the smallest detail — like their invoice page.
The core idea, live
The heart of CodePay is that the business owner — not a developer — styles their own documents. Pick a template, a primary and a secondary color, and watch the invoice rebrand itself. This is a working recreation of the Design screen.
Primary color
Secondary color
Preview
Every control above maps to a real control in the Figma file — the color grid, the template picker and the accordion structure come from the Design → Receipts screens.
Process
Structure first, brand second. Both halves below are the same live screen — the divider swaps the wireframe styling for the finished UI as you drag it, so you can compare any part of the layout directly.
UI Kit for CodePay
Click any swatch to copy its hex.
Primary
Secondary
System
One family, four weights, four sizes.
Light 48
Regular 48
Medium 48
Bold 48
Light 24 — body copy
Regular 24 — table cells
Medium 24 — card titles
Bold 24 — figures
Hover and click — these are live components.
A single-stroke set covering the 13 navigation modules.
The interface
Click any screen to open it full size.
UX case study
NanoClip
Maayan Kedem-BhonkerUX · UI · Digital design
← All work