Oen Design System

role: Design Systems Designer
timespan: 2021–present
team: Oen
scope: Product foundations, component architecture, tokens, documentation
status: Figma library live, Storybook in progress

Context

Oen is a B2B fintech platform for payments, donations, events, memberships, and CRM. Its 1,000+ client organizations need branded customer experiences without separate product codebases for every client.

Started in 2021 as Oen's first in-house design foundation, the 2025–26 rebuild made token names and component APIs the shared contract between design and engineering. A client theme changes named tokens; core workflows and behavior stay shared.

My role

I started the system in 2021 and have owned its design direction through three major revisions:

2021 → Established a guideline and component library from existing product patterns
2023 → Refined color and component patterns that had begun to drift
2025–2026 → Rebuilt the foundations: tokens, component coverage, and visual range

For the latest revision, I set the token, component-boundary, responsive-state, and composition decisions. I designed and specified the Figma library, token model, component properties, usage rules, and responsive behavior. Frontend engineers partnered on feasibility, product code, and Storybook documentation.

It introduced token layers: primitive tokens supply values; semantic tokens name what they are for. Questions like "gray/100 or gray/200 for a border?" no longer come up. A semantic name carries that decision into design specifications and implementation.

Changing a feedback color or surface is one shared decision, not an audit across every component. Design and code can use structures suited to their own work while relying on the same named decisions.

Results

0%→64% adoption in 5 months (estimated from file-level counts)
36% of legacy button and form field usage replaced
2,000+ documented Figma library items (variants, states, and reusable patterns)
200+ semantic tokens for Oen's core brand and client-theme assignments
Average 500+ insertions per week over one year across teams in Figma

Credit

Design: YuCheng Kuo, Sandy Man, Julia Chan
Engineering: Kelly Pan, Charlie Chang, Jaster Chang, Rong Lin, Lobster Yu

[→]Token structure: Raw value → Primitive token → Semantic token

Text Field component before (2021) and after (2026) — [→]Before/after (2021/2026) of [Text Field] componentThe rebuild focused on making components more composable, with states and variants properly documented

A Tile component documentation table showing states and variants — [→][Tile] component: states and variantsThree behaviors: action, selection and view only, with various leading and trailing content for composability

Tile component as action, selection and view in actual usage like selection groups, radio options, charts statistic and action list — [→][Tile] used in selection, radio groups, action list and view-only chart statsPricing plan selection, donation options, statistic overview, CTAs and switch in settings

Menu Item component that can be composed into Menu — [→][Menu Item] the atom of the Menu component, with shared component API

Menu component use cases — [→][Menu] composed to be used in various use casesCountry dropdown with search, menu options, action menu, content reordering, sorting and preference menu

Donation project page built from the design system, showing donation project details and donation option in one-time donation or subscription — [→]Donation project page built from the system

Event detail page with ticket options — [→][Card] Event detail page built from legacy product patterns

Montage of product elements across Oen — [→]Elements across Oen's product lines

CRM dashboard charts — [→][Charts] Shared chart patterns in the CRM dashboardDonor demographics, age and amount distribution