Design Guide

The figma file linked down below provides guidelines for the design of our app. Generally we would recommend to use the colors, fonts and icons how they are specified in the frames on the right (Color Palette, Typography, Icons, Buttons). This will help to keep our design consistent across pages and features implemented by different teams.

The frames on the left are based on the paper prototype. They should give an idea for the layout of each page and suggest where to use which type of font,color, etc.. You do not have to implement them exactly as we suggest it, but please use it as a guideline and always keep in mind that the design needs to be compliant with the wishes of the customer and has to fit in with the rest of the app.

To help you understand the details for each page, we added a few guidelines and hints that are annotated as comments.

Figma File