2️⃣

Design Tokens

Variables that store values for the base layer of your design system, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.

Colour

0 out of 4

Not only an efficient way to showcase your brand, but also an efficient way to communicate with your users. Colour palettes created with purpose over aesthetics in mind can help you create intuitive design patterns by adding meaning to your interface.

Accessibility Make sure to have accessible pairings between the main colours in your palette. More importantly, make sure that your background and text colours have at least an AA standard contrast ratio between them.

Functional colours Besides your brand colours, make sure to have colours defined and made into variables for functions like disabled states, backgrounds, actions and high contrast text.

Dark mode Preparing a dark mode version of your colour palette will allow your design system to adapt to dark mode and respect what your user wants to see.

Guidelines Provide guidelines on how and when to use the colours in your palette, what to keep in mind when working with them and how not to use them.

Layout

0 out of 4

A well thought out layout goes a long way. Consistent use of a grid and spacing makes it easier for your users to scan the user interface and grasp the content.

Units Units are the most granular building blocks for layout. Defining a set of values with consistent increments (such as 4, 8, 12 and 16 for a 4-point system) will provide you with the foundation when you’re designing your grid and spacing values.

Grid Every layout should sit on a grid that brings order and hierarchy to the interface. Define a grid separately for mobile, tablet and desktop devices with columns, gutters, and margins so your interface can adapt to any platform easily.

Breakpoints Predefine the screen sizes and orientations your grid will adapt to.

Spacing Horizontal and vertical rhythm plays a big role in a layout. You should provide easy methods for adding space between interface elements independent of your grid.

Typography

0 out of 5

Typography is one of the main ways you surface content in products. A clear hierarchy and contrasting styles in your typography scale will make things easier to read and help with the overall structure of your product. It’s also an opportunity to visualise your brand character and presence.

Responsiveness Desktop devices can usually afford to have bigger font sizes compared to mobile devices. Creating a typography scale that adapts to the viewport size will help with a more meaningful hierarchy and layout.

Grid relation Font sizes and leading should match your grid to allow better pairing between text and other UI elements. A good example of this is text paired with icons with bounding boxes.

Readability Optimising the letter spacing (tracking), line height (leading) and line length for your typography scale will help with the readability of text.

Performance Custom fonts need to be downloaded before they can be displayed, especially on the web. Make sure that you have sensible fallbacks and fast loading time for your typography assets. Using system fonts solves this performance problem.

Guidelines Provide guidelines on how and when to use the pairings in your typography scale, what to keep in mind when working with them and how not to use them.

Iconography

0 out of 8

Icons are symbols that represent functionality or content. They’re especially recognisable and helpful in user interfaces since their meaning can be understood at a glance. hough they can be used just for decoration, their full potential can be realised when they’re used meaningfully and consistently.

Accessibility For icons that convey a meaning or serve a function, add the necessary support for screen readers. You can skip this for decorative icons.

Style Make sure that your icon family makes visual sense as a whole. Picking an outlined or filled style and sticking with it will lead to better visual consistency and predictability.

Naming Name your icons based on what they are, not what they represent. For instance, a trash icon should be named trash, not delete. You can still add related keywords to improve discoverability.

Relation with grid Draw your icons in a bounding box that plays well with your grid. This makes for a better pairing with other UI elements. A good example of this would be icons with bounding boxes paired with text.

Sizes Provide different sizes for icons that correlate to your grid. Provide a minimum size and remove unnecessary detail for your icons for smaller sizes.

Keywords Adding keywords will improve the discoverability of each icon and provide a better user experience for anyone using your system.

Reserved icons Reserving icons that represent common actions will prevent their use in any other context. System icons for navigation or adding and deleting are a good example. This leads to a more intuitive user experience.

Guidelines Provide guidelines on how and when to use icons, what to keep in mind when working with them and how not to use them.