Dobré odpoledne Smashing Friends,
When we speak about design systems, we often speak about the big ones — from Carbon to Material and Fluent, from Adobe to Uber, from AirBnB to Salesforce. Yet many teams are meticulously working on much smaller design systems, often customized for very specific needs and very specific purposes.
In this newsletter, we bring some of the remarkable design systems into the spotlight — design systems for insurance companies, in-car interfaces, digital publications and healthcare. We hope you’ll find them useful.
Ah, if you have any questions about UX, design patterns, design systems, or pretty much anything in-between, join me in the “Ask Me Anything” session (free for everyone) on Tue, June 4 — answering your questions and your UX challenges! With a dash of Smart Interface Design Patterns, of course!
For now, though, let’s dive into obscure but impressive design systems out there!
— Vitaly
1. Design Systems Database
How do other design systems solve a particular UI design challenge? No matter if you’re looking for inspiration on designing an accordion, date picker, progress indicator, or any other component, the Design Systems Database is a wonderful place to start your research.
Created by Ilya Greben, the database organizes and sorts 65 best-in-class design systems by components and directories. You can search for component references, guidelines, and technical documentation from various sections of design systems. Perfect for anyone who’s looking for UI patterns and examples from real-world products. (cm)
2. Design System For Car Interfaces
Designing in-car user interfaces isn’t a challenge many designers face in their day-to-day business. However, it is still interesting to see how the big names in the automotive industry tackle the challenge. Particularly with regards to combining security and usability in one environment.
An interesting design system to dive into comes from Škoda. Škoda Flow pins down guidelines for components and applications of in-car interfaces, including do’s and don’ts, examples, mobile implementation, UX writing, and a showcase of templates and pages. An impressive piece of work.
Looking for more? Vitaly collected more resources all around in-car UX, with design systems from renown brands, case studies, and actionable insights. (cm)
From our sponsor
Catch Page Speed Regressions Before They Happen
We actually don’t need to log in much. We’ve set up performance budgets and deploy-based testing. We just wait to get alerts and then dive in to fix things. Track the metrics that matter, including Core Web Vitals. Stay fast. We’ll show you how.
3. Design System For Public Transportion
When looking for accessible design guidelines, public services are usually a fantastic source. One such outstanding example is the design system for public transportation in Berlin.
The BVG design system includes a Notion hub, documentation, Figma libraries and video tutorials for designers, and React components for developers. A wonderful effort for creating simple, accessible, and efficient products.
For more public transport design systems, also be sure to check out the ones for the Swiss railway company SBB, the Swedish railway design system, and Helsinki’s public transportation service. The design systems for Transport for West Midlands and the journey planner Ruter also offer interesting insights. (cm)
4. Design System For Healthcare
Bringing together everything required to manage a healthcare business digitally, Nordhealth creates software that aims to redefine healthcare. As such, their design system Nord is heavily focused on accessibility.
Nord offers plenty of customization options, themes, and a fully-fledged CSS framework, plus dedicated guides to topics such as naming conventions, localization, and colors. Interesting insights are guaranteed. (cm)
From our sponsor
What Can Good Data Do For You? Twilio Segment Can Help Empower Teams.
Deliver world-class experiences with good data.
5. Design Systems For Insurance And Investment
A great example of a well-structured and thorough design system that also highlights business benefits comes from the insurance and investment company Aviva. Designed for websites, apps, and emails, it includes a variety of guidelines that enable designers and developers to deliver maintainable and accessible experiences across platforms.
The system includes the atomic design system ION, a dedicated mobile design system toolkit, as well as an accessibility manual, theming guidelines, development standards, and guides for content designers and QA.
If you want to dive deeper into design systems for the insurance and investment sector, also check out Vitaly’s list of design systems from insurance companies and online banking. Kudos to the designers and developers for their wonderful efforts in sharing their work for everyone to use. (cm)
6. Upcoming Workshops and Conferences
As you probably know, we run friendly online workshops on frontend and UX, be it design systems, accessibility, performance, or complex UIs. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s a quick overview:
7. Design Systems For Digital Publications
Design systems to report news and publish content often have practical guidelines around topics that most design systems don’t cover. One such example is News UK’s design system NewsKit. Available as an open-source project, it includes everything you need to build scalable and accessible digital products.
NewsKit’s full-featured theming system is adaptive and can be customized to meet single or multi-brand requirements for both business and consumer products. To get you started, the NewsKit component library is available as a Figma kit, and there’s also a dedicated Figma kit to help you choose onboarding methods and components. A real gem.
Other fantastic design systems from news and publishing companies you might want to look into are Origo by NRK, Wikimedia’s Codex, Schibsted’s visual design, and the design systems by The Economist, The Washington Post, and The Guardian. (cm)
From our sponsor
The State of Frontend Survey Waits For You
Sharing your thoughts on daily practices, favorite tools, and more will only take a few minutes. Whether you’re a junior or a CTO, we want your opinion for a full picture. Together, we create a valuable resource for the frontend community. Click here and have your say.
8. Design Systems For Education
Design systems for schools and universities often cover design patterns that typically go beyond the complexities of UIs. They dive deep into content design patterns, content types, CMS, and governance, and even cover emails and MS Word document templates. That’s not something you usually find in a design system.
A notable example of a design system from the education sector is the Vanderbilt Design System. It allows you to toggle the grid overlay with 0, toggle through light, dark, and tone themes with 1, toggle the component highlighters with 2, and press s on any foundation or component page to show or hide the sidebar. What a nifty little feature to use in a design system.
Looking for more? Vitaly compiled a list of design systems from colleges, schools, faculties, and universities worldwide that are great examples for solving complex challenges such as filtering, pathfinders, timelines, tables, and governance.
From our sponsor
Frontend Nation: The Biggest Free Online Frontend Event Ever
Join the largest online frontend dev community gathering. Our 4-day
conference features 3 days of talks from 65+ experts, plus 1 day of live coding challenges across Vue.js, React and Angular. Register for FREE today — you won’t want to miss this. Sign up today!
9. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
10. Recent Smashing Articles
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
