Cedar provides easy-to-use, preset values to apply consistent spacing within and between components. These spacing tokens help maintain a cohesive visual style across all REI properties.
Spacing symbols are available within the Cedar UI Toolkit and directly reflect the token names in the code ensuring a more efficient handoff between design and development.
The Cedar spacing system is built on three core concepts:
inline. Whether applying space within a container or between two components, the included options make for easier and more consistent design decisions.
inset is the space within a block from which elements—typography, images, icons, and more—are separated from the edge. Cedar offers different options for inset tokens including default, squish and stretch.
inset tokens have all four sides matching in value, resulting in consistent space within the container. The base inset is 16px with options ranging from 2px to 64px. Names are tied to the base 16 and increase or decrease accordingly.
inset-squish reduces top and bottom spacing by 50% relative to the default inset value, resulting in a vertically condensed visual display.
inset-stretch increases top and bottom spacing by 50% relative to the default inset value, resulting in a vertically expanded visual display.
Stack vs Inline
Inset tokens are for space within a container, while
inline tokens adjust the space outside of a component/object. In CSS terms, think of
inset as padding and
inline as margin.
stack tokens to separate components arranged vertically. The last instance of a component should omit this space. The default
stack is 16px with options ranging from 2px to 64px. Names are tied to the base 16 and increase or decrease accordingly.
inline tokens to separate elements arranged horizontally and that may wrap on the right. The last instance of a component should omit this space. The default
inline is 16px with options ranging from 2px to 64px. Names are tied to the base 16 and increase or decrease accordingly.
Generic Space Values
The specific options for
inset may not fit every solution. When this is the case, use the generic spacing tokens to keep consistent spatial concepts and maintenance in code.