diff --git a/build-tools/utils/custom-css-properties.js b/build-tools/utils/custom-css-properties.js
index 73511df043..76c4803e36 100644
--- a/build-tools/utils/custom-css-properties.js
+++ b/build-tools/utils/custom-css-properties.js
@@ -178,6 +178,8 @@ const customCssPropertiesList = [
'tokenStyleDismissColorDisabled',
'tokenStyleDismissColorHover',
'tokenStyleDismissColorReadOnly',
+ // Box visual accent properties
+ 'boxVisualAccentBorderRadius',
// Item card specific style properties
'styleItemCardBackgroundDefault',
'styleItemCardBorderColorDefault',
diff --git a/pages/box/visual-accent.page.tsx b/pages/box/visual-accent.page.tsx
new file mode 100644
index 0000000000..91ff8fba4e
--- /dev/null
+++ b/pages/box/visual-accent.page.tsx
@@ -0,0 +1,167 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box, { BoxProps } from '~components/box';
+import Container from '~components/container';
+import Header from '~components/header';
+import Icon from '~components/icon';
+import KeyValuePairs from '~components/key-value-pairs';
+import List from '~components/list';
+import SpaceBetween from '~components/space-between';
+
+// ─── Data ──────────────────────────────────────────────────────────────────────
+
+const ALL_VARIANTS: BoxProps.VisualAccent.Color[] = [
+ 'red',
+ 'yellow',
+ 'indigo',
+ 'green',
+ 'orange',
+ 'purple',
+ 'mint',
+ 'lime',
+ 'grey',
+ 'teal',
+ 'cyan',
+ 'blue',
+ 'violet',
+ 'fuchsia',
+ 'magenta',
+ 'pink',
+ 'rose',
+ 'amber',
+];
+
+const BOX_VARIANTS: { variant: BoxProps['variant']; label: string; content: string }[] = [
+ { variant: 'h4', label: 'h4', content: 'Heading 4' },
+ { variant: 'p', label: 'p', content: 'Body paragraph text' },
+];
+
+const LIST_ITEMS: { id: string; content: string; icon: string; color: BoxProps.VisualAccent.Color }[] = [
+ { id: 'health', content: 'Health overview', icon: 'face-happy', color: 'green' },
+ { id: 'functions', content: 'Functions', icon: 'script', color: 'indigo' },
+ { id: 'network', content: 'Network configuration', icon: 'globe', color: 'grey' },
+ { id: 'multi-session', content: 'Multi-session data', icon: 'multiscreen', color: 'purple' },
+ { id: 'alert', content: 'Alert center', icon: 'security', color: 'red' },
+ { id: 'communication', content: 'Communication', icon: 'contact', color: 'mint' },
+];
+
+// ─── Page ──────────────────────────────────────────────────────────────────────
+
+export default function StyleBoxPage() {
+ return (
+
+
+
+ Box visualAccent
+
+
+
+ Uses the existing Box component with a new visualAccent prop. No wrapper component or utility
+ classes needed.
+
+
+ {/* ── Box text variants × accent colors ─────────────────────────── */}
+
+ Text inside accent boxes
+
+
+ {BOX_VARIANTS.map(({ variant, label, content }) => (
+
+
+ Wrapping Box variant="{label}"
+
+
+ {ALL_VARIANTS.map(color => (
+
+
+ {content}
+
+
+ ))}
+
+
+ ))}
+
+ {/* ── Icons in accent boxes ─────────────────────────────────────── */}
+
+ Icons in accent boxes
+
+
+ {ALL_VARIANTS.map(color => (
+
+
+
+ ))}
+
+
+ {/* ── Application in components ──────────────────────────────────── */}
+
+ Application in components
+
+
+ KeyValuePairs}>
+
+ 114
+
+ ),
+ },
+ {
+ label: 'Patterns',
+ value: (
+
+ 81
+
+ ),
+ },
+ {
+ label: 'Demos',
+ value: (
+
+ 35
+
+ ),
+ },
+ ]}
+ />
+
+
+
+ List}>
+ ({
+ id: item.id,
+ content: item.content,
+ icon: (
+
+
+
+ ),
+ })}
+ />
+
+
+