create an effective design system to guide visual consistency and manage scaleability across the muval products, using core principles of atomic design.
Grid
A 4pt grid system provides the granularity required for the dense nature of the Muval platform.
12 column desktop grid and 4 column mobile grid gives us the most flexibility for our layout
Typography
Muval has a lot of information to give, so it's important it's delivered in a way that fits the brand. GT Haptik is both fun, modern and legible and Roboto is widely used and recognisable.
The type scale communicates the rhythm and relationships of how these typefaces work together. The golden ditonic scale has been closely referenced to build the Muval typescale which is a reflection of the golden ratio. The use of size and weight creates a visual heirarchy and a unitless line height of 1.2 and 1.4 is applied to headers and body copy to support readability.
Colour
Muval colours are split into sets of primary, secondary, neutral, semantic and extended colours.
Primary, secondary, neutral and semantic colours are used for elements like buttons, type, controls and status information.
The extended colour palette supports UI elements like tags and flags that label or categorise information.
Iconography
Icons communicate an action, object or idea. Muval uses a combination of system icons, large icons and illustrations to achieve this.
Elevation
Muval uses various levels of elevation throughout the UI to create depth.
There are three levels of elevation used for large elements, like cards; small elements, like switches and badges; and elements that float over the entire UI like tooltips and popups.
Corners
Slightly rounded corners communicate a friendly and welcoming interface.
Muval uses 8px radius for larger elements like cards and 4px radius for smaller elements like tags and checkboxes.
Buttons
Muval uses blue buttons for their internal platform and orange buttons for their marketing website. The button system follows a hierarchal structure based on the button’s level of importance. Each contain large and small sizes and state variations, depending on the interaction made with the button.
Text fields
The text field system includes options for text only, prefix, suffix, leading icon and trailing icon with states for each default, hover, active, disabled and error.
Dropdowns
Dropdowns are designed with adaptablility to cater for all use cases across the muval platform. Dropdowns also contain their own state system, identical to text fields.
Controls
Primarily used in forms and throughout the Muval CRM, controls are used to collect user input.
Toggles
Toggles are used to switch states on or off
Radio buttons
Radio buttons are used when there’s a single selection to be made from a set of options
Checkbox
Use a checkbox when there’s one or multiple options to select
Chips
Chips are used when selecting from a set of categorised information
Indicators
Indicators are visual cues that Muval uses to communicate status states or provide more information about an element.
Lozenge
Lozenge indicates the status of a job
Tooltips
Tooltips provide further information or
context about an object
Tags
Tags are used to categorise or flag an element and can be permanent or removable