diff --git a/packages/components/docs/Validation.md b/packages/components/docs/Validation.md
index 76255685fb0..411d731ebf1 100644
--- a/packages/components/docs/Validation.md
+++ b/packages/components/docs/Validation.md
@@ -13,6 +13,6 @@ If you use some framework you can pass the props `invalidMessage` and `validMess
 
 ## Programmatically set / handle validation by yourself
 
-You can use `data-custom-validity|customValidity="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
+You can use `data-validation|validation="'invalid' | 'valid' | 'no-validation'"` to disable [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
 
 > **Note:** This may lead to problems and inconsistency, only use it if you know what you do, and have specific validation conditions that aren't possible to get defined by the huge range of already existing [validation conditions and patterns through attributs](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation).
diff --git a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
index 8edf7f2f2d4..8661c28676c 100644
--- a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
+++ b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
@@ -20,7 +20,7 @@ const ColorUsageGuide = () => {
 			</p>
 			<DBSection>
 				<ArcherContainer
-					strokeColor="var(--db-current-color-border)"
+					strokeColor="var(--db-adaptive-on-bg-basic-emphasis-60-default)"
 					endMarker={true}
 					endShape={{ arrow: { arrowLength: 5, arrowThickness: 5 } }}>
 					<div className="decision-tree" data-density="functional">