Terms
- Card - a generic box-shaped container that can hold any content and has little pre-defined design. SWAN instead uses "Tile" to refer to its components that have a regular treatment for an image, a title, and some other (optional) content.
- Token - AKA Design Token, an individual value used in the design system, such as a color value, a dimension, a breakpoint, or any other CSS property value.
- Popup - to avoid confusion, SWAN generally avoids referring to something as a "popup", since this term can be used to refer to a variety of UX components that "pop up", such as a Popover, a Modal Dialog, an Alert Box that slides up from the bottom of the screen, a tooltip, or launching a separate browser window.
- Selection - a choice that a user can make from a list of choices, as part of a Selection Set. Functionally, this is a radio button or checkbox, even if it doesn't look like one.
- Slider - to avoid confusion, SWAN generally avoids referring to something as "slider" alone, since this term can be used to refer to a variety of UX components that slide, such as a Carousel, a Range input, or a scrollable box with scrollbars.
- Stepper - to avoid confusion, SWAN generally avoids referring to something as "stepper", since this term can be used to refer to a variety of UX components, e.g. something that shows progress through a series of steps (SWAN's Step Indicator), or a number input with + and - minus buttons next to it.
- Tile - a small section of the page (such as a product tile) with defined typography and spacing, featuring at least an image and a tile name below it. A tile may contain additional information, and may or may not have a visible border. SWAN uses the term "Tile" for these regular sections, reserving the term "Card" for a more generic component that has no pre-defined design for its content.
- Tooltip - SWAN avoids the term "tooltip", since a tooltip typically displays on hover, and contains only a small amount of text with no interactive content. Our Popover component is similar to a tooltip, but displays on click, and may contain interactive elements.
- Vanilla - the interface for SWAN that requires only HTML and plain JavaScript, so it can be used with any framework. Contrast with the React interface, which works only on pages that use React.
- Visage - Vista's design system prior to SWAN. (Visage was originally called "The Vistaprint UI Library and Design System" prior to being renamed to "Visage" in 2020.)
Scales
These are the units that SWAN uses for various axes:
- T-shirt sizes - SWAN uses t-shirt sizing (XS, SM, MD, LG, XL) for its screen sizes and their related breakpoints. Extra-Small covers most phones, Small covers most tablets, Medium covers the smaller desktop monitors, and so on.
- Numerical scale - SWAN uses a numerical scale for its Spacing system, starting with 1 for the smallest unit of spacing.
- Mini/super - SWAN uses "mini" and "super" as the names for height variants of components, with "mini" representing a shorter version, and "super" being a taller one.
