From 99d7671a5a6bcf8dcd3e7d2079bd790b00e0a00f Mon Sep 17 00:00:00 2001
From: SergejLust <lust@radikant.com>
Date: Tue, 7 May 2024 12:10:35 +0200
Subject: [PATCH] -changed text and image sizes in foundation pages

---
 .../src/stories/foundations/BorderRadius.mdx  | 12 ++--
 .../src/stories/foundations/Color.mdx         | 56 ++++++---------
 .../src/stories/foundations/Grid.mdx          |  4 +-
 .../src/stories/foundations/Iconography.mdx   | 33 ++++-----
 .../src/stories/foundations/Logo.mdx          |  6 +-
 .../src/stories/foundations/Spacing.mdx       | 68 ++++++++-----------
 .../src/stories/foundations/Typography.mdx    | 42 +++++-------
 7 files changed, 93 insertions(+), 128 deletions(-)

diff --git a/packages/components/src/stories/foundations/BorderRadius.mdx b/packages/components/src/stories/foundations/BorderRadius.mdx
index 259aca303f..5e9dde693e 100644
--- a/packages/components/src/stories/foundations/BorderRadius.mdx
+++ b/packages/components/src/stories/foundations/BorderRadius.mdx
@@ -6,21 +6,19 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="Foundations/Border radius" />
 
 # Border radius 
-A fundamental aspect of our visual design. 
-It refers to the curvature applied to the corners of elements, such as buttons, cards, or containers. 
-It shapes the overall aesthetic and feel of our interfaces, influencing user perception and interaction.  
+A fundamental aspect of our visual design. It refers to the curvature applied to the corners of elements, such as buttons, cards, or containers. It shapes the overall aesthetic and feel of our interfaces, influencing user perception and interaction.  
 
 ## 1px Border radius 
-<img src={BorderRadius1px} alt="BorderRadius1px" /> 
+<img src={BorderRadius1px} alt="BorderRadius1px" width="50%"/> 
 We use a 1px border radius for all rectangular objects in our design system.
 This includes buttons, text inputs, checkboxes, radio buttons, and other rectangular elements. 
 A 1px border radius creates a slight curve at the corners of these elements, which softens their appearance and helps creating a more friendly and approachable design. 
 
-<img src={BorderRadius1px} alt="Border Radius 1px" />   
+<img src={BorderRadius1px} alt="Border Radius 1px" width="50%"/>   
 
 ## 9999px Border radius 
-<img src={BorderRadius9999px} alt="BorderRadius9999px" /> 
+<img src={BorderRadius9999px} alt="BorderRadius9999px" width="50%"/> 
 
 In addition to the 1px border radius, we use a 9999px border radius for certain components in our design system. 
 These components include chips, tags, toggles, and filter components. 
-This style creates a pill shape for these elements, which helps distinguish them from other rectangular elements on the page and makes them more visually appealing. 
+This style creates a pill shape for these elements, which helps distinguish them from other rectangular elements on the page and makes them more visually appealing. 
\ No newline at end of file
diff --git a/packages/components/src/stories/foundations/Color.mdx b/packages/components/src/stories/foundations/Color.mdx
index ac78d5cb43..b6829bc640 100644
--- a/packages/components/src/stories/foundations/Color.mdx
+++ b/packages/components/src/stories/foundations/Color.mdx
@@ -44,97 +44,81 @@ We use the concept of tokens to apply color in a consistent, reusable, and scala
 
 | token | hex | example | 
 |---------------------------------------|---------------|-----------------------------------------------------------| 
-| <code>$ifxColorBaseBlack</code>       | #1D1D1D       | <img src={ColorBaseBlack} alt="Base Black" width="50%" />             | 
+| <code>$ifxColorBaseBlack</code> | #1D1D1D | <img src={ColorBaseBlack} alt="Base Black" width="50%" /> | 
 | <code>$ifxColorBaseWhite</code> | #FFFFFF | <img src={ColorBaseWhite} alt="Base White" width="50%" /> | 
-| <code>$ifxColorBaseTransparent</code> | transparent   | <img src={ColorBaseTransparent} alt="Base Transparent" width="50%" /> | 
+| <code>$ifxColorBaseTransparent</code> | transparent | <img src={ColorBaseTransparent} alt="Base Transparent" width="50%" /> | 
 | <code>$ifxColorEngineering100</code> | #F7F7F7 | <img src={ColorEngineering100} alt="Engineering 100" width="50%" /> | 
-| <code>$ifxColorEngineering200</code>  | #EEEDED       | <img src={ColorEngineering200} alt="Engineering 200" width="50%" /> | 
+| <code>$ifxColorEngineering200</code>  | #EEEDED | <img src={ColorEngineering200} alt="Engineering 200" width="50%" /> | 
 | <code>$ifxColorEngineering300</code> | #BFBBBB | <img src={ColorEngineering300} alt="Engineering 300" width="50%" /> | 
-| <code>$ifxColorEngineering400</code>  | #8D8786       | <img src={ColorEngineering400} alt="Engineering 400" width="50%" /> | 
+| <code>$ifxColorEngineering400</code>  | #8D8786 | <img src={ColorEngineering400} alt="Engineering 400" width="50%" /> | 
 | <code>$ifxColorEngineering500</code> | #575352 | <img src={ColorEngineering500} alt="Engineering 500" width="50%" /> | 
-| <code>$ifxColorEngineering600</code>  | #3C3A39       | <img src={ColorEngineering600} alt="Engineering 600" width="50%" /> | 
+| <code>$ifxColorEngineering600</code>  | #3C3A39 | <img src={ColorEngineering600} alt="Engineering 600" width="50%" /> | 
 | <code>$ifxColorOcean100</code> | #0A8276 | <img src={ColorOcean100} alt="Ocean 100" width="50%" /> | 
-| <code>$ifxColorOcean200</code>        | #B8DEDA       | <img src={ColorOcean200} alt="Ocean 200" width="50%" /> | 
+| <code>$ifxColorOcean200</code> | #B8DEDA | <img src={ColorOcean200} alt="Ocean 200" width="50%" /> | 
 | <code>$ifxColorOcean300</code> | #6CB4AD | <img src={ColorOcean300} alt="Ocean 300" width="50%" /> | 
-| <code>$ifxColorOcean400</code>        | #3B9B91       | <img src={ColorOcean400} alt="Ocean 400" width="50%" /> | 
+| <code>$ifxColorOcean400</code> | #3B9B91 | <img src={ColorOcean400} alt="Ocean 400" width="50%" /> | 
 | <code>$ifxColorOcean500</code> | #0A8276 | <img src={ColorOcean500} alt="Ocean 500" width="50%" /> | 
-| <code>$ifxColorOcean600</code>        | #08665C       | <img src={ColorOcean600} alt="Ocean 600" width="50%" /> | 
-| <code>$ifxColorOcean700</code> | #06534B | <img src={ColorOcean700} alt="Ocean 700" width="50%" /> | | <code>$ifxColorRed500</code>          | #CD002F       | <img src={ColorRed500} alt="Red 500" width="50%" /> | 
+| <code>$ifxColorOcean600</code> | #08665C | <img src={ColorOcean600} alt="Ocean 600" width="50%" /> | 
+| <code>$ifxColorOcean700</code> | #06534B | <img src={ColorOcean700} alt="Ocean 700" width="50%" /> | 
+| <code>$ifxColorRed500</code> | #CD002F | <img src={ColorRed500} alt="Red 500" width="50%" /> | 
 | <code>$ifxColorRed600</code> | #BF0023 | <img src={ColorRed600} alt="Red 600" width="50%" /> |
-| <code>$ifxColorRed700</code>          | #900021       | <img src={ColorRed700} alt="Red 700" width="50%" /> | 
+| <code>$ifxColorRed700</code> | #900021 | <img src={ColorRed700} alt="Red 700" width="50%" /> | 
 | <code>$ifxColorOrange500</code> | #E16B25 | <img src={ColorOrange500} alt="Orange 500" width="50%" /> | 
-| <code>$ifxColorGreen500</code>        | #4CA460       | <img src={ColorGreen500} alt="Green 500" width="50%" /> | 
+| <code>$ifxColorGreen500</code> | #4CA460 | <img src={ColorGreen500} alt="Green 500" width="50%" /> | 
 | <code>$ifxColorLawn400</code> | #B9D257 | <img src={ColorLawn400} alt="Lawn 400" width="50%" /> | 
-| <code>$ifxColorLawn500</code>         | #9BBA43       | <img src={ColorLawn500} alt="Lawn 500" width="50%" /> | 
+| <code>$ifxColorLawn500</code> | #9BBA43 | <img src={ColorLawn500} alt="Lawn 500" width="50%" /> | 
 | <code>$ifxColorLawn700</code> | #3C6C0F | <img src={ColorLawn700} alt="Lawn 700" width="50%" /> | 
-| <code>$ifxColorBerry400</code>        | #BE3283       | <img src={ColorBerry400} alt="Berry 400" width="50%" /> | 
+| <code>$ifxColorBerry400</code> | #BE3283 | <img src={ColorBerry400} alt="Berry 400" width="50%" /> | 
 | <code>$ifxColorBerry500</code> | #9C216E | <img src={ColorBerry500} alt="Berry 500" width="50%" /> | 
-| <code>$ifxColorSun400</code>          | #FF9737       | <img src={ColorSun400} alt="Sun 400" width="50%" /> | 
+| <code>$ifxColorSun400</code> | #FF9737 | <img src={ColorSun400} alt="Sun 400" width="50%" /> | 
 | <code>$ifxColorSun500</code> | #F97414 | <img src={ColorSun500} alt="Sun 500" width="50%" /> | 
-| <code>$ifxColorSand400</code>         | #FBE273       | <img src={ColorSand400} alt="Sand 400" width="50%" /> | 
+| <code>$ifxColorSand400</code> | #FBE273 | <img src={ColorSand400} alt="Sand 400" width="50%" /> | 
 | <code>$ifxColorSand500</code> | #FCD442 | <img src={ColorSand500} alt="Sand 500" width="50%" /> | 
-| <code>$ifxColorOverlayDark</code>     | #1D1D1D (20%) | <img src={ColorOverlayDark} alt="Overlay Dark" width="50%" /> | 
+| <code>$ifxColorOverlayDark</code> | #1D1D1D (20%) | <img src={ColorOverlayDark} alt="Overlay Dark" width="50%" /> | 
 | <code>$ifxColorOverlayLight</code> | #FFFFFF (20%) | <img src={ColorOverlayLight} alt="Overlay Light" width="50%" /> |
 
 ## Using tokens
 
 ### Background colors
-
 Our overall look should be light and bright. To achieve that we use:
 
 `$ifxColorBaseWhite`: This is our main background color.
-
 `$ifxColorEngineering-100`: If it is necessary to apply more section-structure. Especially for dashboard designs.
-
 `$ifxColorOcean-500`: This option is only recommended for marketing websites by highlighting messages/sections.
 
 ### Typography 
-
 - For default text we use `$ifxColorBaseBlack` as main color. On brand or dark colored backgrounds we recommend to use `$ifxColorBaseWhite`. 
-
 - For headlines you can use either `$ifxColorBaseBlack` or `$ifxColorOcean500`. For the homepage in the hero section we recommend to use `$ifxColorOcean500` as title/h1. 
-
 - For interactive texts like inline-links use `$ifxColorOcean500`.
 
 ### Components 
-
 We use a set of engineering color variations to build the core fibres of many layouts and components. This core fibres can be: 
 
 - An engineering outline to shape the form of a toggle, text field etc. 
-
 - An engineering divider structuring content 
-
 - Engineering backgrounds/borders for tables, rows and columns
 
 ### Interactions 
-
 We use our brand colors to highlight interactive elements and their interaction states. 
 
 `$ifxColorOcean500`: Default state 
-
 `$ifxColorOcean600`: Hover state 
-
 `$ifxColorOcean700`: Pressed state 
-
 `$ifxColorEngineering300`: Disabled state 
 
 ### Signal information 
-
 As in many user interfaces we also use signal colors to convey information quickly and effectively to the user.  
 
 `$ifxColorGreen500`: Used to indicate a successful action. 
-
 `$ifxColorOrange500`: To indicate a warning message. 
-
 `$ifxColorRed500`: To indicate an error message. The two shades `$ifxColorRed600` and `$ifxColorRed700` are used for destructive button states. 
 
 ### Interactive infographics 
-
-Sometimes it needs more colors to visualize complex infographics for example on dashboard user interfaces. In these cases we recommend to use these colors: 
-
+Sometimes it needs more colors to visualize complex infographics for example on dashboard user interfaces. In these cases we recommend to use these colors:
 `$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` `$ifxColorBerry400`, `$ifxColorBerry500` `$ifxColorLawn400`, `$ifxColorLawn500`, `$ifxColorLawn600` `$ifxColorSun400`, `$ifxColorSun500` `$ifxColorSand400`, `$ifxColorSand500` 
 
-Preferred color should be `$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` for example for a 4-clustered pie chart. It is important to note that these colors are not intended for use in user interface components such as buttons, text, and background colors. 
+Preferred color should be:
+`$ifxColorOcean100`, `$ifxColorOcean200`, `$ifxColorOcean300`, `$ifxColorOcean400` for example for a 4-clustered pie chart. It is important to note that these colors are not intended for use in user interface components such as buttons, text, and background colors. 
 
 ## Accessibility 
 
diff --git a/packages/components/src/stories/foundations/Grid.mdx b/packages/components/src/stories/foundations/Grid.mdx
index 8a85dee39a..be07344c74 100644
--- a/packages/components/src/stories/foundations/Grid.mdx
+++ b/packages/components/src/stories/foundations/Grid.mdx
@@ -53,4 +53,6 @@ The Full-Width Grid is designed for content that spans the full width of the scr
 | m    | 1024 px    | 1024 px               | none                | 12      | 16 px   | 
 | l    | 1200 px    | 1200 px               | none                | 12      | 24 px   |   
 
-*** Check out the Figma Grid templates: **[Grid](https://www.figma.com/file/ndenZq9IIVHmCjTWS0MUGi/%23NewWeb---Components-%26-Modules?type=design&node-id=16-316&mode=design)** ***
\ No newline at end of file
+***
+Check out the Figma Grid templates: **[Grid](https://www.figma.com/file/ndenZq9IIVHmCjTWS0MUGi/%23NewWeb---Components-%26-Modules?type=design&node-id=16-316&mode=design)**
+***
\ No newline at end of file
diff --git a/packages/components/src/stories/foundations/Iconography.mdx b/packages/components/src/stories/foundations/Iconography.mdx
index 24d242e6f9..27022555be 100644
--- a/packages/components/src/stories/foundations/Iconography.mdx
+++ b/packages/components/src/stories/foundations/Iconography.mdx
@@ -14,30 +14,28 @@ import { Meta } from '@storybook/addon-docs';
 <Meta title="Foundations/Iconography" />
 
 # Iconography 
-Icons play a crucial role in our design system, providing visual representation and enhancing user experiences. 
-We primarily utilize the Nucleo icon library for our icons, ensuring consistency and a wide range of options.  
+Icons play a crucial role in our design system, providing visual representation and enhancing user experiences. We primarily utilize the Nucleo icon library for our icons, ensuring consistency and a wide range of options.  
 
 
 ## Usage  
  
 ### When to use 
- 
 - Icons can be used alongside text to aid navigation and improve usability. They can represent different sections, categories, or actions, making it easier for users to identify and interact with them. 
-- If you want to communicate actions, such as saving, deleting, editing, or sharing. 
-By utilizing recognizable icons, users can quickly understand the purpose or functionality associated with a specific action.  
+- If you want to communicate actions, such as saving, deleting, editing, or sharing. By utilizing recognizable icons, users can quickly understand the purpose or functionality associated with a specific action.  
 
 ### When not to use 
 - If an icon's meaning is unclear or open to interpretation, it is best to use descriptive text instead. Clarity and understanding should always take precedence over aesthetic considerations. 
 - Avoid overcrowding interfaces with too many icons, as this can lead to visual clutter and confusion. Strive for a balanced composition that maintains a clean and intuitive design.  
 
-## Size 
-To ensure consistency and alignment, we utilize a 4px grid size for our icons. 
-This grid aligns with the overall design system and facilitates seamless integration into our interfaces. We have established four fixed icon sizes: 12×12px, 16×16px, and 24×24px. 
-Choose the appropriate size based on the context and surrounding elements. > Icons within our DDS components come with the right icon size out of the box!  
+## Size
+To ensure consistency and alignment, we utilize a 4px grid size for our icons. This grid aligns with the overall design system and facilitates seamless integration into our interfaces. We have established four fixed icon sizes: 12×12px, 16×16px, and 24×24px. 
+Choose the appropriate size based on the context and surrounding elements.
+> Icons within our DDS components come with the right icon size out of the box!  
 
 <img src={IconSizes} alt="Icon Sizes" />  
 
-## Structure All our icon sizes include the icon itself and the surrounding area. 
+## Structure
+All our icon sizes include the icon itself and the surrounding area. 
 
 <img src={IconStructure} alt="Icon Structure" width="50%"/> 
 
@@ -51,7 +49,7 @@ The DDS provides two different kinds of icons: outlined and filled.
  
 ### Size alignment 
 Try to pair specific typographic styles with corresponding icon sizes. 
-The body-03 and body-04 typographic style is well-suited for 16px icons, while larger typography, such as the heading-04, works best with 24px icons. 
+The `$ifxBodyBody03` and `$ifxBodyBody04` typographic style is well-suited for 16px icons, while larger typography, such as the `$ifxHeadingHeading04`, works best with 24px icons. 
  
 <img src={IconSizeAlignment} alt="Icon Size Alignment" width="50%" />  
  
@@ -68,17 +66,20 @@ Icons should be aligned with the text color they accompany. Ensure that icons ad
 ## Color  
  
 ### Dark font color 
-The black font color is the default color for icons. We use this color in most cases on `base-white` or `Cengineering-100` backgrounds. 
+The `$ifxColorBaseBlack` font color is the default color for icons. We use this color in most cases on `$ifxColorBaseWhite` or `$ifxColorEngineering100` backgrounds. 
  
 <img src={IconTextColorDark} alt="Icon Text Color Dark" width="50%" />  
  
 ### White font color 
-We use the `base-white` color on dark backgrounds. 
+We use the `$ifxColorBaseWhite` color on dark backgrounds. 
  
 <img src={IconTextColorWhite} alt="Icon Text Color White" width="50%" />  
  
 ### Brand font color
-We use our brand color `ocean-500` to highlight the content or actions connected with the icon. Use it on white or `engineering-100` backgrounds. 
+We use our brand color `$ifxColorOcean500` to highlight the content or actions connected with the icon. Use it on white or `$ifxColorEngineering100` backgrounds. 
   
-<img src={IconTextColorBrand} alt="Icon Text Color Brand" width="50%" />   
-*** Check out the Figma Icon Library: **[Icon Library](https://www.figma.com/file/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-Icons?type=design&node-id=6%3A6&mode=design&t=Zc0icFhkq4Jv0xSn-1)** ***
\ No newline at end of file
+<img src={IconTextColorBrand} alt="Icon Text Color Brand" width="50%" />
+
+***
+Check out the Figma Icon Library: **[Icon Library](https://www.figma.com/file/yWwaLoqsWLWygDxXfvdym9/Infineon-DDS-%7C-Icons?type=design&node-id=6%3A6&mode=design&t=Zc0icFhkq4Jv0xSn-1)**
+***
\ No newline at end of file
diff --git a/packages/components/src/stories/foundations/Logo.mdx b/packages/components/src/stories/foundations/Logo.mdx
index 1c524105a8..ae574f72b8 100644
--- a/packages/components/src/stories/foundations/Logo.mdx
+++ b/packages/components/src/stories/foundations/Logo.mdx
@@ -10,7 +10,6 @@ The Logo serves as a visual representation of our brand identity. It is availabl
 ## Variants  
 
 ### International
-
 Our default logo variant.  
 <img src={LogoDefault} alt="Logo Default"/> 
 
@@ -19,4 +18,7 @@ The logo variant has two versions: portrait and landscape.
 These versions are specifically designed to suit different layouts and orientations while maintaining consistency and clarity.  
 
 <img src={LogoChinese} alt="Logo Chinese"/>   
-*** Check out the Figma component: **[Logo](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=134-0&mode=design)** ***
\ No newline at end of file
+
+***
+Check out the Figma component: **[Logo](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=134-0&mode=design)**
+***
\ No newline at end of file
diff --git a/packages/components/src/stories/foundations/Spacing.mdx b/packages/components/src/stories/foundations/Spacing.mdx
index 28bc06b4a3..a0b9d6e288 100644
--- a/packages/components/src/stories/foundations/Spacing.mdx
+++ b/packages/components/src/stories/foundations/Spacing.mdx
@@ -36,49 +36,37 @@ Each spacing element is defined as a token, which is a pre-determined value that
 
 | token | rem | px | example | 
 |-------|-----|----|---------| 
-| #12 | 0.0625 | 1 | <img src={Space12} alt="Spacing 1px" width="50%" /> | 
-| #25 | 0.125 | 2 | <img src={Space25} alt="Spacing 2px" width="50%" /> | 
-| #50 | 0.25 | 4 | <img src={Space50} alt="Spacing 4px" width="50%" /> | 
-| #100 |0.5 | 8 | <img src={Space100} alt="Spacing 8px" width="50%" /> | 
-| #150 | 0.75 | 12 | <img src={Space150} alt="Spacing 12px" width="50%" /> | 
-| #200 | 1 | 16 | <img src={Space200} alt="Spacing 16px" width="50%" /> | 
-| #250 | 1.25 | 20 | <img src={Space250} alt="Spacing 20px" width="50%" /> | 
-| #300 | 1.5 | 24 | <img src={Space300} alt="Spacing 24px" width="50%" /> | 
-| #400 | 2 | 32 | <img src={Space400} alt="Spacing 32px" width="50%" /> | 
-| #500 | 2.5 | 40 | <img src={Space500} alt="Spacing 40px" width="50%" /> | 
-| #600 | 3 | 48 | <img src={Space600} alt="Spacing 48px" width="50%" /> | 
-| #700 | 3,5 | 56 | <img src={Space700} alt="Spacing 56px" width="50%" /> | 
-| #800 | 4 | 64 | <img src={Space800} alt="Spacing 64px" width="50%" /> | 
-| #900 | 4,5 | 72 | <img src={Space900} alt="Spacing 72px" width="50%" /> | 
-| #1000 | 5 | 80 | <img src={Space1000} alt="Spacing 80px" width="50%" /> | 
-| #1100 | 5.5 | 88 | <img src={Space1100} alt="Spacing 88px" width="50%" /> | 
-| #1200 | 6 | 96 | <img src={Space1200} alt="Spacing 96px" width="50%" /> | 
-| #1300 | 6,5 | 104 | <img src={Space1300} alt="Spacing 104px" width="50%" /> | 
-| #1400 | 7 | 112 | <img src={Space1400} alt="Spacing 112px" width="50%" /> | 
-| #1500 | 7,5 | 120 | <img src={Space1500} alt="Spacing 120px" width="50%" /> | 
-| #1600 | 8 | 128 | <img src={Space1600} alt="Spacing 128px" width="50%" /> | 
-| #2000 | 10 | 160 | <img src={Space2000} alt="Spacing 160px" width="50%" /> | 
-| #2500 | 12.5 | 200 | <img src={Space2500} alt="Spacing 200px" width="50%" /> |
+| $ifxSpace12 | 0.0625 | 1 | <img src={Space12} alt="Spacing 1px" width="50%" /> | 
+| $ifxSpace25 | 0.125 | 2 | <img src={Space25} alt="Spacing 2px" width="50%" /> | 
+| $ifxSpace50 | 0.25 | 4 | <img src={Space50} alt="Spacing 4px" width="50%" /> | 
+| $ifxSpace100 |0.5 | 8 | <img src={Space100} alt="Spacing 8px" width="50%" /> | 
+| $ifxSpace150 | 0.75 | 12 | <img src={Space150} alt="Spacing 12px" width="50%" /> | 
+| $ifxSpace200 | 1 | 16 | <img src={Space200} alt="Spacing 16px" width="50%" /> | 
+| $ifxSpace250 | 1.25 | 20 | <img src={Space250} alt="Spacing 20px" width="50%" /> | 
+| $ifxSpace300 | 1.5 | 24 | <img src={Space300} alt="Spacing 24px" width="50%" /> | 
+| $ifxSpace400 | 2 | 32 | <img src={Space400} alt="Spacing 32px" width="50%" /> | 
+| $ifxSpace500 | 2.5 | 40 | <img src={Space500} alt="Spacing 40px" width="50%" /> | 
+| $ifxSpace600 | 3 | 48 | <img src={Space600} alt="Spacing 48px" width="50%" /> | 
+| $ifxSpace700 | 3,5 | 56 | <img src={Space700} alt="Spacing 56px" width="50%" /> | 
+| $ifxSpace800 | 4 | 64 | <img src={Space800} alt="Spacing 64px" width="50%" /> | 
+| $ifxSpace900 | 4.5 | 72 | <img src={Space900} alt="Spacing 72px" width="50%" /> | 
+| $ifxSpace1000 | 5 | 80 | <img src={Space1000} alt="Spacing 80px" width="50%" /> | 
+| $ifxSpace1100 | 5.5 | 88 | <img src={Space1100} alt="Spacing 88px" width="50%" /> | 
+| $ifxSpace1200 | 6 | 96 | <img src={Space1200} alt="Spacing 96px" width="50%" /> | 
+| $ifxSpace1300 | 6.5 | 104 | <img src={Space1300} alt="Spacing 104px" width="50%" /> | 
+| $ifxSpace1400 | 7 | 112 | <img src={Space1400} alt="Spacing 112px" width="50%" /> | 
+| $ifxSpace1500 | 7.5 | 120 | <img src={Space1500} alt="Spacing 120px" width="50%" /> | 
+| $ifxSpace1600 | 8 | 128 | <img src={Space1600} alt="Spacing 128px" width="50%" /> | 
+| $ifxSpace2000 | 10 | 160 | <img src={Space2000} alt="Spacing 160px" width="50%" /> | 
+| $ifxSpace2500 | 12.5 | 200 | <img src={Space2500} alt="Spacing 200px" width="50%" /> |
 
 ### Usage 
+When designing layouts, use these spacing tokens to ensure that spacing is consistent across different elements (e.g. paddings, margins, distance). It is recommended to balance the right amount of spacing according to the clear and minimalistic approach of our design principles. Too large distances can result in wasted space and a layout that looks too spread out while too small distances can result in cramped and cluttered layouts. 
 
-When designing layouts, use these spacing tokens to ensure that spacing is consistent across different elements (e.g. paddings, margins, distance).    
-
-It is recommended to balance the right amount of spacing according to the clear and minimalistic approach of our design principles.  
-
-Too large distances can result in wasted space and a layout that looks too spread out while too small distances can result in cramped and cluttered layouts. 
-
-##  Using space  
-
-### Working with Whitespace 
+## Using space  
 
+### Working with whitespace 
 Whitespace is an essential aspect of good design, and spacing is a key component of whitespace. The effective use of spacing creates a sense of balance and harmony in our designs. 
 
-### Creating Relationships
-
-Spacing plays an important role in creating relationships between different elements in our designs.   
-
-When designing layouts, consider the spacing between elements as an opportunity to create visual relationships. For example, if you want to **group related elements** together, consider reducing the spacing between them.   
-
-Conversely, if you want to create a clear **distinction between elements**, consider increasing the spacing between them.
-
+### Creating relationships
+Spacing plays an important role in creating relationships between different elements in our designs. When designing layouts, consider the spacing between elements as an opportunity to create visual relationships. For example, if you want to **group related elements** together, consider reducing the spacing between them. Conversely, if you want to create a clear **distinction between elements**, consider increasing the spacing between them.
\ No newline at end of file
diff --git a/packages/components/src/stories/foundations/Typography.mdx b/packages/components/src/stories/foundations/Typography.mdx
index 5f2843c71a..1516924e38 100644
--- a/packages/components/src/stories/foundations/Typography.mdx
+++ b/packages/components/src/stories/foundations/Typography.mdx
@@ -6,33 +6,31 @@ import TypographyFontWeightOverview from '../../../public-storybook/images/typog
 
 # Typography
 
-We use our corporate font Source Sans 3 for all interfaces, that are build with the Infineon Digital Design System. Every instance of text should use a type style defined in this component.
+We use our corporate font `Source Sans 3` for all interfaces, that are build with the Infineon Digital Design System. Every instance of text should use a type style defined in this component.
 
 ## Type scale and use
 
-Set the **font-size to 100%** in the HTML Tag before applying the REM values. By doing so, we can ensure that users have always an optimal view by changing the default font-size in their browsers.
+> Set the **font-size to 100%** in the HTML Tag before applying the REM values. By doing so, we can ensure that users have always an optimal view by changing the default font-size in their browsers.
 
 ### Display
 
-Displays are the first headline of the website usually placed on a header image.
+The `display` style is the first headline of the website usually placed on a header image.
 
 ### Heading
 
-Headings are above a paragraph, topic section or picture. The text hierarchy should always be considered. Headings should always be clearly distinguishable from the paragraph. Headings should also be distributed across the page in a logical order and according to priority. To support many viewports all headings are available in large and small style.
+The `heading` style is placed above a paragraph, topic section or picture. The text hierarchy should always be considered. Headings should always be clearly distinguishable from the paragraph. Headings should also be distributed across the page in a logical order and according to priority.
 
 ### Eyebrow
 
-The eyebrow text style can add emphasis and hierarchy to a user interface. It's typically used for short, important messages that need to grab the user's attention.
+The `eyebrow` text style can add emphasis and hierarchy to a user interface. It's typically used for short, important messages that need to grab the user's attention.
 
 ### Body
 
-We have different Body styles for different purposes. For paragraphs it is recommended to use the Body 3, for less important text Body 4. To guide and create interest for the eye, we are able to use the font style “paragraph lead” to introduce a topic or “paragraph semibold” emphasize a section.
-
-For interactive elements such as buttons it is recommended to use Semibold text styles.
+We have different `body` styles for different purposes. For paragraphs it is recommended to use the `$ifxBodyBody03`, for less important text `$ifxBodyBody04`. To guide and create interest for the eye, we are able to use the font style `$ifxBodyBody02` to introduce a topic or `$ifxBodyBodySemibold02` emphasize a section. For interactive elements such as buttons it is recommended to use `600` text styles.
 
 ## Weights
 
-We utilize the Source Sans 3 typeface in both Regular and SemiBold weights. The Regular weight is ideal for body text and smaller headings, while the SemiBold weight can be used for larger headings or titles. Choosing the right font weight for each element in a user interface is essential for creating a visual hierarchy that guides users through the content.
+We utilize the `source sans 3` typeface in both `400` and `600` weights. The `400` weight is ideal for `body` text and smaller headings, while the `600` weight can be used for larger headings or displays. Choosing the right font weight for each element in a user interface is essential for creating a visual hierarchy that guides users through the content.
 
 <img src={TypographyFontWeightOverview} alt="Typography Font Weight Overview" />
 
@@ -62,14 +60,14 @@ Upper and lower casing in English is following the principle sentence case. This
 | <code>$ifxEyebrowEyebrow01</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 600 <br/> line-height: 1.5rem <br/> letter-spacing: -0.01em <br/> | 
 | <code>$ifxEyebrowEyebrow02</code> | font-family: Source Sans 3 <br/> font-size: 0.8125rem <br/> font-weight: 600 <br/> line-height: 1.25rem <br/> letter-spacing: -0.01em <br/> | 
 | <code>$ifxEyebrowEyebrow03</code> | font-family: Source Sans 3 <br/> font-size: 0.625rem <br/> font-weight: 600 <br/> line-height: 0.8125rem <br/> letter-spacing: -0.01em <br/> | 
-| <code>$ifxBodyBodyCompact06</code> | font-family: Source Sans 3 <br/> font-size: 1.375rem <br/> font-weight: 400 <br/> line-height: 1.875rem <br/> letter-spacing: 0em <br/> | 
-| <code>$ifxBodyBodyCompact06</code> | font-family: Source Sans 3 <br/> font-size: 1.125rem <br/> font-weight: 400 <br/> line-height: 1.875rem <br/> letter-spacing: 0em <br/> | 
-| <code>$ifxBodyBodyUnderline02</code> | font-family: Source Sans 3 <br/> font-size: 1.125rem <br/> font-weight: 400 <br/> line-height: 1.875rem <br/> letter-spacing: 0em text-decoration: underline <br/> | 
-| <code>$ifxBodyBodySemibold02</code> | font-family: Source Sans 3 <br/> font-size: 1.125rem <br/> font-weight: 600 <br/> line-height: 1.875rem <br/> letter-spacing: 0em text-decoration: underline <br/> | 
-| <code>$ifxBodyBodySemibold02</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 400 <br/> line-height: 1.5rem <br/> letter-spacing: 0em <br/> | 
+| <code>$ifxBodyBody01</code> | font-family: Source Sans 3 <br/> font-size: 1.375rem <br/> font-weight: 400 <br/> line-height: 1.875rem <br/> letter-spacing: 0em <br/> | 
+| <code>$ifxBodyBody02</code> | font-family: Source Sans 3 <br/> font-size: 1.125rem <br/> font-weight: 400 <br/> line-height: 1.625rem <br/> letter-spacing: 0em <br/> | 
+| <code>$ifxBodyBodyUnderline02</code> | font-family: Source Sans 3 <br/> font-size: 1.125rem <br/> font-weight: 400 <br/> line-height: 1.625rem <br/> letter-spacing: 0em <br/> text-decoration: underline <br/> | 
+| <code>$ifxBodyBodySemibold02</code> | font-family: Source Sans 3 <br/> font-size: 1.125rem <br/> font-weight: 600 <br/> line-height: 1.625rem <br/> letter-spacing: 0em <br/> | 
+| <code>$ifxBodyBody03</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 400 <br/> line-height: 1.5rem <br/> letter-spacing: 0em <br/> | 
 | <code>$ifxBodyBodySemibold03</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 600 <br/> line-height: 1.5rem <br/> letter-spacing: 0em <br/> | 
-| <code>$ifxBodyBodyUnderline03</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 400 <br/> line-height: 1.5rem <br/> letter-spacing: 0em text-decoration: underline <br/> | 
-| <code>$ifxBodyBodySemiboldUnderline03</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 600 <br/> line-height: 1.5rem <br/> letter-spacing: 0em text-decoration: underline <br/> | 
+| <code>$ifxBodyBodyUnderline03</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 400 <br/> line-height: 1.5rem <br/> letter-spacing: 0em <br/> text-decoration: underline <br/> | 
+| <code>$ifxBodyBodySemiboldUnderline03</code> | font-family: Source Sans 3 <br/> font-size: 1rem <br/> font-weight: 600 <br/> line-height: 1.5rem <br/> letter-spacing: 0em <br/> text-decoration: underline <br/> | 
 | <code>$ifxBodyBody04</code> | font-family: Source Sans 3 <br/> font-size: 0.875rem <br/> font-weight: 400 <br/> line-height: 1.25rem <br/> letter-spacing: 0em <br/> | 
 | <code>$ifxBodyBodySemibold04</code> | font-family: Source Sans 3 <br/> font-size: 0.875rem <br/> font-weight: 600 <br/> line-height: 1.25rem <br/> letter-spacing: 0em <br/> | 
 | <code>$ifxBodyBodyUnderline04</code> | font-family: Source Sans 3 <br/> font-size: 0.875rem <br/> font-weight: 400 <br/> line-height: 1.25rem <br/> letter-spacing: 0em <br/> text-decoration: underline  | 
@@ -80,16 +78,8 @@ Upper and lower casing in English is following the principle sentence case. This
 
 ## Typestyle Naming Conventions
 
-Typestyles have been updated with generic names (display, heading, eyebrow, body).
-
-That gives the designer the freedom of choice to find the right font style for his design needs.
+Typestyles have been updated with generic names (`display`, `heading`, `eyebrow`, `body`). That gives the designer the freedom of choice to find the right font style for his design needs.
 
 ## Typestyle Color
 
-The default text color is `black`.
-
-For Interactive text elements (e.g. Links) we use `ocean-500`.
-
-Disabled interactive texts use `engineering-300` except some cases, where text is used on an colored background (Text Field).
-
-In context of notifications, we use the text color `red-500` for Error messages (e.g. captions beneath Text Fields), `orange-500` for Warnings and `green-500` for success.
+The default text color is `black`. For Interactive text elements (e.g. Links) we use `ocean-500`. Disabled interactive texts use `engineering-300` except some cases, where text is used on an colored background (Text Field). In context of notifications, we use the text color `red-500` for error messages (e.g. captions beneath text fields), `orange-500` for warnings and `green-500` for success.