Design System - tempus-app/wiki GitHub Wiki
The design system consists of all styles and reusable components that are part of the Tempus UI.
Typography
Fonts:
Color palette
The tempus color palette consists of a primary and an accent color, as well as varying shades of these hues throughout the application.
Icons
We will be using the Material UI icon library throughout the application.
Components
Tempus components are based off of Material UI Angular components, and stylized to fit our design system. A list of all UI components and their use can be found here.
Angular Material Theme
Our theme file outlines a tempus palette (for primary and accent colors) as well as an alert palette. Read more about theming here.
1. Primary: base blue color palette that makes up the majority of components
Notable colors:
- 900 - font color
- 800 - font color
- 500 (default) - chip color
- 200 - sidebar
- 100 - search bar, cards
- 50 - background
2. Accent: green color palette for buttons, sidebar accents
Notable colors:
- 800 (default) - buttons
- 300 - footer, sidebar accents
- 100 - available table rows
Alerts
An alert theme can be applied to components under the CSS class .alert-theme. In order: primary, accent, warn
