db-ux-design-system · TOberpaul · Nov 27, 2025 · Nov 27, 2025 · Nov 28, 2025 · Nov 28, 2025
diff --git a/.amazonq/rules/db-ux.md b/.amazonq/rules/db-ux.md
diff --git a/.env.template b/.env.template
diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
@@ -0,0 +1,103 @@
+
+--- START: DB UX Copilot Instructions – do not edit below ---
+
+> **NOTE**: Always use "DB UX" components and variables as project's conventions
+# @db-ux/core-components
+## Best Practise / Common AI mistakes
+
+- always read this file if you use Components: `node_modules/@db-ux/core-components/agent/Best-Practise_Common-AI-Mistakes.md`
+
+
+# @db-ux/core-foundations
+## CSS
+
+- If you use CSS, follow these rules:
+    - Always reference the file `node_modules/@db-ux/core-foundations/agent/css/Variables.md` for variables like sizing, spacing, elevation, border, or container-size. This file contains the authoritative list of available variables.
+    - Use the examples provided in `Variables.md` to ensure correct usage like:
+        - `padding: var(--db-spacing-fixed-md);`
+        - `height: var(--db-sizing-md);`
+        - `width: var(--db-container-xs);`
+        - `color: var(--db-adaptive-on-bg-basic-emphasis-90-default);`
+        - `background-color: var(--db-adaptive-bg-basic-level-2-default);`
+        - `font: var(--db-type-body-sm);`
+
+## SCSS
+
+- If you use SCSS, follow these rules:
+    - Always reference the file `node_modules/@db-ux/core-foundations/agent/scss/Variables.md` for variables like sizing, spacing, elevation, border, or container-size. This file contains the authoritative list of available variables.
+    - Use the examples provided in `Variables.md` to ensure correct usage.
+    - Always use `@use` for imports:
+        - Variables: `@use "@db-ux/core-foundations/build/styles/variables";`
+        - Colors: `@use "@db-ux/core-foundations/build/styles/colors";`
+        - Fonts: `@use "@db-ux/core-foundations/build/styles/fonts";`
+        - Never use `as *` for the `@use`, use it like this:
+            - `padding: variables.$db-spacing-fixed-md;`
+            - `height: variables.$db-sizing-md;`
+            - `width: variables.$db-container-xs;`
+            - `color: colors.$db-adaptive-on-bg-basic-emphasis-90-default;`
+            - `background-color: colors.$db-adaptive-bg-basic-level-2-default;`
+            - `font: fonts.$db-type-body-sm;`
+
+## Tailwind
+
+- If you use Tailwind, follow these rules:
+    - Always reference the file `node_modules/@db-ux/core-foundations/agent/tailwind/Variables.md` for variables like sizing, spacing, elevation, border, or container-size. This file contains the authoritative list of available variables.
+    - Use the examples provided in `Variables.md` to ensure correct usage like:
+        - padding: `p-fix-md`
+        - height: `h-siz-md`
+        - width: `w-container-xs`
+        - color: `text-adaptive-on-bg-basic-emphasis-90-default`
+        - background-color: `bg-adaptive-bg-basic-level-2-default`
+        - font: `text-body-sm`
+    - Always stick to the variables. Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
+
+## Figma MCP
+
+- If you use Figma MCP always generate code with project's conventions, such as using @db-ux/core-components and @db-ux/core-foundations.
+- If a code snippet from Figma MCP has a font-family with "DB Neo Screen Head" use HTML headlines (`<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>`, `<h6>` HTML tags).
+- If the headline has a `font-weight: 300;` use `data-variant="light"` additionally.
+- If a code snippet has a Figma `Mode`, add it as `data-xxx`, where `xxx` is the mode in lower-case.
+
+### Tailwind
+
+If you use tailwind follow those rules as well:
+
+- Don't use values like `p-4` or `m-[16px]`; use `p-fix-xs` or `m-fix-md` instead.
+- Never use something like `font-['DB_Neo_Screen_Head']` and `leading-[48px]` instead use `text-head-xx` class, where `-xx` can be a t-shirt size from `3xs` to `3xl`; If it has a `font-wight:300;` use `text-head-light-xx` instead.
+
+
+# @db-ux/react-core-components
+- Use "@db-ux/react-core-components" as import for components:
+  - use for `DBDrawer` or `Drawer` the file node_modules/@db-ux/react-core-components/agent/Drawer.md
+  - use for `DBTooltip` or `Tooltip` the file node_modules/@db-ux/react-core-components/agent/Tooltip.md
+  - use for `DBTextarea` or `Textarea` the file node_modules/@db-ux/react-core-components/agent/Textarea.md
+  - use for `DBTag` or `Tag` the file node_modules/@db-ux/react-core-components/agent/Tag.md
+  - use for `DBTabs` or `Tabs` the file node_modules/@db-ux/react-core-components/agent/Tabs.md
+  - use for `DBTabItem` or `TabItem` the file node_modules/@db-ux/react-core-components/agent/TabItem.md
+  - use for `DBSwitch` or `Switch` the file node_modules/@db-ux/react-core-components/agent/Switch.md
+  - use for `DBStack` or `Stack` the file node_modules/@db-ux/react-core-components/agent/Stack.md
+  - use for `DBSelect` or `Select` the file node_modules/@db-ux/react-core-components/agent/Select.md
+  - use for `DBSection` or `Section` the file node_modules/@db-ux/react-core-components/agent/Section.md
+  - use for `DBRadio` or `Radio` the file node_modules/@db-ux/react-core-components/agent/Radio.md
+  - use for `DBPopover` or `Popover` the file node_modules/@db-ux/react-core-components/agent/Popover.md
+  - use for `DBPage` or `Page` the file node_modules/@db-ux/react-core-components/agent/Page.md
+  - use for `DBNotification` or `Notification` the file node_modules/@db-ux/react-core-components/agent/Notification.md
+  - use for `DBNavigationItem` or `NavigationItem` the file node_modules/@db-ux/react-core-components/agent/NavigationItem.md
+  - use for `DBNavigation` or `Navigation` the file node_modules/@db-ux/react-core-components/agent/Navigation.md
+  - use for `DBLink` or `Link` the file node_modules/@db-ux/react-core-components/agent/Link.md
+  - use for `DBInput` or `Input` the file node_modules/@db-ux/react-core-components/agent/Input.md
+  - use for `DBInfotext` or `Infotext` the file node_modules/@db-ux/react-core-components/agent/Infotext.md
+  - use for `DBIcon` or `Icon` the file node_modules/@db-ux/react-core-components/agent/Icon.md
+  - use for `DBHeader` or `Header` the file node_modules/@db-ux/react-core-components/agent/Header.md
+  - use for `DBDivider` or `Divider` the file node_modules/@db-ux/react-core-components/agent/Divider.md
+  - use for `DBCustomSelect` or `CustomSelect` the file node_modules/@db-ux/react-core-components/agent/CustomSelect.md
+  - use for `DBCheckbox` or `Checkbox` the file node_modules/@db-ux/react-core-components/agent/Checkbox.md
+  - use for `DBCard` or `Card` the file node_modules/@db-ux/react-core-components/agent/Card.md
+  - use for `DBButton` or `Button` the file node_modules/@db-ux/react-core-components/agent/Button.md
+  - use for `DBBrand` or `Brand` the file node_modules/@db-ux/react-core-components/agent/Brand.md
+  - use for `DBBadge` or `Badge` the file node_modules/@db-ux/react-core-components/agent/Badge.md
+  - use for `DBAccordionItem` or `AccordionItem` the file node_modules/@db-ux/react-core-components/agent/AccordionItem.md
+  - use for `DBAccordion` or `Accordion` the file node_modules/@db-ux/react-core-components/agent/Accordion.md
+
+--- END: DB UX Copilot Instructions – do not edit above ---
+
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,23 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "semi": true,
+  "plugins": ["prettier-plugin-astro"],
+  "overrides": [
+    {
+      "files": "*.astro",
+      "options": {
+        "parser": "astro"
+      }
+    },
+    {
+      "files": "*.mdx",
+      "options": {
+        "parser": "mdx"
+      }
+    }
+  ]
+}
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ iconTrailing: "arrow_right"
 Below is an explanation of each field:
 
 | Property              | Type      | Default  | Description                                                                                                                                                                                                            |
-| --------------------- | --------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+|-----------------------|-----------|----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | **`layout`**          | `string`  | required | Always use `@template/layouts/default` for standard pages.                                                                                                                                                             |
 | **`title`**           | `string`  | —        | The name shown in the navigation and as the page headline.                                                                                                                                                             |
 | **`hidePage`**        | `boolean` | `false`  | If set to `true`, this page will **not** be directly visible in the navigation and users will be redirected to the first visible child page instead. Useful for sections that act as folders rather than actual pages. |
@@ -87,4 +87,37 @@ Below is an explanation of each field:
 * Use `order` values like `1, 2, 3…` for clarity.
 * Avoid duplicate titles in the same folder level.
 * For “section overview” pages that should not have content themselves, set  `hidePage: true` and place the actual content in child pages.
-* Only set `isSubNavigation: true` on parent pages that have multiple related subpages.
+* Only set `isSubNavigation: true` on parent pages that have multiple related subpages.
+\n+## 🎨 TextImage Bildmasken
+\n+Der `TextImage` Komponenten-Prop `mask` erlaubt weiche Ausblendungen (Fades) an einer oder zwei Kanten – ähnlich wie bei linear.app.
+\n+### Verwendung
+\n+```astro
+<TextImage
+   title="Beispiel"
+   imageSrc="/assets/example.png"
+   imageAlt="Beispiel Illustration"
+   mask="fade-bottom-right"
+>
+   Beschreibungstext …
+</TextImage>
+```
+\n+### Unterstützte Werte
+\n+Einzelne Richtungen:
+* `fade-right`
+* `fade-left`
+* `fade-top`
+* `fade-bottom`
+\n+Ecken (Kombination aus zwei Fades):
+* `fade-bottom-right`
+* `fade-bottom-left`
+* `fade-top-right`
+* `fade-top-left`
+\n+### Technische Umsetzung
+* Realisiert über CSS `mask-image` bzw. `-webkit-mask-image` mit zwei linearen Gradients bei Eck-Varianten.
+* Die Gradients werden via `mask-composite: intersect` (WebKit: `-webkit-mask-composite: source-in`) kombiniert.
+* Fallback: Browser ohne Mask-Unterstützung zeigen das Bild unverändert (keine zusätzliche Logik nötig).
+\n+### Hinweise & Anpassung
+* Die Intensität (z.B. 20% → 100%) kann bei Bedarf zentral in der CSS Datei (`TextImage.css`) angepasst werden.
+* Für individuelle Projekte können weitere Varianten über zusätzliche `data-mask` Selektoren ergänzt werden.
+\n+### Barrierefreiheit
+* Die Maskierung beeinflusst nur die visuelle Darstellung, nicht den Alternativtext – `alt` sollte weiterhin aussagekräftig bleiben.
diff --git a/app.config.ts b/app.config.ts
@@ -1,7 +1,7 @@
 export const appConfig: AppConfig = {
-  title: "Design System",
-  hostname: "https://db-ux-design-system.github.io",
-  basePath: "/one-platform/",
+  title: 'Design System',
+  hostname: 'https://db-ux-design-system.github.io',
+  basePath: '/one-platform/',
   sitemapBlacklist: [],
-  language: "en",
+  language: 'en',
 };
diff --git a/app.navigation.ts b/app.navigation.ts
@@ -1,3 +1,3 @@
-import { buildAppNavigationFromContent } from "@template/utils/content-navigation";
+import { buildAppNavigationFromContent } from '@template/utils/content-navigation';
 
 export const appNavigation: AppNavigation = buildAppNavigationFromContent();
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -1,11 +1,11 @@
 // @ts-check
-import { defineConfig } from "astro/config";
-import { appConfig } from "./app.config";
-import react from "@astrojs/react";
-import mdx from "@astrojs/mdx";
-import sitemap from "@astrojs/sitemap";
-import { filterSitemapBlacklist } from "./template/integrations/sitemap";
-import orama from "@orama/plugin-astro";
+import { defineConfig } from 'astro/config';
+import { appConfig } from './app.config';
+import react from '@astrojs/react';
+import mdx from '@astrojs/mdx';
+import sitemap from '@astrojs/sitemap';
+import { filterSitemapBlacklist } from './template/integrations/sitemap';
+import orama from '@orama/plugin-astro';
 
 // https://astro.build/config
 export default defineConfig({
@@ -20,22 +20,30 @@ export default defineConfig({
     orama({
       pages: {
         pathMatcher: /\/.+\//,
-        language: "english",
+        language: 'english',
       },
     }),
   ],
-  srcDir: "./content",
-  outDir: "./public",
-  publicDir: "./static",
+  srcDir: './content',
+  outDir: './public',
+  publicDir: './static',
   vite: {
     ssr: {
-      noExternal: ["@db-ux/react-core-components"],
+      noExternal: ['@db-ux/react-core-components'],
+    },
+    resolve: {
+      alias: {
+        '@components': new URL('./template/components', import.meta.url).pathname,
+        '@template': new URL('./template', import.meta.url).pathname,
+        '@content': new URL('./content', import.meta.url).pathname,
+        '@config': new URL('./app.config.ts', import.meta.url).pathname,
+      },
     },
   },
   devToolbar: {
     enabled: false,
   },
   build: {
-    inlineStylesheets: "always",
+    inlineStylesheets: 'always',
   },
 });
diff --git a/content/pages/about-us/_components/AvatarSection.astro b/content/pages/about-us/_components/AvatarSection.astro
@@ -0,0 +1,89 @@
+---
+import { appConfig } from '@config';
+import { DBSection, DBStack } from '@db-ux/react-core-components';
+import { Avatar } from '@components';
+---
+
+<DBSection width="small" spacing="medium" id="about-us--avatar-section">
+  <DBStack direction="column" gap="3x-large" alignment="center">
+    <DBStack direction="row" alignment="stretch" gap="medium">
+      <Avatar
+        src={`${appConfig.basePath}assets/people/Tobias-Oberpaul--Avatar-1--C.glb`}
+        hoverSrc={`${appConfig.basePath}assets/people/Tobias-Oberpaul--Avatar-2--C.glb`}
+        alt="Tobias Oberpaul"
+        name="Tobias Oberpaul"
+        position="Lead @ DB UX"
+      />
+      <Avatar
+        src={`${appConfig.basePath}assets/people/Lea-Perchermeier--Avatar-1--C.glb`}
+        hoverSrc={`${appConfig.basePath}assets/people/Lea-Perchermeier--Avatar-2--C.glb`}
+        alt="Lea Perchermeier"
+        name="Lea Perchermeier"
+        position={`Design Lead @ DB UX \n Design System`}
+      />
+      <Avatar
+        src={`${appConfig.basePath}assets/people/Maximilian-Franzke--Avatar-1--C.glb`}
+        hoverSrc={`${appConfig.basePath}assets/people/Maximilian-Franzke--Avatar-2--C.glb`}
+        alt="Maximilian Franzke"
+        name="Maximilian Franzke"
+        position={`Engineering Lead @ DB UX \n Design System`}
+      />
+    </DBStack>
+    <div>
+      <p
+        style="font: var(--db-type-body-xl); text-align: center; margin: 0 auto var(--db-spacing-fixed-xl); 0;"
+      >
+        DB is home to many exceptional product teams. Our role is to create the conditions in which
+        their work can thrive, scale, and continuously improve.
+      </p>
+      <p
+        style="font: var(--db-type-body-xl); text-align: center; margin: 0 auto var(--db-spacing-fixed-xl); 0;"
+      >
+        The DB UX Design System Team works on the core content and framework of the design system,
+        advancing it both strategically and operationally. Our aim remains the same: to make the
+        system accessible to all DB employees and meaningfully support their daily work.
+      </p>
+      <p style="font: var(--db-type-body-xl); text-align: center; margin: 0 auto;">
+        We empower designers and engineers across DB to actively shape the system. With guidance,
+        shared standards, and clear contribution paths, the system grows through the expertise of
+        those who use it every day. This collective approach strengthens coherence, accelerates
+        delivery, and establishes the Design System as a shared asset for the entire organization.
+      </p>
+    </div>
+    <DBStack direction="column" alignment="center">
+      <DBStack direction="row" alignment="center" justifyContent="center" gap="large">
+        <img
+          class="img--tint-dark-blue"
+          src={`${appConfig.basePath}assets/signatures/Tobias-Oberpaul--Signature--C.png`}
+          alt="Signature Tobias Oberpaul"
+          width="200px"
+        />
+        <img
+          class="img--tint-dark-blue"
+          src={`${appConfig.basePath}assets/signatures/Lea-Perchermeier--Signature--C.png`}
+          alt="Signature Lea Perchermeier"
+          width="150px"
+        />
+      </DBStack>
+      <DBStack direction="row" alignment="center" justifyContent="center" gap="large">
+        <img
+          class="img--tint-dark-blue"
+          src={`${appConfig.basePath}assets/signatures/Maximilian-Franzke--Signature--C.png`}
+          alt="Signature Maximilian Franzke"
+          width="250px"
+        />
+        <img
+          class="img--tint-dark-blue"
+          src={`${appConfig.basePath}assets/signatures/Luis-Schroff--Signature--C.png`}
+          alt="Signature Luis Schroff"
+          width="150px"
+        />
+      </DBStack>
+    </DBStack>
+  </DBStack>
+</DBSection>
+
+<script
+  is:inline
+  type="module"
+  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>
diff --git a/content/pages/about-us/_components/CtaSection.astro b/content/pages/about-us/_components/CtaSection.astro
@@ -0,0 +1,16 @@
+---
+import { DBSection } from '@db-ux/react-core-components';
+import { CTA } from '@components';
+---
+
+<DBSection width="medium" spacing="medium" aria-label="Homepage CTA section">
+  <CTA
+    title="Talk to us"
+    text="We’re here when questions arise or clarity is needed. Reach out early. Shared dialogue strengthens the system’s quality."
+    primaryAction={{
+      label: 'Contact us',
+      href: 'mailto:db-ux-designsystem@deutschebahn.com',
+      variant: 'brand',
+    }}
+  />
+</DBSection>
diff --git a/content/pages/about-us/index.mdx b/content/pages/about-us/index.mdx
@@ -0,0 +1,13 @@
+---
+order: 2
+layout: "@template/layouts/default"
+title: "Our Vision"
+headline: "An ideal environment for creating outstanding digital solutions."
+---
+
+import AvatarSection from './_components/AvatarSection.astro';
+import CtaSection from './_components/CtaSection.astro';
+
+<AvatarSection />
+
+<CtaSection />
diff --git a/content/pages/documentation/get-started/index.mdx b/content/pages/documentation/get-started/index.mdx
@@ -0,0 +1,9 @@
+---
+order: 4
+layout: "@template/layouts/default"
+title: "Get Started"
+headline: "Work in progress"
+description: "Content is being prepared."
+heroImage: "/one-platform/assets/In-Progress--Lightmode--C.png"
+heroImageAlt: "For Developer Visual"
+---