Design
Last updated
Last updated
Colours available for hover effects, highlight, disabled, negative, positive states and for normal and secondary text in Light Theme.
Colours available for hover effects, highlight, disabled, negative, positive states and for normal and secondary text in Dark Theme.
Spacing can be applied using either margin or padding. Both margin and padding share the same predefined scale, multiples of 8.
Use multiples of 8px when defining measurements, spacing, and positioning elements.
When necessary use 4px to make more fine tuned adjustments.
Whenever possible, make sure that objects line up, both vertically and horizontally.
Components such as notifications, popovers and panels use the following values for shadows and borders.
Border radius only uses the value of 3px.
Consistent use of a grid system provides the foundation for harmoniously and consistently positioning elements onscreen. Designing to the grid helps create an experience that facilitates understanding and brings order to the page.
Icons are visual representations of commands, files, devices, directories, or common actions and are used to provide visual context and enhance usability.
Icons are auto-scaled to provide four additional sizes: small (16px), medium (20px), large (24px), reducing the visual complexity of elements in tiny sizes. Exceptions to this are object icons which only have two sizes and are custom designed.
