Fabric Design System
A library of user interface components to create finance apps
◎ How might we formalize the user interface of Centrifuge app so that the parts form a coherent whole, can be reused, and have a configurable theme?
A startup moves fast in order to survive; similarly, its product needs to quickly evolve or even morph into something new. A system of standardized parts allows one to ideate and prototype solutions quickly while giving guidance by constraints.
Together with the front-end developer and the visual designer, I defined the goals for what the design system was meant to afford. These goals are:
- Financial use case
- Applicable to different apps
- Brandeable & themeable
- Available in code
Financial use case: The scope and the types of components are defined by its application, the Centrifuge app. In addition to general, all-purpose components, this means tables, charts, and representations of assets, like tokens.
Applicable to different apps: Components are kept as generic and abstract as possible in order to be adaptive and reusable for multiple apps. Thus, higher-level, app-specific compounds such as a header, or a navigation sidebar panel are decoupled from the design system.
Brandable: The default style is branded by the Centrifuge identity, reflecting the brand values bold, visionary, trustworthy, reliable, inclusive, and collaborative. Crypto is hard, and still a niche, so we wanted Fabric to be natural and unassuming — as bread-and-butter as possible.
Themeable: The design system is architected in a way that the theme can be adapted to other brands. The theme is based on two accent colours: primary, and secondary, each color using a scale of 10 shades. Theming Fabric is easy: define the applicable accent color scales, then assign the abstract color constants to the semantic color styles, like backgroundButtonPrimary, or borderFocus.
Available in code: Fabric is both a Figma library and a code repository, serving designers and developers alike by bridging the gap between specification and implementation.
The design system was developed in parallel with the Centrifuge app – we continuously added new components and iteratively refined them. This meant going up and down the ladder of abstraction between application and definition: defining a concrete solution in the app and then abstracting it into a design system component. It involved switching between Figma and implementation. Such tight feedback loops between specification and implementation proved to be fruitful for creation. ¶