ATLP Design System case study | Abdulghafor Abbas

Problem

ATLP is the trade and logistics platform behind KEZAD and AD Ports services: KYC, insurance, permits, inspections, milestones. Its design system lived in Adobe XD as a document. There were pages of specs, but no components, no tokens and no styles.

So every screen was drawn by hand, and every team drifted. The same card existed in a dozen slightly different versions, and nothing told a developer which one was right.

Original ADNIC Web screens scattered across the canvas — Before: ADNIC alone was 49 loose frames with no shared parts.

How I fixed it

Audit
Approve in HTML
Tokens
Components
Rebuild 94 screens
AI handoff

The redesign was approved as a working HTML build first, then rebuilt natively in Figma from that source of truth.

Tokens that AI can read

Every colour, space and type value is now a variable with a semantic name, like background/surface or action/primary, and each one carries the matching CSS variable. Designers, developers and AI tools such as Claude through the Figma MCP all read the same names, so generated screens and code stay on the system.

ATLP semantic colour tokens: background, text, border, icon, action, status and panel — 107 semantic tokens on top of 106 primitives. Each one is scoped, so it only appears where it belongs.

Why this, not that

Chose

Semantic tokens

NotRaw hex in every frame

Change the brand once and every screen follows. 300 variables in 4 collections: primitives, semantic, dimensions and typography.

Chose

Rebuild from components

NotRestyle the old frames

Restyling hides the drift. Rebuilding forces every screen through the library. The originals stay locked in an archive for reference.

Chose

Light pages, dark side panels

NotFull light and dark themes

Forms and approvals open as dark panels over the page, so focus is obvious, and the token set stays half the size.

ATLP module patterns: milestone rows, focal point cards, KYC progress, service start and insurance plan cards — 62 component sets, 29 components and 97 icons and logos, including patterns specific to each service.

Solution

Six services now share one system: Activity Milestones, DLS, KYC, ePass, ADNIC Web and DLS & Establishment.

Rebuilt ADNIC dashboard on a MacBook resting on stones — The ADNIC dashboard, rebuilt entirely from library components.

Original ADNIC insurance request panel — Uneven spacing, mixed progress styles.

Rebuilt ADNIC insurance request panel — Same flow, built from the panel, form and upload components.

Establishment details page on a MacBook on a white plinth — Establishment details: licence, eligibility, contacts and documents, all from shared cards.

The ADNIC insurance request flow from ADN-07 to ADN-13, laid out in order — Every screen has a code and a place in a named flow. This is the start of the insurance request, ADN-07 onwards.

94
screens rebuilt across 6 services
300
tokens, each with its CSS variable
62
component sets in 8 categories

Counts from the final Figma file, October 2026

Results

"He has a rare ability to turn complex requirements into clean, intuitive designs that truly serve both users and business goals."

Saleem Sinokrot, Product Manager, AD Ports Group

One source of truth. Design, code and documentation use the same token names.
AI-ready. Claude and other tools can read the file and build new screens that stay on the system.
Faster new work. A new service starts from the library, not a blank frame.

ATLP Design System.

Problem

How I fixed it

Tokens that AI can read

Why this, not that

Solution

Results

More work

KEZAD Mobile App

Cashi

Launchsoft