systems notebook[ reverse engineering ]

september 2026 · design systems

reverse-engineering client binaries:
ground-truth design tokens from mobile apks.

design files drift from what actually runs in production. the shipped android app does not.

krishna · product manager

[ ai note ] this deck was written by ai and might be wrong. check anything important and double check it with the blog owner before you rely on it.

(01)the thesis[ reverse engineering ]

the design file drifts. the shipped app does not.

in large mobile apps, figma files often drift from what runs in production: outdated color variables, missing edge cases, hardcoded native elements. we inspected production android apks to extract the vector icons, colors and typography the live app actually uses, then built interactive prototypes on that foundation that stakeholders test directly on their phones.

source of truth

the compiled binary running in production.

not the 200-page design file waiting to be tidied up.

(02)the drift[ reverse engineering ]

three ways the design file falls behind.

01 / the canvas

the figma canvas is an illusion.

designers draw idealized happy paths. as features ship, gradient stops get hardcoded and custom drawables get patched into native builds.

02 / the sprint

sprint alignment friction.

developers spend sprint time resolving inconsistent paddings, mismatched hex tokens and missing type definitions.

03 / the review

stakeholder review latency.

leaders cannot judge static screenshots. they want to tap a real prototype on a real phone before signing off.

the fastest, most accurate source of truth is not the design tool. it is the compiled binary currently running in production.

every product manager on a large consumer app meets the same three problems.

first, the design canvas is an illusion. designers create idealized, happy-path wireframes, and as features ship week after week the production app diverges. new gradient stops are hardcoded, custom android drawables are patched into native builds, and the design file becomes an out-of-date artifact.

second, sprint friction: frontend developers spend sprint time resolving inconsistent paddings, mismatched hex tokens and missing typography definitions between design files and code.

third, review latency: leadership and brand directors cannot evaluate static screenshots. they want to touch real interactive prototypes on physical devices before signing off.

if your prototyping waits for someone to tidy up a 200-page design file, you are already slow. the compiled binary is the faster, more accurate source.

(03)the workflow[ reverse engineering ]

pull the styles from the live app, not by eye.

binary harvesting & edge prototypingsystems architecture

(04)execution a[ reverse engineering ]

android vectors are not web vectors.

browsers cannot render vectordrawable xml. the extractor translates it into plain svg.

vectordrawable xmlinline svg

android:viewportWidth→viewBox
android:pathData→<path d>
android:fillColor→fill
@color/… reference→resolved hex

the extractor

scripts/extract_apk_design_system.py parses the xml tree, maps the viewport to an svg viewbox and resolves color references into inline paths.

(05)execution b + c[ reverse engineering ]

ship the real fonts. frame it like a real phone.

b / typography & brand assets

no guessed font fallbacks.

the exact font files shipped in the apk's assets/fonts/ directory are pulled as-is. brand-critical assets, such as loyalty tier badges, partner logos and barcode glyphs, come out as clean, lossless vectors for the workspace design library.

c / mobile-shell.js

a hardware-accurate mobile shell.

on desktop screens wider than 640px, the prototype mounts inside a realistic phone frame with notch rendering and drop shadows.
on a physical phone, the shell collapses and the prototype fills the viewport naturally.

(06)access[ reverse engineering ]

unreleased features stay private.

prototypes often show features that are not public yet. so they sit behind a lightweight access check instead of a full corporate login, and reviewers can still open them directly on their own phones.

assumean unreleased feature can leak.
gatea lightweight access check in front of every prototype.
keepdirect, on-device review for the people who need it.

(07)benefits[ reverse engineering ]

what changed when prototypes used production tokens.

hardware-accurate mobile previews

stakeholders test on physical phones with realistic touch targets, navigation bars and modal sheets, settling layout and interaction questions before engineering sprints begin.

reduced design token drift

prototypes share the exact colors, font families and vector drawables already shipped in the apk, giving engineering direct css token parity instead of visual approximations.

summary[ reverse engineering ]

bridge design and engineering with real code.

clear requirements and working prototypes people can actually try beat vague documents tossed over a wall.