Design

Colour

Light Theme

Colours available for hover effects, highlight, disabled, negative, positive states and for normal and secondary text in Light Theme.

Dark Theme

Colours available for hover effects, highlight, disabled, negative, positive states and for normal and secondary text in Dark Theme.

Spacing Rules

Spacing can be applied using either margin or padding. Both margin and padding share the same predefined scale, multiples of 8.

Best Practices

• 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.

Shadows & Borders

Box Shadows

Components such as notifications, popovers and panels use the following values for shadows and borders.

Border Radius

Border radius only uses the value of 3px.

Layout

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.

Iconography

Icons are visual representations of commands, files, devices, directories, or common actions and are used to provide visual context and enhance usability.

Sizes

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.

Icons