Modernizing a legacy POS ecosystem through a semantic design system.
A system-focused redesign of Ignatia, restructuring legacy UI patterns into a reusable semantic architecture and responsive product foundation.
The product carried more than visual debt.
The work was not only a visual refresh. The underlying UI needed a clearer system for typography, component states, semantic color usage, and responsive behavior.
Legacy screens mixed older UI patterns, direct styling decisions, and inconsistent component usage.
Define a system direction, normalize reusable UI patterns, and migrate product surfaces without losing product behavior.
A product foundation where components inherit role-based semantics and adapt consistently across screen sizes.
Fix the architecture before polishing the surface.
Three recurring problems made the product harder to evolve: direct styling, fragmented component patterns, and desktop-first responsive debt.
Direct styling
UI layers depended on raw/global values instead of role-based semantics.
Fragmented patterns
Legacy components carried inconsistent states and styling decisions.
Responsive debt
Desktop-first patterns did not scale cleanly across smaller product surfaces.
Meaning first. Values second.
Ignatia now uses semantic roles between components and global primitives. The current system contains 68 semantic tokens; representative mappings below are rendered directly as UI rather than screenshots.
Global tokens
Brand primitives + neutral foundations
Semantic tokens
68 role-based tokens for UI meaning
Components
Reusable states consume semantic roles
Product UI
Screens inherit the same system logic
Direct primitives
Fast short-term, but component meaning stays tied to raw values.
Semantic mapping
Role-based abstraction keeps component intent stable while values can evolve.
Per-screen overrides
Flexible locally, but repeats decisions and weakens consistency.
The architecture becomes visible in the interface.
Use a like-for-like screen comparison. The point is not only that the UI looks newer, but that final desktop and mobile surfaces come from a more consistent responsive system.
Evidence without fake business metrics.
Keep this section system-focused. Replace editable metrics only when you have audited numbers you can defend.