Spectrum
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.
Default rounding#
This is the rounding used by the majority of Spectrum components. The corner radius changes with the scale to maintain the component’s proportions, 4 px for desktop scale and 5 px for mobile scale.
Small rounding#
A few components, like the checkbox, have a smaller rounding. In this case, the corner radius is connected to the thickness of its border width in order to have the inside of the border perfectly square and the outside perfectly rounded.
Full rounding#
Full rounding is used sparingly throughout Spectrum, but the most common use is for basic buttons. This shape is meant to draw attention to calls to action.
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.
1 px border#
The 1 px border is the most common border width in Spectrum. This is either used as a typical border (e.g., text fields, tags, popovers) or a divider (e.g., tables, small dividers).
2 px border#
The 2 px stroke emphasizes weight and is used less frequently. This is used as a typical border (e.g., basic buttons), a divider (e.g., medium dividers), or in components that are built primarily out of border wdith (e.g., sliders or tabs). The keyboard focus decoration also uses a 2 px border width.
4 px border#
The 4 px border width is reserved for only large dividers.
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).
Default shadow#
Spectrum uses one default shadow style. The drop shadow dimensions change with the scale (desktop or mobile) to maintain proportions. The opacity also increases on the dark and darkest themes to appear visually consistent with the lighter themes.
Changelog#
| Date | Number | Notes |
|---|---|---|
| Apr 20, 2019 | 5.0.0 |
|
Typography