feat: init

Documentation/docs/internal-documentation/twake-ecosystem-guidelines.md

@@ -0,0 +1,85 @@
+---
+description: >-
+  Global guidelines for any new projects around Twake, Frontend and Backend
+  guidelines are discussed here.
+---
+
+# 🎨 Twake Ecosystem Guidelines
+
+## Frontend guidelines
+
+### Logo, UI and UX guidelines
+
+#### Logos
+
+{% file src="../assets/logo\_shape.svg" caption="Logo shape in SVG format" %}
+
+#### Colors and fonts
+
+The fonts and colors to use are defined in the document bellow, scroll down for the hexadecimal codes of each color.
+
+![](../assets/screenshot-2021-03-31-at-14.51.23.png)
+
+Colors code extracted from the Twake theme [https://github.com/linagora/Twake/blob/main/twake/frontend/src/app/theme.less](https://github.com/linagora/Twake/blob/main/twake/frontend/src/app/theme.less)
+
+```css
+// Circular Std = France
+// Helvetica Neue = Vietnam
+// TT Norms = Russia
+
+// --- Twake fonts --- //
+@main-font: "Circular Std", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+  "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+
+// --- Twake colors --- //
+@primary: #3840f7;
+@primary-background: #3842f723;
+@primary-hover: #3850f7;
+@secondary: #0d0f38;
+
+@black: #000000;
+@black-alpha-50: #18295288;
+@black-alpha-70: #18295255;
+@grey-background: #f5f5f7;
+@grey-light: #eeeeee;
+@grey-dark: #6a6a6a;
+
+@error: #ff5154;
+@success: #04aa11;
+@warning: #ff8607;
+@white: #fff;
+```
+
+#### Icons and emojis \(⚠️ not validated by UX designer yet\)
+
+Twake is currently using feather icons [https://feathericons.com/](https://feathericons.com/) and can fallback to Material Icons or FontAwesome.
+
+Emojis on web must use the Apple emojis set preferably. On device, prefer to use the device emoji set.
+
+### Frameworks and component system
+
+#### Languages and frameworks
+
+We recommend **TypeScript** and **VueJS** for any new projects around Twake. \(But Twake itself currently uses ReactJS with typescript.\)
+
+#### **Components system**
+
+We strongly recommend using Antd design system: [https://ant.design/](https://ant.design/) for 3 reasons:
+
+1. We want to **differ from Material** UI that is too recognisable
+2. Antd is very customisable, and **we provide a Twake theme here:** [**https://github.com/linagora/Twake/blob/main/twake/frontend/src/app/theme.less**](https://github.com/linagora/Twake/blob/main/twake/frontend/src/app/theme.less)\*\*\*\*
+3. Antd contain more components than Material UI
+
+### Libraries for common use cases
+
+Feel free to add any library in this table.
+
+| Use case        | used by            | prefered library                                         |
+| :-------------- | :----------------- | :------------------------------------------------------- |
+| Infinite scroll | Twake message feed | [https://virtuoso.dev/](https://virtuoso.dev/) \(React\) |
+
+## Backend guidelines
+
+### Programmation languages
+
+### Databases and middlewares