What is a design system?
A design system is a guide with a set of rules, styles, elements, and instructions that help make websites or applications user-friendly and consistent. A design system offers a library of templates and a style guide. It includes important components such as colours, fonts, buttons, margins, animations and many other details. The design system helps different people to work on the same project in the same style so that everything looks consistent. It simplifies the process of developing and maintaining the product, as all elements are already predefined and customised for use.
Why do companies create design systems?
Companies create design systems to ensure that all their digital products look and work the same. Imagine you are building a website and you want all the buttons, colours, fonts and other elements to be the same. A design system gives developers, designers, and other team members clear instructions on how to use these elements consistently across their projects.
Design systems save time. Instead of reinventing the wheel each time, the team uses pre-made templates, styles, and elements. It's easier for a developer to copy and paste ready and tested code than to write a new piece of code every time. For marketers, it becomes immediately clear what logos, colours, fonts to use in advertising to promote brand recognition. In this way, design systems help to simplify the work of the whole team and work in a coordinated manner. It also helps to create a visually pleasing and understandable user experience. The user will intuitively understand how the website or app works. Design systems help companies to make their products look good, work well and save time.
The main components of design systems
At the core of every design system are components that are used for all types of design work:
- Typography. Recommendations for fonts, sizes, and spacing create a consistent style and readability of text across all materials.
- Colour Palette. A set of approved colours that reflect brand personality and blend together.
- UI components. Libraries of pre-designed and tested elements. These elements can be presented either as code or visually.
- Grids. Grid systems, making the design visually structured.
- Patterns. A library of patterns and combinations of components for reuse.
- Icons and illustrations. Standardised icons and illustrations improve visual communication and maintain a consistent style.
- Dimensions. Specific spacing dimensions between elements that make a layout balanced and organised.
- Content. The pre-conceived tone of voice, style, and direction of the content. For example, there may be set rules on the use of certain words, slang, formal or informal vocabulary.
- Brand guidelines. Instructions on how to use visual elements to ensure a consistent brand presentation.
Principles of a good design system
- Clarity. Documented rules, standards, guidelines and best practices.
- Modularity. Designing components that can be easily combined and reused for future work.
- Scalability. A system capable of adapting to new capabilities, platforms and changes.
- Flexibility. The ability to customise the system for unique needs while maintaining a holistic view.
- Upgradability. The system is open to improvements and updates based on user feedback and changing design trends.
Top 10 successful examples of design systems
Most design systems are built roughly the same way. You can emphasise useful points for yourself and look for inspiration. Therefore, we've picked the most successful design-system examples and best practices.
Material Design by Google
The idea is that components become more familiar and predictable when they behave like real-world objects. Elements like floating action buttons, height guidelines, and a typography system help layouts to be realistic, moving, and responsive. Material Design uses depth, shadows, and movement to mimic the behaviour of real objects in digital space. It features maps, sheets, and layers that create a sense of hierarchy and order in the user interface.
Properties of system design:
- Material Properties
- Material Surfaces
- Movement
- Flexible grid system
- Height and shadows
- Typography
- Colour system
- Buttons and icons
- User input and feedback
- Floating action button
- Customisable themes
- Accessibility
- Components
- Animations
- Cross-platform consistency
Apple's Human Interface Guidelines
Human Interface Guidelines emphasise simplicity and clarity, allowing users to easily interact with applications. The principles emphasise clarity, legibility and minimalist design to avoid creating visual clutter. The guidelines provide a consistent look and feel across iOS, macOS, watchOS and tvOS, encouraging habituation. It also contains the well-known Apple San Francisco font.
Properties of system design:
- Unified design language
- Visual clarity
- Navigation
- Typography
- Iconography
- Colour palette.
- Adaptive layouts
- Interactive elements
- Sensory targeting
- Feedback and animation
- Modal presentation
- Accessibility
- Application extensions
- System components
- Design for AR
- Dark mode
Microsoft Fluent
Fluent Design embodies Microsoft's vision of light, depth, motion, material and scale to create an immersive experience. It is inspired by Microsoft's HoloLens, which merges the physical and digital worlds. Fluent Design introduces "Z-depth" to give elements different heights, creating a tactile experience. Acrylic Effect combines frosted glass with transparency to add a sense of depth and texture to the user interface. Reveal highlights interactive elements when hovering, tapping or focusing. And Pivot and SplitView controls provide consistent ways to navigate.
Properties of system design:
- Depth and material
- Acrylic material
- Motion
- Command interface
- Navigation patterns
- Related animations
- Typography
- Colour system
- Acoustic feedback
- Reveal Highlight effect
- Cross-platform integration
Atlassian Design System
Atlassian Design System is about unity, about working together. Atlassian shows how digital experiences can unlock the potential of any team. Their goal is to promote the effectiveness of individuals and teams.
The Design System makes the look and feel of all Atlassian products unified, which contributes to brand recognition.
Properties of system design:
- A unified experience
- Collaboration
- Resonant grid system
- Typography and icons
- Colour palette
- User interface components
- Navigation templates
- Accessibility
- Motion and animation
- Customisation
- Documentation
- Research and user feedback
- Design patterns
- Cross-platform support
Canvas design system от Hubspot
HubSpot's Canvas system is designed to enable designers and developers to create consistent, user-centred solutions across all their products. The design system integrates with HubSpot's existing tools and technologies. The system strikes a balance between consistency and customisation, allowing teams to adapt components as needed.
Properties of system design:
- Customisation
- Responsive components
- Typography
- Colour palette
- User interface components
- Animation and Interaction
- Documentation
- Feedback
- Design Tokens
- Design patterns
- Integration support
- Design Management
- Modular architecture
Shopify Design System
Shopify helps people become independent by making it easier to create and grow a business. They want to make commerce better and more accessible to everyone. By making it easier to set up, run and grow a business, they allow people to become independent.
Properties of system design:
- Unified experience
- Customisation
- Responsive layouts
- Typography and colour.
- User interface components
- Accessibility
- Animation and interaction
- Documentation
- Feedback
- Design tokens
- Design patterns
- Cross-platform support
- Shopify integration
- Modular Components
- Collaboration
Adobe Spectrum
The main advantage of Spectrum is that if you're already familiar with one Adobe tool, you can easily learn a second one and use its user interface to complete tasks. The system also ensures that work can be done across platforms: if you started a project on an iPad, you can complete it on a desktop or phone.
In addition, Adobe's design system has an XD module. It allows instant access to Spectrum, which uses a design marker system to dynamically draw components. The plug-in allows direct access to a component's documentation to explore all of its variants and properties.
Properties of system design:
- Unified experience
- Collaboration
- Design Tokens:
- Responsive layouts
- Typography and colour
- UI components
- Accessibility
- Animation and interaction
- Documentation
- User-centred design
- Feedback:
- Design patterns
- Cross-platform support:
- Integration with Adobe tools
- Modular approach
- Flexible customisation
Uber
Uber's design system aims to develop a wide range of products and services offered by the company. The system offers advice on creating interfaces suitable for users from different regions. Through real-time data integration, mapping services, and ride experience accounting.
Properties of the system design:
- Global reach
- Modular components
- Localisation
- Data realism
- Integration with maps
- Travel Experience
- Multi-platform support
- Dynamic feedback
- Security
- Personalisation
- Feedback
- Payment Integration
- Dynamic navigation
GitLab Pajamas
GitLab Pajamas stands out because of its emphasis on collaboration, open source participation, and responsive components. A commitment to transparency, adaptability, and accessibility empowers teams and the design community to create products that fit GitLab's style and user needs.
Properties of the system design:
- Unified branding
- Collaborative open source code
- Design tokens
- Responsive components.
- Typography and colour
- UI components
- Accessibility
- Documentation
- Feedback
- Design patterns
- Customisations
- Modular design.
- Openness and transparency
- GitLab integration
IBM Carbon Design System
IBM Carbon Design System is IBM's approach to creating a holistic and consistent design for all of its products and services. The core idea behind the Carbon system is to provide a set of guidelines, resources, and components. These provide a unified user experience, regardless of the platform or IBM product being used.
Properties of system design:
- Unified branding
- Modular components
- Design tokens
- Responsive layouts
- Typography and colour
- Defined typography and colour palette
- UI components
- Accessibility
- Animation and interaction:** Animation and interaction guidelines increase user engagement.
- Documentation
- Design patterns
- Cross-platform support
- Integration with IBM tools
- Customisation
- Collaborative community
Conclusion
The main goal of a design system is to ensure that it looks good and works well across platforms and devices. Remember that for a good design system, teamwork is very important. Designers, developers, and other professionals need to communicate and share ideas to make the system work really well.
If you plan to create a design system, start with a strong base. Determine the most important rules and the basic details you will use. Always remember that everyone should be able to use what you create, so make it accessible to everyone.
Design systems are constantly changing and evolving as new opportunities arise. So constantly listen to your users and update your design system to keep it useful.
Having a design system in place can really make a company stand out. By following these principles and working together, companies can make sure their products are easy to use and look great.
