Threshold Network Web3 Design System

This DS is built with Figma. New to Figma? Check out our guide here: https://github.com/threshold-network/design-system-docs/blob/main/figma-basics.md

This library is used by our team to build products with a consistent user experience. A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

When we first were deciding how we wanted to structure a design system, we evaluated several existing options to see what could be used for a web3 product. The web3 space has several components that are unique and important to the UX of the application, e.g. transaction modals and wallet interactions. No design system fully covered these use cases, so we decided to customize our own on top of an open source Chakra library.

If you use this in your product, we ask that you link back to this repo.

For the Figma library, you can duplicate the Figma file here.

Type of Design System

Threshold's design system is an atomic design system. An atomic design system structures the design system using terminology from Brad Frost’s theory of atomic design. Atomic design divides a user interface into several parts: atoms, molecules, and organisms. This type of design system includes a theming section for visual attributes (colors, typography, branding, etc).

🎯 Goals

• Compile important web3 components.
• Make a resource that was open source for the community.
• Document our research and thinking for these components.
• Create designs and make changes across many files for any Threshold project faster.
• Ensure that designs are consistent across many designers and engineers.

📓 Foundational Principles

To be the most effective, a design system should adhere to the following:

• Consistent. The way components are built and managed follows a predictable pattern.
• Independent. The design system is built as a standalone and a single source of truth.
• Reusable. The components are built so they can be reused in many contexts. While it seems like a simple concept, deciding the level of specificity is tricky - the more specific something is, the less reusable it is.
• Accessible. It’s usable by as many people as possible, no matter how they access the web.

Table of Contents

🎨 Theming

• Typography
• Grids & Breakpoints
• Logos
• Colors
• Icon Library

🧱 Atoms

• Avatar
• Badge
• Banner
• Box Badge
• Buttons
• Card
• Divider
• Inputs
• Notification Pill
• Pending
• Progress Bar
• Selection
• Shadows
• Skeleton
• Slider
• Steps
• Timer
• Tooltip

🏡 Molecules

• Alert
• Feature Banner
• Filter Tab
• Form
• Inline List
• Photo Uploader
• Plan
• Statistics
• Toast
• Voting

🏢 Organisms

• Applications
• Coverage Pool
• Modals
• Navigation
• Rewards
• Staking
• Table
• TVL
• Upgrade
• Wallet

🏙️ Layouts

• Page