Background and Objectives
Why create a design system?
Supernova’s SBL SaaS is designed for overseas banking customers. Different customers vary significantly in brand visuals, module combinations, loan workflows, and information density. In the past, onboarding each customer required a large amount of manual customization, which was cumbersome and difficult to scale.
After joining Supernova, I led the development of the Core Design System: using Design Tokens as the unified contract between design and engineering, connecting Figma with the web component library, supporting multi-theme switching and shared references, and evolving the previous delivery process—where styles were copied and adjusted manually and design was disconnected from frontend engineering—into a mechanism that could be engineered, distributed, and continuously improved.
The goal is to achieve the following in business scenarios: define once, apply everywhere; make one change and sync globally; reduce adaptation costs by about 90%; and make design decisions reusable and traceable, ensure components and pages reference the same set of rules, and keep multi-client theme switching controllable with predictable redesign costs.
Core approach: Design Token (the executable contract of a Design System)
What is a Design Token
在设计体系中，Design Token 可以理解为被封装的视觉样式参数。它通过一套设计师与工程师都能理解的命名规则，把颜色、字号、间距、圆角、阴影等设计决策抽象为结构化变量，并能够在设计工具与代码侧被统一引用。
Why Design Token Is Key (Advantages
For designers: separate "visual decisions" from specific pages and components. For example, when you need to update the functional color for the Customer Theme, namely color-Branding, you only need to change its corresponding default color value. The tokens and mapping relationships will then be automatically adjusted according to the rules, enabling a consistent global update and avoiding manual edits page by page and component by component.
For R&D, to keep up with product style updates and iterations, using Design Tokens makes it much faster to update the styles of all components without having to modify them one by one. This is also why, during development, it is especially important to use variables rather than fixed default values. If a product’s style is shared across multiple platforms, it can also be much more efficient.
For team collaboration: communication shifts from “what is this value” to “which semantic token should be used here,” and design and code share the same naming and hierarchy, reducing alignment costs and rework.
For scaled delivery: turn multi-customer differences from "changing pages" into "changing configurations," so redesign scope stays focused, costs are predictable, and evolution is traceable.
How to Build and Implement (Figma → Web)
Tokenize Foundations (Single Source of Truth)
DesignToken uses variables to store style values, such as colors and fonts, allowing style values to be applied consistently across design, code, tools, and platforms. Design variables represent the values used to build layouts and components in a design system, such as spacing and colors. Because variables are an abstraction, the values used in an application can change in different contexts without affecting the experience of designers or developers. Design variables built on Figma’s Variable feature + Style
System Variables (Basic)
Base color variables, raw values, and spacing can be defined in Figma using the Variables feature. Shadows and fonts still need to use the Style mode, but when defining shadows and fonts, the parameters can reference already defined base variables.
Component-level style management
That is, styles applied to components are managed in a decentralized way, centered on basic components. Take color as an example: in the figure below, the gray outline style used in application buttons is classified under “Button.” At the same time, this style is also used in input fields, so it also needs to be classified under “Input Field.”
2）语义化（Semantic）：让规范具备可扩展性
To support multiple client themes and reduce redesign costs, I emphasize building a semantic layer: name things by their “purpose/meaning” rather than by their “color/appearance/brand name.” That way, when themes change, you only need to adjust the mappings to switch the overall style, avoiding large-scale rework.
3) Unified Web-side references: make the standards a “deliverable” artifact
将 token 输出为 Web 侧可直接使用的形式（例如 CSS Variables），并在前端组件库中统一引用，保证唯一来源：
Implementation of Design and Standards
《UI Design Guidelines》
In addition to building the Core Design System and advancing the implementation of design engineering, I created the "UI Design Guidelines" to better promote the new standards across the team, exported a PDF version, and emailed it to every team member to provide a reference for future development and product design work. Below are some page screenshots.
Core Design System
In Figma design system files, in addition to standard component design, we also provide different usage scenarios for each component, the correct way to use it, and component breakdowns that show all the Design Tokens used by that component, along with a Design Token variable table, delivered to developers in document form.
In the AI era
Good infrastructure enables the team to transform quickly
As we moved forward with the engineering implementation of design, we also witnessed the rapid rise of AI. As a mature SaaS platform, quickly responding to customer needs and adjusting the business is at the core of our daily work. The standard workflow starts with a PM in Chicago creating a ticket and submitting it to the Changsha request pool. The PM and PO in Changsha analyze the requirements and produce the PRD. Designers then complete the visual designs and interactive prototypes, which can be clicked through for demos and hands-on experience. After that, the work is handed off to the launch team for technical design and review, and finally it moves into development, testing, and release.
An AI-powered new workflow: after we completed the engineering foundation for our design process, the PO could directly use Cursor to create a clickable low-fidelity prototype. Based on that prototype, designers could quickly build high-fidelity interactions using only components. In the development phase, the frontend team responsible for the UI layer used Figma MCP to read the page structure, including every page’s components and layout, and AI intelligently matched the corresponding frontend component library to quickly complete page implementation. The frontend team responsible for the logic layer called backend APIs to organize business workflows before moving on to testing and other stages. On average, the time to complete each request was reduced by 50%, greatly improving product delivery speed and quality, while also freeing up more time for experience optimization and other work beyond core business tasks.
As an aside, after I left the company and had dinner with a PO colleague, he said, "You designers made the UI guidelines so good that once AI got going, you basically put yourselves out of a job," hahaha