WIP - Dummy content
Glossary
Purpose: The Glossary page provides a comprehensive list of terms used throughout the design system, explaining their meanings from both design and technical perspectives. It aims to ensure a common understanding and clarity of terminology for all team members working with the design system.
Common Props
Purpose: The Common Props section defines and explains the commonly used props within the design system. It covers the props that are shared and reused across multiple components, providing insights into their functionality, usage, and variations.
| Term | Meaning |
|---|---|
className | A prop used to apply custom CSS classes to a component for styling purposes. |
onClick | A prop that specifies the action to be performed when the component is clicked. |
States
Purpose: The States section defines and describes the various states used within the design system. It includes states such as hover, active, disabled, focused, and more, explaining their visual representation and the behaviors associated with each state.
| Term | Meaning |
|---|---|
| Hover | A state that occurs when the cursor is positioned over an interactive element, typically triggering a visual change to indicate interactivity. |
| Active | A state that represents the active or engaged state of an interactive element, often triggered by user interaction like clicking or tapping. |
Hierarchy
Purpose: The Hierarchy section explains the concept of hierarchy within the design system. It covers the organization and arrangement of elements, components, and content in terms of their importance, prominence, and visual weight.
| Term | Meaning |
|---|---|
| Typography | The art and technique of arranging type, including its style, size, line spacing, and overall visual presentation, to enhance readability and communication. |
| Layout | The arrangement and positioning of elements within a design, taking into consideration their relative importance, visual weight, and spatial relationships. |
Interactions
Purpose: The Interactions section defines and describes the interactions used within the design system. It covers the various ways users can interact with components and the corresponding feedback and responses they can expect from the system.
| Term | Meaning |
|---|---|
| Modal | A UI component that appears on top of the main content and temporarily suspends interaction with the underlying interface. It is often used to display additional information or request user input. |
| Dropdown | A UI component that presents a list of options when activated, allowing users to select a choice from the available options. |
Orientation/Placement
Purpose: The Orientation/Placement section explains the principles and guidelines related to the orientation and placement of components within the design system. It covers concepts such as alignment, positioning, and layout considerations for achieving a cohesive and harmonious visual design.
| Term | Meaning |
|---|---|
| Alignment | The positioning and arrangement of elements in relation to each other, often based on a common vertical or horizontal axis, to create visual harmony and balance. |
| Grid | A system of horizontal and vertical lines that define the layout structure and help align and position elements consistently within a design. |
References: