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. | |
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 defined 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. |
| |
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. |
| |
Light mode | A site wide device or user controlled setting who’s primary feature is dark text on light backgrounds. |
|
