Term | Dev Description | Reckitt 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. | ||
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. | ||
Pattern | 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 | |||
Mode | |||
Context | |||
Inset | |||
Standalone | |||
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. |
|
