Smashing Newsletter: Issue #458

Editorial

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)

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)

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.

Smashing Online Events — 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:

Design Token and UI Component Architecture workflow
with Nathan Curtis. June 6–14
Accessibility for Designers ux
with Stéphanie Walter. June 3–12
Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20 – July 2
Advanced Modern CSS Masterclass dev
with Manuel Matuzović. June 24 – July 8
Design Patterns For AI Interfaces ux
with Vitaly Friedman. July 9–23
Fast and Budget-Friendly User Research and Testing workflow
with Paul Boag. Jul 11–25
Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10
Jump to all workshops →

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)

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.

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?

Success at Scale by Addy Osmani
Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Check out all books →

It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.

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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

May 28, 2024 Smashing Newsletter: Issue #458

Previous Issues