# Siemens Industrial Experience
> Siemens Industrial Experience
This file contains all documentation content in a single document following the llmstxt.org standard.
## 3D chart
import EchartsSpecial3dPlayground from '@site/docs/autogenerated/playground/echarts-special-3d.mdx';
# 3D Chart - Code
The `echarts-gl` package extends ECharts to support 3D visualizations. With this package, you can design a variety of 3D charts, including:
- 3D scatter plots
- 3D bar charts
- 3D surface plots
## Basic
Test
```
3. Define an `ix-helper-text` component with a `for` attribute to link the helper text to the `ix-input` component.
```html
When using Angular in combination with reactive forms, it is not necessary to
manually apply the CSS classes `.ix-invalid` and `.ix-valid`. This will be
done automatically through value accessors.
## Suppress internal validation
To suppress the internal validation of a component, you have to provide the `novalidate` attribute to the [form element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#novalidate).
```html
```
## Basic
## Angular
Please note that using the `required` attribute in an Angular application could result in unfavourabe behaviour displaying the field as invalid even if there was no user interaction yet.
To avoid that it is suggested not to add the `required` attribute, but implement a custom validator for required fields instead (see `name` and `last-name` in the following code).
Using `react-form-hook` is just an example to demonstrate how validation could be done
within React. You can use any other validation library or write your own validation logic.
Using `@vuelidate/core` is just an example to demonstrate how validation could be done
within Vue. You can use any other validation library or write your own validation logic.
): Promise>
```
### React
`@siemens/ix-react` provides an function that allows to open modal dialogs based on a `JSXElement`.
{/*
*/}
);
```
### Vue
`@siemens/ix-vue` provides a function that allows to open modal dialogs based on a `VNode`.
```
### Javascript
## Application frame
| Component | Description |
| :--------------------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Application](./application/index.mdx) | Applications manage the layout and theming of top-level app elements, ensuring a cohesive user experience. |
| [Application header](./application-header/index.mdx) | Application headers provide a structured area for key elements like brand logo, application name and user avatar. |
| [Application menu](./application-menu/index.mdx) | The navigation menu provides direct access to main application parts, legal and version information, and settings. |
| [Avatar](./avatar/index.mdx) | Avatars visually or textually represent individual identities, typically for users logged into a system. |
| [Content](./content/index.mdx) | The content component is a simple layout component made for hosting content. |
| [Content header](./content-header/index.mdx) | Content headers provide a brief overview of the content on a page. |
| [About and legal](./about-and-legal/index.mdx) | The About and legal component is an overlay we typically use to show application information, application versions, license terms, legal regulations, copyright information and other legal content. |
| [Settings](./settings/index.mdx) | The settings overlay provides a centralized location for application settings. |
| [Popover news](./popover-news/index.mdx) | Popover news presents important updates and information when the application starts. |
## Navigation and hierarchy
| Component | Description |
| :----------------------------------- | :-------------------------------------------------------------------------------------------------------- |
| [Breadcrumb](./breadcrumb/index.mdx) | Breadcrumbs provide a clear navigation path within an application. |
| [Group](./group/index.mdx) | Groups are expandable containers for a list of selectable options. |
| [Pagination](./pagination/index.mdx) | Paginations allow users to navigate between pages of content when it is split for performance reasons. |
| [Tabs](./tabs/index.mdx) | Tabs consist of tab items and organize content into separate sections by grouping similar information. |
| [Tree](./tree/index.mdx) | Trees display hierarchical data structures and allow users to navigate by expanding and collapsing nodes. |
| [Workflow](./workflow/index.mdx) | Workflows are a series of logical steps that guide users through a process. |
## Containers and layouts
| Component | Description |
| :------------------------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
| [Blind](./blind/index.mdx) | Blinds enhance content organization by allowing users to toggle visibility through collapsing and expanding sections. |
| [Card](./card/index.mdx) | Cards neatly organize and group related information about a specific subject. |
| [Card list](./card-list/index.mdx) | Card lists display a large number of cards or items of the same type in a lightweight, grouped manner. |
| [Flip](./flip/index.mdx) | Flips are containers that flip when clicked to reveal additional content. |
| [Event list](./event-list/index.mdx) | Event lists display a list of any type of element with additional details. |
| [Layout auto](./layout-auto/index.mdx) | Auto-layouts are containers that automatically adjust the size of their columns based on the content. |
| [Layout grid](./layout-grid/index.mdx) | Layout grids are used to structure the layout of a page or screen responsively. |
| [Modal](./modal/index.mdx) | Modals present information prominently and are useful for gathering essential user input without navigating to another page. |
| [Panes](./panes/index.mdx) | Panes are interactive components that allow users to access content that isn't constantly visible on the screen. |
| [Popovers](./popover/index.mdx) | Popovers display contextual information next to a trigger element. |
| [Tile](./tile/index.mdx) | Tiles are containers that display content in a card-like format. |
## Forms
| Component | Description |
| :----------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Forms field](./forms-field/index.mdx) | A field is a form element when user input is needed. It's typically used with other form elements in a fieldset. |
| [Forms layout](./forms-layout/index.mdx) | Effective form layouts play a crucial role in usability. Well-structured forms include fieldsets, considering the hierarchy of information, and understanding how to strike the right balance between aesthetics and functionality. |
| [Forms validation](./forms-validation/index.mdx) | Form validation gives users feedback on their input to ensure accurate, consistent data is submitted. When requirements are not met or data is incorrect, it’s rejected. |
| [Forms behavior](./forms-behavior/index.mdx) | Forms behavior refers to the way in which user input is handled and validated within a form. It plays a crucial role in providing a seamless and user-friendly experience for form interactions. |
## Input fields and selections
| Component | Description |
| :----------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Category filter](./category-filter/index.mdx) | Category filters allow users to quickly narrow their search by selecting predefined categories. |
| [Checkbox](./checkbox/index.mdx) | Checkboxes are form controls that allow users to select none, one or more options. |
| [Custom field](./custom-field/index.mdx) | Custom fields are wrapper components that can host any form component. |
| [Date dropdown](./date-dropdown/index.mdx) | Date dropdowns allow users to select a specific date from a date picker or pre-defined date options. |
| [Date input](./input-date/index.mdx) | Date inputs allow users to enter and select dates in a standardized format, ensuring consistency and accuracy. |
| [Date picker](./date-picker/index.mdx) | Date pickers provide a versatile calendar that can be used as a standalone element or within a dropdown for date input, offering a seamless way to select dates. |
| [Date time picker](./date-time-picker/index.mdx) | Date-time pickers offer an interface for selecting both dates and times, which can be used as a standalone element or within a dropdown, providing a seamless way to input date and time values. |
| [Expanding search](./expanding-search/index.mdx) | Expanding searches are search fields that expand on click to save space. |
| [Number input](./input-number/index.mdx) | Number inputs allow users to enter and adjust numerical values. |
| [Range field](./range-field/index.mdx) | Range fields group two related inputs into a start and end value so users can enter date, time and date-time ranges consistently. |
| [Radio](./radio/index.mdx) | Radio buttons enable users to choose only one option from a predefined set of mutually exclusive options. |
| [Select](./select/index.mdx) | Selects allow users to choose from a list of options. |
| [Slider](./slider/index.mdx) | Sliders allow users to select a value from a range of values. |
| [Input](./input/index.mdx) | Input fields allow users to enter and edit single-line text, numbers, and other character-based symbols within an application. |
| [Textarea](./textarea/index.mdx) | Textareas allow users to enter and edit multi-line text input, making it perfect for forms that require longer entries. |
| [Time picker](./time-picker/index.mdx) | Time pickers allow users to select specific times ensuring accurate time input. |
| [Toggle](./toggle/index.mdx) | Toggle switches enable users to toggle between an on and off state. |
| [Upload](./upload/index.mdx) | Uploads allow users to select and upload files from their device via drag-and-drop. |
## Buttons and actions
| Component | Description |
| :--------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------- |
| [Button](./button/index.mdx) | Buttons facilitate user interactions by initiating actions and applying functions within an application. |
| [Dropdown button](./dropdown-button/index.mdx) | Dropdown buttons reveal a list of actions when selected. |
| [Icon button](./icon-button/index.mdx) | Icon buttons use only icons to represent actions, making them ideal for space-constrained layouts. |
| [Link button](./link-button/index.mdx) | Link buttons take users to another location either within or outside the application and contain a chevron and a text label. |
| [Split button](./split-button/index.mdx) | Split buttons are button elements that allow users to either trigger an action with one click or select an action from a list of options. |
| [Toggle button](./toggle-button/index.mdx) | Toggle buttons allow users to either activate or deactivate a function. |
| [Chip](./chip/index.mdx) | Chips are interactive elements that display small pieces of information in a compact and visually appealing way. |
## System feedback and status
| Component | Description |
| :------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Empty state](./empty-state/index.mdx) | Empty states inform users that there is no content to display. |
| [Message bar](./messagebar/index.mdx) | Message bars display important information to users, e.g. feedback, warnings or errors. |
| [Badge](./badge/index.mdx) | Badges display compact status, counter or notification cues on (or next to) UI elements. |
| [Pill](./pill/index.mdx) | Pills display small pieces of information, e.g. counters or statuses. |
| [Popover](./popover/index.mdx) | Popovers display contextual information in a floating panel anchored to a trigger element. |
| [Progress indicator](progress-indicator/guide.md) | Progress indicators inform users about the status of ongoing processes, e.g. loading data, submitting forms or processing non-blocking operations. |
| [Spinner](./spinner/index.mdx) | Spinners indicate that a process is running to provide feedback to the user. |
| [Toast](./toast/index.mdx) | Toasts are small pop-ups that provide simple feedback on a process. |
| [Tooltip](./tooltip/index.mdx) | Tooltips provide additional information when users hover over or focus on an element. |
## Data display
| Component | Description |
| :------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Angular data grid](./grid/index.mdx) | The popular data grid library AG Grid is seamlessly integrated into our design system, allowing you to harness its powerful features while maintaining consistency with our styleguide. |
| [HTML table](./html-grid/index.mdx) | HTML tables are used to display tabular data in a structured way. |
| [Key value](./key-value/index.mdx) | Key value pairs display a label (key) and a value in a structured, easy way. |
| [Key value list](./key-value-list/index.mdx) | Key value lists organize and list a series of key value pairs. |
| [KPI](./kpi/index.mdx) | KPIs display measured values together with a status indicator to help users interpret data. |
## Chat
| Component | Description |
| :--------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------- |
| [Chat](./chat/index.mdx) | Chat component for building conversational chatbot experiences. |
| [Chat input](./chat-input/index.mdx) | Chat inputs are used to compose and submit messages, attachments and follow-up actions in a conversational AI thread. |
| [User message](./user-message/index.mdx) | User messages display messages authored by the user in a chat thread. |
| [AI message](./ai-message/index.mdx) | AI messages display responses generated by the AI in a conversational chat. |
| [Chat attachment](./chat-attachment/index.mdx) | Chat attachments are files attached to chat inputs and user messages. |
## Charts
| Component | Description |
| :----------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [Chart overview](./charts-overview/overview.mdx) | Charts are essential tools for visualizing data, making complex information more accessible and easier to understand. |
| [Line chart](./line-chart/overview.mdx) | Line charts display data as a series of data points connected by straight line segments. Line charts are commonly used to visualize trends over time or compare two variables. We typically use line charts to visualize continuous data. |
| [Bar chart](./bar-chart/overview.mdx) | Bar charts display data using rectangular bars. The length of each bar is proportional to the value it represents. Bar charts are commonly used to compare the values of different categories. We typically use bar charts to visualize data that is categorical or ordinal in nature. |
| [Gauge chart](./gauge-chart/overview.mdx) | Gauge charts are a type of chart that displays data using a dial or needle to indicate a value within a specific range. Gauge charts are commonly used to visualize performance metrics, such as speedometers, progress meters, and other KPIs. We typically use gauge charts to represent a single value within a range of values. |
| [Pie chart](./pie-chart/overview.mdx) | Pie charts display data using a circular graph. The length of each slice is proportional to the value it represents. Pie charts are commonly used to visualize the parts of a whole and are particularly useful for comparing the relative sizes of different categories. |
| [3D chart](./3d/overview.mdx) | 3D charts are a powerful way to visualize data in three dimensions. They provide a more immersive and interactive experience compared to traditional 2D charts. We typically use 3D charts to represent complex data sets or to visualize data in a more engaging way. |
| [Special chart](./special-chart/overview.mdx) | ECharts offer a wide variety of different chart types and features. The following page deals with some of the more special chart types and features. |
---
## Pagination - Code
import PropsApi from '@site/docs/autogenerated/api/ix-pagination/api.mdx';
import PaginationPlayground from '@site/docs/autogenerated/playground/pagination.mdx';
import PaginationAdvancedPlayground from '@site/docs/autogenerated/playground/pagination-advanced.mdx';
# Pagination - Code
## Basic
### Keyboard only and no keyboard trap
We recommend that all functions are usable with a keyboard and don’t depend on timed key presses, e.g. pressing enter within 3 seconds to confirm. The only exception is functionality that relies on the path of a movement, not just its start and end points, e.g. freehand drawing or signing a signature.
For components that use a simple, linear structure, stick to the default tab-based navigation. Make sure every clickable surface is both reachable and clickable by keyboard. You can also set the [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) attribute to manipulate the default tab-navigation.
For components that use a more complex, two-dimensional structure, consider implementing keyboard interaction using the arrow keys:
```javascript
// Arrow key navigation for complex components
function handleArrowNavigation(event, container) {
const items = Array.from(
container.querySelectorAll('[role="gridcell"], [role="option"]'),
);
const currentIndex = items.indexOf(event.target);
switch (event.key) {
case 'ArrowRight':
focusItem(items[currentIndex + 1] || items[0]);
break;
case 'ArrowLeft':
focusItem(items[currentIndex - 1] || items[items.length - 1]);
break;
case 'ArrowDown':
// Implement based on your layout
break;
case 'ArrowUp':
// Implement based on your layout
break;
}
}
function focusItem(item) {
if (item) {
item.focus();
}
}
```
Always attempt to keep the focus on changes to prevent the user from manually having to navigate back to the previous location.
#### Focus management
Implement focus trapping for modal dialogs and other overlay components:
```javascript
function trapFocus(container) {
const focusableElements = container.querySelectorAll(
'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
);
const firstFocusable = focusableElements[0];
const lastFocusable = focusableElements[focusableElements.length - 1];
container.addEventListener('keydown', function (event) {
if (event.key === 'Tab') {
if (event.shiftKey) {
if (document.activeElement === firstFocusable) {
lastFocusable.focus();
event.preventDefault();
}
} else {
if (document.activeElement === lastFocusable) {
firstFocusable.focus();
event.preventDefault();
}
}
}
});
}
```
#### How to test
Disconnect your mouse and try to operate your service using only the keyboard.
### Text alternatives and labels
Label any non-text content, e.g. images, buttons, links or inputs, to comply with [WCAG guideline 2.1](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#keyboard-accessible). The general rule to follow is:
1. Use `aria-labelledby`
2. Otherwise use `aria-label`
3. Otherwise use `alt` attribute
4. Otherwise use `title` attribute
5. If none of the above yield a usable text string, there is no accessible name
When you are using iX components, the relevant attribute will be set when you set the component's labelling attribute:
` elements are present on a page, use the `aria-label` attribute.
```html
` element:
```html
Help
Order tracking
Shipping & Delivery
Returns
Contact us
Find a store
```
### Lists
Lists must be correctly structured to be recognized by screen readers. This means that parent (`` or ``) must be directly followed by `` and no other content element is allowed to be in-between.
Correct:
```html
text
```
Incorrect:
```html
This breaks the list structure
List item
```
Or use one of the lists:
[Event list](../../components/event-list/)
` element:
```html
Save
Save
```
### Live regions for dynamic content
Use ARIA live regions to announce dynamic content changes to screen readers:
```html
```
```javascript
function announceStatus(message) {
const statusDiv = document.getElementById('status');
statusDiv.textContent = message;
}
// Usage
announceStatus('Document saved successfully');
```
For urgent announcements, use `aria-live="assertive"`:
```html
```
## Mobile accessibility
Mobile accessibility is crucial as mobile devices are increasingly the primary way users access digital content. Modern mobile platforms like iOS and Android have built-in accessibility tools, making it essential to ensure your web applications work seamlessly with these technologies.
### Mobile-specific considerations
When developing accessible mobile applications, focus on these key areas:
#### Control mechanisms
Ensure interface controls work across different interaction methods:
```javascript
// Support both touch and mouse events
function handleInteraction(element) {
// Mouse events
element.addEventListener('mousedown', startAction);
element.addEventListener('mouseup', endAction);
// Touch events for mobile
element.addEventListener('touchstart', (e) => {
// Prevent mouse events from firing
e.preventDefault();
startAction(e);
});
element.addEventListener('touchend', (e) => {
e.preventDefault();
endAction(e);
});
// Keyboard support
element.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
startAction(e);
}
});
}
```
Avoid mouse-specific events that don’t work on touch devices:
```javascript
// ❌ Avoid: Mouse-only events
div.onmousedown = startDrag;
document.onmouseup = stopDrag;
// ✅ Better: Multi-modal support
function addDragSupport(element) {
// Mouse support
element.addEventListener('mousedown', initiateDrag);
// Touch support
element.addEventListener('touchstart', initiateDrag);
// Keyboard support
element.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
initiateDrag(e);
}
});
}
```
#### User input optimization
Minimize typing requirements on mobile devices:
```html
Software Engineer
Product Manager
Designer
Other
Home
About
Contact
```
```javascript
function initializeMobileMenu() {
const menuToggle = document.querySelector('.menu-toggle');
const mobileMenu = document.getElementById('mobile-menu');
menuToggle.addEventListener('click', toggleMenu);
menuToggle.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleMenu();
}
});
function toggleMenu() {
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
menuToggle.setAttribute('aria-expanded', !isExpanded);
mobileMenu.setAttribute('aria-hidden', isExpanded);
mobileMenu.classList.toggle('open');
// Focus management
if (!isExpanded) {
// Focus first menu item when opening
const firstMenuItem = mobileMenu.querySelector('a');
if (firstMenuItem) {
firstMenuItem.focus();
}
}
}
// Close menu when clicking outside
document.addEventListener('click', (e) => {
if (!e.target.closest('nav')) {
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
if (isExpanded) {
toggleMenu();
}
}
});
// Handle escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
const isExpanded = menuToggle.getAttribute('aria-expanded') === 'true';
if (isExpanded) {
toggleMenu();
menuToggle.focus();
}
}
});
}
```
```css
.menu-toggle {
background: none;
border: none;
padding: 12px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-around;
width: 44px;
height: 44px;
}
.hamburger-line {
width: 20px;
height: 2px;
background-color: currentColor;
transition: all 0.3s ease;
}
.mobile-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 1px solid #ccc;
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.mobile-menu.open {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.mobile-menu a {
display: block;
padding: 16px;
text-decoration: none;
border-bottom: 1px solid #eee;
min-height: 44px;
display: flex;
align-items: center;
}
.mobile-menu a:focus {
outline: 2px solid #0066cc;
outline-offset: -2px;
}
```
### Screen reader testing
#### Android TalkBack
To test with TalkBack:
1. Enable TalkBack in Settings > Accessibility
2. Use these gestures:
- **Single tap**: Select and announce item
- **Double tap**: Activate selected item
- **Swipe left/right**: Navigate between items
- **Two-finger swipe up**: Access global menu
- **Swipe up then right**: Access local menu
#### iOS VoiceOver
To test with VoiceOver:
1. Enable in Settings > Accessibility > VoiceOver
2. Use these gestures:
- **Single tap**: Select item
- **Double tap**: Activate item
- **Swipe left/right**: Navigate between items
- **Three-finger swipe**: Scroll
- **Rotor gesture**: Access navigation options
### Testing guidelines
#### Manual testing checklist
☑ All interactive elements have minimum 44px touch targets
☑ Content is readable when zoomed to 200%
☑ Navigation works with touch, keyboard, and screen readers
☑ Form inputs use appropriate mobile keyboards
☑ No horizontal scrolling on mobile devices
☑ Focus indicators are visible and clear
☑ Screen reader announces all important content changes
#### Automated testing
```javascript
// Example Playwright test with axe-core
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('mobile accessibility compliance', async ({ page }) => {
await page.goto('/your-page');
// Set mobile viewport
await page.setViewportSize({ width: 375, height: 667 });
const accessibilityScanResults = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21aa'])
.analyze();
expect(accessibilityScanResults.violations).toEqual([]);
});
test('touch target sizes', async ({ page }) => {
await page.goto('/your-page');
await page.setViewportSize({ width: 375, height: 667 });
const interactiveElements = page.locator(
'button, a, input, select, textarea',
);
const count = await interactiveElements.count();
for (let i = 0; i < count; i++) {
const element = interactiveElements.nth(i);
const box = await element.boundingBox();
expect(box.width).toBeGreaterThanOrEqual(44);
expect(box.height).toBeGreaterThanOrEqual(44);
}
});
```
### Mobile-specific ARIA considerations
When developing for mobile pay special attention to:
```html
Shipping Address
```
```javascript
// Announce dynamic content changes
function updateLoadingStatus(message) {
const statusElement = document.getElementById('loading-status');
statusElement.textContent = message;
}
// Usage
updateLoadingStatus('Loading search results...');
setTimeout(() => {
updateLoadingStatus('Search completed. Found 25 results.');
}, 2000);
```
### Key takeaways
1. **Test on actual devices** with screen readers enabled
2. **Ensure adequate touch target sizes** (minimum 44px)
3. **Support multiple input methods** (touch, keyboard, voice)
4. **Allow zoom and scaling** for users with visual impairments
5. **Optimize form inputs** for mobile keyboards
6. **Implement proper focus management** in mobile navigation
7. **Test with both portrait and landscape orientations**
8. **Provide clear feedback** for all user actions
---
## Overview(Accessibility)
## Our commitment as a design system
We are committed that our deliverables qualify for building solutions that are accessible for everyone. We strive to meet **WCAG AA standards** by providing perceivable, operable and understandable components.
## Ensuring accessibility in products
While our components are designed to meet accessibility standards, it is essential to remember that the overall accessibility of your solutions depends on how these components are used.
Simply incorporating our accessible components does not guarantee that the final product will be fully accessible. It is the responsibility of the developers and designers to ensure that their implementations adhere to accessibility best practices throughout the entire design and development process.
A comprehensible quick reference on how to meet Web Content Accessibility Guidelines can be found [here](https://www.w3.org/WAI/WCAG22/quickref/).
## WCAG and the key principles
Web Content Accessibility Guidelines (WCAG) explains how to make web content more accessible to people with disabilities. WCAG covers web sites, applications, and other digital content. It is developed by the World Wide Web Consortium (W3C) Web Accessibility Initiative (WAI). WCAG is an international standard.
The four main guiding principles of accessibility within WCAG are perceivable, operable, understandable, and robust. These overarching principles contain clear guidelines for creating and presenting WCAG-compliant digital content.
There are three levels of conformance:
- Level A is the minimum level.
- Level AA includes all Level A and AA requirements. **We strive to meet Level AA.**
- Level AAA includes all Level A, AA, and AAA requirements.
https://www.w3.org/WAI/fundamentals/accessibility-intro/
## Principle 1: Perceivable
> Information and user interface components must be presentable to users in ways they can perceive.
### Provide text alternatives
Provide text alternatives for non-text content. It allows content to be adapted into formats that support assistive technology e.g. screen readers ([WCAG reference 1.1](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#text-alternatives)).
- Provide text alternatives for any non-text content, such as icons without text labels
- Annotate your designs to provide text alternatives when developing
- Provide text content for videos
- Provide captions for figures and tables
- Avoid images containing text
**Example**: Use ARIA tags to ensure that your content is accessible and understandable to all users, including those using assistive technologies.
| ARIA tag | Description |
| :----------------- | :----------------------------------------------------------------------------------------------------------------------------------------------- |
| `aria-label` | Provides an accessible name for an element. |
| `aria-labelledby` | Identifies one or more elements that provide the accessible name for an element. It is often used when the label is already present on the page. |
| `aria-describedby` | Identifies the element that provides a description for the element it is applied to. |
### Create adaptable content
Design and implement content that can be presented in various ways, such as a simpler layout, without losing information or structure. This flexibility allows users to access and understand content regardless of their specific needs or the devices they are using ([WCAG reference 1.3](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#adaptable)).
- Ensure information is available in text or can be programmatically determined
- Allow both landscape and portrait orientations
- Provide tooltips for data cells to show context in [tables](../../components/html-grid/index.mdx)
- Designate regions like header, main and footer
- Provide related inputs as form
- Annotate reading order
**Example**: [Input components](../../components/forms-field/index.mdx) include optional attributes for label, required indicator, and helper or feedback text, and are usable inside a form.
### Combine color and contrast
In industrial software applications, color significantly enhances the visual communication of information. Nonetheless, it is essential to account for users with limited vision or color blindness. Use color combinations ([WCAG reference 1.4](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#distinguishable)) that meet accessibility standards for contrast to make it easier for users to see content, including separating foreground from background.
#### Use text on background
- Ensure minimum contrast for body text is 4.5:1
- Ensure minimum contrast for large text is 3:1
- Ensure icons meet 3:1 contrast with the background
**Example**: On background colors 1 to 4, both text colors (std-text and soft-text) pass the WCAG AA criteria for body text, large text, and icons.
#### Contrast components
While the components in our design system are built to meet baseline contrast requirements, it’s essential to evaluate contrast in the context of their implementation such as background colors or surrounding element.
- Ensure component contrast for adjoining colors is 3:1
- Ensure visual states for components meet 3:1 contrast with adjoining colors
- Ensure data visualization meets 3:1 contrast with the background
**Example**: On background colors 1 to 4, primary [buttons](../../components/button/index.mdx) pass the WCAG AA criteria for default, hover, and active states. For disabled states, the criteria do not apply as inactive components are exempt.
**Example**: In the [push card component](../../components/card/index.mdx), we adjust the font color based on the card's status color to ensure sufficient contrast.
#### Use more than color
- Ensure information conveyed by color is available in text as well
**Example**: The [message bar component](../../components/messagebar/index.mdx) uses color and an icon to indicate the severity level. To be compliant with WCAG, the text matches the severity level and is understandable without the color or the icon.
## Principle 2: Operable
> User interface components and navigation must be operable.
### Provide keyboard usage
Every feature in your industrial software needs to be operable via a keyboard ([WCAG reference 2.1](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#keyboard-accessible)). This approach supports users who prefer or need to use keyboard controls, and cannot rely on mouse or touch.
- Annotate tab order
- Annotate keyboard interaction
- Ensure all components are operable by keyboard
- Follow ARIA keyboard guidance for custom components ([ARIA reference](https://www.w3.org/WAI/ARIA/apg/))
**Example**: Annotate tab order to allow the navigation of interactive elements by pressing the Tab key. The standard behavior follows the reading order from left to right and top to bottom.
**Example**: Note that disabled elements are non-interactive, do not display tooltips, and are ignored by assistive technologies like screen readers.
### Give enough time
Ensure that users have sufficient time to read and interact with the content in your applications. This consideration is crucial for users working in dynamic environments where interruptions are common ([WCAG reference 2.2](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#enough-time)).
- Avoid autoplay content
- Avoid time limits or allow adjustment
**Example**: Dismissible [message bars](../../components/messagebar/index.mdx) stay visible until users close them. This avoids time pressure and gives users enough time to read and act on important information.
### Implement navigable aids
Navigation aids help users find content and understand their location within your applications ([WCAG reference 2.4](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#navigable)). This includes features like breadcrumbs, search functionality, and clear labeling to enhance user experience and efficiency.
- Use headings properly (`` ... ``)
- Provide descriptive page titles
- Provide clear link text
- Provide links to skip blocks
- Provide a search function
- Reduce the use of text styles and decorations
**Example**: Here we have detailed navigation using a [breadcrumb](../../components/breadcrumb/index.mdx), hierarchy of headings and [tab](../../components/tabs/index.mdx) navigation within details.
### Customize input modalities
Enhance the usability of your applications by making it easier for users to operate functionality through various input methods. This includes supporting keyboard, mouse, touch, and voice inputs to accommodate different user preferences and working conditions ([WCAG reference 2.5](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_overview&showtechniques=246%2C111#input-modalities)).
- Allow for simple pointer actions for all interactions
- Ensure minimum target size of 24x24 pixels
- Provide alternatives to device motion responses
- Allow cancel, undo and reverse for pointer actions
**Example**: The [chip component](../../components/chip/index.mdx), which is clickable, has a minimum height of 32px to ensure it meets accessibility requirements for touch targets. The [pill component](../../components/pill/index.mdx), being non-interactive and used only for displaying status, can have a smaller height.
## Principle 3: Understandable
> Information and the operation of the user interface must be understandable.
### Ensure readability and comprehension
Make text content easy to read and understand. Implement straightforward language, legible typography, and organized layout to improve user experience and accessibility ([WCAG reference 3.1](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_overview&showtechniques=111%2C241%2C246%2C247%2C322%2C331#readable)).
- Specify the default language of the page in HTML
- Use simple, clear language
- Provide definitions for complex terms
**Tip**: Our [writing guidelines](../../guidelines/language/writing-style-guide-getting-started.md) help make applications readable and understandable.
### Be predictable
Create consistent and intuitive applications that behave as users expect. Ensure navigation and interactions follow established patterns, helping users to interact with your application without unexpected behavior ([WCAG reference 3.2](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#predictable)).
- Provide clear error messages and correction options
- Provide help mechanisms in the same location
- Use the same icons for identical functions
- Ensure predictable patterns on input and focus
- Keep button styles consistent
**Example**: Using the application frame ensures that the main navigation is always in the same location.
### Give input assistance
Actively assist users in avoiding errors through preventive design and helpful guidance. When mistakes do occur, provide clear, constructive feedback and simple correction options to help users recover and complete their tasks successfully ([WCAG reference 3.3](https://www.w3.org/WAI/WCAG22/quickref/?versions=2.2¤tsidebar=%23col_overview#input-assistance)).
- Provide labels for inputs
- Indicate required fields and provide legends
- Provide expected data formats
- Avoid validation before user exits focus
- Describe errors
- Provide reverse and undo
**Example**: Errors are described using the feedback text of input components.
## Principle 4: Robust
> Content must be robust enough that it can be interpreted by a wide variety of user agents,including assistive technologies.
Build your application with clean, standards-compliant code that ensures compatibility with browsers, devices and assistive technologies ([WCAG reference 4.1](https://www.w3.org/WAI/WCAG22/quickref/?showtechniques=141%2C131#compatible)).
- Use proper ARIA labels and roles
- Make status messages programmatically available
- Test with multiple browsers and versions
- Test with assistive technologies
- Test with different zoom levels
**Example**: Test whether content is readable and functional when zooming in to at least 200%, ensuring users with visual impairments can effectively use your application.
---
## Consistent
#
## Best practice
- Always use a command line library when available
- Always return a zero exit code to signal success
- Always return non-zero exit code to signal failure
- Always send your output to stdout
- Always send your messaging to stderr
## Subcommands
- Use consistent subcommands
- Use consistent names for all subcommand levels
- Use clear and unique names for subcommands
## Changes
- Always try to make additive changes
- Always warn users about non-additive changes
- Avoid making breaking changes
- Provide a migration period and strategy for breaking changes
---
## Efficient
import Separator from '@site/src/components/Separator';
#
## Informing
- Keep users informed when processes are known to take time
- Give users time indicators when possible
- Use loading bars showing progress when possible
- Make things time out and notify users promptly
- Assume users need support
st century of industrial innovation! Our app uses AI to deliver efficiency in your operations.
## Related
- [Date input](../../../components/input-date/index.mdx)
- [Date picker](../../../components/date-picker/index.mdx)
- [Time input](../../../components/input-time/index.mdx)
---
## Measurements and units
## General rules
Use the same measurement format and style throughout your user interface and consider localization conflicts. Write out measurement abbreviations in full if there is any chance users will not understand.
British Thermal Unit (BTU): 1
Nautical Mile (nmi): 8
BTU: 1
nmi: 8
Avoid line breaks between the value and the unit by using a protected (non-breaking) space. Use the singular when talking about a specific number and in abbreviations. Use lower case as the default for most unit abbreviations.
200 kg
20 kg
4 in
200 g
200kg
20 kgs
4 in.
200 G
Use upper case for unit abbreviations named after people and lower case when the abbreviation is written out in full.
6 volts
6 V
6 Volts
6 v
| Person | Unit abbreviation |
| ------ | ----------------- |
| Newton | N |
| Pascal | Pa |
| Watt | W |
| Volta | V |
| Joule | J |
| Hertz | Hz |
| Ampere | A |
Use a slash to show how compound units are divided for clarity.
km/h
A/m
km-h
## Exceptions
Use "L" (liter) instead of lower case "l" only if there is any doubt users will confuse it with "1".
2 L
11 L
2 l
11 l
Use upper case "B" to abbreviate byte and lower case "b" to abbreviate bit. Use M for mega, G for giga and T for tera to distinguish from m (milli), g (gram) and t (ton).
120 MB (megabytes)
120 Mb (megabits)
1 t
1 TB
1 THz
1 T
## Volume
Use superscript to indicate cubed measurements.
m³
cm³
m3
cm3
Use the plain text caret symbol (^) when superscript is not possible in your application.
m^3
m3
Use mcg to abbreviate microgram instead of the Greek letter mu (μ).
1000 mcg
1000 μg
## Temperature
Use a non-breaking space (Ctrl + Shift + Space) between the number and the degree symbol.
23 °C
23°C
23° C
Use the degree symbol (°) before the initial letter of the temperature scale without a space.
23 °C
23 C°
## Web
Use "px" in lower case to abbreviate pixels with a space for readability without periods after px, pt and dpi (dots per inch).
45 px
1280 x 780 px
4 pt
45PX
1280x780px
4pt.
## Related
- [Numbers and percentages](numbers.mdx)
- [Number input](../../../components/input-number/index.mdx)
- [KPI](../../../components/kpi/index.mdx)
- [Key value](../../../components/key-value/index.mdx)
- [AG Grid](../../../components/grid/index.mdx)
- [HTML Table](../../../components/html-grid/index.mdx)
- [Charts](../../../components/charts-overview/overview.mdx)
---
## Money and currencies
## General rules
Place the currency symbol before the amount in English and use the same formatting style throughout.
£320
320£
£320/£320.00/Three hundred and twenty pounds/320 pounds (mixed styles)
Use decimal points for cents or smaller units within English user interfaces.
€999.50
$400,456.50
€999,50
$400.456,50
Never add a space between the currency symbol and the amount.
$100
$ 100
Use the ISO currency code before the number without a space.
USD400
300USD
Use numbers and currency symbols within the UI when talking about marketing and pricing.
Thank you. Your payment of $50 has been processed.
Invest in our new soft sensors for $6,000 to boost your production efficiency.
Spare parts cost estimation for 2025 is $125,999.
The subscription costs $10 per month.
Write out the full word in formal and legal documents.
The total amount shall not exceed four thousand dollars.
## Using currency symbols (¥) or codes (JPY)
**Currency symbol ($)**
- User interface: dashboards, displays, etc.
- Communications: emails, notifications, etc.
- Pricing and shopping carts
- In-app advertising
- In-app purchases
- Alerts and events
**ISO currency code (USD)**
- Legal contracts
- Documentation: compliance, regulatory, etc.
- Financial documents
- Financial transactions
- Bank statements
- International invoices and billing
## Related
- [Numbers and percentages](numbers.mdx)
- [ISO 4217 Currency codes (external link)](https://www.iso.org/iso-4217-currency-codes.html)
---
## Names and titles
## General rules
Use "First name" and "Last name" in forms and ensure text fields accept names with only one letter.
First name
Last name
Surname
Full name
Use first names to welcome users to applications.
Welcome Susanne
## Inclusive titles
Avoid gendered titles unless absolutely necessary for your application. Use "Title", not "Honorific", to describe words such as Mr. and Mrs. Note that not all cultures have equivalents to some titles used in the United States, such as Ms.
[ Mr. | Ms. | Mx. | None | Other | Prefer not to say]
[ Mr. | Mrs. | Miss | Ms. ]
## Title punctuation
Use full stops for all abbreviated titles in American English.
Mr. Smith
Mr Smith
Use titles with full names or surnames but do not use titles when addressing users with only their first name.
Mrs. Turner
Mrs. Jennifer Turner
Jennifer
Mrs. Jennifer
Use full stops for all abbreviated professional titles in American English.
Dr.
Prof.
Eng.
## Corporate titles
Use capital letters for corporate titles especially with the name and use capital letters for corporate title acronyms.
Chief Financial Officer Teresa Lopez
Teresa Lopez (Chief Financial Officer)
Teresa Lopez (CFO)
chief financial officer Teresa Lopez
Use lower case when titles are used generically (without a name) and separate titles from names with a comma.
The chief financial officer for the company will hold a press conference tomorrow.
The project manager needs to schedule maintenance.
Carol Jones, Chairwoman of the Supervisory Board, spoke at the press conference yesterday.
Call the Manager.
Always capitalize Managing Board and use lower case for "member".
John Smith is a member of the Managing Board.
John Smith is a member of the managing board.
## Related
- [Addresses](addresses.mdx)
- [Input (text)](../../../components/input/index.mdx)
- [Forms layout](../../../components/forms-layout/index.mdx)
---
## Numbers and percentages
## General rules
Write "Number" or "number" when there is enough space within the user interface.
Number
Num.
Use "No." as an abbreviation for number with a period and without a space.
No.6
Num.6
Avoid using the # symbol with numbers.
Number 6
#6
Write numbers as digits, such as "9" instead of "nine", in industrial user interfaces.
We’ve released 3 new features this month.
We’ve released three new features this month.
Write numbers with four digits and more with commas to separate thousands, millions, etc. in American English.
100,000
100.000
## Numbers and punctuation
Use en dashes (–) instead of hyphens (-) for ranges.
10–0
The shipment weighs 50–75kg
Write out the unit only once in ranges.
The temperature fluctuated between 20–25°C
The temperature fluctuated between 20°C–25°C
Use the minus hyphen for negative numbers which is better aligned than a normal hyphen (Unicode U+2212).
-12
—12
Use either "to" or separate text fields for ranges with minus numbers for readability.
-12 to -15°C
Min temp (C): -12° / Max temp (C): -15°
## Decimals
Write decimals using a period (.) to separate the whole number from the fractional part in American English.
0.5
5,245.15
2.5 million
0,5
5.245,15
2,5 million
## Thousands, millions and billions
Use "K" as an abbreviation for thousand, "M" for million, and "B" for billion without a period or space. Consider variations in other languages and never use abbreviations when there is doubt.
34K
34M
34B
34 k
34 mil
34 bill
Use the singular "million" when talking about a specific number.
34 million
Our system processes one million connections.
34 millions
Our system processes one millions connections.
Use the plural "millions" when talking about an unspecific number.
Our goal is to deliver software to millions of happy users worldwide.
Write out numbers in the millions and billions ("one million" instead of "1,000,000") in longer texts and paragraphs.
We have over one million users worldwide.
We have over 1,000,000 users worldwide.
Use numerals for numbers in the millions for dates, addresses, units of measurement, currencies and percentages.
The temperature can reach 1,000,000°C in the pod.
The cargo ship can carry up to 1,000,000kg.
The success rate of our new implementation is 1,000,000%.
The project budget is $1,000,000.
## Percentages
Use the % symbol instead of writing out "percentage" within the user interface to save space.
10%
10 percent
Use % after the number and without a space.
10%
%10
## Phone numbers
Separate phone numbers into groups for clarity when backend localization or separate fields are not possible.
Country code, area code, numbers in groupings of 3 or 4
0044, 208, 899 7032
Use the plus symbol (+) or "00" before the country code and show extension numbers with a hyphen.
+49 123 456 7890
0049 123 456 7890
0123 456 7890-12
0123 456 7890 12
## Related
- [Dates](date.mdx)
- [Money and currencies](money.mdx)
- [Charts](../../../components/charts-overview/overview.mdx)
- [KPI](../../../components/kpi/index.mdx)
- [Key value](../../../components/key-value/index.mdx)
---
## Software versions
# Software version naming
## General rules
Write "version" in full without abbreviating when there is enough space within the user interface.
Version 2.12.6
ver 2.12.6
Use "Version" with a capital V when it starts a sentence.
Version 3.5.1 has three new exciting changes.
Use "Version" with a capital V when referring to a named release or is used as a label.
Our migration guide for moving from Version 2 to Version 3 is below.
Use "version" with a lower case "v" when talking about unspecified versions as it is not a proper noun.
Our next version contains three new exciting changes.
Our next Version contains three new exciting changes.
Use a capital V without spacing between the letter and number to abbreviate versions.
V2.1.0
v2.1.0
Start the first major release with 1 (not 01).
V1.0.0
V01.0.0
End versions without a full stop at the end.
V1.0.0
V1.0.0.
Use single digits without adding extra zeros to make it easier to read.
V3.2.5
V03.02.05
Add identifiers, such as alpha, before or after version numbers for pre-releases.
V1.0.0-beta
Beta V5.2
V1.0.0-Beta
## Related
- [Dates](date.mdx)
- [Numbers and percentages](numbers.mdx)
- [Money and currencies](money.mdx)
---
## Time and time zones
# Time and Time zones
## Time
Use the 24-hour clock system (the ISO 8601 time standards) when backend localization is not possible.
11:00
23:00
11am
11PM
Use colons (:) to split times between hours, minutes, and seconds.
hh:mm:ss
hh.mm.ss
Use periods (.) to add milliseconds and nanoseconds, not a colon (:) according to ISO standards.
hh:mm:ss.mms
hh:mm:ss.sss (ISO 8601 standard)
0:00:00.920
0:00:00:920
## Time ranges
Use an en (–) dash to represent time ranges and intervals without spacing on either side of the dash.
Routine maintenance: 08:00–11:00
Packaging line active: 10:00-18:00
Use "from" and "to" for time ranges with separate text or input fields.
From: 14:00
To: 15:00
## Time duration
Use numerals to write about durations with the full or abbreviated time unit (depending on space in the UI).
Each shift lasts 8 hrs.
Routine maintenance takes approximately 1 hour 30 minutes.
Cooling period: 20 minutes
## Time zones
Write "time zone" as two words, not one word "timezone".
Select time zone
Select timezone
When writing out the full time zone, add the UTC offset in brackets afterwards.
British Summer Time (UTC+1)
Central European Summer Time (UTC+2)
Eastern European Summer Time (UTC+3)
Use abbreviated time zones with or without the UTC offset within the UI to save space.
EST
EST (UTC +3)
Give time zones capital letters for each word.
Eastern Standard Time
eastern standard time
Give abbreviated time zones capital letters.
EST
est
Avoid punctuation when writing time zones.
EST
EST.
E.S.T.
Add a space between the time and the time zone.
15:23 EST
15:23EST
Write location and UTC offset in this order: city, country (UTC offset).
Berlin, Germany (UTC+1)
(UTC+1) Berlin, Germany
Present multiple time zones clearly by using either "Local time" or "Your local time" for emphasis.
Meeting time: 2025-04-08 14:00 (Berlin, UTC+01:00)Your local time: 2025-04-08 21:00 (Tokyo, UTC+09:00)
Support hours (New York): 09:00 - 17:00 (UTC-04:00)Your local time (Sydney): 23:00 - 07:00 (UTC+10:00)
Deadline (San Francisco): 2025-04-08 17:00 (UTC-07:00)Your Local Time (Berlin): 2025-04-09 02:00 (UTC+01:00)
## Time-related problematic words
Use "current" for active, ongoing states and avoid "actual" when referring to time.
Current temperature: 72°F
Actual temperature: 72°F
Use "latest" for the newest updates or versions and "last" for final items in a sequence.
Latest firmware update: V2.1.5
Last firmware update before end of life: V2.1.5
Use "recent" for past events that have just happened.
Recent alerts: 2 warnings
Recent firmware update: V2.1.5
## Related
- [Dates](./date.mdx)
- [Time picker](../../../components/time-picker/index.mdx)
- [CLDR set of time zones (external link)](https://cldr.unicode.org/translation/time-zones-and-city-names)
---
## Frequent app functions
#
## Overview
- Overview
- Dashboard
- Cockpit
Console
Dash
Control panel
## Analytics
- Analysis
- Anomaly detection
Assessment
Examination
## Monitoring and scheduling
- Watchlist
- Move to watchlist
- Add to watchlist
- Remove from watchlist
Watch list
## Detail view
- Device details
- Asset details
- Details
Facts
Specifics
### Asset properties
- Product name
- Tag
- Manufacturer
- Type
- State
- Article number
- Serial number
- Installation date
- HW version
- FW version
- SW version
## Thresholds
- Default value
- Custom value
- Set threshold
- Set custom value
- Set custom threshold
## Upload
- Drag a file here or select a file
- Drag files here or select files
Drag and drop here or browse
## Comments
- Write comment
- Write comment and approve
- Write comment and reject
- Write your comments here
Write a comment
## Grid and list actions
- Group
- Sort
- Filter
- Edit columns
- Search by XY
## Notifications
- Events
- Notifications
- Anomalies
- Notify me when X occurs
Error
Issue
Problem
## Event types
- Configuration change
- Communication failed
- Unknown device type
- Device replaced
- New device
- Limit exceeded
## Event status
- Open
- Managed
- Suppressed
- Acknowledged
- Detected
Unacklowedged
Unack.
Unackn.
Unacknl.
## Event actions
- Apply
- Keep
- Manage
- Mark as read
- Mark as unread
- OK
- Save
- Delete
- Remove
- Revoke
- Initiate maintenance
- Move to plan / acknowledged / schedule
## NAMUR NE107 States
- Failure
- Check function
- Out of specification
- Maintenance required
- Diagnosis active
- Diagnosis passive
---
## Grammar and vocabulary
#
## Grammar tenses
- Use present simple tense to describe an action or instruction
- Only use simple verb forms in the past or future when necessary
click, browse, upload
file loads, file loaded
clicking, being clicked, was clicking
file is going to be loaded, file has been loaded
## Active voice
Configuration file opens.
Admin provides read-only access.
Measure performance.
Click submit.
Calculate the data.
The configuration file is opened.
Read-only access is provided by Admin.
Performance is measured.
Submit is clicked by user.
The data is calculated by application.
## UI terminology
- Mouse terminology: drag, hover, point, tap, click
- Touchscreen gestures: tap, drag, flick, touch and hold, double-tap, swipe, pinch, spread
- Basic terminology: checkbox, drop-down, field, icon, menu, link, radio button, window
click
hover
press
mouse over
## Idioms and phrasal verbs
- Avoid multi-word phrasal verbs when one word works
- Avoid idiomatic expressions
- Avoid cultural references
remove
calculate
continue
mobile device
get rid of
add up
carry on
Apple, Android, iOS, smartphone
## Jargon, buzz words and terms
- Use simple vocabulary
- Do not avoid technical terms but consider if you need to explain them
- Define new or unfamiliar terms and use existing explanations (do not reinvent the wheel)
## Abbreviations and acronyms
- Avoid abbreviations (info, incl, excl) and acronyms (SIOS for Siemens Industry Online Support)
- Explain acronyms initially and in full unless well known: Asset Performance Suite (APS)
- Capitalization only for acronyms that are proper nouns
- No periods in abbreviations or acronyms
- Never make up your own acronyms: https://www.acronymfinder.com/
light emitting diodes (LEDs)
APS
EU
I/O component, I/O list, I/O module
Light Emitting Diodes (LEDS)
A.P.S.
E.U.
IO component, i/o list, I-O module
## Time based vocabulary: Last, latest and recent
- Last implies nothing else will follow. It's the last, and after this it is finished. No more are coming.
- Latest implies that it is the last to date, which means there could be more to follow. Most recent. Newest.
- Recent is more time focused and is similar to latest. It means that it happened a short time ago.
Latest update
Latest summary
Recent events
Last update
Last summary
Last events
---
## External links and resources
import React from "react";
import { IxIcon } from "@siemens/ix-react";
import { iconApplicationScreen } from "@siemens/ix-icons/icons";
import { iconVideoFile } from "@siemens/ix-icons/icons";
import { iconPdfDocument } from "@siemens/ix-icons/icons";
import { iconOpenExternal } from "@siemens/ix-icons/icons";
#
## General rules for external links
Use brief, meaningful link text to explain the function of the target web page or resource.
SIMATIC S7-1500 firmware updates is an ERROR on this **page**! Try again later.
## Dos and Don’ts
Do give users a way out so the error page is not a dead end with only “Try again.” or “Try again later.”
Do adapt your recommended actions depending on your use case and what is technically possible
Don’t say your team is working on a solution to the error unless this is true
## Related
* [Error messages](./error-messages.mdx)
---
## Infotips
#
## General rules
Use sentence case and end with a period (similar to tooltips).
View the current status of the production line.
VIEW CURRENT STATUS OF PRODUCTION LINE
Use infotips to support users with guidance and contextual information.
Maximum allowable hydraulic pressure (bar).
Current motor load in percentage.
Enables automatic system recalibration.
Unique identifier for the production batch.
Use infotips to help users understand complex terminology.
SCADA System
Supervisory Control and Data Acquisition: A system that monitors and controls industrial processes locally or at remote locations.
PLC cycle time
This indicates the time (in milliseconds) it takes for the Programmable Logic Controller to execute one full scan of its program logic.
Use infotips to help users understand complex features and workflows.
Set thresholds
Set project thresholds here. Adjust the value to trigger alerts when the temperature exceeds a specified limit (e.g. 80°C).
PID controller tuning
Adjust these parameters (Proportional, Integral, Derivative) to optimize the system's response to errors and achieve stable control.
Schedule maintenance
This workflow guides you through planning and assigning preventive maintenance tasks. First, select the asset, then define the task type, and finally set the recurrence schedule.
Use paragraphs to split complex information and use bullet points or lists for clarity.
Power meter monitoring
Area: Production floor
Present consumption: 120 kW
Peak: 150 kW
Button: Open meter list
Use imperative verbs (commands) for instructions and guidance.
Assign a unique identifier to each physical asset for tracking, maintenance scheduling, and inventory management.
Define and manage sequences of operations and ingredient quantities for automated production processes.
Avoid personal pronouns (you, we, our, etc.).
Select a device from the network to begin configuration.
Select one of your devices to begin configuring your factory assets.
## Dos and Don’ts
Do keep infotips short and instructional
Don’t include critical or legal information
Don’t copy your user manual into your infotips
## Related
* [Popover](../../../components/popover/guide.md)
* [Tooltips](./tooltips.mdx)
---
## Overview(Messaging)
#
## Message types
First define your use case and message type from the list below, then use this overview and the other sections for message-specific guidance and examples.
| Message type | Usage | Best practice example |
| :-------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
| Error messages | Notify users of operational issues that have already happened and require their immediate action to resolve. | **Heading:** No data received**Description:** Unable to receive data as sensor is inactive.**Instructions:** Check sensor |
| Warning messages | Alert users to a potential problem or risk. Advises caution or suggests different actions to prevent unwanted future consequences. | **Heading:** Temperature approaching threshold**Description:** Temperature in Zone 3 approaching 30° threshold.**Instructions:** Check zone |
| Non-critical information messages | Inform users about general information. Often no action is required. | System backup completed at 21:00 CET. |
| Empty-state messages | Tell users the empty space is intentional, i.e. not an error, and how it can be filled. | **Heading:** No zones created**Description:** Create zones to display on dashboard.**Button:** Create zone |
| Toast messages | Give short and often quickly disappearing feedback to a user action. | **Heading:** Asset deleted**Description:** Valve 4a/203/22 |
| Tooltips | Provide brief additional information about the tool with contextual help. Answer the question, “What is this?” | Shows machine activity and operator actions. |
| Infotips | Provide more detailed explanations or guidance regarding user actions. Answer the question, “Why is this here and what does it do?” | Hover over icons or labels to see more details about their function or status. |
| Time-related messages | Provide specific timeframes with actionable guidance. | System maintenance scheduled for 22 August, 02:00–04:00 CEST. |
## General rules
Use sentence casing for all message descriptions (except toast messages) and add full stops.
Create zones from your dashboard.
You have no new notifications.
Add regions from your dashboard
Avoid overcommunicating by only adding relevant, beneficial information to your messages.
We received your error report and will process it within 24 to 48 hours.
The support team has received your bug report but they only work from 9–5 CEST time at the moment and there is a skeleton crew working over the summer.
Provide specifics, e.g. objects, values, reasons and solutions, instead of generic messaging.
Failed to upload file due to connection error.
Something happened.
An error occurred.
Use urgent wording to signal serious and irreversible consequences from ignoring messages.
Immediate software update required to save data securely.
Update software now to save data.
Contact support by 14:00 CET to avoid shutdown.
Urgent: Order spare part replacement by August 31st for valve 532/a.
Use the same key words in your messaging, but do not repeat headings and descriptions.
**Heading:** Bad request
**Description:** We could not process your request. Check and try again.
**Heading:** Bad request
**Description:** Bad request.
Use the same grammar patterns across all your messaging within your product.
No assets added. / No dashboards created. / No data downloaded.
No assets added. / You haven’t added any assets. / You have no assets yet.
Avoid asking patronizing “Are you sure…?” questions to your expert users.
Deleting this file removes all dependencies.
Are you sure you want to delete this file?
Use action labels that match the action of the message without mixing verbs or using synonyms.
Close
Save
Continue
Delete
OK
Confirm
Allow users to go back to change actions and avoid “OK” which is often understood as “Yes”.
Heading: Unsaved changes
Description: You are about to leave the page. Unsaved changes will be lost.
Button: Exit without saving
Button: Go back
Description: Are you sure you want to cancel?
Button: OK
Button: Cancel
Button: Yes
## Dos and Don’ts
Do first classify what kind of message is required
Do make a record or changelog of your messages for consistency and changes
Don’t over communicate with irrelevant or unrelated information
Don’t repeat the exact same wording in both the heading and description
## Related
- [Icon usage](../../../icons/icon-usage.mdx)
- [Warning messages](./warning-messages.mdx)
- [Error messages](./error-messages.mdx)
- [Empty-state messages](./empty-state-messages.mdx)
---
## Non-critical information messages
#
## General rules
Keep messages short and concise.
Pump 3 cycle complete 14:32.
The operational sequence of Pump 3, located within Zone 2B, activated at 07:34 by admin 049 has completed its cycle (timestamp 14:32).
Use a professional, informative tone for routine updates and only include relevant information.
System backup completed at 21:00.
Don’t worry! We’ll make sure your backup is complete before your morning coffee on Friday!
Use clear timestamps for context, clarity, prioritization and record keeping.
Motor overload detected at 14:01:15
Emergency stop activated at 21:03:27
Notification list:
Motor 3 overheating
Valve 7 malfunction
System shutdown initiated 10 minutes ago.
Lubrication check due for press machine 2 in 3 days.
Avoid urgency wording as these types of notifications are typically not as critical as warnings.
System backup complete.
System backup completed at 15:00.
System backup done! Open and check now!
Avoid adding user actions when possible as these notifications should not impact the user workflow.
Sensors calibrated. No further action required.
Sensors calibrated. Click to check sensors (live link), calibration settings (live link) or manage your sensors (live link).
Use sentence casing to align with our UX writing guidelines.
System will be updated within three hours.
Scheduled maintenance for Line 4 starts at 14:00.
Use minimal punctuation to keep notifications easy to read and without clutter or cognitive overload.
System update on line 4 starts at 14:00.
Notification: System update! Line: 4 / Starts: 14:00.
Use industrial icons only when absolutely necessary and avoid emojis.
Line 3 shift schedule changed. See what's new.
🔄 Line 3 shift schedule updated. 👉 See what’s new.
## Dos and Don’ts
Do use an alternative modal if your notifications are too long and cover multiple points
Do make sure users understand the notification is not critical
Don’t add multiple pieces of information into one notification
Don’t insert multiple user actions into short notifications
## Related
* [Tooltips](./tooltips.mdx)
* [Infotips](./infotips.mdx)
* [Toast messages](./toast-messages.mdx)
---
## Progress updates
#
## General rules
Use sentence case to align with our UX writing guidelines.
Downloading assets…
Downloading Assets…
Use the present simple progressive (continuous, -ing) verb form to indicate ongoing actions.
Loading…
Downloading…
Charging…
Saving…
Searching…
Been loading…
To be loading…
Will be loading…
Use verbs before nouns to focus on the action and make messages easier to scan.
Loading file…
File loading…
Use horizontal ellipses (…) after the verb without a space instead of adding three full stops (unicode U+2026, Mac Option+/Windows ALT+0133).
Loading…
Loading …
Processing⋰
Use ellipses for text with numbers or the object to show a running process.
Uploading 5 items…
Uploading items…
Processing request…
Saving settings…
Saving changes…
Uploading 1 file
Avoid ellipses to show time remaining and approximate or unknown times as they're status indicators, not actions.
5 minutes remaining
About 33 minutes remaining
5 minutes remaining…
About 33 minutes remaining…
Change verb form without ellipses when possible in buttons with loading spinners to avoid visual clutter.
Download → Downloading → Downloaded
Download → Downloading… → Downloaded
Use the correct verb form without using ellipses to show background processes.
Download → Downloading → Downloaded
Download → Downloading… → Downloaded
Use specific and definitive text to make users aware of what is happening and how long the process takes.
Downloading…
Please wait.
Thank you for waiting.
Just a moment.
Use informative text and actions when multiple processes are happening at the same time.
Carrying out tasks…
Thank you for waiting.
Just a moment.
Use transitional text to manage user expectations and reduce frustration for lengthy processes.
Processing your request. This usually takes about 1–2 minutes.
This step takes a bit longer than usual.
We’re preparing your dashboard. Once it’s ready, you’ll be able to customize your view.
## Dos and Don’ts
Do use the present simple progressive (continuous, -ing) verb form
Do use verbs before nouns to focus on the action
Don't apologize for how long the progress takes
Don't use vague phrases like: "Please wait"
## Related
* [Toast messages](./toast-messages.mdx)
* [Time-related messages](./time-related-messages.mdx)
---
## Time-related messages
#
## Rules for known time frames
Use a specific time or time frame whenever possible.
System update on Friday, August 22, 2025: 06:00–08:00
Upcoming system update: 22 August
Use the user’s time zone when providing any kind of time indication.
Failed to synchronize data. Synchronized at 12:45 BST.
System maintenance scheduled for Wednesday, August 22: 02:00–04:00 BST
When necessary, add time zones with the UTC in brackets.
Failed to synchronize data. Last successful sync: 12:45 BST (UTC+1) -
System maintenance scheduled for Wednesday, August 22, 02:00–04:00 BST
(UTC+1).
Avoid generic time-related terms like later, soon, sometime, etc.
Update starts Thursday, October 1, 2026: 02:00–04:00
Update starts soon.
Update starts later today.
Update takes a few moments.
Update takes a while.
Use "will" to indicate certainty and avoid "may" or "might" which sound uncertain.
Update will take a few minutes.
Update may take a few minutes.
Update might take a few minutes.
Avoid adding messages when the process takes less than ten seconds.
This process takes a few seconds.
Use countdowns to alert users to time-sensitive information.
Session expiring in 04:25 minutes.
Automatic logout in 03:45 minutes.
Meeting starts in 5 minutes.
Migration starts in 1 hour.
Use consistent wording in the UI and add specific volumes with progress indicators.
Data volume: 45/300 MB
Saving data… 50 of 300 MB saved
System update: 45% complete
## Rules for unknown time frames
Use a realistic time range or an estimated time window if possible.
The system update can take a few hours.
The update will finish within the next 60 minutes.
Be transparent and use passive voice when you need to be unspecific.
Due to the size of the data migration, it is estimated to take between 4-6 hours.
Data is being fetched from multiple sources, and the completion time varies depending on system conditions.
Due to the size of the migration, we have no idea when it will finish.
## Rules for expectations and consequences
Inform users whether or not they can continue working during a process.
The application will not be available during the update. We’ll notify you when it’s ready.
The application is not available during the update.
You can continue working until the update begins.
Installation files are downloaded in the background.
Clearly communicate any consequences related to user actions (or inaction).
You can only postpone this update once.
An update is scheduled to automatically install tonight.
The installation will be updated tonight.
Update must be installed before Friday, September 12, 2026.
The device will restart during the update.
Provide clear, actionable choices for next steps and user autonomy.
Postpone
Remind me tomorrow
Update now
More information
Stop
Pause
## Dos and Don’ts
Do add user actions when possible, e.g. buttons or links
Don’t leave users wondering if the app is stuck or broken
Don’t guess unknown time frames
## Related
- [Progress updates](./progress-updates.mdx)
- [Time and time zones](../formatting/timezones.mdx)
---
## Toast messages
## Best practice template
This section focuses on messages that give feedback to user actions and often automatically close. For system event messages with different levels of criticality, please see the status and event section of this guide.
Although always short, toast messages vary in length and complexity:
- One-line messages briefly inform users about the outcome of their action.
- Two-line messages have a heading and description to provide more context or details.
- Three-line messages include a heading, a description, and actions.
| Step | Purpose | Description | Examples |
| ---- | ----------------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1. | Heading or one-line toast | Tell users the exact outcome of their action (for system toast messages, see the status and event section). | Noun + simple past tense verb:Data downloadedAsset deletedDevice deletedConnection restoredScan cancelledAsset not offboarded |
| 2. | Description or two-line toast | Provide additional, relevant information. | **Heading:** Maintenance scheduled**Description:** Exchange filter in room 500 on August 10.**Heading:** File 4a.ext not uploaded**Description:** File 4a.ext exceeds 25 MB |
| 3. | Actions | Give users the ability to undo the action or provide a link to further information. | Action verb + noun:Heading: Asset deletedDescription: Asset 4a_203/22Action: UndoHeading: Scan scheduledDescription: Scan gateway ANC_GW February 12Action: Open scheduleHeading: Asset not onboardedDescription: Failed to reach Asset 4aAction: Try again |
## General rules
Use simple past tense verbs to state what happened.
Assets uploaded
Assets have been uploaded
Use "not" or "failed to" with the verb to signal failure.
File not imported
Failed to import file
File type not recognized
Use present progressive verbs for background or ongoing actions.
Update application → Updating application… → Application updated
Use the same verbs and nouns from the dialog and button that initiated the toast message.
Upload file → File uploaded
Connect → Gateway connected
Upload file → File added
Connect → Gateway established
Avoid punctuation as this takes up extra space and adds to visual clutter.
Scan finished
Scan finished.
Scan not finished!
Avoid adding additional words or verbs such as "you", "your", "is" or "was".
Maintenance scheduled
Asset onboarded
Your maintenance was scheduled
Onboarding for asset was successfully completed
Avoid generic toast messages, such as "successful", "unsuccessful", "error" and "failure".
Connected
Failed to connect
Successful
Failed
Avoid using "successful" and "successfully" as this adds to the reading load and effort.
Connected
Connection successfully established
Connection established successfully
## Dos and Don’ts
Do add extra time when there is an action option
Do use consistent wording to help users scan toast messages easier
Don’t use full sentences or complex verb forms
Don’t add an action unless absolutely necessary
## Related
- [Error messages](./error-messages.mdx)
- [Warning messages](./warning-messages.mdx)
- [Progress updates](./progress-updates.mdx)
---
## Tooltips
import React from 'react';
import { IxIcon } from '@siemens/ix-react';
import { iconEditDocument } from '@siemens/ix-icons/icons';
## General rules
Use tooltips to define icons and show control names.
Edit
Delete
Log out
Avoid punctuation or periods for tool names or icons.
Edit
Open file
Edit.
Open file.
Use sentence case and a period if the tooltip is a complete sentence or multiple sentences.
Add users to project.
Add new users to project
Use verbs to start your tooltip and avoid passive voice.
Create KPI tables.
Tables are created.
Avoid complicated sentence constructions, e.g. no relative clauses.
Share with team members.
Projects can be shared with team members who work with you.
Use a heading with a short description for longer tooltips.
Heading: Cycle time input
Description: Set the duration of each production cycle in seconds.
Heading: Log history
Description: View historical logs of machine activity and operator actions.
Avoid repeating text already visible and readable on the screen.
Edit (as icon No quotation mark or brackets for plurals: PDFs
`&` Avoid ampersands unless in a product or company name: Siemens & Halske AG
`*` Avoid asterisks in applications
`(` Avoid brackets ( ) and [ ]
`;` Avoid semi-colons
`:` Avoid and remove colons whenever possible, for example Username instead of Username:
## Formats
- 12-hour clock: 11am and 11pm or 11AM and 11PM
- 24-hour clock: 11:00 and 23:00
- Date: Monday, January 12, 2021
- Money: $400,456.50
- Measurement and quantities: 30 mm
- Hyphen for ranges: 10-40%
- Numbers: Use No. as an abbreviation for number, no spacing between abbreviated No. and number: No.8
11am
Monday, January 12, 2021
€999.50
€2.5 million
$400,456.50
£320
30 mm
10 oz
10-40%
No.7
Number 7
11 a.m.
Monday, 12 January 2021
€999,50
€2,5 million
$400.456,50
320£
30 mms
10 oz.
10–40%
#7
Num 7
## Spacing
- No space before %
- No space before colon, semi-colon, ellipsis
- Add a space after colon or semi-colon
- Add a space before and after equation marks, hyphens and em dashes
- Add a space before unit of measurement
50%
11am
Tuesday: no data
Browse…
50 %
11 am
Tuesday: no data
Browse …
## Lists
- Consistent use of full stops in lists / bullet points
- If lists / points are not full sentences, do not use full stops
- Use fragments or full sentences in lists, not both
- If a bullet / list item has two sentences, use full stops for this point and all others
- Make lists parallel, i.e. all items / bullets have the same look, length, feel, punctuation, capitalization
Write comments
Respond to comments
Approve work orders
Write comments
Respond to comments
Approve work orders by adding your fingerprint to your user management section in your smartphone.
---
## AI and UX writing
#
## Creating UX writing chatbots
When writing to a set of guidelines and with a clear brand voice, creating chatbots to support your writing can give writers more time for user research. And, if working alone, chatbots act as a brainstorming partner that can be used to inspire writers rather than take over the writing role.
The following sections represent an example set of prompts to create a UX writing chatbot to support error writing within industrial applications. The [Error messages](../messaging/messages-overview) section was used to create the prompts to ensure the output aligned with our own writing and brand guidelines. For a complete introduction to conversational design, see our [Conversational design guidelines](../../conversational-design/getting-started).
## What you can do with these prompts
1. Simply copy and paste these prompts into your chosen AI software to support your error message microcopy (note that these prompts will result in microcopy suggestions that align with [these](/docs/guidelines/language/messaging/error-messages.mdx) guidelines).
2. Adapt the prompts to align with your brand’s voice and tone guidelines.
3. Use these prompts as an example to create more chatbots, e.g. ask your software to create another agent using, for example [Warning messages](/docs/guidelines/language/messaging/warning-messages.mdx) as the input using this template as an example to copy.
4. Test the chatbot by adding some of your own error messages and assess the output matches your brand and voice. Remember to continue to add prompts and always check for accuracy.
**Note:** Ensure you confirm any confidentiality or legal requirements before adding your own input.
## Chatbot prompts
### Role
You are an experienced UX writer specializing in industrial software applications. Your primary goal is to transform technical error messages into user-friendly communications that reduce frustration, maintain user confidence, and guide problem resolution. You speak American English and use American English spelling and grammar.
### Context
When presented with an error message, follow this process:
1. Confirm understanding: Analyze the original error to identify:
* Core technical issue
* Likely user impact
* Current clarity gaps
2. Restructure using framework: Convert the message into three distinct components using sentence casing:
* Heading (5-8 words, sentence case): Immediate recognition. Example: “Sensor connection lost”
* Explanation (1 sentence): Plain-language context. Example: “The system cannot communicate with Temperature Sensor XB-12.”
* Action (directive): Concrete next steps. Examples: “Check sensor power cables”, “Restart the sensor controller”, “Select Retry connection”
3. Style requirements
* Tone: Supportive coach (neutral situation, positive outlook)
* Language: Grade 8 reading level
* Grammar: No negative contractions including “don’t”
4. Avoid
* Error codes (unless user-facing standard)
* Passive voice
* Title casing, ALL CAP messages
* Blaming language (“you failed to...”)
* “Please” do not use please for user actions or in any text
5. Include
* Specific component names
* Temporary workarounds (if available)
* Reference to documentation/contact when appropriate
### Examples
Input: “Runtime Exception 0xE3: Invalid torque calibration”
Output:
* Title: Invalid tool calibration detected
* Explanation: The system received unexpected values from the CNC torque sensor.
* Action:
1. Pause current operation
2. Recalibrate using calibration kit #TX45
3. Confirm green status light before resuming
Input: “Network timeout error”
Output:
* Title: Connection to server timed out
* Explanation: The equipment lost communication with the central monitoring system.
* Action:
1. Check network cables on machine interface panel
2. Verify server status at portal.example.com/status
3. Retry operation after 2 minutes
## Using chatbots as a writing partner
Use these simple techniques to use your chatbot as a writing partner. Again, check all output for accuracy and alignment with your brand and voice guidelines.
1. Microcopy brainstorming for elements and components
“Suggest 3 microcopy options for this [password field].”
2. Tone and voice alignment with your brand
“Rewrite this [error message] to sound more open, authentic and engaging.”
3. Alternatives and variations
“Give me suitable alternatives to this UI text for an industrial application.”
4. Localization and simplification
“Rewrite this text with easier language that’s globally understandable.”
## Related
* [Error messages](../messaging/error-messages.mdx)
* [Conversational design guidelines](../../conversational-design/getting-started)
---
## UX writing principles
#
Our UX writing principles are based on the [guiding principles for excellent design](https://ix.siemens.io/docs/guidelines/overview). They provide our writers, designers and developers with a clear rationale to make informed UX writing decisions, ensuring each product aligns with our standards and brand identity.
We’ve refined our approach into eight core UX writing principles. These help us make informed and thoughtful microcopy decisions when creating UI text for industrial applications.
## Trust
| What | Why | How |
| --- | --- | --- |
| We increase confidence and remove doubt.We help our users with fast and secure decision-making. | Users make high-risk decisions at work, e.g., initiate or postpone maintenance.Users need predictable interactions that create trust in the product as well as the brand. | We write with the correct level of urgency (warnings, alarms, errors, and consequences).We write with with consistency using user mental models, conventions and standards to remove the memory burden and prevent errors.We provide clear constraints so users can trust their actions, their consequences, and the product. |
## Accuracy
| What | Why | How |
| --- | --- | --- |
| Our writing is specific and concise.We ensure users understand the words in the same way.We leave little room for interpretation or guessing. | Users should not have to interpret text, dialogs or terms.Users cannot have doubt as to the meaning of the word.Users cannot have any doubt as to the consequences of their actions. | We do user research to become familiar with user terminology.We use precise, true, explicit, and exact wording.We perform UX wording reviews and collaborate with designers.We write additional guidance to users for complex workflows. |
## Consistency
| What | Why | How |
| --- | --- | --- |
| We write with uniformity across screens, apps, and products from Siemens.Users can rely on our writing to be the same across screens and products.We write with the same voice and tone. | Users don't have time to get used to changes or variations when carrying out tasks in their daily work.Users should not have to wonder whether different words, situations, or actions mean the same thing. | We ensure the same or similar contexts have the same wording.We follow platform and industry conventions.We apply voice and tone guidelines consistently. |
## Efficiency
| What | Why | How |
| --- | --- | --- |
| We move users through their daily work tasks easily and quickly.We move users through high-risk and exceptional tasks rapidly.Users move through our products logically and find our writing intuitive. | Users within industrial settings need immediate feedback.Users within industrial settings need to filter information quickly.Users within industrial settings need to make decisions quickly. | We make text scannable and brief.We offer contextual help and reduce information users must remember.We present the right words at the right time, or not at all. |
## Human
| What | Why | How |
| --- | --- | --- |
| We create products with engaging and supportive interaction.We have authentic conversations with our users.We write products that sound human. | Users need human-centric language based on their needs and behaviors.Our products need to match our users' way of thinking and working. | We work to understand the technical terms required by the users without using excessive jargon.We design end-to-end conversations for tasks. |
## Empathy
| What | Why | How |
| --- | --- | --- |
| We put ourselves in the users' shoes.We anticipate their confusion and pain points.We understand what our users want, need, and are engaged by. | Users want products that understand their requirements.We genuinely care about the people we design for.We need to write according to our users' emotional state.Industrial application users represent more sensitive and urgent situations. | We conduct user and product research.We use personas, including pain points and needs.We use user journeys that include their daily tasks.We apologize when appropriate. |
## Accessibility
| What | Why | How |
| --- | --- | --- |
| We write for everyone, whatever their expertise or background.We aim to implement WCAG principles. | Users have varying literacy skills in all levels of life.Users have cognitive, visual, and motor impairments.Users, regardless of ability or circumstance, must get the information they need. | We follow our company's voice and tone guidelines.We write at the correct literacy level for our users.We run [accessibility](https://ix.siemens.io/docs/guidelines/accessibility/overview) checks.|
## Branding
| What | Why | How |
| --- | --- | --- |
| We follow product principles.We follow company voice and tone principles.We speak the brand. | Users need to know they are using a product from our company.Products need to feel familiar to users.We want users to recognize and recommend our products. | We apply our UX writing guidelines and continually align them with the company’s voice and tone.We focus on creating microcopy with one voice instead of marketing copy within our industrial applications.|
---
## UX writing resources
import React from "react";
import { IxIcon } from "@siemens/ix-react";
import { iconOpenExternal } from "@siemens/ix-icons/icons";
#
:::info
Official Siemens UX writing and brand resources are exclusively available for Siemens AG employees and partners, and can be accessed [here](https://code.siemens.com/siemens-ix/ix-brand-theme/-/blob/ad76b56439f735172079abe4b7cc394fd4e63975/apps/documentation/src/pages/ux-writing-siemens-resources.md).
:::
## Books and websites of UX writers
### Torrey Podmajersky
She is a pioneer in UX content design, having written the first ever major published book on UX writing in 2019. Her experience at companies like Google or Microsoft has influenced how product teams use strategic content to solve business and customer problems, demonstrating the real impact of UX writing at scale.
**Books:** Strategic Writing for UX: Drive Engagement, Conversion, and Retention with Every Word
UX Skills for Business Strategy by Torrey Podmajersky, Maya Elise Joseph-Goteiner, Kim Mats Mats
**Website:** [torreypodmajersky.com](https://torreypodmajersky.com) Interaction principles.
UX writers create user interface microcopy such as buttons, labels, tooltips, warnings, onboarding and chatbot messages to guide users through workflows in line with [ISO 9241-112:2025](https://www.iso.org/standard/87518.html)
);
```
At this point, the application frame should respect all areas of your device which are not part of the app.
Use the defined variables to ensure that the pages of your application displaying content also respect the previously defined areas as well.
```css
.my-content-space {
margin-top: var(--ix-safe-area-inset-top);
}
```
### Application frame layout
By default, the [Application Frame](./../../components/application) provides three default layouts (`sm`, `md`, `lg`) that are automatically applied depending on the size of the screen.
If you intend to implement an app for both phones and tablets (e.g. iPhone and iPad), it may be necessary to configure the layouts which the application frame can pick from.
For apps targeting phones and tablets, typically the `sm` and `md` layouts are suitable.
```tsx
const Application = () => {
return (
...
...
...
);
};
```
As mentioned above, in some cases it is beneficial to adapt the layouts (breakpoints) depending on the hardware. For example, the layout `md` will be applied for an iPhone in landscape orientation and iPad in portrait orientation.
Ionic provides [utility functions](https://ionicframework.com/docs/react/platform#platforms) that help to decide which layout to choose.
```tsx
const ipad = [`sm`, 'md', 'lg'];
const iphone = [`sm`];
let breakpoints = isPlatform('ipad') ? ipad : iphone;
const Application = () => {
return (
...
...
...
);
};
```
---
## Optimizing mobile user experience
#
## Responsive and adaptive design
Industrial Experience components handle various viewport sizes out-of-the-box. When building a page layout, consider small screens in portrait and landscape mode in an early stage during the design phase.
Depending on the importance of a mobile-optimized UI, decide on a responsive or adaptive design approach:
- **Responsive design**: The layout adapts to the viewport size by rearranging or hiding components. We recommend this approach for desktop-first applications.
- **Adaptive design**: There is a separate page layout for a specific breakpoint. We recommend this approach for applications with a strong focus on mobile.
If feasible, we recommend adaptive design since it offers more control over the layout and a more optimized user experience on mobile devices. However, it requires more effort to maintain different layouts. Independently from the design approach, there are different approaches to achieve a mobile-friendly experience:
- Adjust the page layout (e.g. a column-based layout transforms into a row-based layout)
- Restructure the content (e.g. prioritize information or components differently)
- Hide information or entire components (e.g. less important information or components)
## Interaction
Users interact with mobile devices primarily through touch input. Our web components respond to touch events out-of-the-box.
For your specific use cases, it might be necessary to implement custom event listeners for touch interactions. In addition, touch devices offer the possibility to use gestures like swiping, pinching or tapping.
## Device-specific features
Some devices have unique characteristics that need to be considered when designing and developing an app:
- Display "notch"
- System bars
- Rounded corners
- Different screen sizes and resolutions
When you design and develop an app, we recommend to define target devices. Consider the specific features of the devices in your design and development process, so that all relevant parts of the user interface are visible and accessible. Use the [safe areas](./mobile-app-dev.md#define-safe-areas) to ensure that the content is displayed correctly.
---
## Guidelines overview
import GuidingLinks from '@site/src/components/GuidingPrinciples';
import { IxLayoutGrid, IxRow } from '@siemens/ix-react';
import { CategoryButton } from '@site/src/components/CategoryButton';
#
## Guiding principles for excellent design
At Siemens, our Product Design Principles serve as the cornerstone of innovation, guiding us to create seamless and intuitive applications. They provide our designers, developers and managers with a robust framework to make informed design decisions, ensuring each product aligns with our standards and brand identity. We’ve refined our approach into four core design principles. These help us make our applications intuitive, efficient and valuable.
```bash
npx degit siemens/ix-starter/apps/angular-starter my-ix-angular-app
```
```bash
pnpx degit siemens/ix-starter/apps/angular-starter my-ix-angular-app
```
### React
Source: `apps/react-starter`
```bash
npx degit siemens/ix-starter/apps/react-starter my-ix-react-app
```
```bash
pnpx degit siemens/ix-starter/apps/react-starter my-ix-react-app
```
### Vue
Source: `apps/vue-starter`
```bash
npx degit siemens/ix-starter/apps/vue-starter my-ix-vue-app
```
```bash
pnpx degit siemens/ix-starter/apps/vue-starter my-ix-vue-app
```
The current starter version is available from `main`. To scaffold an older version, append the repository tag to the starter source, for example:
```bash
npx degit siemens/ix-starter/apps/react-starter#v5.0.0 my-ix-react-app
```
```bash
pnpx degit siemens/ix-starter/apps/react-starter#v5.0.0 my-ix-react-app
```
After scaffolding a starter app, install dependencies and start the development server from the generated project folder.
```bash
cd my-ix-react-app
pnpm install
pnpm dev
```
Use the generated folder name from your selected command, for example `my-ix-vue-app` or `my-ix-angular-app`.
---
## Changelog
## [@siemens/ix@2.6.0](https://github.com/siemens/ix/releases/tag/%40siemens/ix%402.6.0) (2024-11-25T11:29:54Z)
### Minor Changes
- [#1533](https://github.com/siemens/ix/pull/1533) [`3e2835ff8f`](https://github.com/siemens/ix/commit/3e2835ff8f4a66d6b36e1dcf4081ea6409f95e67) Thanks [@nuke-ellington](https://github.com/nuke-ellington)! - feat(core/message): add options to set size and position
- [#1549](https://github.com/siemens/ix/pull/1549) [`a5e217270f`](https://github.com/siemens/ix/commit/a5e217270f3181569f2eb21a3b25a0c075d8afc8) Thanks [@nuke-ellington](https://github.com/nuke-ellington)! - feat(core/date-dropdown|date-picker|datetime-picker): add missing properties to picker components
- [#1497](https://github.com/siemens/ix/pull/1497) [`eb97f91e9d`](https://github.com/siemens/ix/commit/eb97f91e9d6c945b0a1b6e22581aa8223309d164) Thanks [@nuke-ellington](https://github.com/nuke-ellington)! - feat(core): improve component a11y
- [#1562](https://github.com/siemens/ix/pull/1562) [`70ea07da0c`](https://github.com/siemens/ix/commit/70ea07da0c582c7eff87e161e455434c54f23140) Thanks [@nuke-ellington](https://github.com/nuke-ellington)! - Add filter cleared event to ix-categroy-filter.
- [#1318](https://github.com/siemens/ix/pull/1318) [`f5af78e208`](https://github.com/siemens/ix/commit/f5af78e20804ca0f737eb5ca2fbc5e54bfc8c1c3) Thanks [@danielleroux](https://github.com/danielleroux)! - Introduce several new input components:
- `ix-input` for text based inputs
- `ix-number-input` for number based inputs with optional stepper buttons
- `ix-date-input` which shows a date picker within a dropdown
- `ix-textarea` for larger text inputs
- `ix-radio` and `ix-radio-group`
- `ix-checkbox`
- `ix-custom-field` to wrap custom components
Introduce a new layout component `ix-layout-auto` to make it easier to create a typical input forms.
Enhanced the compatibility with Forms for the following components:
- `ix-select`
- `ix-toggle`
> _Deprecation:_
>
> Native css stylings for `input` and `textarea` (e.g `input[type="checkbox"]` and `input[type="radio"]`) are deprecated and will be removed in upcoming major release.
- [#1563](https://github.com/siemens/ix/pull/1563) [`d6da6adfd6`](https://github.com/siemens/ix/commit/d6da6adfd654f5a17180befbdae0e8f20a63fd80) Thanks [@matthiashader](https://github.com/matthiashader)! - Update expandedChange event to trigger only on user interactions and add unnamed default slot for ix-pane-layout content.
### Patch Changes
- [#1489](https://github.com/siemens/ix/pull/1489) [`6041b3da11`](https://github.com/siemens/ix/commit/6041b3da1163463926ab204d7bad4064e9a2c279) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/modal): duplicate event firing
- [#1488](https://github.com/siemens/ix/pull/1488) [`d201c557e4`](https://github.com/siemens/ix/commit/d201c557e4f30a4e722d2d5d580133da6919cf71) Thanks [@danielleroux](https://github.com/danielleroux)! - fix(core): replace font styles with actual formats
- [#1499](https://github.com/siemens/ix/pull/1499) [`7fe0136cad`](https://github.com/siemens/ix/commit/7fe0136cadbe3ea134c0f6f36c5e222fc49b2951) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/modal): figma - code mismatch
- [#1514](https://github.com/siemens/ix/pull/1514) [`60760bcdb0`](https://github.com/siemens/ix/commit/60760bcdb0a2f91e2aed07bcb2f4848c8c96458f) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/content-header): adapt spacing
- [#1560](https://github.com/siemens/ix/pull/1560) [`d7e977759b`](https://github.com/siemens/ix/commit/d7e977759be79f73a4ab68f904e59941df493deb) Thanks [@nuke-ellington](https://github.com/nuke-ellington)! - Enable discovery of trigger elements if in same shadow DOM for ix-tooltip and ix-dropdown.
- [#1469](https://github.com/siemens/ix/pull/1469) [`cc6091fca5`](https://github.com/siemens/ix/commit/cc6091fca58700a8a09119d34a669ed5a654627f) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/menu-about): set index if selected is set on tab-item
- [#1527](https://github.com/siemens/ix/pull/1527) [`ed676579f0`](https://github.com/siemens/ix/commit/ed676579f0cae3938e6c0d0d0f30249e0bee2d9e) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/checkbox): page jumps on checkbox click in scrollable ix-content
- [#1571](https://github.com/siemens/ix/pull/1571) [`720fb53c72`](https://github.com/siemens/ix/commit/720fb53c7250d0e5f91b5976d8b660a09bd678c1) Thanks [@AndreasBerliner](https://github.com/AndreasBerliner)! - Prevent null pointer exception in ix-menu component.
- [#1557](https://github.com/siemens/ix/pull/1557) [`dc59d67a89`](https://github.com/siemens/ix/commit/dc59d67a89589ffc5442e2ded9004b6031a6bff2) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/select): check if value is defined, before updating selection
- [#1468](https://github.com/siemens/ix/pull/1468) [`d5affb02b3`](https://github.com/siemens/ix/commit/d5affb02b371e3541c546e272e2389b678630dd4) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/slider): update tooltip on steps below 1
- [#1519](https://github.com/siemens/ix/pull/1519) [`ecf02d5bd5`](https://github.com/siemens/ix/commit/ecf02d5bd5d2e7131b3e24a490df7ee87527df6c) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/button): fix keyboard navigation & accessibility
- [#1541](https://github.com/siemens/ix/pull/1541) [`7347c40993`](https://github.com/siemens/ix/commit/7347c4099354ffd3c0c24c7826d63b012e7007ca) Thanks [@nuke-ellington](https://github.com/nuke-ellington)! - fix(core/spinner): move styling into shadow dom
- [#1548](https://github.com/siemens/ix/pull/1548) [`19b6842282`](https://github.com/siemens/ix/commit/19b68422829b72d2cfafdde18a7095b79918e660) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/select): update input value on slot change
- [#1318](https://github.com/siemens/ix/pull/1318) [`f5af78e208`](https://github.com/siemens/ix/commit/f5af78e20804ca0f737eb5ca2fbc5e54bfc8c1c3) Thanks [@danielleroux](https://github.com/danielleroux)! - **ix-drawer**: the full-height property is now working
- [#1476](https://github.com/siemens/ix/pull/1476) [`7f371654a5`](https://github.com/siemens/ix/commit/7f371654a5510bc525d88d05f1d116f117c050d1) Thanks [@matthiashader](https://github.com/matthiashader)! - fix(core/input): remove hover state from readonly and disabled variant
- [#1318](https://github.com/siemens/ix/pull/1318) [`f5af78e208`](https://github.com/siemens/ix/commit/f5af78e20804ca0f737eb5ca2fbc5e54bfc8c1c3) Thanks [@danielleroux](https://github.com/danielleroux)! - Remove `border-radius` from `
```
npm install @siemens/ix @siemens/ix-angular @siemens/ix-icons
```
```
yarn add @siemens/ix @siemens/ix-angular @siemens/ix-icons
```
```
pnpm add @siemens/ix @siemens/ix-angular @siemens/ix-icons
```
### Apply theme
Import the design system styling in your global stylesheet (e.g.: `src/styles.scss`):
```css
@import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
```
Set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system.
```html
```
### Standalone setup
Standalone setup is a little different to module setup. Instead of importing the `IxModule` in your module file, iX components and necessary directives are directly imported from `@siemens/ix-angular/standalone` in your component file.
```typescript
import { Component } from '@angular/core';
import { IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective } from '@siemens/ix-angular/standalone';
@Component({
standalone: true,
selector: 'standalone-example',
imports: [IxButton, IxDropdown, IxDropdownItem, IxDropdownTriggerDirective],
template: `
Open
`,
})
export default class StandaloneExample {}
```
:::info
When using iX form components in an Angular standalone setup, we recommend importing the appropriate value accessor directives from `@siemens/ix-angular/standalone` and include them in your component’s imports array (refer to preview examples). This prevents `No value accessor` errors.
Available value accessors:
- `IxTextValueAccessorDirective` - for `ix-input`, `ix-number-input`, `ix-textarea`
- `IxSelectValueAccessorDirective` - for `ix-select`
- `IxRadioValueAccessorDirective` - for `ix-radio`
- `IxBooleanValueAccessorDirective` - For `ix-checkbox`, `ix-toggle`
- `IxDateValueAccessorDirective` - For `ix-date-input`
- `IxTimeValueAccessorDirective` - For `ix-time-input`
:::
### Module setup (legacy)
Import `IxModule` and `BrowserAnimationsModule` (in some cases also the `RouterModule.forRoot([/** your routes **/])`) in your application module.
```typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { IxModule } from '@siemens/ix-angular';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, AppRoutingModule, IxModule.forRoot(), BrowserAnimationsModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
---
## Blazor
#
:::warning Experimental disclaimer
There is no guarantee that the core functionality is fully covered by the Blazor library.
Bug reports, feature or support requests related to the Blazor library can only be handled within the [Blazor repository](https://github.com/yagizhanNY/siemens-ix-blazor).
Nevertheless feedback of any kind will be helpful.
:::
:::info
The Blazor library is not developed by the Siemens Industrial Experience team itself.
All credits go to the maintainers of [siemens-ix-blazor](https://github.com/yagizhanNY/siemens-ix-blazor/graphs/contributors) who are entirely responsible for the package.
:::
## Installation
Install the `SiemensIXBlazor` package from the [NuGet](https://www.nuget.org/packages/Siemens.IX.Blazor/) package manager.
## .NET CLI
```cmd
dotnet add package SiemensIXBlazor
```
## Package Manager
```cmd
NuGet\Install-Package SiemensIXBlazor
```
Add required `CSS` and `Javascript` packages into the `index.html` file.
```html
Blazor App
```
npm install @siemens/ix @siemens/ix-icons
```
```
yarn add @siemens/ix @siemens/ix-icons
```
```
pnpm add @siemens/ix @siemens/ix-icons
```
## Build
There are several different possibilities to build and serve web apps with the library.
In the following section we will describe how you can build an application with [vite](https://vitejs.dev/guide/).
`index.html`
```html
Vite App
Button
Button
```
`main.js`
```javascript
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
import { defineCustomElements } from '@siemens/ix/loader';
import { defineCustomElements as defineIxIconCustomElement } from '@siemens/ix-icons/loader';
(async () => {
defineIxIconCustomElement();
defineCustomElements();
})();
```
---
## React
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
## Library installation
Install `@siemens/ix`, `@siemens/ix-react` and `@siemens/ix-icons` using a package manager:
```
npm install @siemens/ix @siemens/ix-react @siemens/ix-icons
```
```
yarn add @siemens/ix @siemens/ix-react @siemens/ix-icons
```
```
pnpm add @siemens/ix @siemens/ix-react @siemens/ix-icons
```
## Apply theme
```css
@import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
```
Set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system.
```html
```
---
## Vue
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
#
## Library installation
Install `@siemens/ix`, `@siemens/ix-vue` and `@siemens/ix-icons` using a package manager:
```
npm install @siemens/ix @siemens/ix-vue @siemens/ix-icons
```
```
yarn add @siemens/ix @siemens/ix-vue @siemens/ix-icons
```
```
pnpm add @siemens/ix @siemens/ix-vue @siemens/ix-icons
```
## Usage
```ts
import '@siemens/ix/dist/siemens-ix/siemens-ix.css';
import { createApp } from 'vue';
import { ixPlugin } from '@siemens/ix-vue';
import Root from './App.vue';
const app = createApp(App);
app.use(ixPlugin);
app.mount('#root');
```
Set the `data-ix-theme` attribute of the `` tag to the theme of choice (e.g. `classic`) and the corresponding `data-ix-color-schema` attribute to the value `light`, `dark` or `system` to set the color scheme. `system` will automatically apply the color scheme of the users’ operating system.
```html
```
---
## Build with AI
## Installation
### Prerequisites
- Node.js (20+ recommended)
- Create a free token at [https://my.siemens.com](https://my.siemens.com) with `llm` scope to get access to the
`embeddings` API at [https://api.siemens.com/llm](https://api.siemens.com/llm).
(Currently, Siemens access is required to request a token, but we are working on a configurable alternative for all users.)
- IDE/agent/LLM setup of your choice, e.g. VS Code, GitHub Copilot, Claude Sonnet 4.5, OpenCode
- Choose the npm package matching your web dev framework. Read the [version selection section](#version-selection) below for more details.
> This guide shows only instructions for @siemens/ix-mcp. Adapt the commands to fit your technology stack.
### Project installation
```bash
npm install --save-dev --save-exact @siemens/ix-mcp@ix5.0.0
# Or with yarn
yarn add -D --exact @siemens/ix-mcp@ix5.0.0
```
### Global installation
```bash
npm install -g @siemens/ix-mcp@ix5.0.0
```
## Quick Start
After successful installation you need to initialize the MCP server and provide the access token:
1. **Navigate to your project directory**:
```bash
cd your-project
```
2. **Run initial setup**:
```bash
npx @siemens/ix-mcp init
```
Or if the token is already set up:
```bash
npx @siemens/ix-mcp setup
```
> Important: Run this command in the root of every project where you want to use the MCP server.
3. **Follow the prompts**:
- **Token setup**: Enter your LLM token from [https://my.siemens.com/](https://my.siemens.com/) (requires 'llm' scope)
- **Tool configuration**:
1. Choose which tools to configure (VS Code, OpenCode, Claude Code, Zed, etc.).
2. Enable logging of MCP queries and responses (optional)
- **Agent instructions**:
1. Setup can add predefined instruction files to your project that guide agents how to develop with iX
2. Use symlinks/aliases to help keep instruction files updated (optional)
> This may not work for every package manager or platform (e.g. Windows)
- Commit the local configuration to share it (make sure it isn't ignored by `.gitignore`).
4. **Restart your AI tools** (VS Code, OpenCode, Claude Code, Zed, etc.)
- Ensure the server is running and trust the MCP server, e.g., click the "Server" icon in the
GitHub Copilot Chat panel in VS Code.
- **For GitHub Copilot in VS Code**: Make sure you are in Agent Mode, not Chat Mode. Use models,
e.g. **Claude Sonnet 4.5**.
5. **Start prompting**:
- "How do I use the search component from @siemens/ix?"
- "Show me examples of @siemens/ix-echarts usage"
- "Implement a dashboard with different widgets"
- "Find icons related to AI or machine learning"
- "Review the texts of this project"
> The MCP server starts automatically when your AI tools need it.
## Setup options
During `init` or `setup`, select which configuration(s) to create:
- **Local VS Code / GitHub Copilot (repository)** creates a VS Code MCP configuration file at
`.vscode/mcp.json` in the current repository
- **OpenCode (repository)** creates `opencode.json` in the current repository for OpenCode AI
- **OpenCode global settings** updates global OpenCode configuration (`~/.config/opencode/opencode.json`)
- **Claude Code global settings** updates global Claude Code MCP configuration
- **VS Code / GitHub Copilot global config** writes user-level MCP config
- **Zed global settings** configures Zed editor / agent MCP
## AI agent instructions (optional)
After MCP configuration, set up iX instruction files so AI agents work more effectively with
your codebase. Do this in each repository where you want instructions.
For this, you have two options:
- **Symbolic link to receive updates**
Keeps files synced with the installed package. Requires the package to remain installed and may
not work on all systems or package managers. The tool can create symlinks automatically;
otherwise, create links yourself pointing to the installed package's `AGENTS.md` and iX
instructions.
- **Copy the content**
Copy the contents of the package’s `AGENTS.md` into one of the following files in
your repo:
- `.github/instructions/ix.instructions.md`
- `AGENTS.md`
- `.github/copilot-instructions.md`
If you prefer manual copy, open the package’s `AGENTS.md`, then paste it into your chosen file and
commit it. Repeat per repository whenever you want to update the instructions.
## Version selection
iX builds components for multiple technology stacks. We ship MCP packages for every technology stack, and
you need to install the npm package related to your iX package.
- For `@siemens/ix` use `@siemens/ix-mcp`
- For `@siemens/ix-angular` use `@siemens/ix-mcp-angular`
- For `@siemens/ix-react` use `@siemens/ix-mcp-react`
- For `@siemens/ix-vue` use `@siemens/ix-mcp-vue`
In this guide, instructions are provided only for `@siemens/ix-mcp`. Replace it with your technology
stack as needed.
We distribute an MCP server package `@siemens/ix-mcp` for every `@siemens/ix` version. The version of
`@siemens/ix-mcp` must match your version of `@siemens/ix`. The version number of the MCP package
`@siemens/ix-mcp` is a combination of the `@siemens/ix` version and the version of the MCP code.
For instance `@siemens/ix-mcp@5.0.0-v.1.4.8` comes with the data of `@siemens/ix@5.0.0` and
`v.1.4.8` is the version of the MCP script.
To facilitate version selection, we use
[npm distribution tags](https://docs.npmjs.com/cli/commands/npm-dist-tag) `@ix` that match
the version of `@siemens/ix`. When using the corresponding distribution tag on installation, you get
the latest version of the MCP package that matches your `@siemens/ix` version and simplifies
handling in your `package.json`.
```json
"dependencies": {
"@siemens/ix": "5.0.0",
},
"devDependencies": {
"@siemens/ix-mcp": "5.0.0-v.1.4.8",
}
```
New MCP package versions on the same `ix` version are incremented like `5.0.0-v.1.4.9`,
`5.0.0-v.1.4.10`, `5.0.0-v.1.5.0`.
## Upgrading
Simply install the package again with the updated version.
E.g., if you want to upgrade from iX V4 to V5:
```bash
# in project
npm install --save-dev --save-exact @siemens/ix-mcp@5.0.0
# with yarn
yarn add -D --exact @siemens/ix-mcp@5.0.0
# global
npm install -g --save-exact @siemens/ix-mcp@5.0.0
```
## Logging
By default, the server performs no logging, but you can enable local-only logging of all search queries and
retrieval results during setup.
### Manually enabling logging
In your MCP configuration, add the `--log` flag to log all search queries and retrieval results to
local log files in `~/.ix-mcp`.
```json
{
"servers": {
"@siemens/ix-mcp": {
"type": "stdio",
"command": "npx",
"args": ["@siemens/ix-mcp", "--log"]
}
}
}
```
### Viewing and sharing logs
To view logs, use the `npx @siemens/ix-mcp log` command.
Select a relevant session and look at the output or the files copied to your current working directory.
To help us improve the MCP agent, please send feedback on your MCP and agent results by creating an issue at
[https://code.siemens.com/ux/sdl-mcp/issues](https://code.siemens.com/ux/sdl-mcp/issues). Share your
details and include the relevant logs.
## Usage
### Commands
#### Init (first-time setup)
Complete initial setup: configure token and create all MCP configurations.
```bash
npx @siemens/ix-mcp init
```
#### Setup (update configurations)
Create or update MCP configuration files for your tools (uses existing token).
```bash
npx @siemens/ix-mcp setup
```
#### Setup token
Set or update only the LLM token in the system keychain.
This token is used to generate embeddings for a semantic search of the documentation.
These embeddings help find relevant documentation chunks, but your AI tool
(e.g. GitHub Copilot, Claude, etc.) provides the actual LLM (language model)
that processes your queries and generates responses separately.
```bash
npx @siemens/ix-mcp setup-token
```
#### Check
Verify your installation and configuration.
```bash
npx @siemens/ix-mcp check
```
#### Test
Test the MCP server with a sample query.
```bash
npx @siemens/ix-mcp test
```
#### Log
Check your previous MCP retrieval logs (if enabled / not disabled).
```bash
npx @siemens/ix-mcp log
```
### Use within WSL (Windows Subsystem for Linux)
If you're using WSL, you need to configure the LLM token using environment variables instead of the
system keychain. Before running any commands, add the following to a `.env` file in the project root
(if you’re using a project installation):
```
SDL_MCP_TOKEN_ENV=true
OPENAI_API_KEY=
```
Make sure the `.env` file is in your `.gitignore` and cannot be committed.
Alternatively, or if you’re using a global installation, add these to your shell profile
(`~/.zprofile` or `~/.bash_profile`):
```bash
export SDL_MCP_TOKEN_ENV=true
export OPENAI_API_KEY=
```
### Connection issues
- Verify that the MCP server is running (it should start automatically)
- Restart your AI tool after configuration changes
- Verify your LLM token is valid at [https://my.siemens.com/](https://my.siemens.com/)
## Manual configuration
If you prefer to set up configuration manually, here are the required files and their contents.
### VS Code (.vscode/mcp.json or user/mcp.json)
```json
{
"servers": {
"@siemens/ix-mcp": {
"type": "stdio",
"command": "npx",
"args": ["@siemens/ix-mcp"]
}
}
}
```
### OpenCode (local or global)
For repository-level configuration, create `opencode.json` in your project root:
```json
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"ix-mcp": {
"type": "local",
"command": ["npx", "-y", "@siemens/ix-mcp"],
"enabled": true
}
},
"instructions": ["ix.instructions.md"]
}
```
For global configuration, edit `~/.config/opencode/opencode.json`:
```json
{
"$schema": "https://opencode.ai/config.json",
"mcp": {
"ix-mcp": {
"type": "local",
"command": ["npx", "-y", "@siemens/ix-mcp"],
"enabled": true
}
}
}
```
Learn more about OpenCode configuration at
[https://opencode.ai/docs/config](https://opencode.ai/docs/config).
Learn how to install it
[here](https://code.siemens.com/ai/opencode/#getting-started) or use the script at
[https://open.code.siemens.io](https://open.code.siemens.io).
### Claude Code (global Claude Code MCP settings)
```json
{
"mcpServers": {
"@siemens/ix-mcp": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@siemens/ix-mcp"],
"env": {}
}
}
}
```
On Windows, prefer the full path to `npx`, for example:
```json
{
"mcpServers": {
"@siemens/ix-mcp": {
"type": "stdio",
"command": "",
"args": ["-y", "@siemens/ix-mcp"],
"env": {}
}
}
}
```
Consider OpenCode as an open alternative
OpenCode is the established open-source alternative to Claude Code. It offers the same feature set,
broader model support, and is often considered more stable. As a proprietary closed-source tool,
Claude Code may not offer the same transparency and data handling guarantees as a fully open
alternative. See the OpenCode docs for setup.
- [https://code.siemens.com/ai/opencode/#getting-started](https://code.siemens.com/ai/opencode/#getting-started)
### Zed (global Zed settings)
```json
{
"context_servers": {
"@siemens/ix-mcp": {
"source": "custom",
"command": "npx",
"args": ["@siemens/ix-mcp"],
"env": {}
}
}
}
```
---
## Upgrade to V2
# Upgrade to V2.0.0
## Breaking changes in V2.0.0
You can find a list of all breaking changes [here](https://github.com/siemens/ix/blob/main/BREAKING_CHANGES.md#v200).
The most important breaking changes result from the switch to an SVG based implementation for icons:
### Removed icon font @siemens/ix-icons
The internal implementation of `@siemens/ix-icons` changed from icon font to a `SVG` based implementation.
This shouldn't have any direct impact on your application.
### Custom icon support for @siemens/ix, @siemens/ix-react, @siemens/ix-angular and @siemens/ix-vue
You can now provide custom icons as inline SVG or via relative/absolute path to the asset.
Example of a custom icon via path:
```tsx
Save
Cancel
```
**New:**
```html
My Header
My Content
Save
Cancel
```
### Spinner animation
We replaced the previous animation with a cleaner and more refined alternative.
## Added
### New component ix-menu-category
With `ix-menu-category` there is a new addition to the `ix-menu` that enables the creation of a second level of navigation within the `ix-menu` component. Through the `ix-menu-category`, you can organize your menu items into categories, providing a hierarchical structure for your menu navigation.
```tsx
Nested Item 1
Nested Item 2
```
### Multiple screen layouts within ix-basic-navigation
The `ix-basic-navigation` introduces new layout breakpoints that affect the display and behavior of the menu component based on the screen size. These breakpoints provide a responsive and adaptive menu layout for different devices and screen resolutions.
With the updated version of `ix-menu`, you have the flexibility to choose which layout breakpoints you want to support. You can specify the supported modes using the `breakpoints` property. This allows you to customize the menu's behavior and appearance according to your specific requirements.
Here you can see all available breakpoints and how they affect `ix-menu`:
- **sm**: `only screen and (min-width: 36em)`
- Menu not visible
- **md**: `only screen and (min-width: 48em)`
- Menu is visible but has to be expanded to see it fully
- **lg**: `only screen and (min-width: 62em)`
- Shows the menu as pinned and in its full width
- The underlying content will be shifted to the right to be fully accessible
These breakpoints enable the menu to adapt its layout and behavior according to the available screen real estate, ensuring optimal visibility and usability for different screen sizes.
In addition, you can specify which layout modes should be enabled for your menu by setting the `breakpoints` property. For example, if you want to support only the small and medium viewports, you can set the `breakpoints` property as follows:
```tsx
```
## Preparation for removing Bootstrap as dependency
One goal of the [Shadow DOM](#shadow-dom) refactoring was to make all ix components interoperable. Therefore, we have decided that we no longer want to depend on any third party CSS framework.
In the past, we relied on bootstrap which is no longer necessary. By removing bootstrap from the list of peer dependencies we will provide you with the flexibility to choose any one of the available CSS frameworks without running into conflicts.
As for now, bootstrap is still a part of our library, but we are planning to drop it entirely in a future release.
If you want to check if your application is still working smoothly without bootstrap, you can already test this by loading the new `core CSS` file.
A detailed description can be found [here](../../styles/theming/usage-developers).
## Questions ❓🙋♀️
Don’t forget to check out the [Breaking Changes guide](https://github.com/siemens/ix/blob/main/BREAKING_CHANGES.md).
If you have further questions or you are facing any problems during migration please [contact us over our forum](https://community.siemens.com/c/ix/).
---
## Upgrade to V3
import React from "react";
import { IxIcon } from "@siemens/ix-react";
import { iconBook } from "@siemens/ix-icons/icons";
# Upgrade to V3.0.0
## Removed light and foundation Figma libraries
The following Figma libraries have been replaced by the _iX Component_ library:
- iX Component - Brand Light
- iX Foundation - Brand Light
- iX Foundation - Brand Dark
- iX Helpers
Follow the instructions below to update your Figma files to the new iX Component library:
1. On the left panel, click **Assets**.
2. Click on the
My content
```
Here is a comparison of the properties and events between the drawer and pane components:
| ❌ **Drawer** | ✅ **Pane** |
| :----------------- | :-------------------- |
| `expanded` | `show` |
| `width` | `size` |
| `min-width` | (not available) |
| `max-width` | (not available) |
| `full-height` | (not available) |
| `on-drawer-close` | `on-expanded-change` |
| `on-open` | `on-expanded-change` |
Additional changes you need to consider when migrating from drawers to panes:
- You may need to adjust your content layout accordingly since pane contents have a default padding of `16px`.
- You now need to define a title for the pane using the `heading` property.
## Component updates
### ix-application
- `min-width: 0` has been added to the content-area in `ix-application` to prevent the flex container from growing beyond the screen width.
- If you have implemented a workaround for this behavior, your application's layout might be affected by this change.
### ix-application-header
- Changed height from `2.75rem` (44px) to `3rem` (48px).
### ix-button variants
Affected components: `ix-button`, `ix-dropdown-button`, `ix-icon-button`, `ix-split-button`, `ix-toggle-button`, `ix-icon-toggle-button`.
- Renamed variant `secondary` to `subtle`
- Removed the property `outline` in favor of new `secondary` variants
- Removed the property `ghost` in favor of new `tertiary` variants
To take over the changes, use the migration helper or the tables below to rename all button variants. Start with renaming `secondary` to `subtle-*` variants to avoid unwanted overriding.
` with the framework your project uses (Angular, React, Vue, etc.):
```text
This app has been updated to iX 5.0.
I need you to go through the entire codebase and fix all parts the breaking changes in the attached file affect.
This app uses the version of iX, so do use the components and properties whenever possible.
After you finish migrating, use the checklist at the end of the file to confirm the fixes.
```
4. Review all changes after the agent finishes.
#### Large projects
For large projects, we recommend running the agent one section at a time rather than the entire [Breaking changes guide](https://github.com/siemens/ix/blob/main/BREAKING_CHANGES/v5.md) at once.:
1. Install the new iX npm packages in your project.
2. Start an agent session (GitHub Copilot, Claude Code, etc.) in the root folder of your project.
3. Scope the prompt to the section you want to migrate and run the agent. For example (replace `` with the relevant section, and `` with the framework your project uses):
```text
This app has been updated to iX 5.0.
I need you to go through the entire codebase and fix all parts the breaking changes affect.
This app uses the version of iX, so do use the components and properties whenever possible.
Breaking changes:
```
4. Review the changes.
5. Start a new agent session to reset the context for better results before moving to the next section.
6. Use the final validation checklist as a whole-repository review once all domains are complete.
This keeps each batch of changes small and reviewable.
#### Manual
1. Search the codebase for the deprecated APIs listed in that section.
2. Apply the documented V5 replacement using the before/after examples and migration rules.
3. Validate each domain immediately before moving to the next one.
4. Use the final validation checklist as a whole-repository review once all domains are complete.
### Deprecated and removed components and API resources
Version 5 removes several legacy APIs and attributes that were kept for backwards compatibility in earlier releases.
- We removed legacy accessibility label properties on button-related components. Use native `aria-label` on the host element instead.
- `ix-modal` no longer supports `disableEscapeClose`. Use `beforeDismiss` to control whether a modal can be dismissed.
- `showModal()` and `ModalConfig` no longer support the no-op `container`, `keyboard`, and `title` options. Remove them and define titles in the modal content instead.
- `ix-toast-container` no longer creates a separate wrapper element in `document.body`. The host element is now the container.
- `ix-split-button` no longer supports the `placement` property because it did not affect dropdown positioning.
### Component updates
Several existing components now follow clearer and more consistent API patterns in Version 5.
- `ix-breadcrumb` now requires stable `breadcrumbKey` values on items. `nextItems` also use objects with `label` and `breadcrumbKey`, and click payloads now expose the key.
- `ix-card-list` now reveals all hidden cards by default when the show-all or show-more action is triggered. If you previously implemented custom reveal behavior, call `preventDefault()` in the event handler.
- `ix-time-picker` renames the `i18n-column-header` attribute to `i18n-hour-column-header` to align with the rest of the time-related API.
- `ix-tabs` changed from index-based selection to key-based selection. Replace `selected` with `activeTabKey`, `selectedChange` with `tabChange`, and add a unique `tabKey` to every tab item.
- `ix-menu-about` and `ix-menu-settings` now use tab keys consistently. New slotted `ix-tabs` integrations require `suppressLegacyTabs`, and `ix-menu-about-news` replaces `about-item-label` with `activeAboutTabKey`.
- `ThemeSwitcher` now uses the new theme and color schema model and updates its event payloads accordingly.
- `ix-application` now separates the theme name from the color schema, replacing combined values, e.g. `classic-dark`.
- `@siemens/ix-aggrid` now expects `@siemens/ix` as a direct dependency in the consuming application.
### Global style updates
Theming is the largest migration topic in Version 5.
- We replaced legacy classes, e.g. `theme-classic-light` and `theme-classic-dark`, with `data-ix-theme` and `data-ix-color-schema` on the `html` element.
- iX no longer injects a default theme automatically, so applications should set both attributes explicitly if a default theme is required.
- `ThemeSwitcher` is now fully aligned with the split theme model: replace `setVariant()` with `setColorSchema()`, `schemaChanged` with `themeChanged`, and update handlers to read the new object payload.
- The remaining Bootstrap font variable has been removed. If your application still relies on it, map `--bs-font-sans-serif` to `var(--theme-font-family)`.
## What changed in the Figma library
Version 5 also introduces a broader set of updates in the iX Figma library. These changes improve visual consistency, introduce more flexible composition patterns, and align several properties and behaviors more closely with code. Review all design-related changes in detail in the Figma library’s release notes and ensure you update to the latest published version.
### Design and visual updates
- Siemens reference colors are now adopted across the library, refining status, interaction, and danger color styling.
- Default, hover and active states are visually more distinct across multiple components, including buttons, chips, icon buttons, and toggle buttons.
- Status-driven visuals are applied more consistently, e.g. through strokes or icons in components, such as blinds, cards, pills, and chips.
### Structural and behavior changes
- Native Figma slots and slot-based layouts are introduced in key components such as [card](/docs/components/card) and [tabs](/docs/components/tabs), allowing more flexible and responsive compositions.
- Internal building blocks such as [tab item](/docs/components/tabs) and other internal atoms have been moved to internal-only components to simplify the public library surface.
- Interaction behavior for scrolling, overflow and selection has been updated in areas such as [tabs](/docs/components/tabs), [date dropdown](/docs/components/date-dropdown), and [chip](/docs/components/chip) close behavior.
### Accessibility and usability improvements
- Critical status colors such as error and info are refined to better meet WCAG contrast requirements.
- Focus, hover, and active state handling is improved across form controls and other interactive elements.
- Date-related inputs such as [date](/docs/components/input-date), [date time](/docs/components/input-date-time), and [date dropdown](/docs/components/date-dropdown) now provide clearer picker interactions and a clearer distinction between input and picker behavior.
### Breaking changes and migration notes
- [Card](/docs/components/card), action card and push card are deprecated in favor of new card components that support slot-based layouts.
- [Card list](/docs/components/card-list) examples now use the new card component.
- [Modal](/docs/components/modal), [message modal](/docs/components/message-modal), and [loading modal](/docs/components/loading-modal) properties are aligned more closely with code, which can require updates to existing Figma instances.
- [Number input](/docs/components/input-number) steppers are now hidden by default.
The following components were fully removed from the library after prior deprecation:
- Datepicker
- Datetimepicker
- Drawer
- Slider
## Questions ❓🙋♀️
Please check out the following resources and don’t hesitate to [contact us](./../support/contact-us) if you have further questions or migration problems.
- [Release V5.0.0 blog post](/blog/2026/05/21/release-5)
- [Breaking Changes guide](https://github.com/siemens/ix/blob/main/BREAKING_CHANGES/v5.md)
- [Changelog](https://github.com/siemens/ix/releases)
---
## Migration from Core UI 6.5.0
#
## Changed dependencies
- Updated to `bootstrap@5.2.0`
- Updated peerDependency of `@anuglar/core` to latest version
## Removed dependencies
- `ng-bootstrap`
- `angular/cdk`
## ECharts
- ECharts default theme system works out of the box with `@siemens/ix` release
### Structure of `BasicNavigation` and `MapNavigation` need to be adapted
Check the following points:
- Rename `cui-vertical-tabs` to `ix-menu`
- Settings and About overlays are now **_optional_** and have to be placed by developer.
- Content of AboutAndLegal overlay is not part of the library anymore. The previous default content can be found inside the inner source brand theme.
### Component selectors changed
Change selectors. From `cui-` to `ix-`
### AG Grid
- Change the imports and dependencies from `@siemens/core-ui-aggrid` to `@siemens/ix-aggrid`.
### Styling
- SCSS variables are not exported anymore
- Chart colors are not part of the library
- theme.ts with hardcoded hex color values are removed
### Changed theme naming
- `theme-dark` -> `theme-classic-dark`
- `theme-light` -> `theme-classic-light`
Default theme is `theme-classic-dark`.
### About and Legal
Default content is removed regarding of various developer feedback
---
## Migration from UXT 2.7.0
import Accordion from '@site/src/components/Accordion';
#
:::info
For the full experience, please use the Siemens Industrial Experience components. The theme is intended for a quick, yet, incomplete switch from UXT as a legacy design system.
:::
## Usage
1. Download the [Brand CSS theme](https://code.siemens.com/siemens-ix/ix-brand-theme/-/tree/main/uxt) and import it into your project. Note that it’s available exclusively for Siemens AG products. For non Siemens AG products please [contact us](./../support/contact-us.md).
2. Apply the class `.ix` to the `.uxt-defaults` element.
3. Depending if you want to use the dark or light theme, add `.uxt-ix-theme-dark` or `.uxt-ix-theme-light` to your `body` element.
In the end, your setup should look like this:
```
...
...
```
```
...
...
```
**Note**: We recommend using the CSS theme with UXT V2.7.0
Your layout might change in some places when applying the theme, including:
1. Headings are notably smaller
2. Buttons are slightly wider because of the bold label
## Troubleshooting
1. Check if you use color variables (no raw HEX or RGB values)
2. Check if you applied the `.uxt-ix-theme-dark` on the `body`
3. Update your UXT version to v2.7.0
1. Check if you override specific attributes with `!important`
2. Check if you added the `.ix` class to the element with the `.uxt-defaults` class, as shown above
3. Update your current UXT version to 2.7.0
1. Check if you use color variables (no raw HEX or RGB values)
2. Check if you used meta color variables correctly (see more details [here](https://design.mindsphere.io/patterns/color.html#tab2anchor4)):
1. For text elements: use the font colors, e.g. color-font or color-font-secondary (no base colors)
2. For backgrounds: use the interface colors, e.g. color-interface or color-interface-secondary (no base colors)
3. For statuses: use the error, warning, info, success colors (not primary)
If you're facing any other problems, please raise an issue in GitHub [raising an issue](https://github.com/siemens/ix/issues).
## Component name differences
As some of the components are named differently in Industrial Experience, please consult this list of the most important component name differences to help make your migration easier:
| **User Experience Toolkit** | **Industrial Experience** |
| ------------------------------------------------ | ------------------------------------------------------------------------------------------------ |
| App bar | [Nav menu](/docs/components/application-menu) |
| Badge | [Pill](/docs/components/pill), [chip](/docs/components/chip) |
| Busy indicator | [Spinner](/docs/components/spinner) |
| Button- primary- secondary- ghost | [Button](/docs/components/button)- primary filled- primary outline- primary ghost |
| Card grid | [Layout grid](/docs/components/layout-grid) |
| Container | [Card](/docs/components/card) |
| Dialog | [Modal](/docs/components/modal) |
| Dropzone | [Upload](/docs/components/upload) |
| List | [Event list](/docs/components/event-list) |
| Stepper | [Workflow](/docs/components/workflow) |
| Menu | [Dropdown button](/docs/components/dropdown-button) |
| Message | [Message bar](/docs/components/messagebar) |
| Notification | [Toast](/docs/components/toast) |
| Pager | [Pagination](/docs/components/pagination) |
| Popover | [Tooltip](/docs/components/tooltip), [dropdown](/docs/components/dropdown) |
| Switch | [Toggle](/docs/components/toggle) |
| Context region | [Pane](/docs/components/panes) (inline right) |
| Item region | [Pane](/docs/components/panes) (floating right) |
| Leading region | [Pane](/docs/components/panes) (inline left) |
## System icons
Key differences between UXT and Industrial Experience:
- UXT offers an iconfont with 3 different styles (regular, bold, filled)
- [iX offers SVGs](../../icons/icon-library.mdx) with mainly 1 style that corresponds to our bold and partially filled variants separately
When changing to the SVG icons by Industrial Experience, check whether your stylings still apply in your custom-built components.
## Figma library
When switching from UXT to Industrial Experience, use the swap library feature as described [here](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries).
---
## Welcome to Siemens Industrial Experience
import { GuidingLinks, DevelopmentFrameworks } from '@site/src/components/GuidingPrinciples';
import {Card, CardList} from '@site/src/components/Card';
import GitHubIcon from '@site/static/img/github.svg';
import './card-with-icon.css';
If you are unsure where to start, check the repository issues or open a discussion.
---
## Versioning and releases
#
## Versioning
We use [semantic versioning](https://semver.org/) for our releases. Version numbers indicate the level of changes introduced by the release and follow the standard major, minor and patch format.
| Release type | Details |
| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Major | Contains significant new features and changes, might include breaking changes. Updating requires some developer efforts and includes backward incompatible changes to APIs, file paths, component behavior and/or dependencies. Formerly deprecated components are removed when updating to a new major version. |
| Minor | Contains smaller features and changes. Updating requires no developer efforts. Minor versions can include components changing their status to deprecated. They are fully backward compatible. |
| Patch | Contains bug fixes. Updating requires no developer efforts. |
## Release frequency
We follow a time-based release schedule consisting of:
- One major release every 6 months
- 1-3 minor releases for each major release
- Patch releases as hotfixes when necessary
## Support policy
All major releases receive support for approximately 12 months. We distinguish between two support stages for major releases:
| Support stage | Support window | Details |
| ------------- | :------------: | ---------------------------------------------- |
| Latest | 6 months | Receives regular minor releases |
| Maintenance | 6 months | Receives patch releases to fix critical issues |
| End of life | - | Receives no support and no further releases |
Our support policy applies to all components of the design system including the code base, Figma design kits and our documentation.
We recommend always following the active release. When a version moves from the active stage to the maintenance stage, projects should start migrating to the new active major version.
## Supported versions
| Version | Status | Release | Active support ends | Maintenance support ends |
| ------- | -------------- | -------------- | ------------------------- | ----------------- |
| V6.0.0 | Next | *November 2026* | | |
| V5.0.0 | Latest | May 2026 | November 2026 | May 2027 |
| V4.0.0 | Maintenance | November 2025 | May 2026 | November 2026 |
| V3.0.0 | End of life | May 2025 | November 2025 | May 2026 |
| V2.0.0 | End of life | September 2023 | May 2025 | November 2025 |
---
## Roadmap
### ✅ Completed
**🔹 Release 5.0**: Applying reference color tokens aligned with the Siemens design language, refactoring keyboard navigation in dropdowns, new [date-time input](/docs/components/input-date-time) & [range field](/docs/components/range-field) component, [tabs](/docs/components/tabs) with overflow menu and style adaptions. [Read more](/blog/2026/05/21/release-5)
### 🚧 Work in progress
- **Popover**: The new popover component bridges the gap between small text-based tooltips and modal dialogs. In contrast to an on-hover tooltip, the popover typically opens upon clicking. It is built with great flexibility providing slot options for header, content and footer.
- **Badge**: The new badge component is closely related to the current pill component. It is always bound to an anchor element and can be used to indicate notifications, showing a count or conveying status.
- **Inline notification**: The inline notification offers an alternative to larger message bars. Inline notifications appear within a specific section or component of a page, rather than spanning the entire width.
**🔹 Major release 6.0**: Planned for Q4 2026, see info on [release strategy](release-version.md).
### 🗓️ Scheduled
- **Generic list**: The generic list extends our component set with a more flexible solution for lists. It comes as a customizable variant providing a slot and a pre-defined variant with a useful default of checkbox selection, icon, title and actions.
- **Building blocks**: Blocks are curated, copy‑paste code examples that show how multiple components work together in real UI scenarios. Blocks bridge the gap between individual components and larger patterns, giving users practical, ready‑to-use starting points.
- **Vertical navigation menu rework**: Our vertical navigation will change in alignment with other design systems at Siemens.
- **Settings and about as modal**: Currently, settings and the about information are presented in an overlay that is bound to the vertical navigation menu. For a more flexible version, we will provide a template for settings and about information in a modal that can either come at a fixed width or full-screen. Access to this modal will move from the bottom left menu navigation to the header.
### ⏳ Planned
- **Density options**: Density tokens allow for changing sizes and spacings of elements on the screen without creating different variants of components. It uses the same mechanism as switching color modes or themes. To use density modes, all relevant dimensions of a component must use density tokens, e.g. for font size and line height, widths, heights, paddings and gaps.
- **Box-styled tabs**: For more flexibility, we're adding an option to our tabs component to appear in a box-style manner, containing the content below. This allows two visually distinct levels of tab navigation
- **Chatbot components**: Delivering foundational chat UI components to support iX AI patterns, aligned with existing Figma designs.
**Disclaimer**: The roadmap is subject to changes and errors. The information given in this document only contains general descriptions and/or performance features which may not always specifically reflect those described, or which may undergo modification in the course of further development of the products.
---
## Contact us
#
## FAQ
Our [FAQ section](./faq) is your go-to resource for quick and clear answers about Industrial Experience. Whether you’re just starting with the design system or need insights into integration and functionality, you’ll find answers to the most common questions here. If you can’t find what you’re looking for, feel free to reach out.
## GitHub repository
Our [GitHub repository](https://github.com/siemens/ix/issues) is the central hub for managing feature requests and bug tickets. Here, you can track the progress of ongoing issues, contribute to discussions, and stay updated with the latest changes and improvements to our design system.
## Viva Engage
Siemens employees are invited to join our [Viva Engage community](https://engage.cloud.microsoft/main/org/siemens.com/groups/eyJfdHlwZSI6Ikdyb3VwIiwiaWQiOiI1ODIzNzc5NjM1MiJ9), a space for discussions about all aspects of the design system. It’s a great place to share ideas, ask questions, and collaborate with colleagues on design-related topics.
## Team email
For inquiries about collaborations or any other questions, please reach out to us at team.ix.industry@siemens.com. We’re always open to exploring new opportunities and partnerships to enhance our design system.
---
## FAQ
import Accordion from '@site/src/components/Accordion';
import './faq.css';
#
## System access and use
The classic theme is the default that can be used by any application, including non-Siemens applications. In contrast, the Siemens brand theme is exclusively available to Siemens employees and business partners, incorporating specific Siemens brand elements. Both themes are offered in dark and light modes. Additionally, you have the flexibility to create custom themes that align with third-party style guides.
Although our design system can be used with any modern browser, we recommend Chrome for the best user experience.
Our design system is tailored for tablets and desktop computers, not smartphones. However, many components, including the main navigation, are mobile-ready. We support breakpoints for the following screen sizes to ensure flexibility across various devices, even though our primary focus is on larger screens:
- Small screens: <768 pixels
- Medium screens: 768-1280 pixels
- Large screens: >1280 pixels
With the help of our design system, you are able to swiftly build the user interface of your mobile web app or hybrid app.
Read more on the topic in our development and UX guides on mobile development with the Industrial Experience Design System [here](/docs/guidelines/mobile/mobile-app-dev).
Our design system uses English as default, but it can be used with any language. All texts are fully customizable and therefore integrate nicely with third-party i18n solutions, which means your software can easily be adapted for users of different cultures and languages.
This usually happens when ECharts is initialized before its container has a valid size, for example inside collapsed panes, tabs, modals or hidden parts of an application frame. This affects React, Angular and plain HTML integrations equally.
To avoid it:
- Make sure `echarts.js` is loaded and the DOM container has a width and height when `echarts.init(...)` is called
- Initialize the chart only after the container becomes visible, or set explicit dimensions (`style.width` and `style.height`) before init
- Call `chart.resize()` after the container is shown or the layout changes
- The same applies to wrappers such as `echarts-for-react`; for SSR, set `opts.width` and `opts.height` explicitly
For details, see the official docs: [Apache ECharts FAQ](https://echarts.apache.org/en/faq.html) and [Apache ECharts API](https://echarts.apache.org/en/api.html#echarts).
## Contribution and development
We want everyone to contribute to our design system and play a part in its development. There are three main ways to contribute to or report issues:
- As a Siemens employee or business partner: Post in our [Viva Engage community](https://web.yammer.com/main/groups/eyJfdHlwZSI6Ikdyb3VwIiwiaWQiOiI1ODIzNzc5NjM1MiJ9)
- As an open-source library user: Contribute within the [Siemens Xcelerator Community](https://community.siemens.com/c/ix/30) or open tickets in [Github](https://github.com/siemens/ix)
- Directly contact our team regarding larger topics: [team.ix.industry@siemens.com](mailto:team.ix.industry@siemens.com)
For more information, see our [GitHub Contributing Guide](https://github.com/siemens/ix/blob/main/CONTRIBUTING.md) which has guidance on bug reporting, workflow issues and suggesting enhancements.
Absolutely! Please add requests for the future in [Github](https://github.com/siemens/ix) or [Siemens Xcelerator Community](https://community.siemens.com/c/ix/30).
iX components receive a `hydrated` class when they’re fully initialized. Use the `componentOnReady()` method to wait for hydration:
```javascript
const button = document.querySelector('ix-button');
if (button) {
button.componentOnReady().then(() => {
console.log('Button is ready');
// Your initialization code here
});
}
```
For multiple components:
```javascript
const button = document.querySelector('ix-button');
const input = document.querySelector('ix-input');
const elements = [button, input].filter(Boolean);
if (elements.length > 0) {
Promise.all(elements.map(el => el.componentOnReady())).then(() => {
console.log('All components are ready');
});
}
```
:::info
The `appload` event mentioned in Stencil documentation is not available in iX. Use `componentOnReady()` instead.
:::
Learn more in the [Stencil documentation](https://stenciljs.com/docs/api#componentonready).
Flash of Undefined Custom Elements (FOUCE) occurs when custom elements briefly appear unstyled before hydration. Use the `hydrated` class to prevent this:
```css
/* Hide specific components until hydrated */
ix-button:not(.hydrated),
ix-icon:not(.hydrated),
ix-input:not(.hydrated) {
visibility: hidden;
}
/* Or hide all ix-elements */
*[class*="ix-"]:not(.hydrated) {
visibility: hidden;
}
```
## Customization and framework Support
The steps to incorporate your own custom SVG icon are found under the developing tab, in [Industrial Experience documentation](/docs/icons/developing-with-icons#integrate-external-icons). There is also a guide for designing new icons based on the Industrial Experience (brand) style.
Users are free to utilize open-source libraries at their discretion. However, customizing components may prevent future updates of our libraries from being applied to your software. Industrial Experience is built on the Web Component standard, encapsulating components in a local Shadow DOM. This prevents external styling from affecting the components, ensuring that future updates remain compatible and do not break your software due to custom styling.
Our design system is built with plain Web Components and is, therefore, framework agnostic. For better integration, we provide support for some of the most popular web development frameworks in Angular, React and Vue. You can find more information about our frameworks [here](/docs/home/overview#development-frameworks).
Our codebase is openly and freely accessible for anyone to view, modify and distribute. We want to foster collaboration and innovation by allowing developers, designers and UX writers from around the world to contribute improvements and new features, leading to a more robust and versatile platform. We hope that this openness enhances digitalization while enabling rapid development and adaptation to new technologies.
## Files, documentation and accessibility
[Here](/docs/home/overview#figma-library) you will find information on how to get Figma and how to access the most important Industrial Experience libraries. Remember, the Siemens brand library contains Siemens-specific brand elements and is only accessible to Siemens employees and business partners. For the classic theme, we don’t have updated Figma files, but you can use the code components.
We are working towards meeting the WCAG (Web Content Accessibility Guidelines) and other relevant accessibility standards. Our team is dedicated to ensuring that our design system is accessible to all users. While we’re still in the process of fully aligning with these guidelines, we have made significant progress and continue to improve our accessibility features. We appreciate your patience and understanding as we strive to achieve full compliance. For specific accessibility concerns or updates on our progress, please feel free to reach out to our team.
The Siemens Industrial Experience design team provides a transparent versioning and release process. For more details on our versioning, release types, frequency, and support policies, visit our [Roadmap](../releases/roadmap.md) and [Versioning and release](../releases/release-version.md).
The Siemens Industrial Experience design system is intended for building industrial applications. If you are a Siemens AG employee looking to create a documentation website, use the [official MkDocs theme](https://code.siemens.com/code-ops/docs-theme) for documentation purposes. This ensures consistency and alignment with Siemens documentation standards.
---
## Designing new icons
#
## Considerations
Before you start designing your specific icon set for your application, consider the following:
- Make sure the icons you need are not already in the library
- Maybe the icon already exists under a slightly different name or it might be planned for a future release so please double check or ask us when in doubt
- Consider using more generic icons than creating multiple very specific new ones (e.g.: Use the generic "add" icon instead of creating an "add-wireless-device" icon)
- Do not create alternatives to existing icons just for the sake of your own look
- Ask other designers within your company about the existence of an icon, to prevent creation of duplicates
- Finally: Entrust a professional designer with the task of designing an icon
### Technical requirements
Icons in our design system are monochromatic. They will be colored during runtime, depending on the context they are being used in. For more technical requirements see the "Code" tab above.
### Formal requirements
New icons should follow the app icon guidelines below for a consistent look & feel across applications. For Siemens applications it is mandatory to follow these guidelines.
## Icon design guidelines
These guidelines extend the basic guidelines on [Siemens brandville](https://brandville.siemens.com/en/design-elements/icons/ui-icons).
### 1. Icon grid size
- The basic icon grid size is 24✕24
### 2. In-app icon design grid
- Use the design grid component “Icon Design Grid” from the “Assets” library as background for creating new icons
- The design grid helps to limit the icon boundaries to achieve an evenly optical weight of different icon shapes
- The clearance zone (red area) should not be touched by the icon (for exceptions see below)
- The lines represent the boundaries of key shapes or just mark the center
- Use the portrait key shape for vertically oriented shapes
- Use the landscape key shape for horizontally oriented shapes
- Use the square key shape for square icons
- Use the circle key shape for round icons
#### Exceptions to the clearance zone
- Icons with attributes: Icons can be enhanced with attributes. These attributes are allowed to touch the clearance zone but should keep at least 1px space to the outer boundary
- Optical fixes: Shapes are allowed to touch the clearance zone to equalize visual effects with pointed shapes or single strokes
### 3. Light weight icons
- Prefer strokes and outlines over filled shapes
- Please provide a filled variant of the icon as well, where possible and potentially useful. It can be used in situations when more visual weight is required. The filled variant gets the name suffix “-filled”.
### 4. Simple and geometric
- Keep icons as simple as possible
- Avoid complex symbols or symbol combinations whenever possible
- Create icons from geometric shapes
- Prefer sharp corners and straight lines
- Use rounded corners and endings only to support the characteristics of the represented object
### 5. Stroke widths
- Default stroke width is 2px
- In case icon readability can't be guaranteed otherwise, stroke widths of 1.5px or even 1x are also allowed. Before doing that please make sure all rules from section 4 are followed.
### 6. Gaps
- Anti-aliasing effects can lead to blurry borders and edges
- Use 2px gaps to visually separate two shapes from each other
- Avoid unsafe patterns of alternating between set pixel and no pixel. In the worst case such shapes cannot be visually distinguished anymore.
### 7. Strikethrough, cuts and cutouts
- A diagonal strikethrough is used to symbolize the opposite of an icon or an unavailability (e.g. show & hide, switch off alarm)
- A diagonal strikethrough starts from top left and ends at the bottom right (refers to the crossbar of letter “N” for “No”), followed by a 2px space above right
- Use at least 1px space for cuts or cutouts (be aware of “unsafe patterns”, see 6.)
### 8. The technical finish
#### Prepare your icon for integration
- The icon size (including clearance zone) must be 24x24
- The icon must not contain strokes (convert all strokes to outlines)
- Combine all icon parts to one single shape by using boolean operations
- Name the remaining shape “Vector”, otherwise color overrides will not work properly in Figma
- Make sure the shape is set to “Scale” in the “Constraints” settings in Figma, otherwise the resizing will not work properly
#### Integrate in Figma
- Create a component from your icon
- Use a short, descriptive and unique name - also consider adding a project or application suffix to the icon name to prevent naming collisions with other external icons
- "Publish" the document with your icon(s) and it will be available as library in your document assets
- Activate your library in the design document
#### Export for development
- Create an instance of your icon (this can be done in the same document the icon is stored in)
- Resize this instance to 512×512 (target size for development integration)
- Check if the scaling works properly (check scaling settings, if not)
- Export the instance as SVG
- Check the SVG code and remove any title attributes (` ... `) to make sure no unintentional tooltips appear on the icon
- Make sure the name of the SVG file matches the icon name to avoid confusion
- Hand the SVG over to your development
---
## Developing with icons
import AddIconsPlayground from '@site/docs/autogenerated/playground/add-icons.mdx';
# Usage
The package @siemens/ix-icons offers a large set of icons. It also comes with the ix-icon component that displays them in your application. Additionally custom SVG icons (that are not part of the library) can be used.
Since V3.0.0, all available iX icons are no longer loaded automatically. Only the icons actually used in the application will be part of the bundle to significantly reduce the overall bundle size. As a result, explicitly import icons for correct rendering.
## Icon usage in supported frameworks
### Angular
Provide all iX icons as asset folder via `angular.json`.
```json
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*.svg",
"input": "node_modules/@siemens/ix-icons/svg",
"output": "./svg"
}
],
```
To avoid unwanted console warnings, we recommend you also configure the domain of the asset path using the `meta`-tag:
```html
`) is still also possible, simply import all icons you want to display in your application via the `addIcons` method.
... `) to make sure no unintentional tooltips appear on the icon
- For visual and formal requirements see guidelines tab above
```tsx
---
## Color palette
import ColorTable from '@site/src/components/ColorTable';
#
All colors are provided as custom properties.
To access them the `var()` CSS function can be called with the color's name:
```css
.some-example {
background-color: var(--theme-color-primary);
}
```
## Background colors
Use “background colors” on non-interactive backgrounds like screen areas. Background colors are solid without opacity. The color-0 is an exception, it is transparent.
## Component interaction colors
Component & interaction colors are used on interactive elements that often come with hover, active and selected states like buttons, toggle buttons, switches, cards, etc. Primary color is equal to brand color, often used for primary buttons or selected elements. “alt” means alternative and is used rarely, e.g. in date picker component to distinguish between selection start/end and the days in the range between.
“color-component-1” are used on interactive elements with a visible fill like cards. They are semi-transparent to work on most background colors.
Following ghost colors are used on elements with an invisible background but visible hover, active and selected states. “...-ghost-alt...” colors are used on alternating table grid patterns. These colors are semi-transparent and therefore work on most background colors.
Following colors are widely solid, without opacity and are therefore used only on a specific background color or are used in combination with a border (e.g. outline button, input fields)
Following colors are only used in very specific components like date picker calendar
## Status colors
Status colors are designed to represent different statuses. The following states are supported:
- Alarm (error, invalid, danger)
- Critical (status between alarm and warning)
- Warning
- Success (valid, ok, good)
- Info (information)
- Neutral
All status colors are available for the interaction states “hover” and “active.” Each status color has a matching “contrast” color, which is suitable for placing text and icons on such colored backgrounds. Additionally, each status has a semi-transparent color variant that can be used for more subtle colored backgrounds.
:::info
Please note:
Don’t use status colors for texts as they would not meet the minimum required contrast in some constellations. Use the color for icons or on status indictors or backgrounds instead.
There is a special alarm text color that can be used for texts, see “text colors”.
:::
## Text colors
Text colors are used on text and icons.
- “color-contrast-text” is the darkest/lightest possible color and should be used in situations where the background color is hard to control (e.g. on custom colors)
- “color-std-text” is used as default for texts and icons
- “color-soft-text” text is used for secondary texts, sub titles, labels, hints or placeholder texts
- “color-weak-text” is used for disabled texts
- “color-alarm-text” is used for alarm, error, danger texts
- The “color-inv...” texts are rarely used. They are used in “inverted” situations e.g. text on light background in dark mode.
## Border colors
- color-contrast-bdr is the darkest/lightest possible color and should be used in situations where the background color is hard to control (e.g. on custom colors)
- color-hard-bdr is used whenever the border should be a solid, non-transparent color
- color-std-bdr has a strong appearance and is used e.g. on input components
- color-soft-bdr is more subtle and used on cards and similar components or as separators
- color-weak-bdr is even more subtle and used for subtle separations of e.g. entire screen areas
- color-x-weak-bdr can be used for very subtle separations or content structuring
## Effect colors
Effect colors are used for shadows, lightbox effects or gradients.
- color-lightbox can be used for lightbox effects behind modals in combination with a background blur effect
- color-backdrop is used for overlays in combination with background blur effect to provide a very subtle ranslucent effect
- The gradient colors are used for brand gradient effects like in the big numbers of the html error pages
## Chart infrastructure colors
Following colors can be used to color the infrastructural elements in charting components
- axes = x and y axis lines
- ticks = small separations line with value labels
- grid-lines = horizontal/vertical lines behind the chart
- grid-fill = background of charting area
- tooltip = background for chart tooltip
- tooltip-bdr = border for chart tooltip
## Chart data colors
Use the following colors for data inside of charts. The colors are only proposals and not mandatory to use. Each color has a related ...-40 color, which means 40% opacity. You can use these colors for comparisons like current year vs. last year, or actual value vs. benchmark value.
## Color series for charts
For easily distinguishable data series, we recommend the following color sequence.
---
## Elevation
Our design system achieves elevation through the application of background color layers, borders and selective shadows to achieve depth and clarity.
:::info
**Important note:** We changed the elevation approach starting with version 4.0 of our design system, so it is only partially applicable for v3.x (see [migration guide](../home/migration/4_0_0/index.md) for guidance).
:::
Our approach to elevation is two-fold:
1. **Background color layers:** Primarily achieved through a system of distinct `color-` and `color-component-` tokens and additional border-colors. This defines the foundational stacking order for static content.
2. **Selective drop shadows:** Used as a separate visual cue for elements that float above the UI, demanding immediate attention or representing a temporary interaction.
When you use it intentionally, you can achieve:
* **Clarity:** Help users understand the relationship between different UI elements.
* **Hierarchy:** Guide the user's eye to the most important information or interactive elements.
* **Focus:** Draw attention to temporary or critical content, e.g. toasts.
* **Consistency:** Ensuring a predictable and intuitive user experience across all applications.
### The layering model
This model outlines the primary elevation levels for static UI elements:
#### Base layer
- **Purpose:** Main page background for the entire user interface.
- **Usage:** Use `color-1` for the main canvas of your application, large sections, or the default background of a page.
:::tip
Visually separate large sections on the base layer by applying [borders](borders.md) (e.g. `color-soft-bdr` or `color-weak-bdr`). When using our components, we recommend using the available `outline` variants.
:::
#### First-level containers
- **Purpose:** Container elements that need to stand out from the main background.
- **Usage:** Apply `color-2` or `component-1` (which shares the same color value in the new theme introduced in v4.0) to components like cards, side panels, distinct content blocks, or primary interactive elements.
#### Second-level containers
- **Purpose:** Nested containers within a container, e.g. a sub-section inside a card.
- **Usage:** Maintain `color-2` as the background, but visually separate these nested containers with [borders](borders.md) (e.g. `color-soft-bdr` or `color-weak-bdr`). Alternatively, use `color-component-2` which is semi-transparent.
#### Floating elements
- **Purpose:** Elements that float above the main UI, demanding immediate attention or representing a temporary interaction.
- **Usage:** Use selective shadows (primarily `shadow-4`, see [shadow](shadows.md)) to indicate physical overlap for components like [dropdowns](../components/dropdown/index.mdx), [tooltips](../components/tooltip/index.mdx), [modals](../components/modal/index.mdx), and [toasts](../components/toast/index.mdx).
We don’t use shadows that are part of the primary layout flow e.g. [navigation elements](../components/application-menu) or [cards](../components/card/index.mdx).
### Other `color-` tokens
We recommend to stick to the `color-1` and `color-2` model for primary background layering. `color-3` to `color-8` are preserved for specific component use cases and should not be used.
### Interaction states (hover & active)
For interactive elements, additional `--hover` and `--active` color tokens are available. These are applied consistently across all elevation layers to indicate interaction states. Refer to the [colors](colors.md) chapter for specific `--hover` and `--active` token names.
---
## Shadows
import ShadowTable from '@site/src/components/ShadowTable';
import ColorTable from '@site/src/components/ColorTable';
#
All shadows are provided as custom properties.
To access them the `var()` CSS function can be called with the shadow's name:
```css
.some-example {
box-shadow: var(--theme-shadow-1);
}
```
Lorem ipsum dolor sit amet consectetur. Et pulvinar arcu placerat tristique.
Velit ipsum donec pulvinar erat donec turpis ultrices. Scelerisque pharetra
sed sapien diam lorem. Risus quis in faucibus tempor. Hendrerit at cursus
suspendisse neque adipiscing at at eu.
```
---
## Typography - Usage
import TypographyTable from '@site/src/components/TypographyTable';
# Typography - Usage
## Headings
Use headings from H1 to H6 for headlines to organize content and indicate the hierarchy of information.