Object styles
Due to Spectrum's focused nature, every object style carries a semantic meaning. Specific shapes or effects are used to communicate intent or give cues about the interaction.
Table of contents#
Rounding#
In Spectrum, almost all components are rounded. Only specific components (e.g., the tip of a tooltip) are exceptions to this rule. This roundness is carried through in the design of icons, as well.
Border width#
In Spectrum, border width is primarily used to outline the frame of a component or to structure content. The border width remains the same for desktop scale and mobile scale.
Drop shadow#
Most components in Spectrum rely on a stark color change (e.g., tooltip) or a background overlay (e.g., dialogs) to differentiate themselves from the rest of the interface. Shadows are reserved for transient components that appear elevated and are dismissible (e.g., dropdown menus).
Changelog#
- This part of Spectrum is now individually versioned (individual versions of existing items start at 5.0.0)