Design Guidelines

Principles

Design guidelines following Don Norman's principles of interaction design:

Visibility · Feedback · Constraints · Mapping · Consistency · Affordance

Theme

• Minimalistic: Simple.

Typography and Fonts

• Style: Sans Serif.
• Main fonts: Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, and Helvetica Neue
• Text should be readable for users with reading-related disorders (e.g., dyslexia) according to WCAG principles.

Color Coordination

• Colors should be friendly for color-blind users according to WCAG principles.
• Background color: Off White #f5f5f5.
• Font color: Dark Grey #1d2124.
• Buttons: Blue #0000ff.
• Income: Green #00ff00.
• Expense: Red #FF0000.

Shadows

• Is allowed to some extent (Buttons etc.).
• Not excessive usage since the website follows a minimalistic theme.
• Product cards should not have any shadows.

Border Rounding

• Components and elements in the website should have rounded corners.
• Corners should only have a slight rounding to preserve the website's minimalistic theme.
• Rounding should match the style of the website font.

Hierarchy

• Components should have a fair amount of spacing between themselves and other components.
• Information and text should only be visible from where it is relevant, ensuring minimalism and that the user does not get overwhelmed.
• Manoeuvring throughout the website should require as few clicks/operations as possible.