Twake
⬅️ Go on twake
  • ☀️ Twake
  • Getting started
    • ▶️Use Twake on twake.app
    • 🏗️Install on your server
      • 🎡Scale with Twake
    • ⚙️Configuration
      • 🔒Security
      • 🔗Custom domain + HTTPS
        • Apache2 configuration
      • 💌Configure mail server
      • 🎨Customisation
      • 🔌Connectors and plugins
      • 👨‍💻 Authentication modes
        • Using Keycloak (LDAP, OpenID and more)
        • Installing Twake with LemonLDAP (LDAP, OpenID and more)
  • How to use it
    • 👋Welcome to Twake !
    • 🧰Console
      • Users
    • 🏢Company & workspace
      • Invite user from Chat
      • Rights
    • 💠Applications
      • 💬Chat
        • Channels
        • Message
      • 📂Drive
        • File and folder
        • Share file with public link
      • 📆Calendar
      • ✅Tasks
      • 🔃Connectors
        • n8n
    • 🖥️Desktop and mobile app
    • 🔒Privacy
  • Developers API
    • 🏠Home
    • 🥇Getting started
      • Create your first application
      • Authenticate with Postman
      • Send a message with your application
      • Trigger action from command
    • ⚙️Application settings
      • Api
      • Display
      • Privileges
      • Identity
    • 📖API Reference
      • Webhook
      • Drive
      • Message
        • DELETE Request
        • POST Request
      • Authentication
    • 🧱Blocks
  • Internal Documentation
    • 🥇Get started
    • 🎨Twake Ecosystem Guidelines
    • 📚Our stack
    • 🧱Backend and APIs
      • 🔑(WIP) Authentication
      • 👥Users and workspaces
      • 🍎Applications
        • Database models
        • REST APIs
      • 🎩Channels and tabs
        • Database models
      • 💬Messages
        • Database models
      • 📄Files
        • Database models
        • REST APIs
        • Resumable.js
      • 📲Notifications
        • Database models
      • 🛠️Twake service development
        • What is a service in Twake ?
        • Create a new service
        • Platform/Technical services
          • Database ORM platform service
    • 🖥️Web, desktop and mobile
      • Table
      • ObjectModal
        • ObjectModalTitle
        • ObjectModalSeparator
        • ObjectModalSectionTitle
        • ObjectModalFormTitle
      • UserListManager
      • MediumPopupManager
      • MenuManager
    • 🎭Translation
Powered by GitBook
On this page
  • Frontend guidelines
  • Logo, UI and UX guidelines
  • Frameworks and component system
  • Libraries for common use cases
  • Backend guidelines
  • Programmation languages
  • Databases and middlewares

Was this helpful?

  1. Internal Documentation

Twake Ecosystem Guidelines

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

PreviousGet startedNextOur stack

Last updated 4 years ago

Was this helpful?

Frontend guidelines

Logo, UI and UX guidelines

Logos

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)

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

  1. We want to differ from Material UI that is too recognisable

  2. 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

Colors code extracted from the Twake theme

Twake is currently using feather icons and can fallback to Material Icons or FontAwesome.

We strongly recommend using Antd design system: for 3 reasons:

Antd is very customisable, and we provide a Twake theme here:

(React)

🎨
https://github.com/linagora/Twake/blob/main/twake/frontend/src/app/theme.less
https://feathericons.com/
https://ant.design/
https://github.com/linagora/Twake/blob/main/twake/frontend/src/app/theme.less
https://virtuoso.dev/
1KB
logo_shape.svg
image
Logo shape in SVG format