Iconography

Differentiate between icons and pictograms

IBM offers a set of icons and also a set of pictograms. In this way they can classify both in different ways. The pictograms are more detailed and used for illustrative purposes. 👏🏻

— Source (Carbon Design System)

Resources iconography

Motion

Resources motion

Imagery

Resources imagery

States

Resources states

Layout

Github

• 8 based pixel scale for spacing
• 2 based pixel scale for typography (as much as possible)

— Diana Mounter, GitHub / Source (YouTube)

Barnardo’s

Increments of 4px (0.25rem) for spacing, line heights, …

»This allows us to avoid the need for a variables like medium or large. There you get into a system where you have to memorize the naming conventions for your variables. We’re replacing that with a simple rule you need to remember.«