- Design language
- Design Tokens
- Core components
- Input checkbox
- Input radio
- Input text
- Input switch
- Loading indicator
- Project Management
- Task management
Like any language, a design language is a methodical way of communicating with your audience through your approach to product design. It’s the cornerstone of consistent customer experiences.
Brand drives every single decision you make when building new products or features. A good brand is much more than a name and a logo. It’s the values that define your unique identity and what makes you stand out from others.
Vision Why you exist, what your values are and how they’ll help guide the future of your product.
Design principles The considerations that guide the basis of your practice. They outline how you approach design from a philosophical perspective and help with everyday decisions.
Tone of voice A clear tone of voice defines how you speak to your audience at every moment in their journey, helping them get wherever they want to go.
Terminology Create the standard terms and phrases that need to be kept the same throughout the user experience, speeding up the design process and unifying your voice.
Writing guidelines Every consistent experience needs watertight writing. Laying down the foundations for your house style early keeps everything in line with consistent grammar, style choices and action-oriented language to help your design.
Most customers form an opinion about a product in seconds. In most cases, your logo will be the first brand asset someone sees. It’s all about making the right first impression. A distinctive logo helps users recognise a product immediately and gives them the essence of your branding.
Monochrome version A monochrome version of your logo that looks good on top of photography or when it’s printed with a poor quality printer.
Small use guidance Your logo must perform well and be recognisable at all sizes. Tips for using your logo in these cases will minimise the risk of it being misused.
Placement and clearance guidance Your logo must come with clear guidance on how to place it and how to preserve its space since it lives along with other content.
Usage guidance These are the logo crimes, providing contextual examples of what to (not) do with your logo.
Different file formats Providing a variety of formats for the vector version of your logo will make it easier for others to work and prevent anyone from redrawing it.
Providing guidance on how to approach common UX patterns will allow your organisation to establish a consistent approach and a consistent user experience on any platform.
Accessibility Guidelines for how you approach accessibility and how you leverage colour, hierarchy and assistive technologies to help your users.
User onboarding How you onboard your users to your product or a new feature and give them a great experience from the start.
Notifications and permissions Guardrails for how to write for the components that make up your designs, from style and technical rules to channeling your tone of voice correctly through copy.
Microcopy guidelines The standard way to write for the components in your design system. These take platform conventions and best practices for writing all into consideration.
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.
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.
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.
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.
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.
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.
Components are the main building blocks for user interfaces. Building a reusable component library enhances your product development workflow by reducing design and tech debt and speeding up the process. Core components can’t be broken down into granular pieces without losing their meaning.
0 out of 6
Avatars are used to show a thumbnail of a user photo or a visual representation of any other type of content.
0 out of 2
Badges are elements that represent the status of an object or user input value.
0 out of 6
Banners display an actionable message used as a prominent way of communicating with your users.
0 out of 9
Buttons are interactive elements used for single-step actions.
Focused state Used when a button gets selected through keyboard navigation.
Icon support Icons easily communicate the purpose of the button when used next to its label or can be used without text when there’s not enough space. Make sure that the accessibility label is provided when used with an icon only.
Disabled Visually shows that a button is not interactive and restricts it from being pressed.
Loading Used when users have to wait for the result of their action after they press a button. If a spinner is used to display this state make sure that it’s not changing the original button width or height.
Full-width By default buttons take the width of their content, but they should also come with a full width variant that works well in mobile devices.
Variants When using multiple buttons, there should be a way to differentiate between primary and secondary actions. Buttons may play different roles for the user or be used on different types of surfaces and they have to change the way they look.
Sizes Buttons can be used in different areas of the website and may have multiple predefined sizes. On mobile, tappable areas have to be a minimum of 48px to be accessible according to iOS and Android accessibility guidelines.
0 out of 5
Cards are used to group information about subjects and their related actions.
Supports any type of content Cards are one of the most used components in the product, so they have to be flexible enough to support any other components placed in them.
Information structure No matter how flexible cards are, it’s important for cards to have a specific structure for its elements for product consistency.
Supports media sections One of the most popular scenarios for using cards is mixing them with media content. The most popular options are having a full-width area on top of the content or full-height area at one of the card’s sides.
Supplementary actions Cards can be used with actions usually placed at the bottom of the card, or the card itself can be tappable and represent an action.
Responsiveness On mobile viewports cards are usually full-width in order to save space for the content.
0 out of 6
Carousels stack the same type of items and allows scrolling through them horizontally.
Navigation controls Carousels should have easy-to-find navigation controls for scrolling through content.
Supports any content Carousels can be used in different contexts and shouldn’t be limited to a specific child component. In some scenarios you might want items within the same carousel to differ from each other.
Items width customisation For simple products, it might be fine to use multiple predefined sizes for carousel items. For more flexibility, it’s good to provide a way to define a custom width.
Touch events support Carousels should be scrollable on touch devices. Some of the best practices are to use native scrolling and to make sure you’re supporting the same behaviour for all touch devices, not just mobile phones.
Keyboard navigation It should be possible to scroll through content with keyboard arrows when focused on navigation controls.
Responsiveness It’s good practice to hide or reduce the size of navigation controls for mobile viewports to improve the visibility of the content.
0 out of 7
Dropdowns are used to display a contextual subview with a list of actions or content related to the area where the dropdown is.
Supports any type of content Dropdowns may be used in a lot of contexts like date pickers, language selection or other product features.
Action menu One of the most used scenarios for dropdowns is providing an action menu for the user, so it’s useful to have this layout defined.
Focus trapping Once the dropdown’s opened, the focus should work only for elements inside the dropdown. When it’s closed, the focus should move to the dropdown trigger.
Close action Either some actions inside the dropdown should close it or there should be a separate close button. Also, it’s good practice to close the dropdown when a user clicks outside.
Keyboard navigation It should be possible to navigate through dropdown children elements with the keyboard and close it with an Esc key.
Dynamic positioning Dropdown content should be displayed based on the current position of the trigger element on the screen and always visible to the user.
Responsiveness Dropdown content should be adapted for mobile viewpoints as it may take a lot of space on desktops.
0 out of 2
The icon component is a way to align the way iconography static assets are displayed in the product.
Sizes Icons should have a number of predefined sizes to provide a holistic experience across the product. Typography pairings may be used for these size values to ensure that they are aligned with the text sizes.
Colours Icons should be using values from the design system colour palette. Using parent element text colour for icon fill colour can make this automatic.
0 out of 7
An input checkbox is a form element used for selecting one or multiple options.
Checked state Used when the checkbox is selected and will use its value for the form submission.
Disabled state Prevents checkbox interactions and removes its value from the form submission.
Indeterminate state Used when the checkbox has children selectable elements and only some of them are selected.
Label There should be a text label linked with the checkbox field. Clicking the label should also trigger the checkbox selection.
Error state The error state is used for form validation errors when the error is related to the checkbox field only. Always use a text error along with changing the colour of the field.
Keyboard support Checkbox selections should be triggered with the Space key. Using native elements for this should provide this kind of interaction out of the box.
Checkbox group Checkboxes can be grouped to work with multiple values at the same time.
0 out of 6
An input radio is a form element used for selecting one option from a list.
Checked state Used when the radio is selected and will use its value for the form submission. A radio input can’t be unselected by pressing it again.
Disabled state Prevents radio interactions and removes its value from the form submission.
Label There should be a text label linked with the radio field. Clicking the label should also trigger the radio selection.
Error state The error state is used for form validation errors when the error is related to the radio field only. Always use a text error along with changing the colour of the field.
Keyboard support A radio selection should be triggered when the Space key is pressed. Using native elements for this should provide this kind of interaction out of the box.
Radio group Radio inputs should always be used in a group. If one of them is selected, it can be deselected only by choosing another radio.
0 out of 6
Input text lets users enter and edit text.
Disabled state Prevents input interactions and removes its value from the form submission.
Placeholder When there’s no value entered, show a placeholder with a potential value example. Don’t use placeholders as labels for the inputs.
Label There should be a text label linked with the text field. Clicking the label should move the focus to the field.
Error state The error state is used for form validation errors when the error is related to the text field only. Always use a text error along with changing the colour of the field.
Autocomplete When applicable, adding support for the HTML autocomplete attribute will allow users to easily enter different data types.
Icon support Icons are used to describe input methods, express a text field state or provide additional functionality.
0 out of 4
Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.
Checked state Used when an input switch is turned on. It’s better to provide an additional way to indicate the checked state besides changing its colour when applicable.
Disabled state Prevents interacting with an input switch.
Label There should be a text label linked with the switch field. Clicking the label should also trigger the input selection.
Keyboard support A switch selection should be triggered when the Space key is pressed.
0 out of 4
Lists define the layout of the page content or groups of elements stacking them vertically or horizontally.
Supports any type of content Lists can be used in any context from page-level layout to managing offsets between granular components. hey should work with any component used inside.
Horizontal stacking Lists can be used for inline elements and they have to manage how they’re stacked horizontally, including handling offsets between multiple rows of elements.
Divided variant Lists with dividers are the best practice advised by many platform guidelines (especially on mobile).
Supports actionable content Sometimes lists are used for grouping tappable components, where the whole area of the list item should be clickable.
0 out of 4
The loading indicator shows that an operation’s being performed and how long the process will take.
Linear and non-linear variants Depending on the context and the component it’s used for, the loading indicator can be represented either with linear or with a non-linear (e.g. circular) variant.
Determinate or indeterminate wait time In some cases, the wait time can’t be determined. The loading indicator should be shown until the loading finishes or an error happens. In other cases, it’s better to indicate how much time’s left until the loading is done.
Light variant The loading indicator should respect its parent element background and provide a variant to be used on darker background colours.
Reduced motion The loading indicator should be synced with the system motion settings and reduce its animation speed when reduced motion settings are turned on.
0 out of 6
Modals are containers appearing in front of the main content to provide critical information or an actionable piece of content.
Supports any type of content Like any other container, modals can be used in different scenarios and you should be able to use it with any other component inside.
Supplementary actions Since content in the modal may be actionable, it’s important to have an area for action elements. This area is usually located at the bottom of the modal container.
Close action Modals should provide a clear way to be closed as they’re blocking content when open. This may be either a separate close button or one of the supplementary actions.
Information structure Even though modals can be used as an empty container for the content, they need a defined information structure to provide a holistic experience. It may include defining how titles and subtitles look by default or where an action element’s area is.
Keyboard navigation support It should be possible to close a modal by pressing the Esc key and all the focusable elements inside the modal container should be accessible with keyboard navigation.
Focus trapping Once a modal is opened, the focus should be moved to the first element inside the modal and should be looped within the modal container. Closing the modal should return the focus to the last focused element on the page.
0 out of 5
Tabs organise navigation between multiple pages or content sections.
Active button state There should be a clear differentiation between selected and unselected tab buttons.
Button icon support Icons help show the purpose of the tab buttons when used next to its label.
Equally-sized tab buttons Tabs can be used in a relatively small-sized container where you need to switch between a definite number of sections. For such scenarios, it’s better to support a variant where the button’s area is divided equally.
Keyboard navigation All tab buttons should be focusable and navigation between the tab’s component should be accessible from the keyboard.
Responsiveness If all tabs on mobile don’t fit into the viewport, users should still have access to all tab buttons. Ways to solve this can be making the button area scrollable for mobile or showing a More button containing a dropdown with the rest of the buttons.
0 out of 5
Toasts provide short meaningful feedback messages about the action results.
Dismissed automatically Toast messages shouldn’t interrupt the user flow, block the screen for a long time or require additional action from the user.
Action support Besides displaying the message, toasts may also provide an action related to the message like undoing an action.
Handles multiple instances Even though it doesn’t happen often, toasts can be called from multiple sources at the same time and all resulting toasts should be queued. It’s good practice not to show all the messages at the same time.
Accessibility Toast messages should be announced by the voice assistive technology and their action should be easily accessible from the keyboard.
Responsiveness Toasts should be aligned with the mobile viewport and their action should be easily reachable for tapping.
0 out of 5
Tooltips are desktop-only components that display additional information when hovering over or focusing on an element.
Keyboard hover support Tooltips should be accessible when an element is focused using the keyboard.
Dynamic positioning Tooltip content should be displayed based on the current position of the trigger element on the screen and always visible to the user.
Hover timeout Having a small timeout before triggering a tooltip will help to prevent occasionally showing tooltips while users move their mouse cursor.
Light variant The tooltip should respect its parent element background and provide a variant to be used on darker background colours.
Instant transition for element groups If there’s a group of elements using tooltips, hovering over another element while a tooltip’s already active shouldn’t trigger the animation.
To make things efficient for anyone using your design system, make tooling essential. Find the workflows where you can integrate things with the tools people use. This helps organically spread your design system and make it crucial to people’s daily work.
0 out of 4
The UI and UX in a design system need to be tied to development as much as possible. The tools in this checklist should help designers and developers work better together.
0 out of 10
One of the main challenges in developing a design system isn’t building the components. It’s making your code stable, easy to read and contribute to.
Design systems are no different than any other project your team might take on. In order to successfully build and maintain one, you need a clear strategy that’s well executed daily, and you‘ll need to create opportunities for your colleagues to give feedback to help share your design system together.
0 out of 3
Solid task management and workflows are a crucial step in executing any project. Adopting a methodology like Agile or Kanban helps you cover a lot of ground.
0 out of 4
Your users play a great role in shaping your design system. Creating communication channels where they can raise their voices helps you keep track of how they’re using your system. It’ll also improve their sense of ownership and the adoption of your system.
0 out of 4
Data isn’t the only driving factor when it comes to the development of design systems. Keeping a sharp eye on how your system’s used in the development process and the end product can inform your go-forward strategy.