Skip to main content

Introduction

The Design System is a structured set of principles, rules, and foundational building blocks that provides a shared language and clear guidance for designing and building consistent digital products over time.

The Component Library, documented in Storybook, represents the implementation layer of this system. It translates principles, styles, and patterns into reusable, production‑ready components, ensuring consistency between design and code.

Component categories​

Layout​

Defines the structural and spatial organization of the interface.
Layout components control arrangement and alignment without introducing content, interaction, or functional meaning.

  • Purpose: Organize space and visual flow in a neutral and structural way.
  • Includes: Structural and neutral containers that define spatial arrangement, alignment, and distribution of elements, without conveying priority, meaning, or interaction.
  • Excludes: Components that introduce visual hierarchy or layering (→ Surfaces).

Data Display​

Defines components used to present information, content, and UI states.
These components communicate meaning through content and structure and do not require direct user interaction.

  • Purpose: Present information or results clearly and readably, without requiring user input.
  • Includes: Elements whose primary role is to render content, information, or status using visual structure and semantic meaning, without enabling interaction or data manipulation.
  • Excludes: Components that enable user input or data manipulation (→ Inputs).

Inputs​

Defines components that enable users to enter, select, or modify data.
Input components manage interaction, states, and validation, following accessibility and behavioral consistency rules.

  • Purpose: Collect or modify data while handling interaction states, validation, and accessibility.
  • Includes: Controls and supporting wrappers required to manage user input, selection, and data modification.
  • Excludes: Components used only to present information (→ Data Display).

Feedback​

Defines components used to communicate system status, outcomes, or contextual messages to the user.
Feedback components help users understand what is happening, what just happened, or what is required next, without directly collecting data.

  • Purpose: Inform, reassure, warn, or guide users by providing contextual feedback.
  • Includes: Components that surface messages, confirmations, warnings, or contextual hints.
  • Excludes: Components whose primary role is to define structure, scope, or layering (→ Surfaces), and neutral content presentation without feedback intent (→ Data Display).

Defines components that allow users to move within the product and across its sections.
Navigation components communicate hierarchy, orientation, and context, helping users understand where they are and where they can go.

  • Purpose: Provide orientation and enable movement between views or destinations.
  • Includes: Components that establish navigational structure and support movement across views, sections, or destinations, conveying hierarchy and context.
  • Excludes: Components primarily meant for data entry or modification (→ Inputs).

Surfaces​

Defines visual containers that host content, actions, or flows.
Surface components manage elevation, boundaries, and layering, shaping the relationship between foreground and background.

  • Purpose: Create context through boundaries, layering, and visual priority.
  • Includes: Non‑neutral containers that introduce scope, hierarchy, or emphasis, often emerging above or separating content from the background.
  • Excludes: Purely structural layout containers (→ Layout).