Inspired by Material Design and created using Figma, this toolkit can be used to create mobile app prototypes.
Each icon is 24dp x 24dp. This consists of 2dp of padding around a 20 x 20 live area. Each icon has a stroke of 2dp and stays within the live area.
Four basic shapes were used to guide each icon's design and to maintain sizing consistency.
Width: 20dp
Height: 16dp
Width: 16dp
Height: 20dp
Width: 18dp
Height: 18dp
Diameter: 20dp
Primary
#003b76
Secondary (optional)
#94c83d
Accent
#ee4f9c
Backdrops
#003b76
Surfaces
#ffffff
Inactive Elements
#979797
Type (dark)
#003b76
Type (light)
#ffffff
Colours include a primary and optional secondary colour for major components such as bars, controls, and buttons. The accent colour should be applied to important elements such as notification bubbles or floating action buttons, and should otherwise be used sparingly.
App bar and navigation containing:
Card containing:
Dialog box containing:
The bottom navigation bar is the primary form of navigation for an app, and it is used to move laterally between essential, top-level destinations. The bar has a height of 56dp and spans the width of the screen.
Tabs allow users to navigate laterally between related groups of content.
A navigation drawer provides access to app destinations and other functions such as settings and account switching. The drawer may open from the side of the screen or from the bottom.
A top app bar contains the page title and action buttons relevant to that page. These app bars must be consistent in their appearance, layout, and placement. They span the width of the screen and may be 56dp or 128dp in height.
Cards display content such as text and images, as well as relevant actions.
Dialogs display important information and may prompt the user to make a decision. These disable all other app functionality until the user dismisses them or takes the required action. Dialog boxes are 128dp wide.
Buttons communicate actions. They take a variety of forms depending on the importance of the action.
Height: 36dp
Margins: 16dp
Height: 36dp
Margins: 16dp
These buttons perform the primary/most common action on a screen. They appear to ""float" above the rest of the screen content. There should only be one FAB on a screen.
Diameter: 56dp
Diameter: 40dp
Chips represent discrete information and allow the user to filter content, or make selections.
Height: 36dp
Margins: 16dp
Switches are used to toggle a feature on or off. Switches that are toggled on should be more visible than those that are toggled off.
Left: On
Right: Off
Radio buttons are used to select a single option from a list. They are 20dp in diameter and have 2dp of padding.
Left: Selected
Right: Unselected
Checkboxes are used when users can select multiple items from a list. They are 20dp by 20dp with 2dp of padding.
Left: Checked
Right: Unchecked
Sliders are used to select a value from a range. They may be continuous, allowing users to select any value, or discrete, only allowing users to select specific values.
Text fields allow users to enter text. They have a minimum height of 56dp and are 328dp in width.
