CONFIDENTIAL ENTERPRISE SAAS CASE STUDYModernizing a mature enterprise platform at the system layer
I owned design-system translation and the semantic-token groundwork for a legacy interface, working through component behavior, responsive/reflow constraints, accessibility requirements, theming, and implementation fidelity.
I partnered closely with engineering and accessibility specialists to turn design standards into something that could actually scale in the product, without disrupting expert workflows.
Already have the password? Jump straight in · or · request it hello@ananovakovic.comThe interesting problem was underneath the interface.
The implementation was tokenized, but not always semantically.
Several aliases were being reused across unrelated roles (surfaces, interactive states, inputs, overlays, and hierarchy) which could look acceptable in one theme while breaking down in another.
My work moved beyond specifying appearance. I investigated computed styles and token relationships, mapped visual values back to semantic roles, documented expected behavior, and translated those findings into actionable engineering QA.
One value can look correct. The role has to stay correct.
A second theme exposed semantic ambiguity that the original theme could hide. I mapped UI roles independently from their rendered values so the implementation could express hierarchy and state consistently.
Semantic role
Token
Light
Dark
Page background
surface.page
#FFFFFF
#161616
Raised surface
surface.raised
#F4F4F4
#262626
Input background
field.background
#FFFFFF
#393939
Hover state
state.hover
#E8E8E8
#353535
Focus indicator
focus.ring
#0F62FE
#78A9FF
Before
Different roles, one alias
Table header
Hover row
Disabled row
Sidebar item
Popover
Input
Shared alias
surface.secondary
#E8E8E8
After
Roles mapped intentionally
Table header
surface.subtle
Hover row
state.hover
Disabled row
state.disabled
Sidebar item
nav.selected
Popover
surface.overlay
Input
field.background
Illustrative example. Token names and mappings are anonymized for this public preview.
The implementation contained tokens, but unrelated roles collapsed onto the same values. Theme QA turned that visual symptom into a semantic implementation problem.
Systems work also changed how the interface behaved.
400% reflow
Worked through fixed sizing and responsive behavior so dense workflows remained usable under extreme zoom.
Non-text contrast
Reviewed component states, borders, and interaction cues against accessibility requirements.
Design-to-code QA
Compared implementation against intended semantic behavior and documented remediation at the token and component level.
Reflow was not a “make the screen smaller” problem. Fixed pixel assumptions had to give way to scalable sizing and layouts that could preserve access to information and actions at 400% zoom.
The full case goes deeper.
Behind the password: the real token investigation, accessibility work, dark-theme QA, implementation findings, engineering tickets, and the decisions that shaped what could ship.
Password required · shared with recruiters and hiring teams · request it hello@ananovakovic.comNext project →Reaching 93% self-service adoption for certificates
Redesigning a recurring insurance workflow so customers could complete more of the process independently.