UX/UI Designer
VNS DESIGN SYSTEM
VNS DESIGN SYSTEM
A 42-component design system for Vietnam Silicon's internal ERP platform, token architecture, WCAG-tested colors, governance and adoption strategy.
A 42-component design system for Vietnam Silicon's internal ERP platform, token architecture, WCAG-tested colors, governance and adoption strategy.
Year
2025
Year
2025
Year
2025
Client
In-house
Client
In-house
Client
In-house
Industry
Enterprise / ERP
Industry
Enterprise / ERP
Industry
Enterprise / ERP
Project Duration
6 months
Project Duration
6 months
Project Duration
6 months
Overview
Building order out of an ERP that grew up without a designer. As the sole Product Designer, I owned the system end-to-end — token architecture, component API design, documentation, governance rules, and driving adoption across a team of 5 engineers.
Scope: 42 components · three-tier token architecture · WCAG-tested colors · web & mobile. Timeline: 6 months, 2025.
The Starting Point
I joined after engineering was already shipping. There was no design foundation — every screen had been built from each developer's intuition. The consequences were predictable: inconsistent UI across the product, components rebuilt from scratch for every feature, and review cycles that dragged on because there was no shared reference for what "correct" looked like.
The ask wasn't "make it prettier." It was: give five engineers and one designer a single source of truth that survives contact with real deadlines.
Token Architecture
Instead of starting with components, I started with decisions. Every visual choice resolves through a three-tier token chain: Global → Semantic → Contextual.
Global tokens are the raw material: 16 key colors, each with 13 shades, plus alpha variants — all pre-tested against WCAG contrast requirements. Semantic tokens assign meaning: Brand, Neutral, Informative, Positive, Warning, Negative. Contextual tokens lock usage into place: Content, Border, Background, Action, and Interaction.
An engineer never touches a hex value — they consume intent. The same logic runs beyond color: border radius resolves from global steps to aliases (small / medium / large / full).
Impact & Retrospect
42 components, every state documented. From Alerts — 4 severities × Filled/Outlined/Standard × composable props — to full social-auth button sets, each component ships with every interactive state so engineers never invent an edge case. I used AI-assisted workflows to draft, structure, and polish the documentation, compressing weeks of writing into days while keeping editorial control.
Within two release cycles, the system became the default way the team builds:
• ~40% faster feature delivery — new screens assemble from existing parts
• 90%+ screen adoption — nearly every screen runs on system components
• 2× faster design reviews — "Does it match the system?" replaced subjective debate
Retrospect: I'd introduce the Interaction/Action token split earlier. Retrofitting it cost a refactor week that a day of upfront modeling would have prevented. Systems thinking pays compound interest — but only from the day you start.
Latest Projects
UX/UI Designer
VNS DESIGN SYSTEM
VNS DESIGN SYSTEM
A 42-component design system for Vietnam Silicon's internal ERP platform, token architecture, WCAG-tested colors, governance and adoption strategy.
A 42-component design system for Vietnam Silicon's internal ERP platform, token architecture, WCAG-tested colors, governance and adoption strategy.
Year
2025
Year
2025
Year
2025
Client
In-house
Client
In-house
Client
In-house
Industry
Enterprise / ERP
Industry
Enterprise / ERP
Industry
Enterprise / ERP
Project Duration
6 months
Project Duration
6 months
Project Duration
6 months
Overview
Building order out of an ERP that grew up without a designer. As the sole Product Designer, I owned the system end-to-end — token architecture, component API design, documentation, governance rules, and driving adoption across a team of 5 engineers.
Scope: 42 components · three-tier token architecture · WCAG-tested colors · web & mobile. Timeline: 6 months, 2025.
The Starting Point
I joined after engineering was already shipping. There was no design foundation — every screen had been built from each developer's intuition. The consequences were predictable: inconsistent UI across the product, components rebuilt from scratch for every feature, and review cycles that dragged on because there was no shared reference for what "correct" looked like.
The ask wasn't "make it prettier." It was: give five engineers and one designer a single source of truth that survives contact with real deadlines.
Token Architecture
Instead of starting with components, I started with decisions. Every visual choice resolves through a three-tier token chain: Global → Semantic → Contextual.
Global tokens are the raw material: 16 key colors, each with 13 shades, plus alpha variants — all pre-tested against WCAG contrast requirements. Semantic tokens assign meaning: Brand, Neutral, Informative, Positive, Warning, Negative. Contextual tokens lock usage into place: Content, Border, Background, Action, and Interaction.
An engineer never touches a hex value — they consume intent. The same logic runs beyond color: border radius resolves from global steps to aliases (small / medium / large / full).
Impact & Retrospect
42 components, every state documented. From Alerts — 4 severities × Filled/Outlined/Standard × composable props — to full social-auth button sets, each component ships with every interactive state so engineers never invent an edge case. I used AI-assisted workflows to draft, structure, and polish the documentation, compressing weeks of writing into days while keeping editorial control.
Within two release cycles, the system became the default way the team builds:
• ~40% faster feature delivery — new screens assemble from existing parts
• 90%+ screen adoption — nearly every screen runs on system components
• 2× faster design reviews — "Does it match the system?" replaced subjective debate
Retrospect: I'd introduce the Interaction/Action token split earlier. Retrofitting it cost a refactor week that a day of upfront modeling would have prevented. Systems thinking pays compound interest — but only from the day you start.
Latest Projects
UX/UI Designer
VNS DESIGN SYSTEM
VNS DESIGN SYSTEM
A 42-component design system for Vietnam Silicon's internal ERP platform, token architecture, WCAG-tested colors, governance and adoption strategy.
A 42-component design system for Vietnam Silicon's internal ERP platform, token architecture, WCAG-tested colors, governance and adoption strategy.
Year
2025
Year
2025
Year
2025
Client
In-house
Client
In-house
Client
In-house
Industry
Enterprise / ERP
Industry
Enterprise / ERP
Industry
Enterprise / ERP
Project Duration
6 months
Project Duration
6 months
Project Duration
6 months
Overview
Building order out of an ERP that grew up without a designer. As the sole Product Designer, I owned the system end-to-end — token architecture, component API design, documentation, governance rules, and driving adoption across a team of 5 engineers.
Scope: 42 components · three-tier token architecture · WCAG-tested colors · web & mobile. Timeline: 6 months, 2025.
The Starting Point
I joined after engineering was already shipping. There was no design foundation — every screen had been built from each developer's intuition. The consequences were predictable: inconsistent UI across the product, components rebuilt from scratch for every feature, and review cycles that dragged on because there was no shared reference for what "correct" looked like.
The ask wasn't "make it prettier." It was: give five engineers and one designer a single source of truth that survives contact with real deadlines.
Token Architecture
Instead of starting with components, I started with decisions. Every visual choice resolves through a three-tier token chain: Global → Semantic → Contextual.
Global tokens are the raw material: 16 key colors, each with 13 shades, plus alpha variants — all pre-tested against WCAG contrast requirements. Semantic tokens assign meaning: Brand, Neutral, Informative, Positive, Warning, Negative. Contextual tokens lock usage into place: Content, Border, Background, Action, and Interaction.
An engineer never touches a hex value — they consume intent. The same logic runs beyond color: border radius resolves from global steps to aliases (small / medium / large / full).
Impact & Retrospect
42 components, every state documented. From Alerts — 4 severities × Filled/Outlined/Standard × composable props — to full social-auth button sets, each component ships with every interactive state so engineers never invent an edge case. I used AI-assisted workflows to draft, structure, and polish the documentation, compressing weeks of writing into days while keeping editorial control.
Within two release cycles, the system became the default way the team builds:
• ~40% faster feature delivery — new screens assemble from existing parts
• 90%+ screen adoption — nearly every screen runs on system components
• 2× faster design reviews — "Does it match the system?" replaced subjective debate
Retrospect: I'd introduce the Interaction/Action token split earlier. Retrofitting it cost a refactor week that a day of upfront modeling would have prevented. Systems thinking pays compound interest — but only from the day you start.