Skip to content
Designer Decisions

Space Examples

Size values

SizeValue
<ShowDecision d="Size Unit" viz="square" />
8

Size scales

SizeScale (default viz / xs size)
<ShowDecision d="Layout Gap Scale" size="xs" />
8px
16px
32px
64px
128px
SizeScale (vertical bar viz)
<ShowDecision d="Layout Rhythm Scale" viz="bar-v" />
32px
48px
72px
108px
SizeScale (square viz vs circle viz)
<ShowDecision d="Sizing Scale" viz="square" />
<ShowDecision d="Sizing Scale" viz="circle" />
32px
48px
72px
108px
32px
48px
72px
108px

Cards

SpaceValue (DecisionCard / model and params shown)
<ShowDecisionCard d="Size Unit" model params>
Size Unit
8

Base unit for size scales

Model:

size-value/explicit

Params:

  • value

    8

SizeScale (DecisionCard / column layout)
<ShowDecisionCard d="Sizing Scale" layout={["column","row"]}>
Sizing Scale
32px
48px
72px
108px

Scale for component sizing

See also