Owned ASUS's web design system from audit to rollout, scoped for adoption over completeness. Design-discrepancy tickets fell ~60% across the two tracked categories combined, and brand compliance rose from ~60% to ~95% within six months.
Eighteen months, audit to rollout. I set the foundations and token strategy, and scoped the first release for adoption over completeness.
The problem
Duplicated work
Global and regional teams rebuilt buttons, forms, and navigation on every project.
The solution
Adoptable over complete
Shipped the high-frequency patterns teams rebuilt most, strict on foundations and loose on composition, so regions adopted it instead of forking it.
What I owned
Core contributor
Foundations, token strategy, component specs, and documentation, with two designers on production.
Key outcome
60→95%
Brand compliance rose from ~60% to ~95% on the brand team's audit checklist.
Every project started from a blank file, so UI patterns diverged. Each launch added design debt: duplicated specs, inconsistent QA, and regional sites that looked like different brands.
Before the system: Before the system: the same product card in the old Myriad Pro styling, with inconsistent buttons, pricing, and type.. After the system: After the system: the same product card rebuilt on TT Norms Pro with system buttons, tokens, and type scale..
Design team
Reuse, not redraw. Components shared across regions instead of rebuilt for every launch.
Engineering
Build without guessing. Specs and tokens precise enough to implement straight from the doc.
Design leadership
One brand, everywhere. Global and regional sites that read as the same company.
Product managers
Ship sooner. Pages assembled from the system, not built from scratch.
The audit showed the drift, but also why: regional teams had real constraints in markets, launch calendars, and fonts. They needed high-frequency patterns they could ship, not a complete library.
Old question
How do we standardize every component across every product?
Real question
What must be identical everywhere, and where do regional teams keep the freedom they actually need?
Key insight. Strict foundations, flexible composition. Otherwise the regions fork the system and we lose them.
I owned foundations, token strategy, component specs, the documentation framework, and the governance model. Two other designers produced components and docs against the standards I set.
01
With UX research, I documented layout, type, color, and component drift across live ASUS sites. The findings became the v1 scope list.
02
Buttons, forms, navigation, core type and color: the patterns teams rebuilt most. Scope was deliberately constrained so v1 was adoptable, not exhaustive.
03
Color, typography, spacing, and grid. Stricter foundation rules with flexible composition on top.
04
Structure, states, and responsive behavior built from real usage across ASUS products.
05
Notion docs with design intent, variants, tokens, and accessibility specs. The reference engineering built against.
Buttons were the highest-frequency inconsistency: six heights, no clear hierarchy, and many variants failed contrast.
Problem. 19 variants across six unnamed heights, with no shared hierarchy and no consistent touch targets.
Solution. Reduced to three variants (primary, secondary, CTA) and three named sizes (small, medium, large), with CTA reserved for the single conversion action per page.
Problem. Contrast failures across light and dark themes.
Solution. Every variant validated for WCAG 2.1 AA, with the passing foreground/background pairings documented as rules.
A good call only counts if teams adopt it. I ran rollout like a product launch: a workshop before each release, a changelog, versioned docs.
/ 01
Force one component everywhere and regions fork it. System on paper, drift in production.
/ 02
Leave every variation and nothing consolidates. The blank file returns.
/ 03
Tokens, type, color, and core components locked everywhere. Layout and composition stayed regional.
The default starting point for new ASUS web projects. Later launches, including the ProArt creator line, shipped from these foundations instead of one-off rebuilds.
Measured six months after v1 rollout against the pre-system baseline, from Jira ticket counts, the brand team's audit checklist, and WCAG audits.
/ 01
Fewer visual-inconsistency tickets
/ 02
Brand compliance
/ 03
Fewer handoff-mismatch tickets
/ 04
Fewer WCAG violations
I spent the first months making the system more complete, and it barely moved adoption. I had assumed the better system would win on merit. Teams kept starting from blank files until I made the reach for the system, not its coverage, the thing to design.
What made the system work was not completeness. Teams adopted it because reaching for it was easier than starting over, and because every rule came with a reason. Designing that ease was the real work.
