Feysal
One design system for a B2B equipment store and the people who sell and deliver its orders.
The app had outgrown the kit it started on
Feysal sells and delivers equipment to companies from its own warehouse. Its first app was built on a generic UI kit. Over time fonts mixed, colours were typed in by hand, and the same component looked different from one section to the next.
Every new screen took longer, because nothing could be reused with confidence.
About 3,900 colour properties were hard-coded instead of linked to a style.
Audit before redesign
I went through every page of the file and listed what each screen actually used: colours, type sizes, button shapes, icons. The audit turned a vague "it feels messy" into a concrete list of what to keep, merge and drop.
Patch, adopt, or rebuild
For v2.0 I compared three paths. The deciding factor was speed of future work, not the cost of the first week.
Rebuild the system from scratch on an Untitled UI Pro base, with Feysal's own colours, the Onest typeface and Hugeicons. Proven components, but a product that still looks like itself.
Decisions you can see on the screen
- 1
Paid gets its own green
A separate success colour for "paid" status, so it never reads as just another brand element.
- 2
One typeface for UZ and RU
Onest covers Latin and Cyrillic, so both languages look equally finished.
- 3
Same system, second app
The internal app for sales agents and couriers reuses the same tokens and components.
The system in numbers
Version one tidied the old app. Version two rebuilt the foundations so both apps grow from one source.
#1D7C4D#E08A00#0E3B47What changed
One source of truth for the customer app and the internal agent and courier app. New screens are assembled from existing components instead of drawn from scratch.
Fix the foundations before the screens
[Draft, in your own words] Rebuilding took longer at the start, but every screen after it was faster. Next time I would agree on the token names with developers before drawing a single component.