The Fabric Design System is a library of user interface components to create finance apps, like Centrifuge Pools. The system offers a shared language of semantic primitives and is available both in design and code, thus bridging the gap between specification and implementation, serving designers and developers alike.
A sound system not only for synesthetes. Image credit: Walfordodyssey (CC BY-SA 3.0)
Say you have a brilliant feature idea for the Centrifuge Pools app and you want to mock up its user interface. Or maybe you’d like to build an entirely new app on top of the Centrifuge protocol, and you need an exhaustive and carefully tuned system of components to go full boom…
Welcome the Fabric Design System. This post introduces what a design system is for, what Fabric is about, and gets you started with using it yourself.
Fabric design system hosted on Figma Community
What is a design system?
The Nielsen Norman Group offers a good definition. The used term scale applies both to the number of different apps, and the scope of one individual app.
A design system is a complete set of standards intended to manage design at scale using reusable components and patterns. Source
Why a design system?
For creation, a design system offers an unlimited range of expression within defined constraints. These constraints – the predefined parts – empower non-designers to quickly ideate and prototype solution ideas. The design system serves as frame to focus on solving design problems.
A design system built on a solid architecture allows standardization and reuse of solutions, so one does not end up with an app consisting of multiple custom solutions. A system of coherent parts allows for consistency and fast evolution; because of its modular nature, changing a style or a component takes effect in all instances.
What is Fabric?
The Fabric Design System is the set of parts that our Centrifuge Pools app is made with. These parts are common user interface elements, like buttons, cards, input elements, or tables, which have been carefully considered to be composed into one coherent app. Every component has its style built in – so you, as the design system user, don’t have to fuss with picking the right color, font, margin, and icon. The protocol’s brand values – bold, visionary, trustworthy, reliable, inclusive, and collaborative – have materialized in the styles and components.
Think about the Fabric components as the basic ingredients and the app (e.g. Centrifuge Pools) as the finished solution integrating these components. For example, Centrifuge Pools has a specific detail header, which uses the Fabric components object thumbnail, heading, button, and tab navigation. This separation is because Fabric aims to be a universal system rather than being limited to just one application.
How can I use Fabric?
The best way to use Fabric is by trying it out.
To create a new design, use the Figma library.
This primer video shows how.
To start building directly in code, head over to the Apps repo, and browse the components on Storybook.
These are the steps on how to use the Figma library:
- Duplicate the Fabric design system on Figma Community to copy it to your Drafts folder
- Browse the component examples to get an overview of the configuration capabilities
- Copy the examples to create your own compositions
How can I apply my own brand?
In a similar fashion to how components are decoupled from a single-app use case, the theme is abstracted from a particular brand identity. The default brand is the Centrifuge Brand.
The theme is based on two accent colors: primary, and secondary. To adapt Fabric to your own brand, define the primary and secondary colors, and then assign them to the semantic color styles, like backgroundButtonPrimary, or borderFocus.
In addition, the primary accent color uses a scale of 10 shades which are used as highlight and interactive color, and charts.
Now what?
Centrifuge Pools is the first app using Fabric, and we’re curious to see it being adopted by the community. After all, it’s meant to be a useful workhorse – go ahead and try it! And let us know your thoughts, feedback, and suggestions.
Acknowledgments
A design system is not built in a day, and it’s not built by a single person either. Credit where credit is due – special thanks go to @araya 
for the visual design, and @Onno & @sophia for development.
Appendix: List of components
Buttons
- Button: A button of three types, two sizes, and a left or right icon
- Button-wallet: A custom secondary button to connect or change a chain address
Cards
- Card-expandable: A card that can be expanded and collapsed in place by clicking the header
- Card-interactive: A link card with header and body
- Card-interactive-image: A link card with a header and a body
- Card-static: A card with a header and a body
Charts
- Chart-line: Values mapped over time
- Chart-pie: Distribution of the parts of a whole
Chips
- Address: An address chip to show an address hash and functions
- Address-menu: Menu of address to show entire address, and related actions
- Pill: A status pill, AKA chip
Feedback
- Feedback-banner: An application-global, dismissible banner
- Feedback-card: Card with message and optional actions
- Feedback-inline: Inline feedback with icon and expression
- Feedback-toast: Application-global notification toast
Form
- Input-checkbox: Multiple selection option
- Input-currency: Number input for currency amount, including balance status and maximum balance setter
- Input-file: File upload
- Input-number: Number input with format
- Input-radio: Single selection option
- Input-range: Slider to select a value range
- Input-select: Dropdown with options menu
- Input-text: Text input field with optional action
- Property-label: Label with optional tooltip indicator
- Property-value: Read-only value of property
- Select-option: Option of dropdown menu
- Text-area: Multiple line text input field
Icons
- 94 icons, from Address to Wallet
Navigation
- Link: Link token in default and small size
- Menu-navigation: A vertical navigation menu
- Menu-navigation-item: Individual item of menu navigation
- Tab-navigation: A horizontal tab navigation
- Tab-navigation-item: Individual item of tab navigation
- Toggle-group: A group to toggle a selection
- Toggle-group-item: Individual item of toggle group
Overlays
- Menu-overlay: An overlay menu of actions
- Menu-overlay-item: Individual item of overlay menu
- Modal-overlay: A modal overlay card with shadow
- Tooltip: Tooltip with optional title
Table
- Table: Data table with header row and body rows
- Table-body: Individual table body cell with text, structured text, thumbnail, or action content
- Table-header: Table header cell with optional sorting flag and tooltip indicator
Thumbnails
- Thumbnail: Thumbnail with Pool, Token, Asset and NFT object types and optional preview of uploaded image
