User Interface Style¶
Context¶
Mathesar’s user interface design encompasses its visual elements and interactions’ aesthetic, responsiveness, efficiency, and accessibility. Essentially what the user sees when they interact with the product.
General Guidelines¶
Fonts¶
Mathesar’s user interface should incorporate a readable sans-serif font that is optimized for web and mobile interfaces.
Scale¶
The distance between the smallest and largest font size on a typographic scale should be minimal and just enough to create contrast and hierarchy between content.
Contrast¶
The design should employ contrast to improve the readability of interface elements and increase the visual relevance of some interactive elements.
Accesibility¶
The contrast of the design should be based on Web Content Accessibility Guidelines. (WCAG)
Colors¶
The design should support both light and dark modes and apply colors in a way that emphasizes important elements that assist users in:
- Identifying type of objects (table, views)
- Differentiating states of objects (active, default, disabled)
- Cell, row, and column positioning
- Status of a task (saving, loading, adding, deleting)
Themes¶
The design should allow modification of its colors via themes so that users can suit it to their preferences.