{"version":1,"pages":[{"id":"d79uEk9YOC9VeYYjCmq3","title":"Welcome to Roma","pathname":"/","siteSpaceId":"sitesp_mOU95","description":"Discover the design and content system that powers our product ecosystem.","breadcrumbs":[{"label":"Getting started"}]},{"id":"a8JLvuBXBxTBJpKKKqjy","title":"Design principles","pathname":"/getting-started/welcome-to-roma/design-principles","siteSpaceId":"sitesp_mOU95","description":"Roma, our design system with its guiding principles, is a lever to help us achieve our goal of building the most robust, high-speed, and reliable ecommerce platform.","breadcrumbs":[{"label":"Getting started"},{"label":"Welcome to Roma"}]},{"id":"C0mvnrjVyd2Vg9idWK9n","title":"Components","pathname":"/design/components","siteSpaceId":"sitesp_mOU95","breadcrumbs":[{"label":"Design"}]},{"id":"lkbY8UWI4AbA5pDqD253","title":"Actions","pathname":"/design/components/actions","siteSpaceId":"sitesp_mOU95","description":"this are all the available actionable components","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"PFeFbEZituCUe1XOHUkO","title":"Action menu","pathname":"/design/components/actions/action-menu","siteSpaceId":"sitesp_mOU95","description":"The action menu displays a list of actions triggered by a button. These actions have an immediate effect or redirect to another section of the Mirakl platform.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"Q9OUfz1g17NjKLDLN67M","title":"Buttons","pathname":"/design/components/actions/buttons","siteSpaceId":"sitesp_mOU95","description":"A central component to guide users through their experience in the platform. They trigger actions and let users know what their options are.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"47rTZNUygDR9m7vr0N6f","title":"Button group","pathname":"/design/components/actions/button-group","siteSpaceId":"sitesp_mOU95","description":"Button group is used to gather multiple actions.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"Hzp2Iffj8XC61WOYvuiW","title":"File download","pathname":"/design/components/actions/file-download","siteSpaceId":"sitesp_mOU95","description":"This component allows users to download a file from Mirakl.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"Z8HhM6VG9p6OdmPEJWJF","title":"Save bar","pathname":"/design/components/actions/save-bar","siteSpaceId":"sitesp_mOU95","description":"A Save Bar is an action bar that sticks to the bottom of the viewport as you scroll. It contains actions related to a page and allow users to scroll without loosing visibility on the different actions","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"yF5TnkqxwsFBO19iw5yQ","title":"Tasklist","pathname":"/design/components/actions/tasklist","siteSpaceId":"sitesp_mOU95","description":"Task lists are created to present users with a series of tasks they need to accomplish in order to complete a more intricate process, such as creating a store or profile.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"g9flKMasD5KGarwVG1wb","title":"Contextual Toolbar","pathname":"/design/components/actions/contextual-toolbar","siteSpaceId":"sitesp_mOU95","description":"Convert a single page into a dynamic interface by granting users efficient control for visualizing and managing displayed data.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Actions"}]},{"id":"Jolr4RefXUWMkBzgqccZ","title":"Datalist","pathname":"/design/components/datalist","siteSpaceId":"sitesp_mOU95","description":"Datalists display objects of the same type in a lean and clear way.","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"iiM5zl5gHhrJ23AFRgha","title":"Datatable","pathname":"/design/components/datatable","siteSpaceId":"sitesp_mOU95","description":"Datatables are designed to present information consistently, facilitating easy data comparison","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"F6OIzHB6qXvfojVtvHTM","title":"Feedback","pathname":"/design/components/feedback","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"chB3bqh9dSxOjYy72yxL","title":"Alerts","pathname":"/design/components/feedback/alerts","siteSpaceId":"sitesp_mOU95","description":"Alerts highlight important information that needs to be communicated quickly to the user.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Feedback"}]},{"id":"nsDHeOYi2Ml3ereokKCv","title":"Activity Loader","pathname":"/design/components/feedback/activity-loader","siteSpaceId":"sitesp_mOU95","description":"A component that indicates to users that we're processing their data or that a page is loading.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Feedback"}]},{"id":"2oQ6erK7nDMlXy7W3UlC","title":"Badge (status)","pathname":"/design/components/feedback/badge-status","siteSpaceId":"sitesp_mOU95","description":"Badges are used to show the status of an object or the result of an action that has been performed.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Feedback"}]},{"id":"D5y6uvOZJoy61X1ZzL4U","title":"Empty state","pathname":"/design/components/feedback/empty-state","siteSpaceId":"sitesp_mOU95","description":"Empty states should be used when the expected content cannot be displayed. It sets expectations and indicates the reasons for this blank space.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Feedback"}]},{"id":"AFO96vYTJCwWjlfNVUNy","title":"Snackbar","pathname":"/design/components/feedback/snackbar","siteSpaceId":"sitesp_mOU95","description":"A discreet but efficient way to convey feedback on the outcome of an action.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Feedback"}]},{"id":"5MsIgnwTaVL6G5sKPv14","title":"Form","pathname":"/design/components/form","siteSpaceId":"sitesp_mOU95","description":"A page that has interactive controls with which a user can submit information to a web server.","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"ARd3cpbXfcBRil2jZZWa","title":"Fields","pathname":"/design/components/form/fields","siteSpaceId":"sitesp_mOU95","description":"Fields allow users to enter an input. They will provide answers we cannot foresee unlike pickers.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Form"}]},{"id":"OWlRuwKZ6Cmy32CK3gLV","title":"Pickers","pathname":"/design/components/form/pickers","siteSpaceId":"sitesp_mOU95","description":"Pickers allow users to select content from a set of values, usually presented in a list or dropdown menu.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Form"}]},{"id":"zx7aZ4AQUpzte84uERxu","title":"Selection controls","pathname":"/design/components/form/selection-controls","siteSpaceId":"sitesp_mOU95","description":"Selection controls are specific components to let users control different kinds of options, settings, or situations.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Form"}]},{"id":"DwVDFnpsWcJcVhhVRPcL","title":"Tree","pathname":"/design/components/form/tree","siteSpaceId":"sitesp_mOU95","description":"A tree helps showcase data in a hierarchical way, either for selection or navigation.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Form"}]},{"id":"0mKTCLjdGiTIwGNTxIHc","title":"Images","pathname":"/design/components/images","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"kTbb4MWQNXQ5GVjvcTwM","title":"Illustrations","pathname":"/design/components/images/illustrations","siteSpaceId":"sitesp_mOU95","description":"Our illustrations have a visual and emotional impact in order to bring optimism, friendliness and engagement to users.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Images"}]},{"id":"54xQ4RMZYM4hPitGN2mv","title":"Icons","pathname":"/design/components/images/icons","siteSpaceId":"sitesp_mOU95","description":"Icons provide visual help to users and illustrate key concepts.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Images"}]},{"id":"l3PzNLLTCIrAbKhdw8sn","title":"Media","pathname":"/design/components/images/media","siteSpaceId":"sitesp_mOU95","description":"The Media component is designed to display images or videos, enhancing interfaces by providing graphic or video representations.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Images"}]},{"id":"ysV4ZG32oMmV8wlC6xyy","title":"Navigation","pathname":"/design/components/navigation","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"9qAmxTJBNvqY61tADvPD","title":"Hyperlink","pathname":"/design/components/navigation/hyperlink","siteSpaceId":"sitesp_mOU95","description":"Hyperlinks are anchor tags users can interact with to navigate to other pages.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Navigation"}]},{"id":"xo1z1t3P5jW8xaqw9cLl","title":"Page title","pathname":"/design/components/navigation/page-title","siteSpaceId":"sitesp_mOU95","description":"Page title provides the core information users need when viewing the page.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Navigation"}]},{"id":"GLITmOBREvoNSGO2T59N","title":"Sidebar","pathname":"/design/components/navigation/sidebar","siteSpaceId":"sitesp_mOU95","description":"Sidebar menu is the primary navigation. It provides access to the main sections of the platform.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Navigation"}]},{"id":"xcKGBpSYG670Bjjnj36O","title":"Top bar","pathname":"/design/components/navigation/top-bar","siteSpaceId":"sitesp_mOU95","description":"Top bar allows operators and sellers to switch between our different tools and access their profile.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Navigation"}]},{"id":"rQnbnxwAQmylvWTP0iWV","title":"Overlays","pathname":"/design/components/overlays","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"4nRx4QSkhYnlE9J3VJhX","title":"Modal","pathname":"/design/components/overlays/modal","siteSpaceId":"sitesp_mOU95","description":"A modal displays content that requires user interaction in a layer that shows up on top of the current context. Modals block access to the rest of the page and force user interaction.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Overlays"}]},{"id":"uWWzP1khPciOavpAiQsh","title":"Popover","pathname":"/design/components/overlays/popover","siteSpaceId":"sitesp_mOU95","description":"An overlay for larger amounts of data.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Overlays"}]},{"id":"DRdzhTLPSN0bYKDKcxFt","title":"Tooltip","pathname":"/design/components/overlays/tooltip","siteSpaceId":"sitesp_mOU95","description":"An overlay for small amounts of data.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Overlays"}]},{"id":"gDfnOEFIwZz96zvQ212S","title":"Side Drawer","pathname":"/design/components/overlays/side-drawer","siteSpaceId":"sitesp_mOU95","description":"A drawer is a panel that slides in from the right side of the viewport.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Overlays"}]},{"id":"TImdDj79vycUXrGETyve","title":"Structure","pathname":"/design/components/structure","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"Design"},{"label":"Components"}]},{"id":"qNCLMb3zHHLfqBQUxBu6","title":"Global layout","pathname":"/design/components/structure/global-layout","siteSpaceId":"sitesp_mOU95","description":"Global layout is the way we arrange elements on a page to create a consistent experience for the user.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"}]},{"id":"PAar1ocuQm03t1PZVgE1","title":"Panel","pathname":"/design/components/structure/panel","siteSpaceId":"sitesp_mOU95","description":"The key component to structure content on Mirakl.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"}]},{"id":"YV20DVQWDCXS1GiwDpKj","title":"Activable Panel","pathname":"/design/components/structure/panel/activable-panel","siteSpaceId":"sitesp_mOU95","description":"A Panel variant with dynamic display control to bring flexibility in the interface.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"},{"label":"Panel"}]},{"id":"704W1Kl84l0824eNw8xH","title":"Clickable Panel","pathname":"/design/components/structure/panel/clickable-panel","siteSpaceId":"sitesp_mOU95","description":"Clickable panels are used to display information in a clickable zone.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"},{"label":"Panel"}]},{"id":"rUctjO7ugoZGMeb9fEzr","title":"Expandable Panel","pathname":"/design/components/structure/panel/expandable-panel","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"},{"label":"Panel"}]},{"id":"tyKzR6hW6UFmVIYytjTs","title":"Panel tabs","pathname":"/design/components/structure/panel/panel-tabs","siteSpaceId":"sitesp_mOU95","description":"Panel tabs display related but specific content within the same panel, filtered views, for example.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"},{"label":"Panel"}]},{"id":"DMfhOJOigXHo2doWAG9h","title":"Totalizer Panel","pathname":"/design/components/structure/panel/totalizer-panel","siteSpaceId":"sitesp_mOU95","description":"A component to present important figures to the user.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"},{"label":"Panel"}]},{"id":"mIiFxfBSkfTkPA0CUKn2","title":"Card","pathname":"/design/components/structure/card","siteSpaceId":"sitesp_mOU95","description":"Cards are a great way to add some hierarchy and organization to a panel.","breadcrumbs":[{"label":"Design"},{"label":"Components"},{"label":"Structure"}]},{"id":"JLV5BwJ2tMCO8awfYCw6","title":"Patterns","pathname":"/design/patterns","siteSpaceId":"sitesp_mOU95","breadcrumbs":[{"label":"Design"}]},{"id":"xhGb9dEEZcjFmjfeYcW0","title":"Advanced selection","pathname":"/design/patterns/advanced-selection","siteSpaceId":"sitesp_mOU95","description":"Allows users to make an informed selection of items with an editable restitution of data.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"nmlL2BXQH84kGEFFy0NX","title":"Configure options","pathname":"/design/patterns/configure-options","siteSpaceId":"sitesp_mOU95","description":"Simplify user choices in configuring their settings.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"U1VADldGsqLGoX00SPIY","title":"Deletion","pathname":"/design/patterns/deletion","siteSpaceId":"sitesp_mOU95","description":"Guidelines for implementing safe, clear, and intentional deletion workflows that protect users from unintended data loss.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"uVgyzRPIZKbj70KXzr2m","title":"Displaying data","pathname":"/design/patterns/displaying-data","siteSpaceId":"sitesp_mOU95","description":"Datalist or datatable, that is the question.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"xIOb7lJTMXqRGkEdHIri","title":"Displaying history","pathname":"/design/patterns/displaying-history","siteSpaceId":"sitesp_mOU95","description":"Tracking changes and progression over time.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"WhWz5ZF9v9CcKCGVmvqz","title":"Errors","pathname":"/design/patterns/errors","siteSpaceId":"sitesp_mOU95","description":"Allows users to fix problems themselves through thoughtful messaging.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"SH13N3GpOm3i4sFxBPOx","title":"Forms","pathname":"/design/patterns/forms","siteSpaceId":"sitesp_mOU95","description":"Allow users to submit or edit information.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"fwXQpvnoNcKpsgdAsQCq","title":"Form - Creation mode","pathname":"/design/patterns/forms/form-creation-mode","siteSpaceId":"sitesp_mOU95","description":"A creation form is when users create an object or add an element that did not exist before.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"},{"label":"Forms"}]},{"id":"KZPHogXYhiS8Bt7W19Mk","title":"Form - Edition mode","pathname":"/design/patterns/forms/form-edition-mode","siteSpaceId":"sitesp_mOU95","description":"An Edition form is when users edit an object/edit an element that already existed.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"},{"label":"Forms"}]},{"id":"QMV5N7I4pZNCoWrIKdAf","title":"Form - In a modal","pathname":"/design/patterns/forms/form-in-a-modal","siteSpaceId":"sitesp_mOU95","description":"This page describes specific rules to form within a modal.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"},{"label":"Forms"}]},{"id":"YvEz3dQ48Bq2BX7i5lsC","title":"Error Management","pathname":"/design/patterns/forms/error-management","siteSpaceId":"sitesp_mOU95","description":"How we guide users to handle mistakes on their forms","breadcrumbs":[{"label":"Design"},{"label":"Patterns"},{"label":"Forms"}]},{"id":"6EREHSyCragNVZ5GobVg","title":"Stepper form","pathname":"/design/patterns/forms/stepper-form","siteSpaceId":"sitesp_mOU95","description":"Stepper is designed to help users fill a complex or long form. By deviding forms into smaller steps, we reduce users mental load and clarifies information structure.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"},{"label":"Forms"}]},{"id":"xNHKwtef89t1OUYRGFnc","title":"Onboarding form","pathname":"/design/patterns/forms/onboarding-form","siteSpaceId":"sitesp_mOU95","description":"The onboarding stepper is dedicated to onboarding experiences for new users. Its simple design helps users provide key information quickly and seamlessly.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"},{"label":"Forms"}]},{"id":"m8lIsokZHe84pcwrjcxg","title":"Loading","pathname":"/design/patterns/loading","siteSpaceId":"sitesp_mOU95","description":"Reduces load time frustration and makes the page feel more responsive.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"KKcgJCnWL1J1YZHtGKWw","title":"Progressive disclosure","pathname":"/design/patterns/progressive-disclosure","siteSpaceId":"sitesp_mOU95","description":"Reveal gradually information to minimize cognitive load for a more intuitive design experience.","breadcrumbs":[{"label":"Design"},{"label":"Patterns"}]},{"id":"yLpWNngMTpOsoWOBFvIH","title":"Writing for Mirakl","pathname":"/content/writing-for-mirakl","siteSpaceId":"sitesp_mOU95","description":"Learn what writing meaningful microcopy means and how to achieve it.","breadcrumbs":[{"label":"content"}]},{"id":"jtgFCzuySx4V1H6INI9U","title":"Grammar and formatting","pathname":"/content/writing-for-mirakl/grammar-and-formatting","siteSpaceId":"sitesp_mOU95","description":"Discover our key grammar principles.","breadcrumbs":[{"label":"content"},{"label":"Writing for Mirakl"}]},{"id":"XbwB1QQSFYI6spPOyemQ","title":"Vocabulary","pathname":"/content/vocabulary","siteSpaceId":"sitesp_mOU95","description":"Learn key Mirakl terminology and how to use it.","breadcrumbs":[{"label":"content"}]},{"id":"mGjmoRIefK1aGnxYq8qK","title":"Mirakl products","pathname":"/content/vocabulary/mirakl-products","siteSpaceId":"sitesp_mOU95","breadcrumbs":[{"label":"content"},{"label":"Vocabulary"}]},{"id":"9aiUXr3OoJX7CUH9AYOS","title":"Which verb to use","pathname":"/content/vocabulary/which-verb-to-use","siteSpaceId":"sitesp_mOU95","description":"","breadcrumbs":[{"label":"content"},{"label":"Vocabulary"}]}]}