> For the complete documentation index, see [llms.txt](https://doc.twake.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.twake.app/internal-documentation/twake-ecosystem-guidelines.md).

# Twake Ecosystem Guidelines

## Frontend guidelines

### Logo, UI and UX guidelines

#### Logos

{% file src="/files/-MX7LcLTtCPEFGMBWuxu" %}
Logo shape in SVG format
{% endfile %}

#### Colors and fonts

The fonts and colors to use are defined in the document bellow, scroll down for the hexadecimal codes of each color.

![](/files/-MX7KkFTYOi1PhGf9gpm)

Colors code extracted from the Twake theme <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/> 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/> 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/> (React) |

## Backend guidelines

### Programmation languages

### Databases and middlewares