# 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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.twake.app/internal-documentation/twake-ecosystem-guidelines.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.