What's included

• Colour Palette

  Directions on which colours are to be used within the restrictions of the visual identity. Potentially separated into Primary, Secondary, Alternatives, Grayscale or brand and themes.

• Grid System

  Grid Systems are necessary to ensure your brand's visual consistency and output. We will set a clear set of rules to outline the structure of which the grids are to be implemented and used by the developers to improve scalability and ensure your product looks great on any device.

• Typography Hierarchy

  Today's digital solutions require clear outlines of the typography hierarchy and structure. Within the Design System that I build, I will create a base hierarchy that changes/scales based on the grid system (screen size).

• Spacing

  A simple outline of how spacing can be used within the design system.

• Icons, Illustrations, and custom vector visuals

  Many use icon libraries for standardised icons. I often recommend Google Material Design's icon library to cover the standard requirements but leave open the opportunity for illustrations and custom vector visuals if such should be necessary within your visual identity. We have this page within the system to help developers export vectors easily and ensure you get the best quality displayed in your product. Furthermore, this creates a clear overview of what has to be implemented or is available within the Design System.

• Accordions, Buttons, and Toggles

  We will cover the options available for accordions, buttons, and toggles in a clear overview. This is mostly to ensure consistency and recognisability, but also to help developers understand how these should look and be created.

• Form Elements

  We will cover all of the required elements to create forms, e.g. Radio Buttons, Checkboxes, Simple on/off toggle buttons, Input field, Textarea, Select block, Datepicker, Sliders, and potentially more advanced options such as; Select with Search, Multi-select (and with search), Advanced Datepicker. All of this depends on what your solution requires. We will cater to those needs, but keep some of the beyond-necessary elements if they could be of future use.

• Common Modules

  Not all solutions might require these, but there will be some basic subjects covered by the system that perhaps can be used in the future. E.g. Alerts/Notifications, Avatars, Breadcrumbs, Dividers, Progress bar, and Pagination.

• Logo, Favicon, and images

  There will be another page covering some of the brand necessities such as your brand logo(s), the favicon required for browsers, and image components to be used within the design. Usually, different image components covering environment, culture, product, and avatar images.

• Article Structure (if necessary)

  Many write posts, have news, or otherwise publish things to gain organic traffic or share with their customers or community. To cover such areas we set up a general structure for how this content should look – ensuring readability and the optimal spacing between elements.

• Effects

  Not all use these, but if we do use a drop shadow, blur effect or the alike then we should cover this in the system as well. Mostly to make developers aware of the options so that they ensure these are possible within the solution they develop.

• Custom Cursor

  Of course, this subject is not possible on touch devices, mobile and tablet, but elsewhere many modern digital solutions advance themselves by using custom cursors as an additional support to the accessibility design. These thoughts and aspects have to be covered visually as well for the developers and for us to know which possibilities there are to choose from. In a simple overview, we will visually display such options and create any we find necessary.