DESIGN.md

Design

• For CSS-in-JS we use styled components if either the styles are more than 2, supposed to be reused at multiple places, need responsive components (using media-queries).
• rem and pixels both are acceptable.
• We use material-ui library component and follow Material Design Guidelines

Colors and Fonts

• Fonts
  • Chat Message Font: "Product Sans", sans-serif
  • Message Composer Font: "Product Sans", sans-serif
  • Privacy and Terms Page Font: "Lato", sans-serif
  • Chat Message Font Size: 14px
  • Chat Composer Font Size: 16px
  • Privacy and Terms Page Font Size: 1rem

Component Colors of Light theme

• Application Background Colour: #ffffff
• Message History Background Colour: #fcfcfc
• Chat Bubble Colour
  • SUSI.AI Chat bubbles: #f3f2f4
  • User Chat bubbles: #e0e0e0
• Top Bar Colour: #4285f4
• Search Result Colour: #ff9631
• Chat Message Font Colour: #c6dafb
• Message Composer Font Colour: #000000

Component Colors of Dark theme

• Application Background Colour: #000000
• Message History Background Colour: #071E3D
• Chat Bubble Colour
  • SUSI.AI Chat bubbles: #f3f2f4
  • User Chat bubbles: #4285f4
• Top Bar Colour: #4285f4
• Search Result Colour: #ff9631
• Chat Message Font Colour: #c6dafb
• Message Composer Font Colour: #000000
• Privacy and Terms Page Font Colour: #000000