Welcome UI Tokens & Styles (Markdown)

website/build-app/pages/README.md

@@ -0,0 +1,19 @@
+# Welcome UI
+
+Welcome to our design system documentation! Below you will find the entire content of the documentation separated by the main categories. Use this page to navigate and find what you are looking for!
+
+## Content
+
+### Foundations
+- [Design tokens](./foundations/design-tokens.md)
+- [Typography](./foundations/typography.md)
+
+### Components
+- [Button](./components/button/overview.md)
+  - [Overview](./components/button/overview.md)
+  - [Content](./components/button/content.md)
+  - [Usage & behaviour](./components/button/usage-and-behaviour.md)
+
+## Generated documentation
+
+This documentation was generated by [Supernova.io](https://supernova.io). Don't modify it manually as it will be overriden next time generator runs!

website/build-app/pages/components/button/content.md

@@ -0,0 +1,59 @@
+
+# Content
+
+---
+
+# Write meaningful labels
+
+Labels should clearly transcribe what action will occur if the user triggers the button. They should always start with a verb, be short and in sentence case.
+
+Try sticking to the standards, especially for CRUD labels (Save, Delete, Create, etc.) so that the user feels reassured and confident about clicking.
+
+
+![do - short](https://studio-assets.supernova.io/design-systems/81732/02854add-216f-4787-a6e7-300a15692c62.png)  
+do - short  
+
+
+> Yay:  
+> *DO
+*Go straight to the point while being clear.
+
+
+![don't - long](https://studio-assets.supernova.io/design-systems/81732/f739ae20-7a55-44b2-a587-05639b46c64f.png)  
+don't - long  
+
+
+> Please note:  
+> *DON'T 
+*Write overly wordy labels and reinvent well-known standards.
+
+---
+
+# Some standard button names
+
+
+| Column 1 | Column 2 | Column 3 |  
+| --- | --- | --- |  
+| Action type | Button label | Description |  
+| Creating | New | Defining a record’s characteristics from scratch for the first time. This button usually calls an empty form that you fill in. |  
+| Creating | Create | Validate the creation of an item, usually at the bottom of a creation form. |  
+| Creating | Add | Inserting an existing or new record to a list or table. |  
+| Modifying | Edit | Changing a record’s characteristics. This button usually calls an existing form that you can modify. |  
+| Modifying | Apply | Viewing the changes made on the live page before actually saving. |  
+| Saving | Save | Recording the changes made in the database. This button is usually on the main page. |  
+| Deleting | Delete | Erase a record completely or move it to the trash. |  
+| Deleting | Remove | Withdraw an element from a list without deleting it completely. |  
+| Copying | Duplicate | Make an exact copy of a record in the same location. |  
+| Copying | Copy | Make an exact copy of a record to different location or in your clipboard. |  
+| Canceling | Undo | Reverse the last command executed or the latest changes applied. |  
+| Canceling | Leave without saving | Exit the page or screen without saving. |  
+| This action is usually on a dialog box. |  |  |  
+| Canceling | Cancel | Cancel the action and go back to the previous page. |  
+| This action is usually on a dialog box. |  |  |  
+| Canceling | Keep editing | Cancel the action and return to editing (previous step). This action is usually on a dialog box. |  
+| Closing | Close | Close a dialog containing simple information (similar to saying “OK” or clicking the cross symbol). |  
+
+
+Whenever necessary, you can a noun after the action if it clarifies the action.
+
+Example: “Save your order” instead of “Save.”