✈️ Design System Documentation and component creation.
Client: Amadeus
Objective: Define, document, and scale a unified design system to ensure consistency, usability, and efficiency across all digital products.
Tasks Performed: Creation and documentation of core and advanced UI components, definition of interaction patterns and responsive behaviour, accessibility compliance (WCAG), visual and motion guidelines, and collaboration with cross-functional teams to ensure implementation alignment and scalability across platforms. The service was directly supervised and approved by the client.
❖ Component Card: The card component is designed to be highly flexible and responsive, as it is one of the most frequently used components across different interfaces. Its main focus is on adapting seamlessly to each breakpoint, ensuring optimal layout and usability on all screen sizes—from desktop to tablet and mobile. The component structure adjusts dynamically depending on the context, allowing for consistent presentation and interaction patterns regardless of the device. This flexibility makes the card a robust solution for scalable and accessible design.
Overview
Variants
Behaviour
Anatomy & Specs
❖ Component Tab: The tab component is used to organize and distribute content across multiple sections or modules, allowing users to navigate between different filters, categories, or content areas within the same interface. It provides a clear and efficient way to segment information without overwhelming the user, enhancing scannability and reducing visual noise. Each tab functions as a control that reveals a specific content panel, ensuring a smooth and focused user experience.
Overview
Variants
Behaviour
Anatomy & Specs
Component
❖ Download Accordion: The Download Accordion is a collapsible component designed to organize downloadable resources in a compact, user-friendly layout. It helps users quickly identify and access files categorized by type, topic, or date. By grouping related downloads into expandable sections, it enhances clarity and reduces cognitive load, especially when handling large sets of documents.
Overview
Variants
Behaviourour
Anatomy & Specs
Component
❖ Animated numbers: This component is designed to visually highlight key metrics, statistics, or figures using motion to draw user attention. It animates numerical values as they enter the viewport, reinforcing the importance of the data while providing a dynamic and engaging reading experience.
This component is commonly used to display KPIs, growth indicators, or results in dashboards, homepages, and landing sections.
Overview
Variants
Behaviour
Anatomy & Specs
Component
Conditionals Prototype
❖ Resources center 2.0: Resources Center 2.0 is a comprehensive content discovery interface designed to help users find, filter, and access various resource materials efficiently. It combines structured filters, a search bar, and a results display in a clean, accessible layout. This version primarily presents resources in a list format, focusing on clarity and ease of navigation.
