Swatch group

Version 2.0.0

A swatch group is a grouping of swatches that are related to each other.

Key example of a swatch group inside a panel, label Swatches, containing 24 swatches, all with different colors, with the first swatch selected.
DateVersionSpectrumApr 06, 20222.0.0DownloadJan 12, 20211.0.0Download

Anatomy#

Image illustrating through labels the component parts of a swatch group, including 13 individual swatches of different colors, grouped together to create a swatch group.

Options#

Key example of swatch groups containing 18 swatches, all different colors, showing two of the four size options available: extra-small and large.

Size#

Just like swatches, swatch groups come in four different sizes: extra-small, small, medium, and large. The medium size is the default option. This only affects the size of each individual swatch, not the spacing between them.

Key example of swatch groups containing 18 swatches, all different colors, showing three density options available: compact, regular, and spacious.

Density#

Swatch groups come in 3 densities: regular (default), compact, and spacious. Compact and spacious densities retain the same swatch size as regular density but have less or more padding between each swatch, respectively.

Key example of two swatch groups containing 11 swatches, all different colors, with selection enabled and not enabled. Swatch group with selection enabled has first swatch selected.

Enable selection#

By default, selection is not enabled in a swatch group. Selection can be enabled for a swatch group to allow for toggling. This is often used inside of swatch panels.

Key example of two swatch groups containing 11 swatches, all different colors, with selection enabled showing two selection modes available: single and multiple selection. Single selection swatch group has only the first swatch selected. Multiple selection swatch group has the first three swatches selected.

Selection mode#

When selection is enabled, a swatch group can allow for either single or multiple selection of swatches. This is often used inside of swatch panels to allow for bulk operations, such as deleting multiple swatches at once.

Key example of two swatch groups containing 11 swatches, all different colors, with empty selection allowed and not allowed. Swatch group with empty selection not allowed has first swatch selected.

Empty selection#

When selection is enabled, a swatch group's selection behavior can be set to allow for an empty selection, or not.

Table of options#

From the design point of view, each component has a number of options. These options and their names are platform agnostic, and each implementation should adapt these to fit into their framework.

PropertyValuesDefault Valuesizeextra-small / small / medium / largemediumdensitycompact / regular / spaciousregularenable selectionyes / nonoselection modesingle / multiple
Only applicable if selection is enabled.
single
allows empty selectionyes / no
Only applicable if selection is enabled.
no

Behaviors#

Key example of a swatch group containing 11 swatches, all different colors, where swatches with lower contrast have a border.

Border only for low-contrast swatches#

It’s important for users to compare colors when they’re displayed in a swatch group. Because of this, swatches within a swatch group with low contrast (below 3:1 contrast with the background) have a less prominent border compared to the swatch component when used by itself.

Low contrast color swatches have a border of gray-900 at 20%. This reduces the likelihood of the UI interfering with color perception and comparisons.

Usage guidelines#

Corner rounding in swatch groups#

A corner rounding of “none” should be used in a swatch group in order to help minimize the Hermann grid illusion that happens at the intersections of the white space within the group.

The only exception is when a swatch group only takes up a single row. In that case, use any of the rounding options.

do
Key examples showing correct usage of rounding in swatch groups. Swatch group containing 24 swatches, all different colors, in a grid with no rounding. Swatch group containing 4 swatches, 4 different colors, in a single row with full rounding.
dont
Key examples showing incorrect usage of rounding in swatch groups. Swatch group containing 24 swatches, all different colors, in a grid with default rounding. The Hermann grid illusion appears at the intersections of the white space within the group.

Keyboard interactions#

KeyInteractionTabMoves focus to the next swatch in the group.

Changelog#

DateNumberNotesApr 06, 20222.0.0
  • Updated all colors to 6.0.0
Jan 12, 20211.0.0
  • This component has been added to the website

Design checklist#

check

All interactive states

Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).

unchecked

All color themes

Works properly across all four color themes (lightest, light, dark, darkest).

check

All platform scales

Includes a desktop scale (UWP, macOS, web desktop) and a mobile scale (iOS, Android, web mobile).

check

Accessible use of color

Color is not used as the only visual means of conveying information (WCAG 2.0 1.4.1).

N/A

Accessible contrast for text

Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).

unchecked

Accessible contrast for UI components

Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).

check

Content design

UI language and information design considerations have been incorporated into component design.

check

Defined options

Includes relevant options (variant, style, size, orientation, optional iconography, decorations, selection, error state, etc.)

check

Defined behaviors

Includes guidelines for keyboard focus, layout (wrapping, truncation, overflow), animation, interactions, etc.

unchecked

Usage guidelines

Includes a list of dos and don'ts that highlight best practices and common mistakes.

N/A

Writing guidelines

Includes content standards or usage guidelines for how to write or format in-product content for the component.

N/A

Internationalization guidelines

Works properly across various locales and includes guidelines for bi-directionality (RTL).

check

Keyboard interactions

Follows WCAG 2.0 standards for keyboard accessibility guidelines and includes a description of the keyboard interactions.

unchecked

Design tokens

All design attributes (color, typography, layout, animation, etc.) are available as design tokens.

check

UI kit

Includes a downloadable XD file that shows multiple options, states, color themes, and platform scales.

unchecked

Generated UI kit

Includes a downloadable XD file, generated by code using design tokens defined in Spectrum DNA, and shows multiple options, states, color themes, and platform scales.

unchecked

In Spectrum for Adobe XD plugin

Component is included in the Spectrum for Adobe XD plugin.