Twake Ecosystem Guidelines

Global guidelines for any new projects around Twake, Frontend and Backend guidelines are discussed here.

Frontend guidelines

Logo, UI and UX guidelines


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.
// 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 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: for 3 reasons:
  1. 1.
    We want to differ from Material UI that is too recognisable
  2. 2.
    Antd is very customisable, and we provide a Twake theme here:
  3. 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

Backend guidelines

Programmation languages

Databases and middlewares