Design Systems

Style Guides Website

From the podcast

Design System Links

Carbon Design System

Carbon Design System

Consists of a few major sections: Guidelines, Style, Components, Resources and Component Status.

Guidelines

Accessibility

Carbon shows emphasis on using the tabindex correctly and allowing a Skip to content option when there is lengthy navigation so a user may access main content faster.

An example of a personal, basic implementation can be found over at the blog for Qantas.

Content

Conversation levels for Carbon have been established with examples to portay a tone reflective of the company values. What is the difference between voice and tone? As IBM puts it:

Simply put, we have the same voice all the time, but our tone often changes. Consider this: You have one voice, but you most likely use a certain tone when you are having coffee with friends and a different tone when you are meeting with your boss.

Tense and sentence structure have continued to haunt me since high school English, but thankfully we now have well thought out and refactored methods and examples to help us out.

Principles

Style

The style section gives an overview of the standard colours, grids, iconography, typography and motion. Each section provides video examples and even copy options where relavent (colours as an example of a hover that allows you to copy the hex on a click).

Components

The components section gives examples of implmentation and shows images of the buttons in different states.

A11y Style Guide

When it comes to accessibility, your goto reference must be the A11y style guide.

The structure is broken down into the following:

For anyone who has had the pleasure of writing forms in HTML, this style guide is worth its weight in gold.

It also contains more information on implementing skip links.

One line worth considering in your mantra comes from the base of the media section: Build your media with accessibility in mind! It is much easier to work accessibility into the beginning than trying to tack it on later.. Can I get an hallelujah?

Worthy notes on videos is to offer a transcript or alternative audio track to allow users the option to read or listen to the video.

Material Design

Google's Material Design.

One of the stronger points of this style guide is coverage of devices and screen sizes it keeps reference too. The motion section (a personal favourite) is pletiful with useful gems.

The guide puts an emphasis on larger screens vs tablets vs wearables vs mobile devices, something I hadn't even considered prior to reading through their motion section.

The choreography section itself has many elegant examples that guide you through their principles in practise - something even someone like myself, a layperson to the great church of animation, can appreciate.

Colour

Material Design even has an incredible palette available to help you with deciding upon colour schemes.

Patterns

The section I am most impressed with is the Patterns section. This section itself places an emphasis on employing healthy, regulated design patterns to put into practise.

Growth & communications

Another section seen sparingly across style guides is a section that details customer-application communications. A simple use case applicable to all application builders is an onboarding process, and explains three onboarding models that are accepted and when and when not to employ a particular model.

Platforms

The Platforms section of this style guide also gives insight to platform adaption.

viljamisdesign.com

Viljami Salminen is a Finnish product designer. A personal ode to his own design guidelines viljamisdesign.com. Whereas most style guides on this list are highly regulated and continually improved naturally over time through corporate implementation, having a reference to a personally written style guide echoes an individual's mantra. This is both a great way to convey to clients the culmination of your own style and experience.

Atlassian design

Atlassian design.

Hot off the heels of their new AUD$10 billion dollar valued office in Sydney CBD and during the beta of their latest iteration of their product line, this is a great chance for you to watch Atlassian push their design practise from staging to production. The guide holds many similiar stables in the concept of writing style and foundations, but a great addition to their guide is a section to inform good practise on presentations, a necessary skill if you ever plan on wooing a room full of people.

Dropbox Branding

Dropbox Brading

Government Guidelines

UK USA

Microservices

Logging

Artcile from Rising Stack

Coding

Concerning factors

Workplace Best Practises

Mathemetic Concepts

Inspiration