...
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. |
| ||||||||||||
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.
| ||||||||||||
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 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?
| ||||||||||||
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 |
| |||||||||||||
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. |
|
...