Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

https://www.figma.com/file/SfJC96upoEaXOwPEzIKipC/Style-guide?node-id=0%3A1&t=VfMGzHcxTO9edjbX-1 (More of my progress is on Figma)

There’s a cool Dashboard sample by Figma: https://www.figma.com/file/bMuOBWRPgh5OSo3gR3jiSH/Dashboards-%E2%80%93-Untitled-UI-(untitledui.com)?node-id=0-1&t=sTU5CLfdWaBXrKvB-0 , https://www.untitledui.com/components/dashboards

Colour palette 🎨

...

The colour palette contains the main colours (and their tints and shades) for the dashboard. The hex codes and the HSB (Hue, saturation, brightness) of the colour swatches are shown under the coloured circle.

...

Fun fact: Metropolis is used by Firefox.

Iconography ✨

...

Iconography consists of the icons that the dashboard will be using.

The icons used for iconography are from Flaticon, which provides HTML/CSS integration. Most of the icons included in the iconography are related to the weather/route model modules.

More icons will be added based on what is needed.

Buttons 🔴

...

The buttons are for buttons that you might have to click on the dashboard. Primary buttons are for the “Affirmative” choices, and the secondary button is for the “Cancel” option.

Input fields 📝

...

Input fields are used to enter things as text, like your name!

Input fields can be used with or without the little magnifying glass icon on the left.

Error messages ❌

...

Error messages are used to accompany errors on the dashboard, such as selecting something insufficient, or needing more information to complete a request. The four types of errors shown are success, more information required, warning, and error.

Checkboxes ✅

...

Checkboxes are used to select things. For example, they could be used on the dashboard to select options to filter by on a graph.