Design Systems Digest

No spam. Ever.

← Home

Issue 03

This week we focus on accessibility, suss out what's new with Material, and take a look at 'Nachos', the fresh out of the oven design system from Trello.

Salesforce Lightning – Accessibility Patterns [Link]

On top of documenting their own components, Salesforce has begun to document the underlying accessibility patterns that they're built from. This includes the required markup and behaviour for each pattern, working examples of the patterns for reference when implementing Lightning components, and references to where the patterns are used in the design system.

Only 5 out of the 18 patterns have documentation so far, but it's worth checking out how one of the most mature design systems approaches accessibility.

Writing CSS with Accessibility in Mind [Article]

Coming in at 22 mins, this is a long read if you attack it all in one go, but it's a great collection of tips and patterns that will be valuable for anyone looking to up their understanding of web accessibility.

It's actually the third in a series of articles, with the author also penning useful pieces on writing HTML and JavaScript with accessibility in mind.

What's New in Material Design [Link]

The first major update to Material Design since April brings in patterns for offline states, which will likely be interesting to anyone working on progressive web apps. There are also some less exciting changes made for Android Oreo.

Nachos – Trello's Design System [Link]

Trello have always led with their principles in their product design, and they have evidently done the same with their design system – Nachos embodies their fun voice and tone from the get-go. I think they even managed to sneak in a cheeky stab at Asana's trademark unicorn animation into their motion guidelines...

As funny as it might seem to animate Taco the dog flying across the screen every time a user drags a card (don’t worry, no one is recommending we do this), it doesn’t improve the user experience.

It's interesting that they chose to use images of their components in their documentation rather than the components themselves, which has become quite standard. Maybe it's a cultural thing; Trello is owned by Atlassian, which keeps their own Product guidelines (documented with screenshots) seperate from AtlasKit, their living UI component library.

Design Systems – Alla Kholmatova [Book]

Alla Kholmatova, previously a lead designer at FutureLearn, shares the key qualities of effective, enduring design systems. It’s based on Alla’s experiences, case-studies from Airbnb, Atlassian, Eurostar, TED, and Sipgate, plus 18 months of research and interviews — all attempting to figure out what works and what doesn’t work in real-life products.

This book has been available as a pre-order eBook from Smashing Magazine for a while, but the hardcover will start shipping any day now. I highly recommend it. In fact, I think Part 1: Foundations is worth your money – and that's before you even get to Part 2: Process.

That's all for this week. Thanks for reading!

Curated by
Jack Lo Russo

Runs on