Interested in learning how to start creating design system for your company – we cover design languages, style guide and toolkits on day 2 on UI Fundamentals of each of our monthly courses.
Design systems and UI kits
Having a solid design system has plenty of benefits: making your UI consistent and familiar across different apps and websites of your company, helping different teams collaborate more effectively and reducing duplicate work, creating unified tone of voice when communicating with your customers across different channels – are just a few of these. We've listed some of the design systems for you to explore and get inspired by, including their official UI kits:
Microsoft's Fluent Design System
The new open-source design system by Microsoft is truly cross-platform – not only for Windows, but also for web, iOS, macOS and Android: microsoft.com/design/fluent
- Web toolkit for Sketch and Figma
- iOS toolkit for Sketch and Figma
- Android toolkit for Sketch and Figma
- Windows toolkit for Figma
- Other resources
Apple's Human Interface Guidelines
Comprehensive set of guidelines by Apple for iOS, MacOS, watchOS and tvOS: developer.apple.com/design/human-interface-guidelines
- iOS UI library for Sketch and Adobe XD
- macOS UI library for Sketch and Adobe XD
- watchOS UI library for Sketch and Adobe XD
- Other resources
Google's Material Design
Popular design system by Google inspired by the physical world and its textures backed by open-source code: material.io/design
- Design kit for Sketch and Figma
- Other resources
IBM's Design Language
IBM's own Design Language (use to be called “living language”) is a shared vocabulary for design. Its open-source Carbon design system is used to build products and experiences within the company: ibm.com/design/language
- Design kit for Sketch and Adobe XD
- Other resources
GOV.UK's Design System
UK government has their very own design system to ensure consistency of numerous services and avoid repeating work that’s already been done by other teams within the organisation: design-system.service.gov.uk
- GOV.UK Prototype Kit
U.S. Government's Web Design System
American government made it easier to build accessible, mobile-friendly government websites for the American public with its design system: designsystem.digital.gov
- Design files for Sketch and Adobe XD
- Other resources
Shopify's Polaris Design System
Design system is not only about UI though. Here's the video recording of the talk from TheUXConf by UX Manager at Shopify's Polaris Design System Hayley Hughes on “Creating Unity, Not Uniformity with Design Language Systems” that shows how having design system can help collaboration.
- UI Kit for Sketch
Transport for London's Style Guide
Part of the Digital Design Toolkit, Transport for London's style guide for defines the interactive visual language of its website and digital services for those preparing content, designing an interface or developing an entire service: tfl.gov.uk
- Style Guide
- Other resources
Uber's Base Web Design System
Uber's design system called Base is a common language between designers, developers, and PMs in their organisation, making it easier for them to work together and quickly. Their library is open-source and helps easily creating web applications not only inside Uber but also to be used by other companies: baseweb.design
- Components Library for React
- Brand guide system elements
The City of Oslo's Visual Interface
With visual identify being a part of a bigger design system, it's not a simple task to design one for a city. In this talk at TheUXConf brand strategist John Aurtande from Norwegian experience agency Creuna shares design process & challenges building new identity for Oslo that helps its residents connect & thrive: creuna.com/en/cases/a-unifying-identity-for-oslo/.
British Gas' Nucleus Design System
Nucleus is an inclusive, community driven design system by British Gas enabling teams across the company to deliver consistent and accessible experiences: britishgas.design
- Components storybook
- Documentation
Project Tags
Companies
The School of UX
- Education & Research