diff --git a/content/en/docs/apidocs-mxsdk/apidocs/frontend/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/frontend/_index.md
deleted file mode 100644
index cd2863df9a5..00000000000
--- a/content/en/docs/apidocs-mxsdk/apidocs/frontend/_index.md
+++ /dev/null
@@ -1,11 +0,0 @@
----
-title: "APIs for Frontend"
-url: /apidocs-mxsdk/apidocs/apis-for-front-end/
-no_list: false
-description_list: true
-description: "Provides the documentation of APIs for frontend, including Client API, Design Properties API, and Pluggable Widgets API."
-weight: 10
-linktitle: "Frontend"
----
-
-## Documents in this Category
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-10.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/design-properties-10.md
similarity index 99%
rename from content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-10.md
rename to content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/design-properties-10.md
index bf8bbfae1d2..1857fc6bfdb 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-10.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/design-properties-10.md
@@ -1,14 +1,21 @@
---
-title: "Mendix 10"
+title: "Design Properties API"
url: /apidocs-mxsdk/apidocs/design-properties-10/
description: "This API guide outlines how design properties work in Atlas UI and can help you create custom design properties."
-weight: 60
+weight: 56
---
## Introduction
The Mendix Design Properties API allows you to create or extend design properties for your Mendix apps.
+{{% alert color="info" %}}
+This document pertains to Mendix 10. For other Design Properties API documents, see these documents:
+
+* [Mendix 11](/apidocs-mxsdk/apidocs/design-properties-11/)
+* [Mendix 9](/apidocs-mxsdk/apidocs/design-properties-9/)
+{{% /alert %}}
+
To use the API, you need to alter the *design-properties.json* file of a specific module in your application's **themesource** folder. This process is described in the [Design Properties Definitions](#design-properties-definitions) section below.
Many apps can simply use the Atlas UI theme and its included set of design properties to satisfy their styling needs. However, if you want to customize your styling more deeply, you will have to create your own custom design properties. This guide outlines how design properties work and can help you create custom design properties. The design properties provided by Atlas UI have been built in the same way as outlined here.
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/pluggable-widgets/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/pluggable-widgets/_index.md
index 07247b2eb35..da53ae3ecb9 100755
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/pluggable-widgets/_index.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-10/pluggable-widgets/_index.md
@@ -284,7 +284,7 @@ This is how the property group structure is represented in Studio Pro:
When properties are shown in a dialog box, first-level groups (**General** and **Visual**) are represented as tabs. Second-level groups (**Main**, **Action** and **Progress bar**) are represented as boxes. When properties are shown in a pane, first-level groups are ignored and second-level groups are shown as categories.
-Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties/).
+Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties-10/).
## Widget Property
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/design-properties-11.md
similarity index 99%
rename from content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/_index.md
rename to content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/design-properties-11.md
index b149f020e2c..3a14458a753 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/_index.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/design-properties-11.md
@@ -1,6 +1,6 @@
---
title: "Design Properties API"
-url: /apidocs-mxsdk/apidocs/design-properties/
+url: /apidocs-mxsdk/apidocs/design-properties-11/
description: "This API guide outlines how design properties work in Atlas UI and can help you create custom design properties."
weight: 50
---
@@ -10,7 +10,7 @@ weight: 50
The Mendix Design Properties API allows you to create or extend design properties for your Mendix apps.
{{% alert color="info" %}}
-This document pertains to Mendix 11. For other Design Properties API documents, see the other documents in this category:
+This document pertains to Mendix 11. For other Design Properties API documents, see these documents:
* [Mendix 10](/apidocs-mxsdk/apidocs/design-properties-10/)
* [Mendix 9](/apidocs-mxsdk/apidocs/design-properties-9/)
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/pluggable-widgets/_index.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/pluggable-widgets/_index.md
index 5abb4e66664..4721caa2352 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/pluggable-widgets/_index.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-11/pluggable-widgets/_index.md
@@ -378,7 +378,7 @@ This is how the property group structure is represented in Studio Pro:
When properties are shown in a dialog box, first-level groups (**General** and **Visual**) are represented as tabs. Second-level groups (**Main**, **Action** and **Progress bar**) are represented as boxes. When properties are shown in a pane, first-level groups are ignored and second-level groups are shown as categories.
-Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties/).
+Note that the **Common** and **Appearance** tabs are added to your widget configuration automatically. These tabs contain properties applicable to all widgets: [Name](/refguide/common-widget-properties/#name), [Class](/refguide/common-widget-properties/#class), [Style](/refguide/common-widget-properties/#style), and [Design Properties](/apidocs-mxsdk/apidocs/design-properties-11/).
## Widget Property
diff --git a/content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-9.md b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-9/design-properties-9.md
similarity index 94%
rename from content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-9.md
rename to content/en/docs/apidocs-mxsdk/apidocs/studio-pro-9/design-properties-9.md
index 1398c06dac1..282aae5dc73 100644
--- a/content/en/docs/apidocs-mxsdk/apidocs/frontend/design-properties/design-properties-9.md
+++ b/content/en/docs/apidocs-mxsdk/apidocs/studio-pro-9/design-properties-9.md
@@ -1,14 +1,21 @@
---
-title: "Mendix 9"
+title: "Design Properties API"
url: /apidocs-mxsdk/apidocs/design-properties-9/
description: "This API guide outlines how design properties work in Atlas UI and can help you create custom design properties."
weight: 70
---
-## 1 Introduction
+## Introduction
The Mendix Design Properties API allows you to create or extend design properties for your Mendix apps.
+{{% alert color="info" %}}
+This document pertains to Mendix 9. For other Design Properties API documents, see these documents:
+
+* [Mendix 11](/apidocs-mxsdk/apidocs/design-properties-11/)
+* [Mendix 10](/apidocs-mxsdk/apidocs/design-properties-10/)
+{{% /alert %}}
+
To use the API, you need to alter the *design-properties.json* file of a specific module in your application's **themesource** folder. This process is described in the [Design Properties Definitions](#design-properties-definitions) section below.
This guide outlines how design properties work and can help you create custom design properties. Many apps can simply use the Atlas UI theme and its included set of design properties to satisfy their styling needs. Atlas UI provides design properties that are built on top of the functionality described in this guide. So while design properties from Atlas UI are used as examples below, design properties themselves are not only for the Atlas UI theme. In fact, if you want to customize your styling more deeply, you will have to create your own custom design properties.
@@ -17,13 +24,13 @@ Design properties are a special set of settings shipped together with a Mendix t
In Studio Pro, you can see which design properties are available for a widget either in the **Properties** pane or in the widget's settings dialog box under the **Appearance** tab.
-## 2 Using Design Properties
+## Using Design Properties
While styling Mendix apps, users must often apply the same set of CSS or native styling classes to widgets on different pages again and again. This work is time consuming and vulnerable to human error as you edit text fields in order to apply classes to a widget.
Design properties can make this work easier and safer. By configuring your own custom design properties, a certain styling can be applied to a widget in a few clicks.
-## 3 Design Property Types
+## Design Property Types
There are two types of design properties: **Toggle** and **Dropdown**. By default design properties have no effect on widgets. Styling is only applied when a **Toggle** property is turned on for a widget, or when one of the options is selected for a **Dropdown** property.
@@ -31,7 +38,7 @@ A **Toggle** design property is a simple property which may be turned on for a w
A design property of type **Dropdown** defines a set of options with separate classes per option. When one of the options is selected, the respective classes are applied to a widget. For example, a **Dropdown** property may be an Atlas UI **Align self** property. It contains two options: **Left** and **Right**. When one of these options is selected, then either the `pull-left` or `pull-right` CSS class is applied.
-## 4 Design Properties Definitions {#design-properties-definitions}
+## Design Properties Definitions {#design-properties-definitions}
Design properties are defined on a module level in **JSON** format. They are located in the module specific *themesource* folders (for more information, see the [File and Folder Structure](/howto/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*). Since styling works differently for web and native platforms, each platform's design properties are different and defined in two separate folders. Web styling is defined in *web/design-properties.json* file. Native styling is defined in the *native/design-properties.json* file.
@@ -68,7 +75,7 @@ Here is a simplified example of a design properties file:
}
```
-### 4.1 Design Property Structure
+### Design Property Structure
Use this code to further simplify the above example:
@@ -131,7 +138,7 @@ This is how the **Dropdown** design property appears:
{{< figure src="/attachments/apidocs-mxsdk/apidocs/design-properties/dropdown.png" alt="Dropdown property in Studio Pro" max-width=80% >}}
-#### 4.1.1 Common Fields
+#### Common Fields
The examples above show that the fields `name` and `description` define the UI, the name of a form control in Studio Pro, and the description under it. They are arbitrary string values naming and describing a design property.
@@ -143,15 +150,15 @@ Name your design property and its options carefully. Those names cannot be chang
If you want to rename a design property which is already being used in an app, see the [Renaming Design Properties](#old-names) section below.
{{% /alert %}}
-#### 4.1.2 Toggle-Specific Fields
+#### Toggle-Specific Fields
When a type of design property is **Toggle** it should contain a `class` field on the top level of its property definition. This field defines an arbitrary class name to be applied if the option is toggled on for a widget. In the example above, the class to be applied is `hereMyClass`.
-#### 4.1.3 Dropdown-Specific Fields
+#### Dropdown-Specific Fields
When a type of design property is **Dropdown** it should contain an `options` field which is an array of possible options for the design property. Every option must be an object with `name` and `class` fields. In the example above there are two options named **Styling option 1** and **Styling option 2**. They have the `stylingClassOne` and `stylingClassTwo` classes respectively.
-### 4.2 Extending or Overriding Design Properties of Other Modules {#extend-existing-design-properties}
+### Extending or Overriding Design Properties of Other Modules {#extend-existing-design-properties}
Design properties can be extended or overridden in other modules. For example, you can add a custom drop-down option to an Atlas design property or override the applied CSS class of a toggle property.
@@ -169,7 +176,7 @@ If multiple modules have a definition of a **Dropdown** property with the same n
Note that having multiple definitions with different types (for example **Toggle** and **Dropdown**) is an invalid configuration and will result in a failure to load any design properties.
{{% /alert %}}
-## 5 Widget Types{#widget-types}
+## Widget Types{#widget-types}
When defining design properties in your *JSON* file, you must specify which widget your properties apply to, as some design properties may only work with certain widgets.
@@ -179,11 +186,11 @@ Having a property that applies a table appearance style like **Stripped**, **Bor
Widget types are types defined in the [Model SDK](https://apidocs.rnd.mendix.com/modelsdk/latest/modules/pages.html) documentation. Every type which is a direct or an indirect subtype of type [`Widget`](https://apidocs.rnd.mendix.com/modelsdk/latest/classes/pages.widget.html) can have design properties attached to it. If a property is defined on a widget, then every subtype of this widget will have that property. For example if a property is defined on a `Widget` type, which is it the highest type in the hierarchy, then every widget will have this design property available.
-### 5.1 Widget Types for Pluggable Widgets
+### Widget Types for Pluggable Widgets
When creating design properties for [Pluggable Widgets](/apidocs-mxsdk/apidocs/pluggable-widgets/), their widget type is determined by [widget id](/apidocs-mxsdk/apidocs/pluggable-widgets/#widget-id).
-## 6 Renaming Design Properties{#old-names}
+## Renaming Design Properties{#old-names}
Sometimes you must rename design properties or their options which are already in use. As design properties are identified by names internally, renaming one may be a breaking change for apps that are already using those design properties.
@@ -213,7 +220,7 @@ Example of a property and options that were renamed:
The design property above was renamed from **my Dropdown Propery** to **My Dropdown Property**. Also **Styling option two** was renamed twice from the old names **Stling option 2** and **Styling option 2**.
-### 6.1 Renaming a Dropdown Option to a Toggle Property
+### Renaming a Dropdown Option to a Toggle Property
{{% alert color="info" %}}
This feature was introduced in Mendix 9.
@@ -235,7 +242,7 @@ Here is an example of a **Toggle** property that was renamed from a **Dropdown**
The design property above is a replacement for the removed option **Styling option 3** of **My Dropdown Property** and will be set to **Yes** if that option was selected. The value of **My Dropdown Property** will then be set to empty if that design property still exists.
-## 7 Read More
+## Read More
* [Native Styling](/refguide/mobile/designing-mobile-user-interfaces/native-styling/)
* [Native Mobile Styling Reference Guide](/refguide/native-styling-refguide/)
diff --git a/content/en/docs/howto/front-end/atlas-ui/extend-design-properties.md b/content/en/docs/howto/front-end/atlas-ui/extend-design-properties.md
index c8071f8c2d4..3091c30f7de 100644
--- a/content/en/docs/howto/front-end/atlas-ui/extend-design-properties.md
+++ b/content/en/docs/howto/front-end/atlas-ui/extend-design-properties.md
@@ -14,6 +14,6 @@ Design properties are visible as part of the widget properties:
{{< figure src="/attachments/howto/front-end/atlas-ui/extend-design-properties/studio-pro-design-properties.png" alt="Design Properties in Studio Pro" width="350" class="no-border" >}}
-For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-11/).
Developers can also add additional design properties as part of a module. For more information, see the [File and Folder Structure](/howto/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*.
diff --git a/content/en/docs/howto/front-end/atlas-ui/module-level-theme-settings.md b/content/en/docs/howto/front-end/atlas-ui/module-level-theme-settings.md
index ac81f21ea15..b30ab7f1d04 100644
--- a/content/en/docs/howto/front-end/atlas-ui/module-level-theme-settings.md
+++ b/content/en/docs/howto/front-end/atlas-ui/module-level-theme-settings.md
@@ -67,7 +67,7 @@ Similar to layouts and page templates, excluding the [building blocks](/refguide
### Filtering Design Properties and Styling
-Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties/) or [CSS classes](/howto/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
+Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties-11/) or [CSS classes](/howto/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
```json
{
diff --git a/content/en/docs/howto10/front-end/atlas-ui/extend-design-properties.md b/content/en/docs/howto10/front-end/atlas-ui/extend-design-properties.md
index 27d1eb3d226..009dcea5993 100644
--- a/content/en/docs/howto10/front-end/atlas-ui/extend-design-properties.md
+++ b/content/en/docs/howto10/front-end/atlas-ui/extend-design-properties.md
@@ -14,6 +14,6 @@ Design properties are visible as part of the widget properties:
{{< figure src="/attachments/howto10/front-end/atlas-ui/extend-design-properties/studio-pro-design-properties.png" alt="Design Properties in Studio Pro" width="350" class="no-border" >}}
-For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-10/).
Developers can also add additional design properties as part of a module. For more information, see the [File and Folder Structure](/howto10/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*.
diff --git a/content/en/docs/howto10/front-end/atlas-ui/module-level-theme-settings.md b/content/en/docs/howto10/front-end/atlas-ui/module-level-theme-settings.md
index 17a4be182c3..cbf1cc8ffbc 100644
--- a/content/en/docs/howto10/front-end/atlas-ui/module-level-theme-settings.md
+++ b/content/en/docs/howto10/front-end/atlas-ui/module-level-theme-settings.md
@@ -67,7 +67,7 @@ Similar to layouts and page templates, excluding the [building blocks](/refguide
### Filtering Design Properties and Styling
-Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties/) or [CSS classes](/howto10/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
+Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties-10/) or [CSS classes](/howto10/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
```json
{
diff --git a/content/en/docs/howto9/front-end/atlas-ui/extend-design-properties.md b/content/en/docs/howto9/front-end/atlas-ui/extend-design-properties.md
index 37be73e7010..4313c12442d 100644
--- a/content/en/docs/howto9/front-end/atlas-ui/extend-design-properties.md
+++ b/content/en/docs/howto9/front-end/atlas-ui/extend-design-properties.md
@@ -14,6 +14,6 @@ Design properties are visible as part of the widget properties:
{{< figure src="/attachments/howto9/front-end/atlas-ui/extend-design-properties/studio-pro-design-properties.png" alt="Design Properties in Studio Pro" width="350" class="no-border" >}}
-For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+For more information on learning how to add design properties, see the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-9/).
Developers can also add additional design properties as part of a module. For more information, see the [File and Folder Structure](/howto9/front-end/customize-styling-new/#file-and-folder) section of *How to Customize Styling*.
diff --git a/content/en/docs/howto9/front-end/atlas-ui/module-level-theme-settings.md b/content/en/docs/howto9/front-end/atlas-ui/module-level-theme-settings.md
index bec49dccefa..392149ef5de 100644
--- a/content/en/docs/howto9/front-end/atlas-ui/module-level-theme-settings.md
+++ b/content/en/docs/howto9/front-end/atlas-ui/module-level-theme-settings.md
@@ -67,7 +67,7 @@ Similar to layouts and page templates, excluding the [building blocks](/refguide
### Filtering Design Properties and Styling
-Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties/) or [CSS classes](/howto9/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
+Filtering styling elements like [design properties](/apidocs-mxsdk/apidocs/design-properties-11/) or [CSS classes](/howto9/front-end/customize-styling-new/) is useful when you do not want your developers to apply them. Here is a small example:
```json
{
diff --git a/content/en/docs/refguide/installation/upgrading-from-10-to-11/atlas4-migration.md b/content/en/docs/refguide/installation/upgrading-from-10-to-11/atlas4-migration.md
index 273d63b673d..3e7d13c78a3 100644
--- a/content/en/docs/refguide/installation/upgrading-from-10-to-11/atlas4-migration.md
+++ b/content/en/docs/refguide/installation/upgrading-from-10-to-11/atlas4-migration.md
@@ -560,7 +560,7 @@ Always review regex replacements carefully before applying them. Complex SASS us
* [Atlas UI Kit for Figma](/howto/front-end/figma-ui-kit/)
* [Customize Styling](/howto/front-end/customize-styling-new/)
-* [Design Properties](/apidocs-mxsdk/apidocs/design-properties/)
+* [Design Properties](/apidocs-mxsdk/apidocs/design-properties-11/)
* [Atlas UI Reference App](https://atlasdesignsystem.mendixcloud.com/)
* [CSS Custom Properties - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
* [CSS color-mix() Function - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix)
diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/design-principles.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/design-principles.md
index 7d048b051f5..cd17c9723e1 100644
--- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/design-principles.md
+++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/design-principles.md
@@ -67,7 +67,7 @@ By default Mendix has a default set of design properties which enable developers
For example, Mendix offers a set of button variants (default, secondary, warning, success, and danger). However, during your design process you can choose to just have a default and a secondary variant. Choices like this are a part of UI design. It is up to people in UI and front-end design roles to determine how much freedom a Mendix developer should have.
-The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-11/).
#### Creating the App Layouts
diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
index 0557d01e247..5947fd458ec 100644
--- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
+++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
@@ -2645,4 +2645,4 @@ The default class to style all popup menus is named `com_mendix_widget_native_ca
## Read More
* [Native Styling](/refguide/mobile/designing-mobile-user-interfaces/native-styling/)
-* [Design Properties Documentation](/apidocs-mxsdk/apidocs/design-properties/)
+* [Design Properties Documentation](/apidocs-mxsdk/apidocs/design-properties-11/)
diff --git a/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/design-principles.md b/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/design-principles.md
index 594971ce2ea..b1e7ce6b27f 100644
--- a/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/design-principles.md
+++ b/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/design-principles.md
@@ -67,7 +67,7 @@ By default Mendix has a default set of design properties which enable developers
For example, Mendix offers a set of button variants (default, secondary, warning, success, and danger). However, during your design process you can choose to just have a default and a secondary variant. Choices like this are a part of UI design. It is up to people in UI and front-end design roles to determine how much freedom a Mendix developer should have.
-The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-10/).
#### Creating the App Layouts
diff --git a/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
index 036c0a7f2bc..5c5b35beeb2 100644
--- a/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
+++ b/content/en/docs/refguide10/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
@@ -2487,4 +2487,4 @@ The default class to style all gallery text filter widgets is named `com_mendix_
## Read More
* [Native Styling](/refguide10/mobile/designing-mobile-user-interfaces/native-styling/)
-* [Design Properties Documentation](/apidocs-mxsdk/apidocs/design-properties/)
+* [Design Properties Documentation](/apidocs-mxsdk/apidocs/design-properties-10/)
diff --git a/content/en/docs/refguide9/general/moving-from-8-to-9/moving-from-atlas-2-to-3/_index.md b/content/en/docs/refguide9/general/moving-from-8-to-9/moving-from-atlas-2-to-3/_index.md
index 318c10fabe1..cfbae1f5c92 100644
--- a/content/en/docs/refguide9/general/moving-from-8-to-9/moving-from-atlas-2-to-3/_index.md
+++ b/content/en/docs/refguide9/general/moving-from-8-to-9/moving-from-atlas-2-to-3/_index.md
@@ -429,7 +429,7 @@ As this is a custom-defined design property, this needs to be added to the web's
#### Merging Options for Design Properties
-Design property options can also be merged across themesource modules. For more information see the [Extending or Overriding Design Properties of Other Modules](/apidocs-mxsdk/apidocs/design-properties/#extend-existing-design-properties) section of the *Design Properties API Documentation*.
+Design property options can also be merged across themesource modules. For more information see the [Extending or Overriding Design Properties of Other Modules](/apidocs-mxsdk/apidocs/design-properties-9/#extend-existing-design-properties) section of the *Design Properties API Documentation*.
## Expected Issues After Upgrading to Atlas 3 {#expected-issues}
diff --git a/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/design-principles.md b/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/design-principles.md
index 68980e9fc07..02c4d02b74d 100644
--- a/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/design-principles.md
+++ b/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/design-principles.md
@@ -67,7 +67,7 @@ By default Mendix has a default set of design properties which enable developers
For example, Mendix offers a set of button variants (default, secondary, warning, success, and danger). However, during your design process you can choose to just have a default and a secondary variant. Choices like this are a part of UI design. It is up to people in UI and front-end design roles to determine how much freedom a Mendix developer should have.
-The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties/).
+The design properties are located in *theme/settings-native.json*, and more information be found in the [Design Properties API Documentation](/apidocs-mxsdk/apidocs/design-properties-9/).
#### Creating the App Layouts
diff --git a/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
index f5437fada5d..0f326d1e527 100644
--- a/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
+++ b/content/en/docs/refguide9/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md
@@ -2480,4 +2480,4 @@ The default class to style all gallery text filter widgets is named `com_mendix_
## Read More
* [Native Styling](/refguide9/mobile/designing-mobile-user-interfaces/native-styling/)
-* [Design Properties Documentation](/apidocs-mxsdk/apidocs/design-properties/)
+* [Design Properties Documentation](/apidocs-mxsdk/apidocs/design-properties-9/)
diff --git a/content/en/docs/releasenotes/studio-pro/10/10.6.md b/content/en/docs/releasenotes/studio-pro/10/10.6.md
index dd6f8f211e9..6af26e19ab2 100644
--- a/content/en/docs/releasenotes/studio-pro/10/10.6.md
+++ b/content/en/docs/releasenotes/studio-pro/10/10.6.md
@@ -1035,7 +1035,7 @@ This release introduces the following new ways to interact with styling:
To access these changes, update the [Atlas Core](/appstore/modules/atlas-core/) Marketplace module, where the new design properties have been included.
-To learn more, see [How to Extend Design Properties](/howto10/front-end/extend-design-properties/) and the [Design Properties API](/apidocs-mxsdk/apidocs/design-properties/).
+To learn more, see [How to Extend Design Properties](/howto10/front-end/extend-design-properties/) and the [Design Properties API](/apidocs-mxsdk/apidocs/design-properties-10/).
#### External Database Connector
diff --git a/content/en/docs/releasenotes/studio-pro/10/10.8.md b/content/en/docs/releasenotes/studio-pro/10/10.8.md
index 97185830a2b..befc808483d 100644
--- a/content/en/docs/releasenotes/studio-pro/10/10.8.md
+++ b/content/en/docs/releasenotes/studio-pro/10/10.8.md
@@ -71,7 +71,7 @@ Note that new apps are currently still configured to target Java 11.
* We added the custom Runtime setting `com.mendix.storage.s3.ResourceNamePrefix`, which value will be prepended to the key when retrieving or storing files from and to Amazon S3.
* We improved automatic parameter mapping for the **Call Microflow**, **Call Nanoflow**, and **Show Page** microflow actions. This now also works when dragging these actions from the **Toolbox** or when dragging a nanoflow, microflow, or page from the app explorer into the microflow editor.
* We now directly add a default output variable to the **Create variable** activity in the logic editors.
-* We added the ability to navigate through [styling properties](/apidocs-mxsdk/apidocs/design-properties/) by using keyboard shortcuts, such as Tab and the arrow keys.
+* We added the ability to navigate through [styling properties](/apidocs-mxsdk/apidocs/design-properties-10/) by using keyboard shortcuts, such as Tab and the arrow keys.
* We made importing widget modules more resilient by skipping the import of widgets that were referenced from the *package.xml* but had been previously deleted from the MPK.
* We now throw a warning instead of an error for page templates that contain unsupported widgets when using the React client.
* We added support for the React client using the macOS version of Studio Pro.
diff --git a/content/en/docs/releasenotes/studio-pro/11/11.0.md b/content/en/docs/releasenotes/studio-pro/11/11.0.md
index 4e8e7109a6f..1ba650911d1 100644
--- a/content/en/docs/releasenotes/studio-pro/11/11.0.md
+++ b/content/en/docs/releasenotes/studio-pro/11/11.0.md
@@ -93,7 +93,7 @@ For details on upgrading to Studio Pro 11, see [Upgrading from Mendix Studio Pro
* We improved the layout of the **OpenAPI Documentation** pane. It now features a more compact layout, making it easier to view all the operations your service will publish.
* The OpenAPI document of published OData services now uses OpenAPI version 3.0.4 where it used to use OpenAPI version 3.0.1.
* Maia for pages now works with existing pages. It understands your page’s content, so you can easily ask it to add, change, or remove widgets as needed.
-* We introduced `category` to the [design properties](/apidocs-mxsdk/apidocs/design-properties/#common-fields), which allows users to optionally group their design properties within the styling pane.
+* We introduced `category` to the [design properties](/apidocs-mxsdk/apidocs/design-properties-11/#common-fields), which allows users to optionally group their design properties within the styling pane.
* We have upgraded our Micrometer Prometheus registry dependency.
* We added the `com.mendix.core.conf.LicenseInfo#validateCustomerID(String)` method to the public API. This method can be used to check if a customer identity matches the one in the license of the running application. The `LicenseInfo` instance is available through `Core.getLicenseInformation()`.
* We added the option to add [extra arguments](/refguide/preferences-dialog/#extra-arguments) to the Gradle process in the Studio Pro **Preferences**.
diff --git a/content/en/docs/releasenotes/studio-pro/9/9.4.md b/content/en/docs/releasenotes/studio-pro/9/9.4.md
index 7cd09532a0d..18d592c10f3 100644
--- a/content/en/docs/releasenotes/studio-pro/9/9.4.md
+++ b/content/en/docs/releasenotes/studio-pro/9/9.4.md
@@ -26,7 +26,7 @@ weight: 96
* The date range search field of a data grid now allows the upper and lower bounds to be inclusive. (Ticket 119173)
* We redesigned the user profile menu on the left side of the top bar so that it now displays the user's custom avatar. It also displays the user's full name, email, and useful links when clicked. The link to the **Developer Portal** has found a new home in the **Switch to** menu as **Community**.
-* With Atlas 3, we enabled [design properties](/apidocs-mxsdk/apidocs/design-properties/#design-properties-definitions) to be defined in modules. We now also support multiple modules that define options for the same design property (this previously showed a consistency error). The options will be combined into one list, in descending order of the UI module precedence. Please note that when duplicate options or toggle definitions exist, the one from the module with the highest precedence will overwrite the others.
+* With Atlas 3, we enabled [design properties](/apidocs-mxsdk/apidocs/design-properties-9/#design-properties-definitions) to be defined in modules. We now also support multiple modules that define options for the same design property (this previously showed a consistency error). The options will be combined into one list, in descending order of the UI module precedence. Please note that when duplicate options or toggle definitions exist, the one from the module with the highest precedence will overwrite the others.
* We improved the behavior of pluggable widget properties that are linked to a [datasource](/apidocs-mxsdk/apidocs/pluggable-widgets-property-types/#datasource) property that is not required. Any such linked properties are now automatically hidden and omitted from the props passed to the widget component if the `datasource` property has not been configured. If the linked property is marked as required, it is only necessary to configure it if the `datasource` property has been configured. This is also reflected in the typings generated by the pluggable widget tools starting in this version. For more information, see the [Breaking Changes](#breaking) section below.
* We improved the speed of the **themesource** compilation feature added in Studio Pro [9.0](/releasenotes/studio-pro/9.0/#new-themesource-folder). However, this comes with a [breaking change](#themesource) for **themesource** resource files.
* We improved the reloading of styling in the client when editing the **themesource** SCSS files. The styling is now replaced directly in the browser, instead of reloading the page.