Styling Strategy
The design of the application was created using Figma, a software for UX/UI design and prototyping. This section outlines the key design guidelines to ensure a consistent development process. By following these guidelines, new components can be seamlessly integrated into the existing design, maintaining a unified and cohesive look throughout the user interface.
The design uses two different fonts:
- Lato for headlines
- Nunito Sans for the text body
The design of the application uses four main colors. Additional colors can be used as long as they are based on this palette, for example, by lightening or darkening them with black or white. The background color is always the light gray tone, while the body text is consistently in black. This ensures a cohesive and visually harmonious appearance.
- light green:
#ACB63B - dark green:
#4C7741 - light grey:
#FCFCFC - dark grey:
#171717
All other used colors can be found in the tailwind.config.ts.
For accessibility reasons, not all color combinations should be used. To ensure sufficient contrast and readability, refer to the following graphic, which was created using EightShapes Contrast Grid. This helps maintain an inclusive design that is accessible to all users.
