# PSE ui kit / {project name}
## Overview
{project name} is a shared ui kit that act as the global design system for all our projects in PSE team. It's designed and built for our unique use cases, and aligns with the core values of Etheruem.org and the Privacy & Scaling Explorations Team.

The ui kit will exist to serve developers, designers and end users. Our primary goal is to improve team productivity and collaboration while applying the best human interaction practices to every project from its conception.

**Workshop#1, Jan 1/18 EST**: https://www.figma.com/file/1p9j4fIa3rU7f2jtIeiOwL/Design-system-UI-kit-workshop?node-id=0%3A1

## Why are we doing this?
Currently, we spend a lot of time writing interface code. A ui kit will help us:

* Increase **productivity**
* Save time by **reusing** UI code
* Improve team **communication**
* **Iterate more rapidly**
* Provide **consistency** to end users

## What are we building?
A white label design system/ui kit that can be used across multiple projects – Specifically apps built on Ethereum that may utilize tech such as ZKPs and rollups. The kit will be comprised of:
* **Figma library** including components, icons and styles
* **Github Repository** including CSS framework and React components
* **Website** with links to resources. [Example](https://primer.style/)

### How might we categorize the contents?
Below are ideas for content categroies. Each can contain components, user flows, guidelines and systems.

**UI Basics**
* Font-face
* Font-size (respsonsiveness)
* Base color scheme
* Grids, columns (on break-points)
* Buttons (including all states)
* Text-link
* Inputs
* Sliders
* Forms
* Dropdown menus
* Radio button/checkbox, multi-select items
* Progress bars
* Steppers
* Header layout
* Modal/popup layout
* Tooltips
* Feedback items including, alerts, toast, notification bars
* and more...

**Wallet specific**
* Wallet signature flow
* Transaction signature flow including success/fail messaging
* ZK specific flows/info/alerts for app wallets
* and more..

**zk specific**
* L2 status (synced, downloading, not connected..)
* Trusted setup verification
* zk private key generation
* zk progress (show progress of cpu & memory use for transparency)
* zk proof data (allow user to validate along with script)
* and more...

**Communication specific**
* Standardized vocabulary that is friendly to everyone
* A view that allows end users to learn more
* Rules for what information can and can not be shared
* How to organize and label screens in a Figma file
* and more..

### Why white label?
Ideally design team would like to setup figma file as such, this will allow us to retain the uniquesness of each projects with its own colors and logo

## How are we going to build this?

Below are some approaches for us to move forward;
1. Using a pre-made base kit (such as MUI or Chakra) and immediately start to tackle on wallet, zk and communication specific needs.
2. Build up the basic UI as atom and then tackle the wallet, zk and communication needs.

**Reference:**
Chakra: https://chakra-ui.com/docs/getting-started
MUI: https://mui.com/
Atom design pattern: https://patternlab.io/
Storybook.js: https://storybook.js.org/

## Next step
* Team review this document and drop in ideas continously on figjam
* Design team will start making the UI basic figma files
* !!important!!
* Set up a voting to settle our approach?
* Find another group time to define "who & what our core value are"
* Find a work time to ideate zk UX