Sitemap
EightShapes

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

Follow publication

Size in Design Systems

11 min readApr 26, 2019

--

Approaching Density With Sizes That Unify Height

Size Resulting from Space and Type
Inconsistent Component Height

Sizing Components, Step-by-Step

1. Identify and Name the Size You Need

2. Identify Components To Unify Height Across Sizes

Common components across which height is unified

3. Start with Button or Input

Button by size

4. Unify Typography

Button and Input with associated mixins used for typography

5. Unify Space

Button and Input with associated space tokens
Grid of components by size

6. Extend and Override the Model Per Component, As Needed

Overrides to default spacing models to account for borders and adjacent elements

Lessons Learned

Implementing Component by Component Leads to Inconsistency

Same Size Name, Different Size Outcomes
Component naming inconsistency — Medium and Small — for the same visual size
Component availability unpredictability or incompleteness

Unify Size Holistically in a Single Pass

Not Every Component Needs Every Size

Medium and Large Alert (Small Unnecessary)
Small and Medium Tag (Large Unnecessary)

Avoid Using “Sizes” for Single-Dimension Options Like Width

Modals available at three discrete widths
Popovers available at two discrete widths

Type Hierarchy ≠ Size. Relate Them, Per Component Size

One heading set applied across component sizes
Heading level sets per component size

Mix and Match Sizes During Composition

Mapping icon size to button size
While small and large buttons have a fixed icon, the medium button offers choice

--

--

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 (2)