Key Definitions

Local snapshot only. The workspace page is authoritative.

Use the alphabetical links below to navigate the glossary.

Go to: | A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z

Acronym	Definition
A/B Testing	A/B testing is the practice of comparing two versions of a web page with a single variable online to determine which one performs better.
Above/below the fold	“Above the fold” refers to content that is visible at the top of a website; the user doesn’t need to scroll to see it. “Below the fold” refers to content further down the page which the user would need to scroll in order to see. In UX, it’s important to put meaningful, important content above the fold (for example, a header).
Accessibility	The degree to which your product is inclusive of and usable by the broadest range of individuals. We see this in our physical spaces, with a ramp for an individual with temporary or permanent limited mobility to use instead of stairs. And while an individual that needs a ramp to access a building is helped, an individual that may have taken the stairs can also use and benefit from a ramp.
Accordion
Aesthetic-usability effect	A phenomenon in which people believe a more aesthetically pleasing product is easier to use than a less-aesthetic design — even if it’s not easier to use.
Aesthetics	The philosophy of exploring the perceptions of beauty and artistic taste, with a focus on how our minds react when we perceive art in any form, such as music, poetry, sculpture, and more. It is a study of how we feel about art, discerning what we do and don't like, and how it can affect us emotionally.
Affordance	Affordances are clues that tell us what an element can do to us. Think of a door. The handle is an affordance designed to tell us it can be pulled or pushed. On user interfaces, affordances help clearly communicate to users what can and cannot be done on a screen. Buttons on interfaces, for example, afford being pressed to trigger an action.
Alert	An Alert is used for confirmations, alerts, and acknowledgments that require minimal user interaction.
Alignment	An element of organizing visual elements, alignment is a critical concept in building consistency and hierarchy in a composition. An effective design practice to visually define lines, spaces, or to draw a viewer's focus. The absence of alignment can also be used to attract attention. There are several types of alignment. With objects, the options of alignment are vertically center, horizontally center, top-aligned, right-aligned, bottom-aligned, and left-aligned. With text elements, left-aligned is also known as left justified and ragged right, right-aligned is also known as right justified and ragged left. Type can also be aligned top, center, and bottom within a text box. Optical alignment is when objects or text are adjusted to be perceived as if they are in alignment with other objects or margins. This may be necessary with shapes and letters that don't have straight edges, such as circles and triangles or angular letters like A, V, W, and Y.
Alt text	Short for alternative text, and also known as alt tag, alt description, and alt attributes, it is code within a webpage or app used to provide a meaningful description of what an image communicates. Alt text is exposed by screen readers and may be crucial for individuals navigating your page or product with reduced vision. In programming, it should be applied to every image within the HTML code by including an alt tag. It should be added even if the image is decorative, in which case the tag should be empty.
Analogous	In colour theory, analogous colour schemes are sets of three colours next to each other on the colour wheel. They are typically two colours from the primary or secondary colour schemes, with the third colour being a mix of the dominant two. For example, blue, green, and blue-green. It is essential that analogous colour sets have enough contrast for accessibility.
Analytics	Analytics measure human behavior on a site. They help us better understand and interpret patterns of behavior on the products we use.
Animation	A simulation of movement by the rapid appearance of images in sequence.
Appendix	A section at the end of a book, document, or other reading material that offers additional information on the contents of or sources referenced in the text. An appendix usually provides additional context to explain a topic further and can contain bibliographic data.
Ascender	In typography, an ascender is a part of a lowercase letter that rises above the x-height of the typeface, such as in the letters b, d, f, h, k, l, t. Together with descenders, these typographic characteristics can increase legibility.
Aspect ratio	The relationship of the width in proportion to the height of an image, Frame, or screen. For example, 16:9, a conventional aspect ratio used by high definition (HD) televisions that have a resolution of 1920x1080. 4:3 and 3:4 are aspect ratios that are commonly used in photography. The iPhone X screen is 375 points wide and 812 points tall (1125x2436 pixels), making it a 9:19.5 aspect ratio.
Badges
Banner	A component displaying a prominent message and related optional actions.
Baseline	In typography, a line that runs along the bottom of text which the letters “sit” upon. For most typefaces, characters that have descenders, like g or j, extend below the baseline. Some characters overlap the baseline only slightly, like o or a, as seen in this image with the “a” in Figma.
Bézier curve	A path connecting two vector points that is not straight. Originating in mathematics, this graphic element is one of the fundamental aspects of drawing vector shapes and lines. Bézier Curves are created and manipulated with the Pen Tool and Bend Tool. Bézier Curves are also used in animation to determine the velocity of an object's movement over time.
Bibliography	Found in the appendix of books and written documents, it is a list of references and sources utilized for the research and creation of the text.
Bitmap	A raster graphics image file format where each pixel, or "bit," is defined by a single colour. All the bits combined together are arranged to make up the larger image. The "map" part of the name references the dimensions of the image and the instructions for how the bits are arranged.
Boolean operation	In design, the functions Union, Subtract, Intersect, and Exclude are used to combine vector objects in different ways. Boolean Operations originated in mathematical logic using combinations of True and False. Boolean logic is commonly used in computer programming. See how Boolean Operations are used when designing in this video.
Bottom sheet	A component containing supplementary content that’s anchored to the bottom of the screen.
Bowl	In typography, the curved stroke of a letter, glyph, or numeral that encloses a space. Such as in lowercase letters a, b, d, g, o, p, and q, the capital letters B, D, O, P, and Q, as well as the numerals 0, 6, 8, and 9. A larger sized bowl can increase readability, especially when set in smaller type sizes.
Breadcrumbs	Breadcrumbs are a navigation system used to show a user's location in a site or app.
Buttons	A button triggers an event or action.
Card	A component containing content and actions that relate information about a subject.
Calendar	An interactive calendar for date selection experiences.
Checkbox	A component allowing users to select one or more items from a set. Checkboxes can turn an option on or off.
Chip	A component for helping people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
CMS	Content management system. This is a system for storing content, and is often hosted inside / used as a database.
CMS Components	Coded and editable design elements used in the backend Content Management System (CMS). These components are accessible to Digital Retail teams via Content Stack and allow for flexible content management across the platform.
colour depth	How many colours a computer screen can display, based on the number of bits per pixel.
colour vision deficiency	A condition where a person’s eyes are unable to see colours in common light situations. People with colour vision deficiency have a hard time telling colours apart. Most people who suffer from colour vision deficiency are not blind to colour but have a reduced ability to see them. However, the most severe forms of these deficiencies are referred to as colour blindness.
Colour
Contrast	Difference between colours. For accessibility, contrast refers strictly to the difference in tone. A difference of 40 in tone guarantees a WCAG contrast ratio ≥ 3.0; a difference of 50 in tone guarantees a contrast ratio ≥ 4.5.
Component	Reusable design elements created in the Figma design platform and implemented across the company platforms. They help maintain consistency and efficiency in design.
Copy	The written material for a design. This is the non-placeholder text that is used for headings, subheading, body text, or other written elements of a product. It is the output of Copywriters, Copy Editors, or Content Producers, and sometimes is written by Product Managers, Designers, or other stakeholders.
Counter	In typography, the enclosed space within a letter, glyph, or numeral. Such as in almost every letter and number with exceptions like i, l, and 1. When counters are enclosed by curved strokes, the strokes are called bowls. A counter that is not fully enclosed is sometimes referred to as an Open Counter, as seen in the "F," "g," and "m." The size of a counter can affect readability, and can become identifying factors in a typeface.
Data table	A component displaying sets of data across rows and columns.
Date picker	A component that lets users select a date, or a range of dates.
Descender	In typography, a descender is a letter where part of it extends below the baseline, such as the lowercase g, j, p, q, and y in most typefaces. Some typefaces also have numbers that descend below the baseline, such as the numbers 3, 4, 5, 7, and 9 in Balthazar. This is called an old-style numeral.
Design Components	Components are the reusable building blocks of our design library. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
Design Debt	When we initially launch a product, we design a well-thought-out and cohesive design Library for it. As the product grows, we often add new features and elements and scrap old ones. Pressed with deadlines and the desire to move fast, it is easy to skip over the valuable design concepts we started out with. As a result, the new elements or features we add don’t quite fit and a choppy user experience emerges. A design Library that has accrued design debt is made up of elements and features that will need to be cleaned up later on. The efforts made to quickly set them in place eventually generate more work down the line.
Design Foundations	Foundations are the visual elements needed to create engaging layouts and end-to-end user experiences.
Design guidelines	Guidelines are descriptive written and illustrated docs that demonstrate usage and behavior mainly through examples. They're the long-form discussion of specs that help designers and developers with problem-solving and decision-making.
Design Library	A series of Design foundation, Design components and Design patterns that can be reused in different combinations. Design libraries allow you to manage design at scale.
Design Patterns	Patterns are reusable combinations of components that solve common user problems. These best practice solutions help users achieve their goals and help ensure consistency across experiences.
Design Principals	A description of the principles, standards, methods, and tools we use in UI Design.
Design specs	Specs are annotated designs and docs that specify the values and parameters that define a component or a feature’s coded capabilities.
Design tokens	A design token represents a small, reusable design decision that’s part of a design Library's visual style. Tokens replace static values with self-explanatory names.
Design tokens: Context	The set of conditions in which tokens can point to non-default values (for example, dark theme, dense layout).
Design tokens: Role	A shortened version of the Library token name (for example, Secondary container colour; Headline 1).
Design tokens: Value	The information defining a design attribute, either stored in a token or hard-coded.
Dialog	A component providing important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.
Divider	A thin line that groups content in lists and layouts.
Dropdown Menu	A dropdown menu displays a list of actions or options to a user.
Element	The part of the component that a token or value applies to, such as the container or label text.
Elevation	Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.
Empathy	The ability to understand the world through other people’s eyes — and put aside our own biases as we do so.
Empty States	Empty states are moments in an app where there is no data to display to the user. They are most commonly seen the first time a user interacts with a product or page, but can be used when data has been deleted or is unavailable.
Figma	Figma is the design tool used for wireframing, building out design Librarys, collaborating, running workshops and more.
Flat Design	Flat design is a design style or language which favours simple, 2D elements and bright colours. While skeuomorphic design is all about creating a 3D, life-like feel, flat design keeps things plain and simple. Flat design originally came about to aid responsive design
Floating action button	A component representing the most important action on a screen. They put key actions within reach.
Floating Action Buttons
Font	A file for installing and using a set of type in a particular weight and style.
Font family	A typeface with multiple weights, that each have a font, together make up a font family.
Form	A form allows users to input information.
Foundation	The foundational elements of the Design Library, including the grid, space, size, colour, shape, elevation (shadow), and typography. These provide consistent visual and functional guidelines for UI design.
Gestalt principles	The Gestalt principles come from the field of psychology, and they’re essentially a set of laws that describe how our minds organise and interpret visual data. The Gestalt principles can be used to inform design decisions and shape the user experience. For example, the law of proximity states that elements which are positioned close together appear to be more related than elements which are spaced further apart.
Gradient	Also known as a colour gradient, colour progression, or colour ramp. Gradients are compromised of at least two colours gradually transitioning between each other to fill a shape or area. Alternatively, one or more of the colours is instead a transparent fill, not a colour fill. Four common types of gradients are linear, radial, angular, and diamond, although linear and radial are represented most frequently.
Grid, Spacing & Layout	Grids Librarys are organizational tools that help us arrange content on a screen. They are made up of vertical and horizontal lines that create what we call columns and gutters.
Gutter	The space between two columns containing text or other elements. Similar to margins, gutters help increase the readability of columns of information.
Heading	The title, subtitle, or topic that stands at the top or beginning of a paragraph or section of text.
Heuristics	Another term from the field of psychology, a heuristic is a mental shortcut which enables people to solve problems and make decisions quickly, based on what they’ve learned from previous experiences.
HEX value	HEX is an abbreviation of hexadecimal. This color code tells computers and devices which color to display using three pairs of digitals, representing the red, green, and blue RGB values. The code starts with a pound sign (#) and is followed by six hex values or three hex value pairs made up of numbers 0-9 and letters A-F. For example, #907CFF renders as a purple color and is shorter to write than the RGB combination it represents, 144, 124, 255. HEX values are commonly used for the web in HTML and CSS code.
Hick’s law	According to Hick’s law, the more options or choices a user has, the longer it will take them to make a decision or choose a course of action. In UX, the goal is to keep the number of options available to the user to a minimum, making it quicker and easier for them to navigate through the experience without feeling overwhelmed.
High-Fidelity	High-flidlity
Hierarchy	Hierarchy is the organization or presentation of elements in a way that suggests importance. The arrangement and emphasis of visible elements influence the order in which the human eye perceives what it is seeing. This order of dominance is created by the visual contrast between objects and the principles of Gestalt philosophy.
Hover	A state change that involves one element being replaced by another upon the mouse going over it.
Iconography
Inactive	An inactive state is applied to a component when the user is not allowed to interact with the component due to either permissions, dependencies, or pre-requisites. Inactive states completely remove the interactive function of a component.
Inclusion	Designing services or products to be accessible to, and usable by, as many individuals or groups as reasonably possible while helping to meet the needs of excluded people. Consequently, designing inclusively often improves the product experience for all of your customers.
Index	An alphabetical list of topics such as names, places, or core concepts in written materials such as non-fiction books, articles, and reports alongside the page number(s) that the specific topics appear. An index found at the beginning of written work is referred to as a table of contents and is often briefer than those found at the end of a text.
Interaction States
Iteration	A method of continuing to improve a product or outcome after an initial version is created and shipped. Iteration is used to refine a product to better achieve desired goals or results, using the additional time and research gained from having launched a version already.
Justified	A concept of alignment specific to blocks or line of text. Left justified is when the beginning of each line of text starts at the same x value along a left margin. This is also known as left-aligned, and it creates a rag on the right. Right justified is when the end of each line of text is flush against a right margin. This is also known as right-aligned, and it creates a rag on the left. Full justified is when both the left and right ends of lines of text are flush to both sides of the text box. Letter-spacing and word-spacing are adjusted to set each line of text to a consistent width. There is no rag with full justification. Centred text is the absence of justification.

Kerning	In typography, the adjustment of space between two characters of text. Increasing or decreasing letter-spacing so that the characters in a word, wordmark, or line of text look evenly distributed optically. Fonts are constructed so that any two or more characters can be placed next to each other. Sometimes the space around a character is set in a way that it looks further apart or closer together to it's neighbouring characters. Kerning is the process of adjusting that spacing between letters to make the distribution of letters and the space between them appear even.
Leading	In typography, the adjustment of space between two lines of text vertically. Increasing or decreasing line height can help to improve or reduce readability. Leading is measured from the text's baselines. Generally, setting the line height between 1.1 and 1.2 times the font size (110%–120%) results in readable text, but every typeface has nuances — including line-spacing. Long lines of text, bold set type, type set at small sizes, and sans serif typefaces may require more leading.
Legibility	In typography, legibility is the measure of how easily an individual can distinguish letters, characters, glyphs, lines, words, or paragraphs from each other, allowing writing to be read or deciphered. An increase in type legibility can help increase readability.
Letter case	Also referred to as “case,” is the distinction between smaller letters like lowercase and larger letters like uppercase or capital letters. Most typeface sets have letters in both, while fonts like Bangers are set in just uppercase. Typefaces set in only uppercase letters or only lowercase letters are less common. Title case, all lowercase, sentence case, all caps, and small caps are all different types of letter case.
Letter-spacing	In typography, the style of a typeface that defines the space between characters in a word, line of text, or paragraph. The density of letter-spacing can contribute to readability and identifiability of a typeface or wordmark. Letter-spacing is adjusted through kerning.
List	A component comprised of continuous, vertical indexes of text or images.
Low-Fidelity
Logo	A symbol for representing or identifying a product, organization, company or brand.
Lorem ipsum	Text comprised of fake words used for placeholder text to show the visual form of a text block or document without relying on real content. This allows designers to focus on the form before the content and is often used when the actual content is not yet available.
Margin	The buffer region around the inside edges of a Frame, screen, page, document, or other composition and the content within. Margins are typical structural elements in both web design and the print industry. They help define object alignment and text justification. Margins can help increase readability and usability by adding white space to a layout.
Menu	A component that displays a list of choices on a temporary surface.
Midline	In typography, a distance halfway between the baseline and cap height; also known as the mean line.
Mockup	Mockups are static representations of a product. You can’t click through them or interact with them. They are essentially a picture of what the product will look like.
Modal	A modal, or modal window, is a box that pops up outside of the main screen when the user clicks something on the current screen. Modals are used to draw the user’s attention and to get them to focus on one specific thing. To close the modal, the user must complete a certain action or actively click to exit out of it. An example of a modal could be the window that pops up when you’re reading a blog, asking you to subscribe to their newsletter.
MVP (Minimum viable product)	MVP stands for “minimum viable product.” It’s the most minimal version of a product you can launch which has enough functionality for people to use, but will need further development. Launching an MVP allows you to see how the initial product idea is received before investing too much time and money.
Navigation bar	A component offering a persistent and convenient way to switch between primary destinations in an app.
Navigation drawer	A component providing ergonomic access to destinations in an app.
Navigation rail	A component providing access to primary destinations in apps when using tablet and desktop screens.
Padding	Space around an element's content. Padding is used in web design in conjunction with margins to determine the spacing between objects and their location on your screen.
Page Templates	Predefined layouts or formats for sets of common web pages.
Pagination	Pagination allows users to move back and forth between pages.
Pattern	Set designs that solve common experience design problems, such as galleries, product lockups, pricing lockups, login patterns, and form patterns. Designers should reference these patterns before creating bespoke experiences to leverage existing solutions.
Pills
Pixel	Pixel is derived from the phrase picture elements. Each element of the picture serves as a building block in the screen’s grid. Each pixel has a unique location indicated by a set of coordinates. It also has the capacity to broadcast millions of colours. The number of pixels in an image or display determines how the image looks. Display resolution indicates how many pixels are contained in a screen. So, a 1080x1920 display is just a grid that’s 1080 pixels tall and 1920 pixels wide. To calculate the number of pixels in a display, multiply the height of the grid by the width. The number of bits used to represent a pixel determines how many colours it can display. So, an 8-bit pixel only allows for 256 colours, while a 24-bit pixel displays 16,777,216 colours!
Points	A standard measurement in typography for length, leading, font size, or other units. A point represents a square group of pixels and differs depending on the resolution of an image or display. For example, an iPhone X screen is 375 points wide, representing 1125 pixels at 3x. Since a point is always square, in this example the point is made up of nine pixels, a grid of three pixels wide by three pixels tall. Points are traditionally the measurement unit used in print design. A point is .35 millimeters (1/72 inch) on a printed page. Point is abbreviated as "pt."
Progress Bar
Prototype	A prototype is an interactive demo of a product that is used to test a concept or represent an experience. It serves as a starting point for iteration and further development.
Radio button	A component allowing users to select one option from a set.
Rapid Prototyping	Quickly generating mockups of what a Library will look like to facilitate internal review or testing.
Raster graphics	Also known as pixel-based graphics or bitmap images, raster graphics are digital images composed of a grid of pixels. As raster graphics are scaled up, quality decreases because they are dependent on resolution. Raster image files are generally larger in size than vector graphic files. Common raster file formats are JPEG, PNG, GIF, and PSD.
Rating's
Redlining	An approach for designers to communicate and document their intentions for developer handoff. Redlining allows a programmer to understand the critical elements of a design such as the distance between objects, colours, fonts, object sizes, and more. Designers can write notes that point to specific objects to help clarify their intended behaviours that may be hard to comprehend from a design file.
Responsive design	Responsive design ensures that your designs display accurately on different screen sizes. A website that’s been designed responsively will look great whether it’s viewed on a desktop computer, a tablet or a smartphone.
Screen Reader	A software program used to allow reading of content and navigation of the screen using speech or Braille output. Used primarily by people who have difficulty seeing. JAWS and NVDA are examples.
Side sheet	A component containing supplementary content that’s anchored to the left or right edge of the screen.
Skeleton Loader
Skeuomorphism	In digital design, a style that mimics materials and dimensionality to create a connection to real life objects. It can guide customers to follow intended actions and imply usage through familiarity. For example, some desktop operating systems use a trash can or recycle bin icon to represent the deletion of files. Skeuomorphism started receding in popularity after Apple introduced a flat redesign of their mobile operating system in iOS 7.
Slider	A component that allows users to make selections from a range of values.
Snackbar	A component that provides brief messages about app processes at the bottom of the screen.
Spinner
Storybook	A tool used by engineers to develop and test components. The storybook displays components and component documentation.
Stroke	Also known as a line, a stroke is the visual characteristic of a path or vector. Strokes are created with the line tool, pen tool, or are the border of shapes. They can be straight or curved, are aligned to the inside, center, or outside of a path. Stroke style can be customized to solid (default) or dashed and can be capped with round, square, or arrow endpoints.
Swatches
Switch	A component that toggles the state of a single item on or off.
Tab	A component used to organize content across different screens, data sets, and other interactions.
Tags
Text field	A component that lets users enter and edit text.
Theme	A set of styles, such as colour, elevation, and type, that can be applied globally to an app's UI components as a way to consistently adjust aspects of appearance in an app.
Time picker	A component that helps users select and set a specific time.
Toggle
Tooltip	A component that displays informative text when users hover over, focus on, or tap an element.
Typeface	A typeface is comprised of a set of letterforms and glyphs that are related by similar design features. Each font of the typeface has a specific identity through its style, weights, slant, ornamentation, and other elements. See also Font Family.
Typography	Originally a term from the print industry, typography is the work or technique of arranging, processing, or setting type, such as letters, symbols, characters, figures, and signs. The goal is often to make the composed language readable, legible, and aesthetically pleasing to communicate effectively. Some techniques include the determination of: typefaces, leading, kerning, tracking, line length, point size, style, arrangement, and other characteristics of the type. Type design is closely related and often considered a part of typography.
Usability	The extent to which a product or service is easy, intuitive, and efficient to use to achieve specific customer goals.
Usability testing	Usability testing includes a range of test and evaluation methods such as automated evaluations, inspection evaluations, operational evaluations and human performance testing. In a typical performance test, users perform a variety of tasks with a prototype (or an operational system) while observers note what each user does and says and performance data are recorded. One of the main purposes of usability testing is to identify issues that keep users from meeting the usability goals of a Web site.
Vector	A type of graphic, vectors are shapes or images that are created with points, each defined by an x and y coordinate, and paths that connect the points to create lines and enclosed shapes. The coordinate and path mathematical data is interpreted and rendered by browsers and creative tools. Vector images or graphics can be scaled to any size or examined at extreme zoom levels, versus pixel-based images (raster graphics) which can appear blurry or pixelated when scaled. The word vector can also refer to a particular path or object in a vector graphic. Common vector file formats are EPS, PDF, and SVG.
Weight	The thickness of a stroke or a letterform’s stroke. A typeface can range in weights from hairline to ultra-black and have many fonts in between, while some typefaces may come in only one weight. These weights also have a number association, which is helpful to understand when programming or working with a developer. Weights generally coordinate to a number on a scale of 100 to 900, with intervals of 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700, etc. Strokes are generally measured in points.
White space	The space between graphics, columns, images, text, or other objects. Often helps focus the attention on the intended information to better communicate a message. This portion of a design left empty can increase legibility and readability.
Wireframe	Basic shapes or blocks arranged to represent how a website, screen, or page will be interacted with to help diagram the designer's intent. Using simple graphics, like grey rectangles reduces cognitive load by focusing on layout and composition instead of focusing on type, colour, or other content decisions.
X-Height	In typography, it is the height of a lowercase "x" in a typeface. It meets the baseline and typically defines the line that ascenders cross, known as the midline or mean line. Letters with a bowl such as the lowercase a, b, d, o, and p, in some typefaces, slightly extend beyond the x-height to overlap the baseline and midline/mean line.

Acronym	Definition
A/B Testing	A/B testing is the practice of comparing two versions of a web page with a single variable online to determine which one performs better.
Above/below the fold	“Above the fold” refers to content that is visible at the top of a website; the user doesn’t need to scroll to see it. “Below the fold” refers to content further down the page which the user would need to scroll in order to see. In UX, it’s important to put meaningful, important content above the fold (for example, a header).
Accessibility	The degree to which your product is inclusive of and usable by the broadest range of individuals. We see this in our physical spaces, with a ramp for an individual with temporary or permanent limited mobility to use instead of stairs. And while an individual that needs a ramp to access a building is helped, an individual that may have taken the stairs can also use and benefit from a ramp.
Accordion
Aesthetic-usability effect	A phenomenon in which people believe a more aesthetically pleasing product is easier to use than a less-aesthetic design — even if it’s not easier to use.
Aesthetics	The philosophy of exploring the perceptions of beauty and artistic taste, with a focus on how our minds react when we perceive art in any form, such as music, poetry, sculpture, and more. It is a study of how we feel about art, discerning what we do and don't like, and how it can affect us emotionally.
Affordance	Affordances are clues that tell us what an element can do to us. Think of a door. The handle is an affordance designed to tell us it can be pulled or pushed. On user interfaces, affordances help clearly communicate to users what can and cannot be done on a screen. Buttons on interfaces, for example, afford being pressed to trigger an action.
Alert	An Alert is used for confirmations, alerts, and acknowledgments that require minimal user interaction.
Alignment	An element of organizing visual elements, alignment is a critical concept in building consistency and hierarchy in a composition. An effective design practice to visually define lines, spaces, or to draw a viewer's focus. The absence of alignment can also be used to attract attention. There are several types of alignment. With objects, the options of alignment are vertically center, horizontally center, top-aligned, right-aligned, bottom-aligned, and left-aligned. With text elements, left-aligned is also known as left justified and ragged right, right-aligned is also known as right justified and ragged left. Type can also be aligned top, center, and bottom within a text box. Optical alignment is when objects or text are adjusted to be perceived as if they are in alignment with other objects or margins. This may be necessary with shapes and letters that don't have straight edges, such as circles and triangles or angular letters like A, V, W, and Y.
Alt text	Short for alternative text, and also known as alt tag, alt description, and alt attributes, it is code within a webpage or app used to provide a meaningful description of what an image communicates. Alt text is exposed by screen readers and may be crucial for individuals navigating your page or product with reduced vision. In programming, it should be applied to every image within the HTML code by including an alt tag. It should be added even if the image is decorative, in which case the tag should be empty.
Analogous	In colour theory, analogous colour schemes are sets of three colours next to each other on the colour wheel. They are typically two colours from the primary or secondary colour schemes, with the third colour being a mix of the dominant two. For example, blue, green, and blue-green. It is essential that analogous colour sets have enough contrast for accessibility.
Analytics	Analytics measure human behavior on a site. They help us better understand and interpret patterns of behavior on the products we use.
Animation	A simulation of movement by the rapid appearance of images in sequence.
Appendix	A section at the end of a book, document, or other reading material that offers additional information on the contents of or sources referenced in the text. An appendix usually provides additional context to explain a topic further and can contain bibliographic data.
Ascender	In typography, an ascender is a part of a lowercase letter that rises above the x-height of the typeface, such as in the letters b, d, f, h, k, l, t. Together with descenders, these typographic characteristics can increase legibility.
Aspect ratio	The relationship of the width in proportion to the height of an image, Frame, or screen. For example, 16:9, a conventional aspect ratio used by high definition (HD) televisions that have a resolution of 1920x1080. 4:3 and 3:4 are aspect ratios that are commonly used in photography. The iPhone X screen is 375 points wide and 812 points tall (1125x2436 pixels), making it a 9:19.5 aspect ratio.
Badges
Banner	A component displaying a prominent message and related optional actions.
Baseline	In typography, a line that runs along the bottom of text which the letters “sit” upon. For most typefaces, characters that have descenders, like g or j, extend below the baseline. Some characters overlap the baseline only slightly, like o or a, as seen in this image with the “a” in Figma.
Bézier curve	A path connecting two vector points that is not straight. Originating in mathematics, this graphic element is one of the fundamental aspects of drawing vector shapes and lines. Bézier Curves are created and manipulated with the Pen Tool and Bend Tool. Bézier Curves are also used in animation to determine the velocity of an object's movement over time.
Bibliography	Found in the appendix of books and written documents, it is a list of references and sources utilized for the research and creation of the text.
Bitmap	A raster graphics image file format where each pixel, or "bit," is defined by a single colour. All the bits combined together are arranged to make up the larger image. The "map" part of the name references the dimensions of the image and the instructions for how the bits are arranged.
Boolean operation	In design, the functions Union, Subtract, Intersect, and Exclude are used to combine vector objects in different ways. Boolean Operations originated in mathematical logic using combinations of True and False. Boolean logic is commonly used in computer programming. See how Boolean Operations are used when designing in this video.
Bottom sheet	A component containing supplementary content that’s anchored to the bottom of the screen.
Bowl	In typography, the curved stroke of a letter, glyph, or numeral that encloses a space. Such as in lowercase letters a, b, d, g, o, p, and q, the capital letters B, D, O, P, and Q, as well as the numerals 0, 6, 8, and 9. A larger sized bowl can increase readability, especially when set in smaller type sizes.
Breadcrumbs	Breadcrumbs are a navigation system used to show a user's location in a site or app.
Buttons	A button triggers an event or action.
Card	A component containing content and actions that relate information about a subject.
Calendar	An interactive calendar for date selection experiences.
Checkbox	A component allowing users to select one or more items from a set. Checkboxes can turn an option on or off.
Chip	A component for helping people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts.
CMS	Content management system. This is a system for storing content, and is often hosted inside / used as a database.
CMS Components	Coded and editable design elements used in the backend Content Management System (CMS). These components are accessible to Digital Retail teams via Content Stack and allow for flexible content management across the platform.
colour depth	How many colours a computer screen can display, based on the number of bits per pixel.
colour vision deficiency	A condition where a person’s eyes are unable to see colours in common light situations. People with colour vision deficiency have a hard time telling colours apart. Most people who suffer from colour vision deficiency are not blind to colour but have a reduced ability to see them. However, the most severe forms of these deficiencies are referred to as colour blindness.
Colour
Contrast	Difference between colours. For accessibility, contrast refers strictly to the difference in tone. A difference of 40 in tone guarantees a WCAG contrast ratio ≥ 3.0; a difference of 50 in tone guarantees a contrast ratio ≥ 4.5.
Component	Reusable design elements created in the Figma design platform and implemented across the company platforms. They help maintain consistency and efficiency in design.
Copy	The written material for a design. This is the non-placeholder text that is used for headings, subheading, body text, or other written elements of a product. It is the output of Copywriters, Copy Editors, or Content Producers, and sometimes is written by Product Managers, Designers, or other stakeholders.
Counter	In typography, the enclosed space within a letter, glyph, or numeral. Such as in almost every letter and number with exceptions like i, l, and 1. When counters are enclosed by curved strokes, the strokes are called bowls. A counter that is not fully enclosed is sometimes referred to as an Open Counter, as seen in the "F," "g," and "m." The size of a counter can affect readability, and can become identifying factors in a typeface.
Data table	A component displaying sets of data across rows and columns.
Date picker	A component that lets users select a date, or a range of dates.
Descender	In typography, a descender is a letter where part of it extends below the baseline, such as the lowercase g, j, p, q, and y in most typefaces. Some typefaces also have numbers that descend below the baseline, such as the numbers 3, 4, 5, 7, and 9 in Balthazar. This is called an old-style numeral.
Design Components	Components are the reusable building blocks of our design library. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.
Design Debt	When we initially launch a product, we design a well-thought-out and cohesive design Library for it. As the product grows, we often add new features and elements and scrap old ones. Pressed with deadlines and the desire to move fast, it is easy to skip over the valuable design concepts we started out with. As a result, the new elements or features we add don’t quite fit and a choppy user experience emerges. A design Library that has accrued design debt is made up of elements and features that will need to be cleaned up later on. The efforts made to quickly set them in place eventually generate more work down the line.
Design Foundations	Foundations are the visual elements needed to create engaging layouts and end-to-end user experiences.
Design guidelines	Guidelines are descriptive written and illustrated docs that demonstrate usage and behavior mainly through examples. They're the long-form discussion of specs that help designers and developers with problem-solving and decision-making.
Design Library	A series of Design foundation, Design components and Design patterns that can be reused in different combinations. Design libraries allow you to manage design at scale.
Design Patterns	Patterns are reusable combinations of components that solve common user problems. These best practice solutions help users achieve their goals and help ensure consistency across experiences.
Design Principals	A description of the principles, standards, methods, and tools we use in UI Design.
Design specs	Specs are annotated designs and docs that specify the values and parameters that define a component or a feature’s coded capabilities.
Design tokens	A design token represents a small, reusable design decision that’s part of a design Library's visual style. Tokens replace static values with self-explanatory names.
Design tokens: Context	The set of conditions in which tokens can point to non-default values (for example, dark theme, dense layout).
Design tokens: Role	A shortened version of the Library token name (for example, Secondary container colour; Headline 1).
Design tokens: Value	The information defining a design attribute, either stored in a token or hard-coded.
Dialog	A component providing important prompts in a user flow. They can require an action, communicate information, or help users accomplish a task.
Divider	A thin line that groups content in lists and layouts.
Dropdown Menu	A dropdown menu displays a list of actions or options to a user.
Element	The part of the component that a token or value applies to, such as the container or label text.
Elevation	Elevation uses shadows and blurs for a layered effect that gives users a visual cue that an object or experience is “elevated” in priority or hierarchy.
Empathy	The ability to understand the world through other people’s eyes — and put aside our own biases as we do so.
Empty States	Empty states are moments in an app where there is no data to display to the user. They are most commonly seen the first time a user interacts with a product or page, but can be used when data has been deleted or is unavailable.
Figma	Figma is the design tool used for wireframing, building out design Librarys, collaborating, running workshops and more.
Flat Design	Flat design is a design style or language which favours simple, 2D elements and bright colours. While skeuomorphic design is all about creating a 3D, life-like feel, flat design keeps things plain and simple. Flat design originally came about to aid responsive design
Floating action button	A component representing the most important action on a screen. They put key actions within reach.
Floating Action Buttons
Font	A file for installing and using a set of type in a particular weight and style.
Font family	A typeface with multiple weights, that each have a font, together make up a font family.
Form	A form allows users to input information.
Foundation	The foundational elements of the Design Library, including the grid, space, size, colour, shape, elevation (shadow), and typography. These provide consistent visual and functional guidelines for UI design.
Gestalt principles	The Gestalt principles come from the field of psychology, and they’re essentially a set of laws that describe how our minds organise and interpret visual data. The Gestalt principles can be used to inform design decisions and shape the user experience. For example, the law of proximity states that elements which are positioned close together appear to be more related than elements which are spaced further apart.
Gradient	Also known as a colour gradient, colour progression, or colour ramp. Gradients are compromised of at least two colours gradually transitioning between each other to fill a shape or area. Alternatively, one or more of the colours is instead a transparent fill, not a colour fill. Four common types of gradients are linear, radial, angular, and diamond, although linear and radial are represented most frequently.
Grid, Spacing & Layout	Grids Librarys are organizational tools that help us arrange content on a screen. They are made up of vertical and horizontal lines that create what we call columns and gutters.
Gutter	The space between two columns containing text or other elements. Similar to margins, gutters help increase the readability of columns of information.
Heading	The title, subtitle, or topic that stands at the top or beginning of a paragraph or section of text.
Heuristics	Another term from the field of psychology, a heuristic is a mental shortcut which enables people to solve problems and make decisions quickly, based on what they’ve learned from previous experiences.
HEX value	HEX is an abbreviation of hexadecimal. This color code tells computers and devices which color to display using three pairs of digitals, representing the red, green, and blue RGB values. The code starts with a pound sign (#) and is followed by six hex values or three hex value pairs made up of numbers 0-9 and letters A-F. For example, #907CFF renders as a purple color and is shorter to write than the RGB combination it represents, 144, 124, 255. HEX values are commonly used for the web in HTML and CSS code.
Hick’s law	According to Hick’s law, the more options or choices a user has, the longer it will take them to make a decision or choose a course of action. In UX, the goal is to keep the number of options available to the user to a minimum, making it quicker and easier for them to navigate through the experience without feeling overwhelmed.
High-Fidelity	High-flidlity
Hierarchy	Hierarchy is the organization or presentation of elements in a way that suggests importance. The arrangement and emphasis of visible elements influence the order in which the human eye perceives what it is seeing. This order of dominance is created by the visual contrast between objects and the principles of Gestalt philosophy.
Hover	A state change that involves one element being replaced by another upon the mouse going over it.
Iconography
Inactive	An inactive state is applied to a component when the user is not allowed to interact with the component due to either permissions, dependencies, or pre-requisites. Inactive states completely remove the interactive function of a component.
Inclusion	Designing services or products to be accessible to, and usable by, as many individuals or groups as reasonably possible while helping to meet the needs of excluded people. Consequently, designing inclusively often improves the product experience for all of your customers.
Index	An alphabetical list of topics such as names, places, or core concepts in written materials such as non-fiction books, articles, and reports alongside the page number(s) that the specific topics appear. An index found at the beginning of written work is referred to as a table of contents and is often briefer than those found at the end of a text.
Interaction States
Iteration	A method of continuing to improve a product or outcome after an initial version is created and shipped. Iteration is used to refine a product to better achieve desired goals or results, using the additional time and research gained from having launched a version already.
Justified	A concept of alignment specific to blocks or line of text. Left justified is when the beginning of each line of text starts at the same x value along a left margin. This is also known as left-aligned, and it creates a rag on the right. Right justified is when the end of each line of text is flush against a right margin. This is also known as right-aligned, and it creates a rag on the left. Full justified is when both the left and right ends of lines of text are flush to both sides of the text box. Letter-spacing and word-spacing are adjusted to set each line of text to a consistent width. There is no rag with full justification. Centred text is the absence of justification.

Kerning	In typography, the adjustment of space between two characters of text. Increasing or decreasing letter-spacing so that the characters in a word, wordmark, or line of text look evenly distributed optically. Fonts are constructed so that any two or more characters can be placed next to each other. Sometimes the space around a character is set in a way that it looks further apart or closer together to it's neighbouring characters. Kerning is the process of adjusting that spacing between letters to make the distribution of letters and the space between them appear even.
Leading	In typography, the adjustment of space between two lines of text vertically. Increasing or decreasing line height can help to improve or reduce readability. Leading is measured from the text's baselines. Generally, setting the line height between 1.1 and 1.2 times the font size (110%–120%) results in readable text, but every typeface has nuances — including line-spacing. Long lines of text, bold set type, type set at small sizes, and sans serif typefaces may require more leading.
Legibility	In typography, legibility is the measure of how easily an individual can distinguish letters, characters, glyphs, lines, words, or paragraphs from each other, allowing writing to be read or deciphered. An increase in type legibility can help increase readability.
Letter case	Also referred to as “case,” is the distinction between smaller letters like lowercase and larger letters like uppercase or capital letters. Most typeface sets have letters in both, while fonts like Bangers are set in just uppercase. Typefaces set in only uppercase letters or only lowercase letters are less common. Title case, all lowercase, sentence case, all caps, and small caps are all different types of letter case.
Letter-spacing	In typography, the style of a typeface that defines the space between characters in a word, line of text, or paragraph. The density of letter-spacing can contribute to readability and identifiability of a typeface or wordmark. Letter-spacing is adjusted through kerning.
List	A component comprised of continuous, vertical indexes of text or images.
Low-Fidelity
Logo	A symbol for representing or identifying a product, organization, company or brand.
Lorem ipsum	Text comprised of fake words used for placeholder text to show the visual form of a text block or document without relying on real content. This allows designers to focus on the form before the content and is often used when the actual content is not yet available.
Margin	The buffer region around the inside edges of a Frame, screen, page, document, or other composition and the content within. Margins are typical structural elements in both web design and the print industry. They help define object alignment and text justification. Margins can help increase readability and usability by adding white space to a layout.
Menu	A component that displays a list of choices on a temporary surface.
Midline	In typography, a distance halfway between the baseline and cap height; also known as the mean line.
Mockup	Mockups are static representations of a product. You can’t click through them or interact with them. They are essentially a picture of what the product will look like.
Modal	A modal, or modal window, is a box that pops up outside of the main screen when the user clicks something on the current screen. Modals are used to draw the user’s attention and to get them to focus on one specific thing. To close the modal, the user must complete a certain action or actively click to exit out of it. An example of a modal could be the window that pops up when you’re reading a blog, asking you to subscribe to their newsletter.
MVP (Minimum viable product)	MVP stands for “minimum viable product.” It’s the most minimal version of a product you can launch which has enough functionality for people to use, but will need further development. Launching an MVP allows you to see how the initial product idea is received before investing too much time and money.
Navigation bar	A component offering a persistent and convenient way to switch between primary destinations in an app.
Navigation drawer	A component providing ergonomic access to destinations in an app.
Navigation rail	A component providing access to primary destinations in apps when using tablet and desktop screens.
Padding	Space around an element's content. Padding is used in web design in conjunction with margins to determine the spacing between objects and their location on your screen.
Page Templates	Predefined layouts or formats for sets of common web pages.
Pagination	Pagination allows users to move back and forth between pages.
Pattern	Set designs that solve common experience design problems, such as galleries, product lockups, pricing lockups, login patterns, and form patterns. Designers should reference these patterns before creating bespoke experiences to leverage existing solutions.
Pills
Pixel	Pixel is derived from the phrase picture elements. Each element of the picture serves as a building block in the screen’s grid. Each pixel has a unique location indicated by a set of coordinates. It also has the capacity to broadcast millions of colours. The number of pixels in an image or display determines how the image looks. Display resolution indicates how many pixels are contained in a screen. So, a 1080x1920 display is just a grid that’s 1080 pixels tall and 1920 pixels wide. To calculate the number of pixels in a display, multiply the height of the grid by the width. The number of bits used to represent a pixel determines how many colours it can display. So, an 8-bit pixel only allows for 256 colours, while a 24-bit pixel displays 16,777,216 colours!
Points	A standard measurement in typography for length, leading, font size, or other units. A point represents a square group of pixels and differs depending on the resolution of an image or display. For example, an iPhone X screen is 375 points wide, representing 1125 pixels at 3x. Since a point is always square, in this example the point is made up of nine pixels, a grid of three pixels wide by three pixels tall. Points are traditionally the measurement unit used in print design. A point is .35 millimeters (1/72 inch) on a printed page. Point is abbreviated as "pt."
Progress Bar
Prototype	A prototype is an interactive demo of a product that is used to test a concept or represent an experience. It serves as a starting point for iteration and further development.
Radio button	A component allowing users to select one option from a set.
Rapid Prototyping	Quickly generating mockups of what a Library will look like to facilitate internal review or testing.
Raster graphics	Also known as pixel-based graphics or bitmap images, raster graphics are digital images composed of a grid of pixels. As raster graphics are scaled up, quality decreases because they are dependent on resolution. Raster image files are generally larger in size than vector graphic files. Common raster file formats are JPEG, PNG, GIF, and PSD.
Rating's
Redlining	An approach for designers to communicate and document their intentions for developer handoff. Redlining allows a programmer to understand the critical elements of a design such as the distance between objects, colours, fonts, object sizes, and more. Designers can write notes that point to specific objects to help clarify their intended behaviours that may be hard to comprehend from a design file.
Responsive design	Responsive design ensures that your designs display accurately on different screen sizes. A website that’s been designed responsively will look great whether it’s viewed on a desktop computer, a tablet or a smartphone.
Screen Reader	A software program used to allow reading of content and navigation of the screen using speech or Braille output. Used primarily by people who have difficulty seeing. JAWS and NVDA are examples.
Side sheet	A component containing supplementary content that’s anchored to the left or right edge of the screen.
Skeleton Loader
Skeuomorphism	In digital design, a style that mimics materials and dimensionality to create a connection to real life objects. It can guide customers to follow intended actions and imply usage through familiarity. For example, some desktop operating systems use a trash can or recycle bin icon to represent the deletion of files. Skeuomorphism started receding in popularity after Apple introduced a flat redesign of their mobile operating system in iOS 7.
Slider	A component that allows users to make selections from a range of values.
Snackbar	A component that provides brief messages about app processes at the bottom of the screen.
Spinner
Storybook	A tool used by engineers to develop and test components. The storybook displays components and component documentation.
Stroke	Also known as a line, a stroke is the visual characteristic of a path or vector. Strokes are created with the line tool, pen tool, or are the border of shapes. They can be straight or curved, are aligned to the inside, center, or outside of a path. Stroke style can be customized to solid (default) or dashed and can be capped with round, square, or arrow endpoints.
Swatches
Switch	A component that toggles the state of a single item on or off.
Tab	A component used to organize content across different screens, data sets, and other interactions.
Tags
Text field	A component that lets users enter and edit text.
Theme	A set of styles, such as colour, elevation, and type, that can be applied globally to an app's UI components as a way to consistently adjust aspects of appearance in an app.
Time picker	A component that helps users select and set a specific time.
Toggle
Tooltip	A component that displays informative text when users hover over, focus on, or tap an element.
Typeface	A typeface is comprised of a set of letterforms and glyphs that are related by similar design features. Each font of the typeface has a specific identity through its style, weights, slant, ornamentation, and other elements. See also Font Family.
Typography	Originally a term from the print industry, typography is the work or technique of arranging, processing, or setting type, such as letters, symbols, characters, figures, and signs. The goal is often to make the composed language readable, legible, and aesthetically pleasing to communicate effectively. Some techniques include the determination of: typefaces, leading, kerning, tracking, line length, point size, style, arrangement, and other characteristics of the type. Type design is closely related and often considered a part of typography.
Usability	The extent to which a product or service is easy, intuitive, and efficient to use to achieve specific customer goals.
Usability testing	Usability testing includes a range of test and evaluation methods such as automated evaluations, inspection evaluations, operational evaluations and human performance testing. In a typical performance test, users perform a variety of tasks with a prototype (or an operational system) while observers note what each user does and says and performance data are recorded. One of the main purposes of usability testing is to identify issues that keep users from meeting the usability goals of a Web site.
Vector	A type of graphic, vectors are shapes or images that are created with points, each defined by an x and y coordinate, and paths that connect the points to create lines and enclosed shapes. The coordinate and path mathematical data is interpreted and rendered by browsers and creative tools. Vector images or graphics can be scaled to any size or examined at extreme zoom levels, versus pixel-based images (raster graphics) which can appear blurry or pixelated when scaled. The word vector can also refer to a particular path or object in a vector graphic. Common vector file formats are EPS, PDF, and SVG.
Weight	The thickness of a stroke or a letterform’s stroke. A typeface can range in weights from hairline to ultra-black and have many fonts in between, while some typefaces may come in only one weight. These weights also have a number association, which is helpful to understand when programming or working with a developer. Weights generally coordinate to a number on a scale of 100 to 900, with intervals of 100: Regular 400, Medium 500, Semi-Bold 600, Bold 700, etc. Strokes are generally measured in points.
White space	The space between graphics, columns, images, text, or other objects. Often helps focus the attention on the intended information to better communicate a message. This portion of a design left empty can increase legibility and readability.
Wireframe	Basic shapes or blocks arranged to represent how a website, screen, or page will be interacted with to help diagram the designer's intent. Using simple graphics, like grey rectangles reduces cognitive load by focusing on layout and composition instead of focusing on type, colour, or other content decisions.
X-Height	In typography, it is the height of a lowercase "x" in a typeface. It meets the baseline and typically defines the line that ascenders cross, known as the midline or mean line. Letters with a bowl such as the lowercase a, b, d, o, and p, in some typefaces, slightly extend beyond the x-height to overlap the baseline and midline/mean line.

Personal Research

Explorer

Key Definitions

Key Definitions

Use the alphabetical links below to navigate the glossary.

Graph View

Table of Contents

Backlinks