Opens in a new tab

White-label SAF book & claim platform

Project Overview

A white-label desktop web app for sustainable aviation fuel (SAF) book & claim, built on a token-driven design system that re-skins the whole product for each client brand.

Aviation & Renewable Energy

Industry

2024–2025

Year

330

Design tokens

Figma

Platform

White-label SAF book & claim platform

Screens

Inside theproject.

White-label theming: four brands01 / 06←→

White-label theming: four brands

Screen 01 of 06

System flow02 / 06←→

System flow

Screen 02 of 06

Token architecture03 / 06←→

Token architecture

Screen 03 of 06

Brand guidelines: colour04 / 06←→

Brand guidelines: colour

Screen 04 of 06

Typography & sizing05 / 06←→

Typography & sizing

Screen 05 of 06

Component library06 / 06←→

Component library

Screen 06 of 06

Same product in four brand themesFlowchart of the SAF registry and fuel operations systemFour-layer design token architectureBrand colour scales, neutrals and status coloursTypography, radius and component size tokensButton component variants in two themes
←→01 / 06

The Brief

An aviation fuel company needed one platform for SAF book & claim and fuel operations, sold as a white-label product to fuel suppliers under their own brand.

The Approach

Map the whole ecosystem (suppliers, handlers, auditors, operators and airlines), then design every flow on a token-driven design system with brand modes, component sizes and a full Figma variable structure for developers.

The Outcome

A desktop web app delivered in four brand themes from the same components, with an interactive prototype and a developer handoff that uses the same token names as the code.

About the Project

Aviation fuel is still largely managed in spreadsheets and email, where one wrong price or one missing document can cost thousands. The platform brings suppliers, auditors, operators and airlines into one place: suppliers register SAF batches and warehouses, the batches become book & claim units (BCUs) with their emission savings, auditors verify the documentation, and customers claim and retire the savings with an official statement.

The product is white-label, so the design system had to work for more than one brand from day one. I built a four-layer token system in Figma variables (primitives, semantic colours, sizing and component tokens) that maps one-to-one to code. Switching the brand mode re-skins every screen, from navigation and buttons to status colours and charts, without touching a single component.

Dense, compliance-heavy screens are kept calm with a clear type scale, colour-coded statuses and focused dialogs that walk users through each step and help them avoid costly mistakes.

Modules

SAF batches & warehouses
Book & claim units (BCUs)
Transfers & transactions
Auditor view
Retirement statements
Registry & global admin
Fuel operations dashboard

Deliverables

Brand guidelines for 4 themes
Design tokens & Figma variables
Component library
Interactive prototype
Desktop web app UI
Developer handoff

Client feedback

“

Perfect result. Very cooperative, user specific sight, straightforward, modern and uncomplicated. Thanks!

Upwork client

Website prototype · via Upwork

Let’s build somethingworth remembering.

I reply within 24 hours on weekdays.