# Digitec Galaxus Design System

> Guidelines, foundations (color, spacing, typography, motion, icon tokens), patterns and components of the Digitec Galaxus design system, as markdown. Text is normative; linked images are illustrations with placeholder content.

## Get Started

- [Introduction](/designsystem/llms/get-started/introduction.md): Welcome to the Digitec Galaxus Design System!
- [Use with AI](/designsystem/llms/get-started/use-with-ai.md): Connect Claude, Copilot or any MCP client to the design system guidelines and tokens.

## Foundations

- [Accessibility](/designsystem/llms/foundations/accessibility.md): We strive to make our products and services intuitive and accessible for everyone.
- [Border Radius](/designsystem/llms/foundations/border-radius.md): The border radius defines how rounded the corners of elements are in the shop frontend.
- [Colors](/designsystem/llms/foundations/colors.md): Color is one of the clearest expressions of the Digitec Galaxus brands.
- [Design Principles](/designsystem/llms/foundations/design-principles.md): Our design principles create a shared understanding on how to design the customer experience at Digitec Galaxus.
- [Elevation](/designsystem/llms/foundations/elevation.md): Concepts that help us position elements on the z-axis.
- [Grid System](/designsystem/llms/foundations/grid-system.md): The foundation for positioning all elements on the page.
- [Iconography](/designsystem/llms/foundations/iconography.md): Icons provide visual aid through a reduced, graphical representation.
- [Images And Illustrations](/designsystem/llms/foundations/images-and-illustrations.md): Visuals are the best way to convey emotionally meaningful information.
- [Motion](/designsystem/llms/foundations/motion.md): Motion brings UI to life and helps us to visually demonstrate cause and effect.
- [Accessibility And Reduced Motion](/designsystem/llms/foundations/motion/accessibility-and-reduced-motion.md): Many types of animated effects are very likely to be problematic for people with motion sensitivity.
- [Atomic Patterns](/designsystem/llms/foundations/motion/atomic-patterns.md): Atomic patterns are the basic building blocks for motion.
- [Duration](/designsystem/llms/foundations/motion/duration.md): Duration should depend on the size of an object and the distance it travels.
- [Easing](/designsystem/llms/foundations/motion/easing.md): Easing allows us to create natural-looking animations that mimic movement in the real world.
- [Motion Implementation](/designsystem/llms/foundations/motion/motion-implementation.md): Most motion use cases can be implemented by using css transitions.
- [Complex Motion](/designsystem/llms/foundations/motion/motion-implementation/complex-motion.md): Motion should be adressed with css transitions whenever possible.
- [Screen Ranges and Breakpoints](/designsystem/llms/foundations/screen-ranges-and-breakpoints.md): Responsive styling and viewport dependant JavaScript.
- [Spacing](/designsystem/llms/foundations/spacing.md): Structuring and grouping of elements in our UIs.
- [Typography](/designsystem/llms/foundations/typography.md): Digitec Galaxus uses four distinct type scales.
- [Digitec](/designsystem/llms/foundations/typography/digitec.md): These rules only apply to Digitec.
- [Galaxus](/designsystem/llms/foundations/typography/galaxus.md): These rules apply to Galaxus.
- [Microtypography](/designsystem/llms/foundations/typography/microtypography.md): To enhance readability, we have established specific guidelines for typesetting characters, numbers, and abbreviations.

## Patterns

- [Empty State](/designsystem/llms/patterns/empty-state.md): An empty state is used when an interface element has no content or data to display.
- [Error Handling](/designsystem/llms/patterns/error-handling.md): Error handling defines how we communicate problems to users.
- [Forms](/designsystem/llms/patterns/forms.md): A form is a group of related fields.
- [Loaders](/designsystem/llms/patterns/loaders.md): Loaders inform users that content is being loaded.

## Components

- [Accordion](/designsystem/llms/components/accordion.md): Accordions are vertically stacked lists of headers that reveal or hide content associated with them.
- [Alert](/designsystem/llms/components/alert.md): An alert displays an important, clear message and can contain optional actions.
- [Avatar](/designsystem/llms/components/avatar.md): For a more in-depth explanation about profile and author pictures, please refer to [Images And Illustrations](/designsystem/llms/foundations/images-and-illustrations.md).
- [Button](/designsystem/llms/components/button.md): Buttons are the primary interaction element on our interfaces and come in different styles and sizes.
- [Button Group](/designsystem/llms/components/button/button-group.md): A responsive layout component designed specifically for buttons, ensuring optimal display across various screen ranges.
- [Carousel](/designsystem/llms/components/carousel.md): A carousel allows multiple pieces of the same type of content to occupy the same space.
- [Checkbox](/designsystem/llms/components/checkbox.md): Checkboxes allow users to make binary choices, indicating whether a particular option or setting should be enabled or disabled.
- [Chip](/designsystem/llms/components/chip.md): Chips let users filter content or display a status.
- [Collapsible Option](/designsystem/llms/components/collapsible-option.md): A collapsible option helps the user understand options available to them that contain additional detail without overwhelming the user.
- [Context Menu](/designsystem/llms/components/context-menu.md)
- [Dialog](/designsystem/llms/components/dialog.md): A dialog interrupts the user flow by displaying content in a layer above the page.
- [Divider](/designsystem/llms/components/divider.md): Dividers create visual structure on a page.
- [Dropdown](/designsystem/llms/components/dropdown.md): Dropdowns allow users to choose one option from a list of options.
- [Expand More](/designsystem/llms/components/expand-more.md): The `<ExpandMore />` component saves space by initially showing only a few items from a list of child components.
- [Illustrations](/designsystem/llms/components/illustrations.md): To make our stores look more lively and less sterile, illustrations are used.
- [Input Field](/designsystem/llms/components/input-field.md): Input fields allow users to enter information into the system.
- [Help Text](/designsystem/llms/components/input-field/help-text.md): Help Texts can be used for form elements like the [Input Field](/designsystem/llms/components/input-field.md).
- [Label](/designsystem/llms/components/label.md): A label tags an object according to provided keywords, so that the user can classify and identify the object at a glance.
- [LegacyTimeline](/designsystem/llms/components/legacy-timeline.md): A timeline represents a timeline of steps.
- [Link](/designsystem/llms/components/link.md): A link is used to navigate between pages.
- [Popover](/designsystem/llms/components/popover.md): A popover is an informative layer that appears above other content on the page.
- [Radio Button](/designsystem/llms/components/radio-button.md): Radio buttons allow users to make one selection from a set of options.
- [Remaining Gauge](/designsystem/llms/components/remaining-gauge.md)
- [Search Field](/designsystem/llms/components/search-field.md): With a tap on “return” on the Keyboard, it disappears to make space for the Search Results.
- [Section End](/designsystem/llms/components/section-end.md): A Section End communicates the end, or temporary end, of a list of items.
- [Selector](/designsystem/llms/components/selector.md): Selectors are an alternative way to showcase a [Radio Button](/designsystem/llms/components/radio-button.md), [Checkbox](/designsystem/llms/components/checkbox.md), [Button](/designsystem/llms/components/button.md) or [Link](/designsystem/llms/components/link.md).
- [Skeleton](/designsystem/llms/components/skeleton.md): A skeleton is used for loading a full page or parts of a page with a predictable layout.
- [Spinner](/designsystem/llms/components/spinner.md): A spinner is used for processing or loading content that is unpredictable.
- [Status](/designsystem/llms/components/status.md)
- [Table](/designsystem/llms/components/table.md): The `<DataTable />` component displays data in an organized, easy-to-analyze tabular format.
- [Tabs](/designsystem/llms/components/tabs.md): Tabs are used to switch between related views.
- [Timeline](/designsystem/llms/components/timeline.md): A timeline shows the steps of a process.
- [Toast](/designsystem/llms/components/toast.md): A toast informs a user about an outcome of an action in a non-disruptive way.
- [Toggle](/designsystem/llms/components/toggle.md): Toggles allow users to quickly switch between two possible states: on or off.
- [Tooltip](/designsystem/llms/components/tooltip.md): A tooltip is a floating, non-actionable label used to explain a user interface element or feature.
- [Upload](/designsystem/llms/components/upload.md): Image Upload allows the user to send images to our interfaces, for example when creating a resale offer.

## Develop

- [Figma Code Connect](/designsystem/llms/develop/figma-code-connect.md): The Figma config of a component, and how Code Connect snippets are generated and published from it.
- [Localization](/designsystem/llms/develop/localization.md): Localization provides methods to format dates, times, numbers, and prices according to the rules of a specific locale.
- [Ownership and Architecture](/designsystem/llms/develop/ownership-and-architecture.md): Learn more about frontend code organisation and architecture.
- [Web Performance & Web Vitals](/designsystem/llms/develop/web-performance.md): Learn why web performance is important and how to improve it.
- [Interaction to Next Paint - INP](/designsystem/llms/develop/web-performance/inp.md): The Interaction-To-Next-Paint (INP) is a key metric for measuring the interactivity of our web shop.
- [1. Javascript Execution & Task Prioritization](/designsystem/llms/develop/web-performance/inp/1-javascript-execution-task-prioritization.md): When an event handler is called, the browser should prioritize updating the UI over other tasks.
- [2. Render Performance (React)](/designsystem/llms/develop/web-performance/inp/2-render-performance-react.md): There are several factors that can affect the performance of React rendering.
- [3. Styling & CSS Performance](/designsystem/llms/develop/web-performance/inp/3-styling-css-performance.md): The CSS engine is an important part of web browsers and is usually very fast.
- [Writing Documentation](/designsystem/llms/develop/writing-documentation.md): How we write documentation for our components.