Dictionary of terms

Term	Dev Description	Reckitt UX description	Notes

Term	Dev Description	Reckitt UX description	Notes
Component	A low level building block which allows to quickly construct blocks. It requires additional styles and/or logics for its proper display and functioning incapsulated in this component.		Examples: button, link, typography, card.
Variant	A component’s variation. A variation should differ style-wise or in HTML structure (or both) from other variations of the component.
Block	A high level building block consisting of several components which allows to quickly construct UI for a webpage. It requires additional styles and/or logics for its proper display and functioning incapsulated in this component.		Examples: page header, banner, footer.
Utility component		A special type of component that’s developed as a building block of a more complex component. Not to be used on its own or outside its designated parent component.	Card actions, content, and media are examples of this type of component Explanation needs work
Props	A configurable parameter passed on to a component.	Configurable properties of a component
Snippet	An example of using a combination of several components for a particular UI case.		Examples: product card list, product overview, page card list. Is this the same as a pattern?
Card	A component.	An interactive component used to link users to a resource. Often containing a summary of the destination it links.
Pattern		A pattern defines how different components can be combined in a certain way to serve specific user goals that are often repeated across screens or applications.	Looks like we don’t use this term? Is this the same as a Snippet ?
Design token	Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data.	A platform- and technology-agnostic way to store a value to be ingested by specific applications.	These can represent anything defined by design: a color as a RGB value, an opacity as a number. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences.
Theme		A site wide visual style that can encapsulate colour, font, spacing, shape, size, elevation, and motion.	Brands can have multiple themes: Light theme Dark theme Christmas theme Etc
Mode
Context			The MVP has no concept of context
Inset		A variation of a component that’s designed to sit within a section of content or other components.
Standalone		A variation of a component that’s designed to sit outside a section of content.
Dark mode		A site wide device or user controlled setting who’s primary feature is light text on dark backgrounds. Dark mode removes most light colours and replaces them with darker alternatives.	This setting is handled by theme Do not confuse dark mode with the `mode` prop.
Light mode		A site wide device or user controlled setting who’s primary feature is dark text on light backgrounds.	This setting is handled by theme Do not confuse light mode with the `mode` prop.