Term | 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. | 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 | ||
Light mode | ||
