# Platform design system
Do you have any comment or feedback on any of the components? Write it [here](https://docs.google.com/document/d/1sDzcdkMUN3q1a8Hu02uN4t_spCRNWME0G_6w7ZyNA-s/edit?usp=sharing).
## Introduction
### Purpose
The purpose of a design system is to establish consistency across all elements of the product.
### Resources
#### Design resources
The design resources were created in Adobe XD. The development view is available here: https://xd.adobe.com/view/56a667f1-c944-42c4-7aca-e62d9b03b595-2097/
## Base
This following section contains foundation of the design system.
---
### Color
There are two types of colors: neutral and semantic.
**Keep in mind:**
* Do not use color alone as a method of communication. For every use of color as feedback, there should be an accompanying label and/or icon.
* Too much color can create a cognitive overload, affecting users’ ability to interact with our products efficiently.
#### Neutral palette
The neutral palette is not tinted so that they do not distract attention from the main focus on a task or workflow for color manipulation.
#### Semantic palette
Each of the semantic colors has assigned meaning and are used in the UI as a method of communicating with our users.
##### Blue
Code: `#1480FF`
* Used to display actions of informative nature
##### Green
Code: `#28B37D`
* Used to display actions of success
##### Orange
Code: `#FDA210`
* Used for warning
##### Red
Code: `#FF0D4E`
* Used for destructive actions, errors
---
### Icons
The beautiful Feather icons are used on our platform. We use following rule:
* Don't mix Feather icons palette with other icon palette (i.e. Awesome).
---
### Spacing
Spacing is an essential for design system even in most people do not realize. We use 4px grid.
---
### Typography
#### Graphik
Sans-serif type. These widths are used: Regular, Regular Italic, Medium, Semibold.
#### Source Sans Pro
The monospace type. Used for displaying code.
---
## Components
A library of components used across our platform.
### Accordion
Accordion delivers large amounts of content in a small space through progressive disclosure.
A chevron is used to indicate the “expand/collapse” action, though the entire header area is clickable for the same action.
Multiple sections could be expanded at once (that means expanding one section does not automatically close the previously expanded).
---
### Avatar
Avatar is made of image. It can also include: full name and/or username and/or mail address.
If no image is available, user's initials are used.
---
### Breadcrumb
Breadcrumb is a secondary navigation pattern that shows hierarchy among content or traces a user’s path. Breadcrumbs enable users to move quickly up to a parent level or previous step. All links in a breadcrumb should be clickable.
---
### Button
*Section last updated on: 3 Nov 2020*
There are three semantic variants of buttons and each type has types and states.
Variants:
* Primary
* Secondary
* Destructive
Types:
* Filled
* Ghost
States:
* Default
* Hovered (the mouse hovers over the button)
* Active (the mouse clicks the button)
The default button is secondary variant of filled type and has a `padding: 8px 16px;`.
The small buttons have `padding: 4px 8px;`.
**The filled types**
**The ghost types**
Here is the Adobe XD prototype: https://xd.adobe.com/view/3d7f3ca0-3d8a-4761-afb8-16725f7f9fe3-682c/
A button can be also be with an icon. If there is an icon only, it is obligatory to give it a tooltip on hover with a description on what it does.
---
### Card
A card is a container with header and a content. Think of it as a section. The card header can contain hint (with popover) and/or dropdown. An action in a form of ghost button can also be part of header.
---
### Checkbox
Checkbox allows users to select multiple items from a list of individual items, or to mark one individual item as selected.
Checkboxes should always have a label.
There are three states: unselected (default), selected, disabled.
---
### Code
The code can either have form of an inline snippet or a standalone code block.
---
### Dropdown
A dropdown can be depicted as a button or an icon (`more-horizontal`).
---
### Editor
The code editor has an action bar on the top right including: zoom, maximize and copy to clipboard.
---
### Form
A form should be well structured so that it is easily scanned by human.
---
### Input for text
Text input has following states:
1. Default
2. Focus
3. Filled
4. Valid
5. Wrong
6. Disabled
There are other options: Hint, length limit
---
### Link
Link allows users to navigate to a different location. It can be presented inline inside a paragraph or as standalone text. A link has three states: default, hover, visit. A link in a code must be recognizable as a clickable element too.
---
### Message
*Section last updated on 3 Nov 2020*
A message usually holds essential information for the user. The messages can be short and long.
It can also hold a link to a recommended action (maximum 3 links).
There are two types of message UI components.
**The insider type**
This message type is used more frequently, used as a part of the card or inside another container (modal for example). It does not have a border and background color.
**The standalone type**
This type of message is used when the message is standalone and is not part of any container. It comes with a border and a light-colored background.
A message is always accompanied by a colored icon and the text.
There are 4 variants:
* Info – info icon in blue
* Success – check icon in green
* Warning – warning icon in orange
* Abort – x icon in red
The prototype in Adobe XD is here:
1st type – https://xd.adobe.com/view/3d7f3ca0-3d8a-4761-afb8-16725f7f9fe3-682c/screen/558dc932-6f3d-4cb5-b4ad-957ec9260465/
2nd type – https://xd.adobe.com/view/3d7f3ca0-3d8a-4761-afb8-16725f7f9fe3-682c/screen/83cacf6b-9436-44c8-943d-6a5ec99b0480
---
### Modal
Modal displays important information that users need to acknowledge. It appears over the interface and blocks further interactions.
Modal consists of header, body, background and overlay.
The body consists of following elements:
*Title*
All dialogs must have a title. Titles appear in bold at the top of the dialog, and use a few words to convey the outcome of what will happen if a user continues with an action.
*Description*
Dialogs can include a description. Descriptions briefly communicate any additional information or context that a user needs to know in order to make one of the decisions offered by the buttons.
*Action variant*
Can be confirmation, information or destructive one.
---
### Option selector
The option selector is basically a selector from several options. The functionality is the same as multiple radio buttons, however it is visually more compact.
Each of the options have either unselected or selected state.
---
### Pagination
The pagination bar is mostly used in tables for splitting up data into several pages.
Generally, pagination is used if there are more than 25 items displayed in one view. The default number displayed will vary depending on the context.
*Identify current page*
Clearly identify which page the user is on by displaying the current page number. By providing context into how many pages there are in total, you can help provide clarity around the data displayed.
*Multiple forms of navigation*
Previous and next chevrons or links are the most useful way for the user to move forward or backward through pages of data. A simple number input is handy too.
---
### Popover
A popover is like a tooltip, however it can contain more complex information. It appears on click and disappears on second click. It can contain link for example.
---
### Progress
Progress is visual representation of a quantity or an achievement.
---
### Radio button
Radio buttons should always have labels.
Two states: unselected (default), selected, disabled.
A radio button in a disabled state shows that a selection exists, but is not available in that circumstance. This can be used to maintain layout continuity and communicate that an action may become available later.
---
### Search
Senables users to specify a word or a phrase to find relevant pieces of content without the use of navigation. Search can be used as the primary means of discovering content, or as a filter to aid the user in finding content.
---
### Select
Select is a type of input that is used in forms, where a user is submitting data and chooses one option from a list.
#### Multiselect
Multiselect enables selecting multiple options simultaneously.
---
### Slider
Slider allows users to quickly select a value within a range. It should be used when the upper and lower bounds to the range are invariable.
If possible, it should be accompanied with a simple number input. The value of the slider must correspond to the value in the number input at all times.
---
### Steps
The step has three states: default, active and filled.
---
### Stepper
The number stepper has minus and plus icons which enable the user to decrease/increase the value.
---
### Table
A table is a container for displaying information. It allows users to quickly scan, sort, compare, and take action on large amounts of data.
Table always has header and body.
All tables have a hover state regardless of if actions or selections can be made. This aids the user in viewing content in a single row.
**Alignment**
Similar to a paragraph of text, textual data is always left-aligned within a table. Center alignment should never be used.
Numerical data should generally be right-aligned for the ease of scanning and comparing. This should only be left-aligned when numbers are arbitrary identifiers, known as “nominal numbers,” which means they can’t be compared or combined arithmetically (e.g., ZIP codes, IP addresses, phone numbers). Column headers follow the alignment of the data.
**Selection**
Some tables should allow the users to select rows, on which they can take an action. If your a table has selectable rows, the table should have checkboxes to the left of the table.
**No value**
When there are gaps in the data, use an en dash (–) to represent null or not applicable (N/A) values.
---
### Tabs
Tabs can be horizontally positioned or displayed vertically.
Tab items should have a label for accessibility. If a label isn’t present, it must include an icon and becomes an icon-only tab item.
Icons can be displayed in tab items. Icons should only be used in a tab item when absolutely necessary: when adding essential value and having a strong association with the label.
#### States
*Selected*
A tab item in a selected state shows the current tab item. This is shown with a selection indicator (a line) under or next to the selected tab item.
*Disabled*
A tab item in a disabled state shows that the tab item exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that the tab item may become available later.
---
### Tag
Tags allow users to categorize content. They can represent keywords or people, and are grouped to describe an item or a search request.
Tags should always:
* Allow bulk actions
* Disable large group of tasks
* Tag group overflow. When horizontal space is limited in a tag group, the individual tags wrap to form another line.
---
### Toast
A toast holds a brief, temporary notification. It is noticeable, but does not disrupt the user experience and does not require an action to be taken. It is displayed at the top of the screen.
A toast consists of: icon, color swap, message, main body and a cross.
---
### Tooltip
A tooltip allows users to get contextual help or information about specific components when hovering or focusing on them.
All tooltips have label (the text), background and tip.
---
### Uploader
Uploader allows the user to transfer a file or submit content of their own.
## Updates
v0.0.1 - First version (4 March 2020) by Trang
### Roadmap
Sign in with Wallet
Connect another wallet