Sitemap
EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Follow publication

Visual Breaking Change in Design Systems

8 min readAug 25, 2018

--

Can adopters upgrade to a minor release confident that their UI won’t break due to a system’s visual changes?

Breaking Color

Adjusting background color of a primary button

Example: System Text on Custom Backgrounds

Color contrast checking via contrast-grid.eightshapes.com
Adjusting text color of a ghost button label on unpredictable backgrounds

Example: System Backgrounds with Custom Overlaid Text

Adjusting background color of a Card that allows contained custom content

Breaking Typography (By Wrapping)

Example: Wrapping Tabs Are Awful

After a minor version upgrade, unresponsive tabs wrap. Not good.

Example: Letter Spacing Mayhem

Breaking Space and Size

Example 1: Removing Vertical Spacing

Originally set with vertical spacing built in, a system removes margins. And so forms look smooshed.

Example 2: Custom Sizing Based on Assumed Spacing

A custom icon toolbar wraps after a padding change. Ewww.

Contained, Non-Breaking Spatial Change

What Else Can Break Visual Style?

Adjusting border colors of a component arranged near other components

So, What’s a Visual Breaking Change?

--

--

EightShapes
EightShapes

Published in EightShapes

A collection of stories, studies, and deep thinking from EightShapes

Nathan Curtis
Nathan Curtis

Written by Nathan Curtis

Design systems consultant contributing to the field through the specs plugin, writing and workshops. VT & @uchicago grad.

Responses (5)