Web3 Design System

[markoprljic]

Objective

Build the ultimate Web3 Design System.

Rationale

Web3 space has matured to the point where design and interaction patterns are established and being repeatedly used across variety of DApps, throughout many product categories. It is safe to assume that these patterns will remain for a longer time, while new ones will emerge.
However, the Web3 ecosystem is lacking a solid design system that
There were previous attempts in creating a design system, most of which failed due to lack of funding or resources, but IMHO they were too early while the industry and technology was rapidly changing

Competitive advantage

Rimble was one of the first design systems, created by the design team at ConsenSys. No longer available or maintained.
https://github.com/ConsenSysMesh/rimble-ui
https://blog.prototypr.io/this-is-rimble-d0f1ad26b8b6

Aragon used to have a design system but no longer maintains it. Two years old article https://blog.aragon.org/introducing-aragonds-the-new-aragon-design-system/
https://hack.aragon.org/developers/tools/aragonui

Polygon recently launched what they call a web3 design system, but it doesn't have many Web3 components. https://finity.polygon.technology/

Giveth - We built and are maintaining by far the largest Web3 design system known to me. We should leverage that and turn it into a whitelabel version. https://www.figma.com/file/d3ciTS36toS9mra0RAPMe2/Giveth-Design-System-v0.1?node-id=0%3A1&t=9MnrKSCvvxLu1mPf-1

Web3 Design Patterns - I've been collecting web3 design patters in the form of screenshots of various UI elements and components, to full user flows of DApps. We can leverage this resource to build future components and ready made elements for the new design system. https://www.figma.com/file/hfkuj4aaxfAuVbqBQEh0F2/Web3-Patterns-(Community)?node-id=1%3A4

We have a great team of designers and frontend developers experienced in building Web3 products.

Revenue

Freemium model

One-time purchase of selected edition.

1. Community - Free
2. Designer edition - $150 or TBD
3. Developer edition - $250 or TBD

Reference pricing model https://flowbite.com/pro/#pricing

Bundling model

Selling two or more products together as a single unit.
We could create standalone Use-case based DApp UI's (Governance, Wallets, DeFi, NFT etc.) and sell them separately, or bundled with the main design system.

Add-ons model

Design and develop standalone Use-case based DApp UI's (Governance, Wallets, DeFi, NFT etc.) and sell them separately.
Reference categories see here https://neueux.com/apps or in Web3 Design Patterns Figma linked above.

Create new versions of the Design System tailored for different frontend frameworks like React, Vue or other.

Execution

1. Build a Figma Design System
2. Build Tailwind CSS Component Library
3. Create Documentation (Gitbook or similar)
4. Upgrade later to React or other framework

##Targets

• Launch first version by Q2 2023
• ROI by Q3 2023
• Profitable by the end of 2023

Team

Proposed team formation:

• @markoprljic
• @mosaeedi
• @Tosinolawale
• @luizakp

How will this benefit GM?

• Revenue from sales
• Market positioning
• Team satisfaction
• Personal growth

Next steps

• Soft commitment from the team
• Team roster
• Breakdown of all tasks for each member
• Estimation of timeline and budget for each member
• Roadmap planning