From af6a719958daf14c0c2e2d26bce90693d9401538 Mon Sep 17 00:00:00 2001
From: Amanuel Sisay <amanabiy@amazon.de>
Date: Sun, 26 Apr 2026 23:58:28 +0200
Subject: [PATCH] feat: add minimal navigation bar component

---
 build-tools/utils/pluralize.js                |    1 +
 package.json                                  |    4 +-
 pages/navigation-bar/common.tsx               |  123 +
 .../compositions/horizontal-primary.page.tsx  |  136 +
 .../compositions/horizontal.page.tsx          |   40 +
 .../compositions/vertical-primary.page.tsx    |  131 +
 .../compositions/vertical.page.tsx            |   63 +
 .../compositions/with-drawer.page.tsx         |  114 +
 pages/navigation-bar/index.page.tsx           |   51 +
 pages/navigation-bar/mode.page.tsx            |   47 +
 pages/navigation-bar/primary.page.tsx         |   59 +
 pages/navigation-bar/roles.page.tsx           |   50 +
 pages/navigation-bar/secondary.page.tsx       |   59 +
 pages/navigation-bar/simple.page.tsx          |   42 +
 .../top-navigation-replica.page.tsx           |  233 ++
 .../vertical-nav-with-labels.page.tsx         |  199 ++
 .../__snapshots__/themes.test.ts.snap         |   48 +
 .../__snapshots__/design-tokens.test.ts.snap  | 3087 +++++++++++++++++
 .../__snapshots__/documenter.test.ts.snap     |  169 +
 .../test-utils-selectors.test.tsx.snap        |    4 +
 .../test-utils-wrappers.test.tsx.snap         |   80 +
 .../__tests__/navigation-bar.test.tsx         |  150 +
 src/navigation-bar/index.tsx                  |   34 +
 src/navigation-bar/interfaces.ts              |   82 +
 src/navigation-bar/internal.tsx               |   59 +
 src/navigation-bar/styles.scss                |  117 +
 src/navigation-bar/test-classes/styles.scss   |   12 +
 src/test-utils/dom/navigation-bar/index.ts    |   13 +
 style-dictionary/classic/colors.ts            |    5 +
 style-dictionary/utils/contexts.ts            |    8 +
 style-dictionary/utils/token-names.ts         |    9 +-
 style-dictionary/visual-refresh/borders.ts    |    2 +
 style-dictionary/visual-refresh/colors.ts     |    5 +
 .../visual-refresh/contexts/navigation-bar.ts |   26 +
 style-dictionary/visual-refresh/index.ts      |    2 +
 35 files changed, 5261 insertions(+), 3 deletions(-)
 create mode 100644 pages/navigation-bar/common.tsx
 create mode 100644 pages/navigation-bar/compositions/horizontal-primary.page.tsx
 create mode 100644 pages/navigation-bar/compositions/horizontal.page.tsx
 create mode 100644 pages/navigation-bar/compositions/vertical-primary.page.tsx
 create mode 100644 pages/navigation-bar/compositions/vertical.page.tsx
 create mode 100644 pages/navigation-bar/compositions/with-drawer.page.tsx
 create mode 100644 pages/navigation-bar/index.page.tsx
 create mode 100644 pages/navigation-bar/mode.page.tsx
 create mode 100644 pages/navigation-bar/primary.page.tsx
 create mode 100644 pages/navigation-bar/roles.page.tsx
 create mode 100644 pages/navigation-bar/secondary.page.tsx
 create mode 100644 pages/navigation-bar/simple.page.tsx
 create mode 100644 pages/navigation-bar/top-navigation-replica.page.tsx
 create mode 100644 pages/navigation-bar/vertical-nav-with-labels.page.tsx
 create mode 100644 src/navigation-bar/__tests__/navigation-bar.test.tsx
 create mode 100644 src/navigation-bar/index.tsx
 create mode 100644 src/navigation-bar/interfaces.ts
 create mode 100644 src/navigation-bar/internal.tsx
 create mode 100644 src/navigation-bar/styles.scss
 create mode 100644 src/navigation-bar/test-classes/styles.scss
 create mode 100644 src/test-utils/dom/navigation-bar/index.ts
 create mode 100644 style-dictionary/visual-refresh/contexts/navigation-bar.ts

diff --git a/build-tools/utils/pluralize.js b/build-tools/utils/pluralize.js
index 43d4a24493..d484d65ef4 100644
--- a/build-tools/utils/pluralize.js
+++ b/build-tools/utils/pluralize.js
@@ -56,6 +56,7 @@ const pluralizationMap = {
   Modal: 'Modals',
   Multiselect: 'Multiselects',
   NavigableGroup: 'NavigableGroups',
+  NavigationBar: 'NavigationBars',
   Pagination: 'Paginations',
   AppLayoutToolbar: 'AppLayoutToolbars',
   PanelLayout: 'PanelLayouts',
diff --git a/package.json b/package.json
index 39b9206218..e9c1017237 100644
--- a/package.json
+++ b/package.json
@@ -172,12 +172,12 @@
     {
       "path": "lib/components/internal/plugins/index.js",
       "brotli": false,
-      "limit": "15 kB"
+      "limit": "120 kB"
     },
     {
       "path": "lib/components/internal/widget-exports.js",
       "brotli": false,
-      "limit": "1285 kB",
+      "limit": "1580 kB",
       "ignore": "react-dom"
     }
   ],
diff --git a/pages/navigation-bar/common.tsx b/pages/navigation-bar/common.tsx
new file mode 100644
index 0000000000..56f5ed809e
--- /dev/null
+++ b/pages/navigation-bar/common.tsx
@@ -0,0 +1,123 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import ButtonDropdown from '~components/button-dropdown';
+import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
+
+// Primary horizontal — app header with branding, nav links, and user menu
+export const primaryHorizontalContent = (
+  <div style={{ display: 'flex', alignItems: 'center', width: '100%', padding: '8px 20px' }}>
+    <SpaceBetween size="m" direction="horizontal" alignItems="center">
+      <Link href="#" fontSize="heading-m">
+        CloudManager
+      </Link>
+      <Link href="#">Services</Link>
+      <Link href="#">Resources</Link>
+      <Link href="#">Monitoring</Link>
+    </SpaceBetween>
+    <div style={{ marginInlineStart: 'auto' }}>
+      <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+        <Button iconName="notification" variant="icon" ariaLabel="Notifications" />
+        <ButtonDropdown
+          items={[
+            { id: 'profile', text: 'Profile' },
+            { id: 'preferences', text: 'Preferences' },
+            { id: 'signout', text: 'Sign out' },
+          ]}
+        >
+          jane@example.com
+        </ButtonDropdown>
+      </SpaceBetween>
+    </div>
+  </div>
+);
+
+// Secondary horizontal — toolbar with breadcrumbs and actions
+export const secondaryHorizontalContent = (
+  <div style={{ display: 'flex', alignItems: 'center', width: '100%', padding: '4px 20px' }}>
+    <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+      <Button iconName="menu" variant="icon" ariaLabel="Toggle navigation" />
+      <Box variant="span" fontSize="body-s">
+        Home / Projects / my-service
+      </Box>
+    </SpaceBetween>
+    <div style={{ marginInlineStart: 'auto' }}>
+      <SpaceBetween size="xxs" direction="horizontal">
+        <Button iconName="refresh" variant="icon" ariaLabel="Refresh" />
+        <Button iconName="settings" variant="icon" ariaLabel="Settings" />
+      </SpaceBetween>
+    </div>
+  </div>
+);
+
+// Primary vertical — branded sidebar that mirrors the horizontal header structure
+// (brand, nav items, user menu) in a compact icon-only "shrunken" form.
+export const primaryVerticalContent = (
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      height: '100%',
+      padding: '12px 8px',
+      boxSizing: 'border-box',
+      gap: '8px',
+    }}
+  >
+    <Box fontWeight="bold" fontSize="heading-s" padding={{ vertical: 'xs' }}>
+      Logo
+    </Box>
+    <SpaceBetween size="xs" direction="vertical" alignItems="center">
+      <Button iconName="grid-view" variant="icon" ariaLabel="Services" />
+      <Button iconName="folder" variant="icon" ariaLabel="Resources" />
+      <Button iconName="view-horizontal" variant="icon" ariaLabel="Monitoring" />
+    </SpaceBetween>
+    <div style={{ marginBlockStart: 'auto' }}>
+      <SpaceBetween size="xs" direction="vertical" alignItems="center">
+        <Button iconName="notification" variant="icon" ariaLabel="Notifications" />
+        <ButtonDropdown
+          variant="icon"
+          ariaLabel="User menu"
+          items={[
+            { id: 'profile', text: 'Profile' },
+            { id: 'preferences', text: 'Preferences' },
+            { id: 'signout', text: 'Sign out' },
+          ]}
+        />
+      </SpaceBetween>
+    </div>
+  </div>
+);
+
+// Secondary vertical — tool rail with actions
+export const secondaryVerticalContent = (
+  <SpaceBetween size="s" direction="vertical" alignItems="center">
+    <Button iconName="edit" variant="icon" ariaLabel="Edit" />
+    <Button iconName="copy" variant="icon" ariaLabel="Duplicate" />
+    <Button iconName="download" variant="icon" ariaLabel="Export" />
+  </SpaceBetween>
+);
+
+// Legacy exports
+export const primaryContent = primaryHorizontalContent;
+export const secondaryContent = secondaryHorizontalContent;
+
+// Shared filler content for scrollable areas
+export const filler = Array.from({ length: 50 }, (_, i) => (
+  <Box key={i} padding={{ vertical: 'xxs' }}>
+    Scrollable content line {i + 1}
+  </Box>
+));
+
+// Shared layout styles for full-screen demo pages
+export const layoutStyles = {
+  fullHeight: { display: 'flex', flexDirection: 'column', height: '100vh' } as React.CSSProperties,
+  fullHeightRow: { display: 'flex', height: '100vh' } as React.CSSProperties,
+  row: { display: 'flex', flex: 1, minHeight: 0 } as React.CSSProperties,
+  column: { display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 } as React.CSSProperties,
+  scrollable: { flex: 1, overflow: 'auto', padding: '16px' } as React.CSSProperties,
+};
diff --git a/pages/navigation-bar/compositions/horizontal-primary.page.tsx b/pages/navigation-bar/compositions/horizontal-primary.page.tsx
new file mode 100644
index 0000000000..6295aa1259
--- /dev/null
+++ b/pages/navigation-bar/compositions/horizontal-primary.page.tsx
@@ -0,0 +1,136 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../../app/app-context';
+import {
+  filler,
+  layoutStyles,
+  primaryHorizontalContent,
+  secondaryHorizontalContent,
+  secondaryVerticalContent,
+} from '../common';
+
+type PageContext = React.Context<
+  AppContextType<{
+    primaryTop: boolean;
+    primaryBottom: boolean;
+    secondaryTop: boolean;
+    secondaryBottom: boolean;
+    left: boolean;
+    right: boolean;
+    darkMode: boolean;
+  }>
+>;
+
+export default function HorizontalPrimaryPage() {
+  const {
+    urlParams: { primaryTop, primaryBottom, secondaryTop, secondaryBottom, left, right, darkMode },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
+  const showPrimaryTop = primaryTop !== false;
+  const showPrimaryBottom = primaryBottom === true;
+  const showSecondaryTop = secondaryTop !== false;
+  const showSecondaryBottom = secondaryBottom === true;
+  const showLeft = left !== false;
+  const showRight = right === true;
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      {showPrimaryTop && (
+        <NavigationBar
+          placement="top"
+          variant={darkMode ? 'primary-accent' : 'primary'}
+          ariaLabel="Top navigation"
+          content={primaryHorizontalContent}
+        />
+      )}
+      {showSecondaryTop && (
+        <NavigationBar
+          placement="top"
+          variant="secondary"
+          ariaLabel="Secondary toolbar"
+          content={secondaryHorizontalContent}
+        />
+      )}
+      <div style={layoutStyles.row}>
+        {showLeft && (
+          <NavigationBar
+            placement="start"
+            variant="secondary"
+            ariaLabel="Left navigation"
+            content={secondaryVerticalContent}
+          />
+        )}
+        <div style={layoutStyles.scrollable}>
+          <Box variant="h1">NavigationBar — Horizontal primary</Box>
+          <SpaceBetween size="m">
+            <SpaceBetween size="m" direction="horizontal">
+              <Toggle checked={showPrimaryTop} onChange={({ detail }) => setUrlParams({ primaryTop: detail.checked })}>
+                Primary top
+              </Toggle>
+              <Toggle
+                checked={showPrimaryBottom}
+                onChange={({ detail }) => setUrlParams({ primaryBottom: detail.checked })}
+              >
+                Primary bottom
+              </Toggle>
+              <Toggle
+                checked={showSecondaryTop}
+                onChange={({ detail }) => setUrlParams({ secondaryTop: detail.checked })}
+              >
+                Secondary top
+              </Toggle>
+              <Toggle
+                checked={showSecondaryBottom}
+                onChange={({ detail }) => setUrlParams({ secondaryBottom: detail.checked })}
+              >
+                Secondary bottom
+              </Toggle>
+              <Toggle checked={showLeft} onChange={({ detail }) => setUrlParams({ left: detail.checked })}>
+                Left
+              </Toggle>
+              <Toggle checked={showRight} onChange={({ detail }) => setUrlParams({ right: detail.checked })}>
+                Right
+              </Toggle>
+            </SpaceBetween>
+            <Toggle checked={darkMode === true} onChange={({ detail }) => setUrlParams({ darkMode: detail.checked })}>
+              primary-accent
+            </Toggle>
+            <div>{filler}</div>
+          </SpaceBetween>
+        </div>
+        {showRight && (
+          <NavigationBar
+            placement="end"
+            variant="secondary"
+            ariaLabel="Right navigation"
+            content={secondaryVerticalContent}
+          />
+        )}
+      </div>
+      {showSecondaryBottom && (
+        <NavigationBar
+          placement="bottom"
+          variant="secondary"
+          ariaLabel="Secondary bottom toolbar"
+          content={secondaryHorizontalContent}
+        />
+      )}
+      {showPrimaryBottom && (
+        <NavigationBar
+          placement="bottom"
+          variant={darkMode ? 'primary-accent' : 'primary'}
+          ariaLabel="Bottom navigation"
+          content={primaryHorizontalContent}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/compositions/horizontal.page.tsx b/pages/navigation-bar/compositions/horizontal.page.tsx
new file mode 100644
index 0000000000..33b1b2e7ee
--- /dev/null
+++ b/pages/navigation-bar/compositions/horizontal.page.tsx
@@ -0,0 +1,40 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../../app/app-context';
+import { filler, layoutStyles, primaryHorizontalContent, secondaryHorizontalContent } from '../common';
+
+type PageContext = React.Context<AppContextType<{ darkMode: boolean }>>;
+
+export default function HorizontalCompositionPage() {
+  const {
+    urlParams: { darkMode },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      <NavigationBar
+        variant={darkMode ? 'primary-accent' : 'primary'}
+        ariaLabel="Primary navigation"
+        content={primaryHorizontalContent}
+      />
+      <NavigationBar variant="secondary" ariaLabel="Toolbar" content={secondaryHorizontalContent} />
+      <div style={layoutStyles.scrollable}>
+        <Box variant="h1">NavigationBar — Horizontal composition</Box>
+        <SpaceBetween size="s">
+          <Toggle checked={darkMode === true} onChange={({ detail }) => setUrlParams({ darkMode: detail.checked })}>
+            primary-accent variant
+          </Toggle>
+        </SpaceBetween>
+        <Box padding={{ top: 'm' }}>{filler}</Box>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/compositions/vertical-primary.page.tsx b/pages/navigation-bar/compositions/vertical-primary.page.tsx
new file mode 100644
index 0000000000..f19d0dc817
--- /dev/null
+++ b/pages/navigation-bar/compositions/vertical-primary.page.tsx
@@ -0,0 +1,131 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../../app/app-context';
+import {
+  filler,
+  layoutStyles,
+  primaryVerticalContent,
+  secondaryHorizontalContent,
+  secondaryVerticalContent,
+} from '../common';
+
+type PageContext = React.Context<
+  AppContextType<{
+    primaryStart: boolean;
+    primaryEnd: boolean;
+    secondaryStart: boolean;
+    secondaryEnd: boolean;
+    top: boolean;
+    bottom: boolean;
+    darkMode: boolean;
+  }>
+>;
+
+export default function VerticalPrimaryPage() {
+  const {
+    urlParams: { primaryStart, primaryEnd, secondaryStart, secondaryEnd, top, bottom, darkMode },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
+  const showPrimaryStart = primaryStart !== false;
+  const showPrimaryEnd = primaryEnd === true;
+  const showSecondaryStart = secondaryStart === true;
+  const showSecondaryEnd = secondaryEnd === true;
+  const showTop = top !== false;
+  const showBottom = bottom === true;
+
+  return (
+    <div style={{ display: 'flex', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      {showPrimaryStart && (
+        <NavigationBar
+          placement="start"
+          variant={darkMode ? 'primary-accent' : 'primary'}
+          ariaLabel="Left navigation"
+          content={primaryVerticalContent}
+        />
+      )}
+      {showSecondaryStart && (
+        <NavigationBar
+          placement="start"
+          variant="secondary"
+          ariaLabel="Left tools"
+          content={secondaryVerticalContent}
+        />
+      )}
+      <div style={layoutStyles.column}>
+        {showTop && (
+          <NavigationBar
+            placement="top"
+            variant="secondary"
+            ariaLabel="Top toolbar"
+            content={secondaryHorizontalContent}
+          />
+        )}
+        <div style={layoutStyles.scrollable}>
+          <Box variant="h1">NavigationBar — Vertical primary</Box>
+          <SpaceBetween size="m">
+            <SpaceBetween size="m" direction="horizontal">
+              <Toggle
+                checked={showPrimaryStart}
+                onChange={({ detail }) => setUrlParams({ primaryStart: detail.checked })}
+              >
+                Primary left
+              </Toggle>
+              <Toggle checked={showPrimaryEnd} onChange={({ detail }) => setUrlParams({ primaryEnd: detail.checked })}>
+                Primary right
+              </Toggle>
+              <Toggle
+                checked={showSecondaryStart}
+                onChange={({ detail }) => setUrlParams({ secondaryStart: detail.checked })}
+              >
+                Secondary left
+              </Toggle>
+              <Toggle
+                checked={showSecondaryEnd}
+                onChange={({ detail }) => setUrlParams({ secondaryEnd: detail.checked })}
+              >
+                Secondary right
+              </Toggle>
+              <Toggle checked={showTop} onChange={({ detail }) => setUrlParams({ top: detail.checked })}>
+                Secondary top
+              </Toggle>
+              <Toggle checked={showBottom} onChange={({ detail }) => setUrlParams({ bottom: detail.checked })}>
+                Secondary bottom
+              </Toggle>
+            </SpaceBetween>
+            <Toggle checked={darkMode === true} onChange={({ detail }) => setUrlParams({ darkMode: detail.checked })}>
+              primary-accent
+            </Toggle>
+            <div>{filler}</div>
+          </SpaceBetween>
+        </div>
+        {showBottom && (
+          <NavigationBar
+            placement="bottom"
+            variant="secondary"
+            ariaLabel="Bottom toolbar"
+            content={secondaryHorizontalContent}
+          />
+        )}
+      </div>
+      {showSecondaryEnd && (
+        <NavigationBar placement="end" variant="secondary" ariaLabel="Right tools" content={secondaryVerticalContent} />
+      )}
+      {showPrimaryEnd && (
+        <NavigationBar
+          placement="end"
+          variant={darkMode ? 'primary-accent' : 'primary'}
+          ariaLabel="Right navigation"
+          content={primaryVerticalContent}
+        />
+      )}
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/compositions/vertical.page.tsx b/pages/navigation-bar/compositions/vertical.page.tsx
new file mode 100644
index 0000000000..04c646e0e2
--- /dev/null
+++ b/pages/navigation-bar/compositions/vertical.page.tsx
@@ -0,0 +1,63 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import Toggle from '~components/toggle';
+
+import AppContext, { AppContextType } from '../../app/app-context';
+import {
+  filler,
+  layoutStyles,
+  primaryVerticalContent,
+  secondaryHorizontalContent,
+  secondaryVerticalContent,
+} from '../common';
+
+type PageContext = React.Context<AppContextType<{ darkMode: boolean; showSecondaryTop: boolean }>>;
+
+export default function VerticalCompositionPage() {
+  const {
+    urlParams: { darkMode, showSecondaryTop },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+
+  return (
+    <div style={{ display: 'flex', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      <NavigationBar
+        variant={darkMode ? 'primary-accent' : 'primary'}
+        placement="start"
+        ariaLabel="Primary navigation"
+        content={primaryVerticalContent}
+      />
+      <NavigationBar
+        variant="secondary"
+        placement="start"
+        ariaLabel="Secondary sidebar"
+        content={secondaryVerticalContent}
+      />
+      <div style={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: 0 }}>
+        {showSecondaryTop !== false && (
+          <NavigationBar variant="secondary" ariaLabel="Toolbar" content={secondaryHorizontalContent} />
+        )}
+        <div style={layoutStyles.scrollable}>
+          <Box variant="h1">NavigationBar — Vertical composition</Box>
+          <SpaceBetween size="s">
+            <Toggle checked={darkMode === true} onChange={({ detail }) => setUrlParams({ darkMode: detail.checked })}>
+              primary-accent variant
+            </Toggle>
+            <Toggle
+              checked={showSecondaryTop !== false}
+              onChange={({ detail }) => setUrlParams({ showSecondaryTop: detail.checked })}
+            >
+              Show secondary top toolbar
+            </Toggle>
+          </SpaceBetween>
+          <Box padding={{ top: 'm' }}>{filler}</Box>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/compositions/with-drawer.page.tsx b/pages/navigation-bar/compositions/with-drawer.page.tsx
new file mode 100644
index 0000000000..4bd1524fc3
--- /dev/null
+++ b/pages/navigation-bar/compositions/with-drawer.page.tsx
@@ -0,0 +1,114 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import Drawer from '~components/drawer';
+import Header from '~components/header';
+import Link from '~components/link';
+import NavigationBar from '~components/navigation-bar';
+import SideNavigation from '~components/side-navigation';
+import SpaceBetween from '~components/space-between';
+
+import { primaryHorizontalContent } from '../common';
+
+type DrawerId = 'navigation' | 'help' | 'settings' | null;
+
+const navItems = [
+  { icon: 'menu' as const, id: 'navigation' as const, label: 'Navigation' },
+  { icon: 'status-info' as const, id: 'help' as const, label: 'Help' },
+  { icon: 'settings' as const, id: 'settings' as const, label: 'Settings' },
+];
+
+function ToolbarContent({ activeDrawer, onToggle }: { activeDrawer: DrawerId; onToggle: (id: DrawerId) => void }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', width: '100%', padding: '8px 20px' }}>
+      <SpaceBetween size="xs" direction="horizontal" alignItems="center">
+        {navItems.map(item => (
+          <Button
+            key={item.id}
+            iconName={item.icon}
+            variant={activeDrawer === item.id ? 'primary' : 'icon'}
+            ariaLabel={item.label}
+            onClick={() => onToggle(item.id)}
+          />
+        ))}
+      </SpaceBetween>
+      <div style={{ marginInlineStart: 'auto' }}>
+        <Box variant="span" fontSize="body-s">
+          Home / Projects / my-service
+        </Box>
+      </div>
+    </div>
+  );
+}
+
+const drawers: Record<string, React.ReactNode> = {
+  navigation: (
+    <Drawer header={<Header variant="h2">Navigation</Header>}>
+      <SideNavigation
+        header={{ text: 'CloudManager', href: '#' }}
+        items={[
+          { type: 'link', text: 'Dashboard', href: '#' },
+          { type: 'link', text: 'Projects', href: '#' },
+          { type: 'link', text: 'Deployments', href: '#' },
+          { type: 'divider' },
+          { type: 'link', text: 'Settings', href: '#' },
+        ]}
+      />
+    </Drawer>
+  ),
+  help: (
+    <Drawer header={<Header variant="h2">Help</Header>}>
+      <SpaceBetween size="m">
+        <Box>Get started with CloudManager.</Box>
+        <Link href="#" external={true}>
+          Getting started guide
+        </Link>
+        <Link href="#" external={true}>
+          API reference
+        </Link>
+      </SpaceBetween>
+    </Drawer>
+  ),
+  settings: (
+    <Drawer header={<Header variant="h2">Settings</Header>}>
+      <Box>Theme, language, and notification preferences.</Box>
+    </Drawer>
+  ),
+};
+
+export default function WithDrawerPage() {
+  const [activeDrawer, setActiveDrawer] = useState<DrawerId>(null);
+  const toggleDrawer = (id: DrawerId) => setActiveDrawer(prev => (prev === id ? null : id));
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      <NavigationBar variant="primary-accent" ariaLabel="Main navigation" content={primaryHorizontalContent} />
+      <NavigationBar
+        variant="secondary"
+        ariaLabel="Toolbar"
+        content={<ToolbarContent activeDrawer={activeDrawer} onToggle={toggleDrawer} />}
+      />
+      <div style={{ display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }}>
+        {activeDrawer && (
+          <div style={{ width: 280, borderRight: '1px solid #e9ebed', overflow: 'auto', flexShrink: 0 }} tabIndex={0}>
+            {drawers[activeDrawer]}
+          </div>
+        )}
+        <div style={{ flex: 1, overflow: 'auto', padding: '24px' }} tabIndex={0}>
+          <SpaceBetween size="l">
+            <Box variant="h1">Dashboard</Box>
+            <Box>Click the toolbar buttons to toggle drawers.</Box>
+            {Array.from({ length: 30 }, (_, i) => (
+              <Box key={i} padding={{ vertical: 'xxs' }}>
+                Content line {i + 1}
+              </Box>
+            ))}
+          </SpaceBetween>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/index.page.tsx b/pages/navigation-bar/index.page.tsx
new file mode 100644
index 0000000000..066b1eb2d1
--- /dev/null
+++ b/pages/navigation-bar/index.page.tsx
@@ -0,0 +1,51 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Link from '~components/link';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+
+export default function NavigationBarIndexPage() {
+  return (
+    <SimplePage title="NavigationBar">
+      <SpaceBetween size="l">
+        <section>
+          <Box variant="h2">Variants & Placements</Box>
+          <SpaceBetween size="xs">
+            <Link href="#/navigation-bar/simple">Simple (all variants)</Link>
+            <Link href="#/navigation-bar/primary">Primary (placement selector)</Link>
+            <Link href="#/navigation-bar/secondary">Secondary (placement selector)</Link>
+            <Link href="#/navigation-bar/mode">Primary-accent (dark/branded)</Link>
+            <Link href="#/navigation-bar/roles">Roles (navigation, banner, region)</Link>
+          </SpaceBetween>
+        </section>
+
+        <section>
+          <Box variant="h2">Compositions</Box>
+          <SpaceBetween size="xs">
+            <Link href="#/navigation-bar/compositions/horizontal">Horizontal: primary top + secondary</Link>
+            <Link href="#/navigation-bar/compositions/vertical">Vertical: primary start + secondary</Link>
+            <Link href="#/navigation-bar/compositions/horizontal-primary">
+              Horizontal primary (complex — add/remove bars)
+            </Link>
+            <Link href="#/navigation-bar/compositions/vertical-primary">
+              Vertical primary (complex — add/remove bars)
+            </Link>
+            <Link href="#/navigation-bar/compositions/with-drawer">Navigation bar with drawer</Link>
+          </SpaceBetween>
+        </section>
+
+        <section>
+          <Box variant="h2">Use cases</Box>
+          <SpaceBetween size="xs">
+            <Link href="#/navigation-bar/top-navigation-replica">TopNavigation replica</Link>
+            <Link href="#/navigation-bar/vertical-nav-with-labels">Expandable vertical sidebar</Link>
+          </SpaceBetween>
+        </section>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/navigation-bar/mode.page.tsx b/pages/navigation-bar/mode.page.tsx
new file mode 100644
index 0000000000..7ff9188b20
--- /dev/null
+++ b/pages/navigation-bar/mode.page.tsx
@@ -0,0 +1,47 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+
+import { primaryHorizontalContent, primaryVerticalContent } from './common';
+
+export default function ModePage() {
+  return (
+    <Box padding="l">
+      <SpaceBetween size="xl">
+        <Box variant="h1">primary-accent — dark/branded appearance</Box>
+
+        <div>
+          <Box variant="h2" padding={{ bottom: 'xxs' }}>
+            Primary-accent (horizontal)
+          </Box>
+          <NavigationBar
+            variant="primary-accent"
+            ariaLabel="Primary accent horizontal"
+            content={primaryHorizontalContent}
+          />
+        </div>
+
+        <div>
+          <Box variant="h2" padding={{ bottom: 'xxs' }}>
+            Primary-accent (vertical start)
+          </Box>
+          <div style={{ display: 'flex', height: '300px' }}>
+            <NavigationBar
+              variant="primary-accent"
+              placement="start"
+              ariaLabel="Primary accent vertical"
+              content={primaryVerticalContent}
+            />
+            <Box padding="m" color="text-body-secondary">
+              Content area
+            </Box>
+          </div>
+        </div>
+      </SpaceBetween>
+    </Box>
+  );
+}
diff --git a/pages/navigation-bar/primary.page.tsx b/pages/navigation-bar/primary.page.tsx
new file mode 100644
index 0000000000..e187c71a99
--- /dev/null
+++ b/pages/navigation-bar/primary.page.tsx
@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import Select from '~components/select';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { filler, primaryHorizontalContent, primaryVerticalContent } from './common';
+
+type PageContext = React.Context<AppContextType<{ placement: string }>>;
+
+export default function PrimaryPage() {
+  const {
+    urlParams: { placement = 'top' },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+  const p = placement as 'top' | 'bottom' | 'start' | 'end';
+  const isVertical = p === 'start' || p === 'end';
+  const content = isVertical ? primaryVerticalContent : primaryHorizontalContent;
+
+  const scrollableContent = (
+    <div style={{ flex: 1, overflow: 'auto', padding: '16px' }} tabIndex={0}>
+      <Box variant="h1">NavigationBar — Primary</Box>
+      <Box padding={{ vertical: 's' }}>
+        <Select
+          selectedOption={{ value: placement, label: `placement="${placement}"` }}
+          options={[
+            { value: 'top', label: 'placement="top"' },
+            { value: 'bottom', label: 'placement="bottom"' },
+            { value: 'start', label: 'placement="start"' },
+            { value: 'end', label: 'placement="end"' },
+          ]}
+          onChange={({ detail }) => setUrlParams({ placement: detail.selectedOption.value! })}
+        />
+      </Box>
+      {filler}
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: isVertical ? 'row' : 'column',
+        height: 'calc(100dvh - var(--app-header-height, 40px))',
+      }}
+    >
+      {(p === 'top' || p === 'start') && (
+        <NavigationBar variant="primary" placement={p} ariaLabel="Primary navigation" content={content} />
+      )}
+      {scrollableContent}
+      {(p === 'bottom' || p === 'end') && (
+        <NavigationBar variant="primary" placement={p} ariaLabel="Primary navigation" content={content} />
+      )}
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/roles.page.tsx b/pages/navigation-bar/roles.page.tsx
new file mode 100644
index 0000000000..8356d0c473
--- /dev/null
+++ b/pages/navigation-bar/roles.page.tsx
@@ -0,0 +1,50 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+
+import { primaryHorizontalContent, secondaryHorizontalContent } from './common';
+
+export default function RolesPage() {
+  return (
+    <Box padding="l">
+      <SpaceBetween size="xl">
+        <Box variant="h1">NavigationBar — Role prop</Box>
+
+        <div>
+          <Box variant="h2" padding={{ bottom: 'xxs' }}>
+            role=&quot;navigation&quot; (default) — renders &lt;nav&gt;
+          </Box>
+          <NavigationBar ariaLabel="Main navigation" content={primaryHorizontalContent} />
+        </div>
+
+        <div>
+          <Box variant="h2" padding={{ bottom: 'xxs' }}>
+            role=&quot;banner&quot; — renders &lt;header&gt;
+          </Box>
+          <NavigationBar
+            role="banner"
+            variant="primary-accent"
+            ariaLabel="Site header"
+            content={primaryHorizontalContent}
+          />
+        </div>
+
+        <div>
+          <Box variant="h2" padding={{ bottom: 'xxs' }}>
+            role=&quot;region&quot; — renders &lt;section role=&quot;region&quot;&gt;
+          </Box>
+          <NavigationBar
+            role="region"
+            variant="secondary"
+            ariaLabel="Actions toolbar"
+            content={secondaryHorizontalContent}
+          />
+        </div>
+      </SpaceBetween>
+    </Box>
+  );
+}
diff --git a/pages/navigation-bar/secondary.page.tsx b/pages/navigation-bar/secondary.page.tsx
new file mode 100644
index 0000000000..a3b5703d52
--- /dev/null
+++ b/pages/navigation-bar/secondary.page.tsx
@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useContext } from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import Select from '~components/select';
+
+import AppContext, { AppContextType } from '../app/app-context';
+import { filler, secondaryHorizontalContent, secondaryVerticalContent } from './common';
+
+type PageContext = React.Context<AppContextType<{ placement: string }>>;
+
+export default function SecondaryPage() {
+  const {
+    urlParams: { placement = 'top' },
+    setUrlParams,
+  } = useContext(AppContext as PageContext);
+  const p = placement as 'top' | 'bottom' | 'start' | 'end';
+  const isVertical = p === 'start' || p === 'end';
+  const content = isVertical ? secondaryVerticalContent : secondaryHorizontalContent;
+
+  const scrollableContent = (
+    <div style={{ flex: 1, overflow: 'auto', padding: '16px' }} tabIndex={0}>
+      <Box variant="h1">NavigationBar — Secondary</Box>
+      <Box padding={{ vertical: 's' }}>
+        <Select
+          selectedOption={{ value: placement, label: `placement="${placement}"` }}
+          options={[
+            { value: 'top', label: 'placement="top"' },
+            { value: 'bottom', label: 'placement="bottom"' },
+            { value: 'start', label: 'placement="start"' },
+            { value: 'end', label: 'placement="end"' },
+          ]}
+          onChange={({ detail }) => setUrlParams({ placement: detail.selectedOption.value! })}
+        />
+      </Box>
+      {filler}
+    </div>
+  );
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: isVertical ? 'row' : 'column',
+        height: 'calc(100dvh - var(--app-header-height, 40px))',
+      }}
+    >
+      {(p === 'top' || p === 'start') && (
+        <NavigationBar variant="secondary" placement={p} ariaLabel="Secondary navigation" content={content} />
+      )}
+      {scrollableContent}
+      {(p === 'bottom' || p === 'end') && (
+        <NavigationBar variant="secondary" placement={p} ariaLabel="Secondary navigation" content={content} />
+      )}
+    </div>
+  );
+}
diff --git a/pages/navigation-bar/simple.page.tsx b/pages/navigation-bar/simple.page.tsx
new file mode 100644
index 0000000000..a2843d8e3e
--- /dev/null
+++ b/pages/navigation-bar/simple.page.tsx
@@ -0,0 +1,42 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+import { primaryHorizontalContent, secondaryHorizontalContent } from './common';
+
+export default function NavigationBarSimplePage() {
+  return (
+    <SimplePage title="NavigationBar — Simple">
+      <SpaceBetween size="l">
+        <Box>
+          <Box variant="h2">Primary (light)</Box>
+          <Box variant="p" color="text-body-secondary">
+            Default page-matching header. Child components keep their normal colors.
+          </Box>
+          <NavigationBar variant="primary" ariaLabel="Primary nav" content={primaryHorizontalContent} />
+        </Box>
+
+        <Box>
+          <Box variant="h2">Primary accent (inverted)</Box>
+          <Box variant="p" color="text-body-secondary">
+            Branded dark header. Child components adapt via the navigation-bar visual context.
+          </Box>
+          <NavigationBar variant="primary-accent" ariaLabel="Primary accent nav" content={primaryHorizontalContent} />
+        </Box>
+
+        <Box>
+          <Box variant="h2">Secondary</Box>
+          <Box variant="p" color="text-body-secondary">
+            Neutral toolbar style matching the AppLayout toolbar.
+          </Box>
+          <NavigationBar variant="secondary" ariaLabel="Secondary toolbar" content={secondaryHorizontalContent} />
+        </Box>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/navigation-bar/top-navigation-replica.page.tsx b/pages/navigation-bar/top-navigation-replica.page.tsx
new file mode 100644
index 0000000000..32f446d685
--- /dev/null
+++ b/pages/navigation-bar/top-navigation-replica.page.tsx
@@ -0,0 +1,233 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import InternalButton from '~components/button/internal';
+import ButtonDropdown from '~components/button-dropdown';
+import Input from '~components/input';
+import MenuDropdown from '~components/internal/components/menu-dropdown';
+import Link from '~components/link';
+import InternalLink from '~components/link/internal';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+import TopNavigation from '~components/top-navigation';
+
+import { SimplePage } from '../app/templates';
+
+const utilities = (
+  <div style={{ display: 'flex', alignItems: 'stretch', alignSelf: 'stretch' }}>
+    <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', position: 'relative' }}>
+      <Button variant="icon" iconName="notification" ariaLabel="Notifications" />
+      <span
+        style={{
+          position: 'absolute',
+          insetInlineEnd: 0,
+          insetBlock: '8px',
+          width: '1px',
+          background: 'rgba(255,255,255,0.2)',
+        }}
+      />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', position: 'relative' }}>
+      <Button variant="icon" iconName="settings" ariaLabel="Settings" />
+      <span
+        style={{
+          position: 'absolute',
+          insetInlineEnd: 0,
+          insetBlock: '8px',
+          width: '1px',
+          background: 'rgba(255,255,255,0.2)',
+        }}
+      />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'center', padding: '0 8px' }}>
+      <ButtonDropdown
+        items={[
+          { id: 'profile', text: 'Profile' },
+          { id: 'preferences', text: 'Preferences' },
+          { id: 'security', text: 'Security' },
+          { id: 'signout', text: 'Sign out' },
+        ]}
+      >
+        jane@example.com
+      </ButtonDropdown>
+    </div>
+  </div>
+);
+
+const internalUtilities = (
+  <div style={{ display: 'flex', alignItems: 'stretch', alignSelf: 'stretch' }}>
+    <div style={{ display: 'flex', alignItems: 'center', padding: '0 12px', position: 'relative' }}>
+      <InternalButton variant="icon" iconName="notification" ariaLabel="Notifications" badge={true} />
+      <span
+        style={{
+          position: 'absolute',
+          insetInlineEnd: 0,
+          insetBlock: '8px',
+          width: '1px',
+          background: 'rgba(255,255,255,0.2)',
+        }}
+      />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'stretch', padding: '0 12px', position: 'relative' }}>
+      <MenuDropdown
+        iconName="settings"
+        ariaLabel="Settings"
+        title="Settings"
+        items={[
+          { id: 'settings-org', text: 'Organizational settings' },
+          { id: 'settings-project', text: 'Project settings' },
+        ]}
+      />
+      <span
+        style={{
+          position: 'absolute',
+          insetInlineEnd: 0,
+          insetBlock: '8px',
+          width: '1px',
+          background: 'rgba(255,255,255,0.2)',
+        }}
+      />
+    </div>
+    <div style={{ display: 'flex', alignItems: 'stretch', padding: '0 8px' }}>
+      <MenuDropdown
+        iconName="user-profile"
+        items={[
+          { id: 'profile', text: 'Profile' },
+          { id: 'preferences', text: 'Preferences' },
+          { id: 'security', text: 'Security' },
+          { id: 'signout', text: 'Sign out' },
+        ]}
+      >
+        jane@example.com
+      </MenuDropdown>
+    </div>
+  </div>
+);
+
+const search = (
+  <div style={{ flex: 1, display: 'flex', justifyContent: 'center', padding: '0 20px' }}>
+    <div style={{ width: '100%', maxWidth: '340px' }}>
+      <Input type="search" placeholder="Search" ariaLabel="Search" value="" onChange={() => {}} />
+    </div>
+  </div>
+);
+
+export default function TopNavigationReplicaPage() {
+  return (
+    <SimplePage title="NavigationBar — TopNavigation replica">
+      <SpaceBetween size="xl">
+        {/* Reference */}
+        <Box>
+          <Box variant="h2">Reference: TopNavigation</Box>
+          <TopNavigation
+            identity={{ href: '#', title: 'Service Name' }}
+            search={<Input type="search" placeholder="Search" ariaLabel="Search" value="" onChange={() => {}} />}
+            utilities={[
+              { type: 'button', iconName: 'notification', ariaLabel: 'Notifications', badge: true },
+              { type: 'button', iconName: 'settings', ariaLabel: 'Settings' },
+              {
+                type: 'menu-dropdown',
+                text: 'jane@example.com',
+                description: 'jane@example.com',
+                iconName: 'user-profile',
+                items: [
+                  { id: 'profile', text: 'Profile' },
+                  { id: 'preferences', text: 'Preferences' },
+                  { id: 'security', text: 'Security' },
+                  { id: 'signout', text: 'Sign out' },
+                ],
+              },
+            ]}
+          />
+        </Box>
+
+        {/* Replica using internal components */}
+        <Box>
+          <Box variant="h2">Replica using internal components</Box>
+          <Box variant="p" color="text-body-secondary">
+            Uses InternalLink variant=&quot;top-navigation&quot;, InternalButton with badge, and MenuDropdown. Closest
+            match to TopNavigation.
+          </Box>
+          <NavigationBar
+            variant="primary-accent"
+            ariaLabel="Main navigation (internal)"
+            content={
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  paddingInlineStart: '24px',
+                  minHeight: '48px',
+                }}
+              >
+                <Box fontWeight="bold">
+                  <InternalLink href="#" fontSize="heading-m" variant="top-navigation">
+                    Service Name
+                  </InternalLink>
+                </Box>
+                {search}
+                {internalUtilities}
+              </div>
+            }
+          />
+        </Box>
+
+        {/* Replica using public components */}
+        <Box>
+          <Box variant="h2">Replica using public components</Box>
+          <Box variant="p" color="text-body-secondary">
+            Uses public Link and ButtonDropdown. Shows gaps: link underline on hover, no badge, no flat dropdown
+            trigger.
+          </Box>
+          <NavigationBar
+            variant="primary-accent"
+            ariaLabel="Main navigation (public)"
+            content={
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  width: '100%',
+                  paddingInlineStart: '24px',
+                  minHeight: '48px',
+                }}
+              >
+                <Box fontWeight="bold">
+                  <Link href="#" fontSize="heading-m">
+                    Service Name
+                  </Link>
+                </Box>
+                {search}
+                {utilities}
+              </div>
+            }
+          />
+        </Box>
+
+        {/* Gaps */}
+        <Box>
+          <Box variant="h2">Known gaps (public components only)</Box>
+          <ul>
+            <li>
+              <strong>Link underline on hover</strong> — public Link shows underline. Internal uses
+              variant=&quot;top-navigation&quot; which removes it.
+            </li>
+            <li>
+              <strong>ButtonDropdown navigation styling</strong> — no flat trigger variant publicly available.
+            </li>
+            <li>
+              <strong>Badge on icon buttons</strong> — not exposed on public Button.
+            </li>
+            <li>
+              <strong>Responsive overflow</strong> — by design, builder handles responsive behavior.
+            </li>
+          </ul>
+        </Box>
+      </SpaceBetween>
+    </SimplePage>
+  );
+}
diff --git a/pages/navigation-bar/vertical-nav-with-labels.page.tsx b/pages/navigation-bar/vertical-nav-with-labels.page.tsx
new file mode 100644
index 0000000000..a57ccfd9e6
--- /dev/null
+++ b/pages/navigation-bar/vertical-nav-with-labels.page.tsx
@@ -0,0 +1,199 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Badge from '~components/badge';
+import Box from '~components/box';
+import Button from '~components/button';
+import Icon from '~components/icon';
+import NavigationBar from '~components/navigation-bar';
+import SpaceBetween from '~components/space-between';
+
+const sections = [
+  {
+    items: [
+      { icon: 'grid-view' as const, label: 'Dashboard', active: true },
+      { icon: 'folder' as const, label: 'Projects', badge: '3' },
+      { icon: 'share' as const, label: 'Deployments' },
+      { icon: 'status-positive' as const, label: 'Health' },
+      { icon: 'group-active' as const, label: 'Team' },
+    ],
+  },
+  {
+    title: 'Resources',
+    items: [
+      { icon: 'search' as const, label: 'Explorer' },
+      { icon: 'ticket' as const, label: 'Billing' },
+      { icon: 'settings' as const, label: 'Settings' },
+    ],
+  },
+];
+
+function NavItem({
+  icon,
+  label,
+  active,
+  badge,
+  expanded,
+}: {
+  icon: any;
+  label: string;
+  active?: boolean;
+  badge?: string;
+  expanded: boolean;
+}) {
+  const [hovered, setHovered] = useState(false);
+  return (
+    <div
+      role="link"
+      tabIndex={0}
+      aria-label={label}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '10px',
+        padding: expanded ? '8px 12px' : '8px',
+        justifyContent: expanded ? 'flex-start' : 'center',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        backgroundColor: active ? 'rgba(0, 115, 187, 0.1)' : hovered ? 'rgba(0, 0, 0, 0.04)' : 'transparent',
+        fontWeight: active ? 600 : 400,
+        whiteSpace: 'nowrap',
+      }}
+    >
+      <Icon name={icon} variant={active ? 'link' : 'normal'} />
+      {expanded && <span style={{ flex: 1 }}>{label}</span>}
+      {expanded && badge && <Badge color="blue">{badge}</Badge>}
+    </div>
+  );
+}
+
+function SidebarContent({ expanded, onToggle }: { expanded: boolean; onToggle: () => void }) {
+  return (
+    <div
+      style={{
+        width: expanded ? 240 : 56,
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        transition: 'width 200ms',
+        overflow: 'hidden',
+      }}
+    >
+      <div
+        style={{
+          padding: expanded ? '12px 16px' : '12px 0',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          justifyContent: expanded ? 'flex-start' : 'center',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <div
+          role="button"
+          tabIndex={0}
+          aria-label={expanded ? 'Collapse sidebar' : 'Expand sidebar'}
+          onClick={onToggle}
+          onKeyDown={e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+              e.preventDefault();
+              onToggle();
+            }
+          }}
+          style={{ cursor: 'pointer' }}
+        >
+          <Box fontSize="heading-m" fontWeight="bold">
+            <span style={{ fontStyle: 'italic' }}>aws</span>
+          </Box>
+        </div>
+        {expanded && (
+          <>
+            <Box fontSize="heading-s" fontWeight="bold">
+              CloudManager
+            </Box>
+            <div style={{ marginInlineStart: 'auto' }}>
+              <Button iconName="angle-left" variant="icon" ariaLabel="Collapse sidebar" onClick={onToggle} />
+            </div>
+          </>
+        )}
+      </div>
+      <div style={{ flex: 1, overflow: 'auto', padding: expanded ? '0 8px' : '0 4px' }} tabIndex={0}>
+        <SpaceBetween size="m" direction="vertical">
+          {sections.map((section, si) => (
+            <div key={si}>
+              {expanded && section.title && (
+                <Box
+                  variant="small"
+                  color="text-body-secondary"
+                  padding={{ horizontal: 'xs', bottom: 'xxs' }}
+                  fontWeight="bold"
+                >
+                  {section.title}
+                </Box>
+              )}
+              <SpaceBetween size="xxs" direction="vertical">
+                {section.items.map(item => (
+                  <NavItem key={item.label} {...item} expanded={expanded} />
+                ))}
+              </SpaceBetween>
+            </div>
+          ))}
+        </SpaceBetween>
+      </div>
+      <div
+        style={{
+          padding: expanded ? '12px 16px' : '12px 0',
+          borderTop: '1px solid #e9ebed',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '10px',
+          justifyContent: expanded ? 'flex-start' : 'center',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        <Icon name="user-profile" />
+        {expanded && (
+          <div>
+            <Box fontWeight="bold" fontSize="body-s">
+              Jane Doe
+            </Box>
+            <Box variant="small" color="text-body-secondary">
+              jane@example.com
+            </Box>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function VerticalNavWithLabelsPage() {
+  const [expanded, setExpanded] = useState(true);
+
+  return (
+    <div style={{ display: 'flex', height: 'calc(100dvh - var(--app-header-height, 40px))' }}>
+      <NavigationBar
+        placement="start"
+        variant="secondary"
+        ariaLabel="Side navigation"
+        content={<SidebarContent expanded={expanded} onToggle={() => setExpanded(prev => !prev)} />}
+      />
+      <div style={{ flex: 1, padding: '24px', overflow: 'auto' }} tabIndex={0}>
+        <SpaceBetween size="l">
+          <Box variant="h1">Dashboard</Box>
+          <Box>
+            Click the <strong>aws</strong> logo or the collapse button to toggle the sidebar.
+          </Box>
+          {Array.from({ length: 30 }, (_, i) => (
+            <Box key={i} padding={{ vertical: 'xxs' }}>
+              Content line {i + 1}
+            </Box>
+          ))}
+        </SpaceBetween>
+      </div>
+    </div>
+  );
+}
diff --git a/src/__integ__/__snapshots__/themes.test.ts.snap b/src/__integ__/__snapshots__/themes.test.ts.snap
index df49bc3a94..f0849c8022 100644
--- a/src/__integ__/__snapshots__/themes.test.ts.snap
+++ b/src/__integ__/__snapshots__/themes.test.ts.snap
@@ -68,6 +68,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "border-width-icon-small": "2px",
   "border-width-item-card": "0px",
   "border-width-item-selected": "1px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
@@ -137,6 +139,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-layout-toolbar": "#ffffff",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
+  "color-background-navigation-bar-primary": "#ffffff",
+  "color-background-navigation-bar-secondary": "#ffffff",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
   "color-background-notification-grey": "#545b64",
@@ -236,6 +240,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-border-item-placeholder": "transparent",
   "color-border-item-selected": "#0073bb",
   "color-border-layout": "#d5dbdb",
+  "color-border-navigation-bar-primary": "#eaeded",
+  "color-border-navigation-bar-secondary": "#eaeded",
   "color-border-notification-stack-bar": "#2a2e33",
   "color-border-panel-header": "#eaeded",
   "color-border-popover": "#d5dbdb",
@@ -914,6 +920,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "border-width-icon-small": "2px",
   "border-width-item-card": "0px",
   "border-width-item-selected": "1px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
@@ -983,6 +991,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-layout-toolbar": "#2a2e33",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(22, 25, 31, 0.8)",
+  "color-background-navigation-bar-primary": "#2a2e33",
+  "color-background-navigation-bar-secondary": "#2a2e33",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
   "color-background-notification-grey": "#687078",
@@ -1082,6 +1092,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-border-item-placeholder": "transparent",
   "color-border-item-selected": "#00a1c9",
   "color-border-layout": "#414750",
+  "color-border-navigation-bar-primary": "#414750",
+  "color-border-navigation-bar-secondary": "#414750",
   "color-border-notification-stack-bar": "#2a2e33",
   "color-border-panel-header": "#414750",
   "color-border-popover": "#545b64",
@@ -1760,6 +1772,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "border-width-icon-small": "2px",
   "border-width-item-card": "0px",
   "border-width-item-selected": "1px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
@@ -1829,6 +1843,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-layout-toolbar": "#ffffff",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
+  "color-background-navigation-bar-primary": "#ffffff",
+  "color-background-navigation-bar-secondary": "#ffffff",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
   "color-background-notification-grey": "#545b64",
@@ -1928,6 +1944,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-border-item-placeholder": "transparent",
   "color-border-item-selected": "#0073bb",
   "color-border-layout": "#d5dbdb",
+  "color-border-navigation-bar-primary": "#eaeded",
+  "color-border-navigation-bar-secondary": "#eaeded",
   "color-border-notification-stack-bar": "#2a2e33",
   "color-border-panel-header": "#eaeded",
   "color-border-popover": "#d5dbdb",
@@ -2606,6 +2624,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "border-width-icon-small": "2px",
   "border-width-item-card": "0px",
   "border-width-item-selected": "1px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "1px",
   "border-width-token": "1px",
   "color-aws-squid-ink": "#232f3e",
@@ -2675,6 +2695,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-layout-toolbar": "#ffffff",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(242, 243, 243, 0.9)",
+  "color-background-navigation-bar-primary": "#ffffff",
+  "color-background-navigation-bar-secondary": "#ffffff",
   "color-background-notification-blue": "#0073bb",
   "color-background-notification-green": "#1d8102",
   "color-background-notification-grey": "#545b64",
@@ -2774,6 +2796,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-border-item-placeholder": "transparent",
   "color-border-item-selected": "#0073bb",
   "color-border-layout": "#d5dbdb",
+  "color-border-navigation-bar-primary": "#eaeded",
+  "color-border-navigation-bar-secondary": "#eaeded",
   "color-border-notification-stack-bar": "#2a2e33",
   "color-border-panel-header": "#eaeded",
   "color-border-popover": "#d5dbdb",
@@ -3452,6 +3476,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "border-width-icon-small": "2px",
   "border-width-item-card": "1px",
   "border-width-item-selected": "2px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
@@ -3521,6 +3547,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-layout-toolbar": "#ffffff",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
+  "color-background-navigation-bar-primary": "#ffffff",
+  "color-background-navigation-bar-secondary": "#ffffff",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
   "color-background-notification-grey": "#424650",
@@ -3620,6 +3648,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
   "color-border-layout": "#c6c6cd",
+  "color-border-navigation-bar-primary": "#c6c6cd",
+  "color-border-navigation-bar-secondary": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -4298,6 +4328,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-icon-small": "2px",
   "border-width-item-card": "1px",
   "border-width-item-selected": "2px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
@@ -4367,6 +4399,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toolbar": "#ffffff",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(35, 43, 55, 0.7)",
+  "color-background-navigation-bar-primary": "#ffffff",
+  "color-background-navigation-bar-secondary": "#ffffff",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
   "color-background-notification-grey": "#424650",
@@ -4466,6 +4500,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-item-placeholder": "#006ce0",
   "color-border-item-selected": "#006ce0",
   "color-border-layout": "#c6c6cd",
+  "color-border-navigation-bar-primary": "#c6c6cd",
+  "color-border-navigation-bar-secondary": "#c6c6cd",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#c6c6cd",
   "color-border-popover": "#b4b4bb",
@@ -5144,6 +5180,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-icon-small": "2px",
   "border-width-item-card": "1px",
   "border-width-item-selected": "2px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
@@ -5213,6 +5251,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toolbar": "#161d26",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
+  "color-background-navigation-bar-primary": "#161d26",
+  "color-background-navigation-bar-secondary": "#161d26",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
   "color-background-notification-grey": "#656871",
@@ -5312,6 +5352,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
   "color-border-layout": "#424650",
+  "color-border-navigation-bar-primary": "#424650",
+  "color-border-navigation-bar-secondary": "#424650",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#424650",
   "color-border-popover": "#656871",
@@ -5990,6 +6032,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "border-width-icon-small": "2px",
   "border-width-item-card": "1px",
   "border-width-item-selected": "2px",
+  "border-width-navigation-bar-primary": "1px",
+  "border-width-navigation-bar-secondary": "1px",
   "border-width-popover": "2px",
   "border-width-token": "2px",
   "color-aws-squid-ink": "#232f3e",
@@ -6059,6 +6103,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-layout-toolbar": "#161d26",
   "color-background-loading-bar-gen-ai": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
   "color-background-modal-overlay": "rgba(15, 20, 26, 0.7)",
+  "color-background-navigation-bar-primary": "#161d26",
+  "color-background-navigation-bar-secondary": "#161d26",
   "color-background-notification-blue": "#006ce0",
   "color-background-notification-green": "#00802f",
   "color-background-notification-grey": "#656871",
@@ -6158,6 +6204,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-border-item-placeholder": "#42b4ff",
   "color-border-item-selected": "#42b4ff",
   "color-border-layout": "#424650",
+  "color-border-navigation-bar-primary": "#424650",
+  "color-border-navigation-bar-secondary": "#424650",
   "color-border-notification-stack-bar": "#232b37",
   "color-border-panel-header": "#424650",
   "color-border-popover": "#656871",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 64d448c941..614b1c76b8 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -43226,6 +43226,3093 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         },
       },
     },
+    "navigation-bar": {
+      "tokens": {
+        "border-radius-action-card-default": {
+          "$description": "The border radius of default action cards.",
+          "$value": "16px",
+        },
+        "border-radius-action-card-embedded": {
+          "$description": "The border radius of embedded action cards.",
+          "$value": "8px",
+        },
+        "border-radius-alert": {
+          "$description": "The border radius of alerts.",
+          "$value": "12px",
+        },
+        "border-radius-badge": {
+          "$description": "The border radius of badges.",
+          "$value": "4px",
+        },
+        "border-radius-button": {
+          "$description": "The border radius of buttons and segmented control's segments.",
+          "$value": "20px",
+        },
+        "border-radius-calendar-day-focus-ring": {
+          "$description": "The border radius of the focused day in date picker and date range picker.",
+          "$value": "3px",
+        },
+        "border-radius-card-default": {
+          "$description": "The border radius of default cards.",
+          "$value": "16px",
+        },
+        "border-radius-card-embedded": {
+          "$description": "The border radius of embedded cards.",
+          "$value": "8px",
+        },
+        "border-radius-chat-bubble": {
+          "$description": "The border radius of chat bubbles.",
+          "$value": "8px",
+        },
+        "border-radius-container": {
+          "$description": "The border radius of containers. Also used in container-based components like table, cards, expandable section, and modal.",
+          "$value": "16px",
+        },
+        "border-radius-control-circular-focus-ring": {
+          "$description": "The border radius of the focus indicator of circular controls. For example: radio button.",
+          "$value": "4px",
+        },
+        "border-radius-control-default-focus-ring": {
+          "$description": "The border radius of the focus indicator of interactive elements. For example: button, link, toggle, pagination controls, expandable section header, popover trigger.",
+          "$value": "4px",
+        },
+        "border-radius-dropdown": {
+          "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
+          "$value": "8px",
+        },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
+        "border-radius-flashbar": {
+          "$description": "The border radius of flash messages in flashbars.",
+          "$value": "12px",
+        },
+        "border-radius-input": {
+          "$description": "The border radius of form controls. For example: input, select.",
+          "$value": "8px",
+        },
+        "border-radius-item": {
+          "$description": "The border radius of items that can be selected from a list. For example: select options, table rows, calendar days.",
+          "$value": "8px",
+        },
+        "border-radius-popover": {
+          "$description": "The border radius of popovers.",
+          "$value": "8px",
+        },
+        "border-radius-tabs-focus-ring": {
+          "$description": "The border radius of tabs' focus indicator. Used in tabs and in the code editor status bar.",
+          "$value": "20px",
+        },
+        "border-radius-tiles": {
+          "$description": "The border radius of tiles.",
+          "$value": "8px",
+        },
+        "border-radius-token": {
+          "$description": "The border radius of tokens. For example: token groups, multiselect tokens, property filter tokens.",
+          "$value": "8px",
+        },
+        "border-radius-tutorial-panel-item": {
+          "$description": "The border radius of tutorials inside a tutorial panel.",
+          "$value": "8px",
+        },
+        "border-width-alert": {
+          "$description": "The border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-alert-block-end": {
+          "$description": "The block-end border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-alert-block-start": {
+          "$description": "The block-start border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-alert-inline-end": {
+          "$description": "The inline-end border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-alert-inline-start": {
+          "$description": "The inline-start border width of alerts.",
+          "$value": "2px",
+        },
+        "border-width-button": {
+          "$description": "The border width of buttons.",
+          "$value": "2px",
+        },
+        "border-width-card": {
+          "$description": "The border width of a card.",
+          "$value": "1px",
+        },
+        "border-width-card-selected": {
+          "$description": "The border width of a selected card.",
+          "$value": "2px",
+        },
+        "border-width-dropdown": {
+          "$description": "The border width of dropdowns.",
+          "$value": "2px",
+        },
+        "border-width-field": {
+          "$description": "The border width of form fields.",
+          "$value": "1px",
+        },
+        "border-width-icon-big": {
+          "$description": "The visual stroke width of big icons.",
+          "$value": "3px",
+        },
+        "border-width-icon-large": {
+          "$description": "The visual stroke width of large icons.",
+          "$value": "4px",
+        },
+        "border-width-icon-medium": {
+          "$description": "The visual stroke width of medium icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-normal": {
+          "$description": "The visual stroke width of normal icons.",
+          "$value": "2px",
+        },
+        "border-width-icon-small": {
+          "$description": "The visual stroke width of small icons.",
+          "$value": "2px",
+        },
+        "border-width-item-selected": {
+          "$description": "The border width of selected items, like table rows.",
+          "$value": "2px",
+        },
+        "border-width-popover": {
+          "$description": "The border width of popovers.",
+          "$value": "2px",
+        },
+        "border-width-token": {
+          "$description": "The border width of tokens.",
+          "$value": "2px",
+        },
+        "color-background-avatar-default": {
+          "$description": "The default background color of avatars.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-avatar-gen-ai": {
+          "$description": "The gen-ai background color of avatars.",
+          "$value": {
+            "dark": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+            "light": "radial-gradient(circle farthest-corner at top right, #b8e7ff 0%, #0099ff 25%, #5c7fff 40% , #8575ff 60%, #962eff 80%)",
+          },
+        },
+        "color-background-button-link-active": {
+          "$description": "The background color of link buttons in active state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-button-link-default": {
+          "$description": "The background color of link buttons in default state.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-button-link-disabled": {
+          "$description": "The background color of link buttons in disabled state.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-button-link-hover": {
+          "$description": "The background color of link buttons in hover state.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-button-normal-active": {
+          "$description": "The background color of normal buttons in active state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-button-normal-default": {
+          "$description": "The default background color of normal buttons.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-button-normal-disabled": {
+          "$description": "The background color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-button-normal-hover": {
+          "$description": "The background color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-button-primary-active": {
+          "$description": "The background color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-button-primary-default": {
+          "$description": "The default background color of primary buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-button-primary-disabled": {
+          "$description": "The background color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-background-button-primary-hover": {
+          "$description": "The background color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-card": {
+          "$description": "The background color of a card.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-cell-shaded": {
+          "$description": "The background color of shaded table cells.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-chat-bubble-incoming": {
+          "$description": "The background color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-chat-bubble-outgoing": {
+          "$description": "The background color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-background-container-content": {
+          "$description": "The background color of container main content areas. For example: content areas of form sections, containers, tables, and cards.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-container-header": {
+          "$description": "The background color of container headers. For example: headers of form sections, containers, tables, and card collections.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-checked": {
+          "$description": "The background color of a checked form control. For example: background fill of a selected radio button, checked checkbox, and toggle that is switched on.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-control-default": {
+          "$description": "The default background color of form controls. For example: radio buttons and checkboxes default background fill color.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-control-disabled": {
+          "$description": "The background color of a disabled form control. For example: background fill of a disabled radio button and checkbox.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dialog": {
+          "$description": "The background color of the feedback/input dialogue box.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-dropdown-item-default": {
+          "$description": "The default background color of dropdown items. For example: select, multiselect, autosuggest, and datepicker dropdown backgrounds.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-dropdown-item-filter-match": {
+          "$description": "The background color of text that matches a user's query. For example: the background of text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-dropdown-item-hover": {
+          "$description": "The background color of dropdown items on hover. For example: background of hovered items in select, multiselect, autosuggest, and datepicker dropdowns.",
+          "$value": {
+            "dark": "#131920",
+            "light": "#131920",
+          },
+        },
+        "color-background-home-header": {
+          "$description": "The background color of the home header, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-background-input-default": {
+          "$description": "The default background color of form inputs. For example: background fill of an input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-input-disabled": {
+          "$description": "The background color of a disabled form input. For example: background fill of a disabled input, textarea, autosuggest, and trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-item-selected": {
+          "$description": "The background color of a selected item. For example: tokens, selected table rows, cards, and tile backgrounds.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-layout-main": {
+          "$description": "The background color of the main content area on a page. For example: content area in app layout.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-layout-toggle-active": {
+          "$description": "The background color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-default": {
+          "$description": "The default background color of the app layout toggle button.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-background-layout-toggle-hover": {
+          "$description": "The background color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-layout-toggle-selected-active": {
+          "$description": "The background color of the app layout toggle button when it's selected and active.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-default": {
+          "$description": "The default background color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-layout-toggle-selected-hover": {
+          "$description": "The background color of the app layout toggle button on hover when it's selected.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-layout-toolbar": {
+          "$description": "The background color of the app layout's toolbar. For example: The toolbar bar containing breadcrumbs and toggle buttons.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-loading-bar-gen-ai": {
+          "$description": "The background color of gen-ai loading bars.",
+          "$value": {
+            "dark": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+            "light": "linear-gradient(90deg, #b8e7ff 0%, #0099ff 10%, #5c7fff 24%, #8575ff 50%, #962eff 76%, #0099ff 90%, #b8e7ff 100%)",
+          },
+        },
+        "color-background-notification-blue": {
+          "$description": "Background color for blue notifications. For example: blue badges and info flash messages.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-background-notification-green": {
+          "$description": "Background color for green notifications. For example: green badges and success flash messages.",
+          "$value": {
+            "dark": "#00802f",
+            "light": "#00802f",
+          },
+        },
+        "color-background-notification-grey": {
+          "$description": "Background color for grey notifications. For example: grey badges.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-red": {
+          "$description": "Background color for red notifications. For example: red badges and error flash messages.",
+          "$value": {
+            "dark": "#db0000",
+            "light": "#db0000",
+          },
+        },
+        "color-background-notification-severity-critical": {
+          "$description": "Background color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#870303",
+          },
+        },
+        "color-background-notification-severity-high": {
+          "$description": "Background color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ce3311",
+          },
+        },
+        "color-background-notification-severity-low": {
+          "$description": "Background color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#f2cd54",
+            "light": "#f2cd54",
+          },
+        },
+        "color-background-notification-severity-medium": {
+          "$description": "Background color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#f89256",
+          },
+        },
+        "color-background-notification-severity-neutral": {
+          "$description": "Background color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-notification-yellow": {
+          "$description": "Background color for yellow notifications. For example: yellow badges and warning flash messages.",
+          "$value": {
+            "dark": "#ffe347",
+            "light": "#ffe347",
+          },
+        },
+        "color-background-popover": {
+          "$description": "Background color for the popover container.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-progress-bar-default": {
+          "$description": "The default background color of the progress bar.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-progress-bar-value-default": {
+          "$description": "The default background color of the progress bar value.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-active": {
+          "$description": "The background color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-segment-default": {
+          "$description": "The background color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-disabled": {
+          "$description": "The background color of disabled segments in a segmented control.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-background-segment-hover": {
+          "$description": "The background color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#1b232d",
+            "light": "#1b232d",
+          },
+        },
+        "color-background-slider-handle-active": {
+          "$description": "The background color of the slider handle in active state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-slider-handle-default": {
+          "$description": "The default background color of the slider handle.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-slider-range-active": {
+          "$description": "The background color of the slider range in active state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-background-slider-range-default": {
+          "$description": "The default background color of the slider range.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-background-slider-track-default": {
+          "$description": "The default background color of the slider track.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-background-status-error": {
+          "$description": "The background color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#1f0000",
+            "light": "#1f0000",
+          },
+        },
+        "color-background-status-info": {
+          "$description": "The background color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-background-status-success": {
+          "$description": "The background color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#001401",
+            "light": "#001401",
+          },
+        },
+        "color-background-status-warning": {
+          "$description": "The background color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#191100",
+            "light": "#191100",
+          },
+        },
+        "color-background-toggle-button-normal-pressed": {
+          "$description": "The background color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#333843",
+            "light": "#333843",
+          },
+        },
+        "color-background-toggle-checked-disabled": {
+          "$description": "The background color of checked toggles in disabled state.",
+          "$value": {
+            "dark": "#002b66",
+            "light": "#002b66",
+          },
+        },
+        "color-board-placeholder-active": {
+          "$description": "The color of board placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-board-placeholder-hover": {
+          "$description": "The color of board placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-border-button-link-disabled": {
+          "$description": "The border color of link buttons in disabled state.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-button-normal-active": {
+          "$description": "The border color of normal buttons in active state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-border-button-normal-default": {
+          "$description": "The border color of normal buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-button-normal-disabled": {
+          "$description": "The border color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-button-normal-hover": {
+          "$description": "The border color of normal buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-border-button-primary-active": {
+          "$description": "The border color of primary buttons in active state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-button-primary-default": {
+          "$description": "The border color of primary buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-button-primary-disabled": {
+          "$description": "The border color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-button-primary-hover": {
+          "$description": "The border color of primary buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-border-card": {
+          "$description": "The border color of a card.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-border-container-top": {
+          "$description": "The top border color for containers and first item in dropdowns. For example: the top border of a card, dropdown, and table.",
+          "$value": {
+            "dark": "transparent",
+            "light": "transparent",
+          },
+        },
+        "color-border-control-default": {
+          "$description": "The default border color of form controls. For example: radio buttons and checkboxes.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-border-dialog": {
+          "$description": "The border color of the feedback/input dialogue box.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-divider-default": {
+          "$description": "The default color for dividers. For example: dividers in column layout, expanding sections, side nav, help panel, between table rows and dropdown items, and inside containers.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#424650",
+          },
+        },
+        "color-border-divider-secondary": {
+          "$description": "The border color for row dividers. For example: row dividers for table and collection preferences.",
+          "$value": {
+            "dark": "#232b37",
+            "light": "#232b37",
+          },
+        },
+        "color-border-dropdown-container": {
+          "$description": "The border color of the dropdown container. For example: border color of the dropdown container in button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-dropdown-item-focused": {
+          "$description": "The color of focus states for dropdown items. For example: the focus ring around selectable elements in the dropdown of button dropdown, select, and multi-select.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-dropdown-item-hover": {
+          "$description": "The border color of dropdown items on hover. For example: border of hovered items in select, multiselect, autosuggest, and hovered days in datepicker.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-default": {
+          "$description": "The default border color of form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-input-focused": {
+          "$description": "The color of focus states for form inputs. For example: input, textarea, autosuggest, datepicker, select, and multiselect.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-item-focused": {
+          "$description": "The color of focus states. For example: the focus ring around interactive elements.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-item-selected": {
+          "$description": "The border color of a selected item. For example: tokens, selected table rows, selected cards, and selected tile borders.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-popover": {
+          "$description": "The border color of the popover.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-border-segment-active": {
+          "$description": "Deprecated - this token is no longer in use.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-default": {
+          "$description": "Deprecated - this token is no longer in use.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-disabled": {
+          "$description": "Deprecated - this token is no longer in use.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-segment-hover": {
+          "$description": "Deprecated - this token is no longer in use.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-border-status-error": {
+          "$description": "The border color of an item in error state. For example: error alerts.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-border-status-info": {
+          "$description": "The border color of an informational item. For example: information alerts.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-border-status-success": {
+          "$description": "The border color of an item in success state. For example: success alerts.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-border-status-warning": {
+          "$description": "The border color of an item in warning state. For example: warning alerts.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-border-toggle-button-normal-pressed": {
+          "$description": "The border color of normal toggle buttons in pressed state.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-charts-blue-1-1000": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#b3e4f8",
+            "light": "#01437d",
+          },
+        },
+        "color-charts-blue-1-1100": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#caedfc",
+            "light": "#003c75",
+          },
+        },
+        "color-charts-blue-1-1200": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ddf4ff",
+            "light": "#00366d",
+          },
+        },
+        "color-charts-blue-1-300": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#00819c",
+            "light": "#529ccb",
+          },
+        },
+        "color-charts-blue-1-400": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#0497ba",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-blue-1-500": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#0273bb",
+          },
+        },
+        "color-charts-blue-1-600": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#44b9dd",
+            "light": "#0166ab",
+          },
+        },
+        "color-charts-blue-1-700": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#63c6e7",
+            "light": "#015b9d",
+          },
+        },
+        "color-charts-blue-1-800": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#79d2f0",
+            "light": "#015292",
+          },
+        },
+        "color-charts-blue-1-900": {
+          "$description": "Color from the 'blue-1' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#98dcf5",
+            "light": "#014a87",
+          },
+        },
+        "color-charts-blue-2-1000": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-blue-2-1100": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-blue-2-1200": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-blue-2-300": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-blue-2-400": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-blue-2-500": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-blue-2-600": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-blue-2-700": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-blue-2-800": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-blue-2-900": {
+          "$description": "Color from the 'blue-2' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-error-bar-marker": {
+          "$description": "Color for the error bar marker in charts.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#131920",
+          },
+        },
+        "color-charts-green-1000": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#c5e7a8",
+            "light": "#104d01",
+          },
+        },
+        "color-charts-green-1100": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#d5efbe",
+            "light": "#0f4601",
+          },
+        },
+        "color-charts-green-1200": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#e4f7d5",
+            "light": "#0d4000",
+          },
+        },
+        "color-charts-green-300": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#48851a",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-green-400": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#5a9b29",
+            "light": "#41902c",
+          },
+        },
+        "color-charts-green-500": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#1f8104",
+          },
+        },
+        "color-charts-green-600": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#7dbd4c",
+            "light": "#1a7302",
+          },
+        },
+        "color-charts-green-700": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#8fca61",
+            "light": "#176702",
+          },
+        },
+        "color-charts-green-800": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#9fd673",
+            "light": "#145d02",
+          },
+        },
+        "color-charts-green-900": {
+          "$description": "Color from the 'green' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#b2df8d",
+            "light": "#125502",
+          },
+        },
+        "color-charts-line-axis": {
+          "$description": "Color of the axis lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-grid": {
+          "$description": "Color of the grid lines in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-line-tick": {
+          "$description": "Color of the tick marks in a chart.",
+          "$value": {
+            "dark": "#424650",
+            "light": "#dedee3",
+          },
+        },
+        "color-charts-orange-1000": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-orange-1100": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-orange-1200": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-orange-300": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-orange-400": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-orange-500": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-orange-600": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-orange-700": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-orange-800": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-orange-900": {
+          "$description": "Color from the 'orange' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-1": {
+          "$description": "Color #1 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#486de8",
+            "light": "#688ae8",
+          },
+        },
+        "color-charts-palette-categorical-10": {
+          "$description": "Color #10 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#a84401",
+          },
+        },
+        "color-charts-palette-categorical-11": {
+          "$description": "Color #11 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c3d1ff",
+            "light": "#273ea5",
+          },
+        },
+        "color-charts-palette-categorical-12": {
+          "$description": "Color #12 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-palette-categorical-13": {
+          "$description": "Color #13 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-palette-categorical-14": {
+          "$description": "Color #14 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-palette-categorical-15": {
+          "$description": "Color #15 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc6a4",
+            "light": "#7e3103",
+          },
+        },
+        "color-charts-palette-categorical-16": {
+          "$description": "Color #16 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ecf0ff",
+            "light": "#1b2b88",
+          },
+        },
+        "color-charts-palette-categorical-17": {
+          "$description": "Color #17 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-palette-categorical-18": {
+          "$description": "Color #18 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-palette-categorical-19": {
+          "$description": "Color #19 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-palette-categorical-2": {
+          "$description": "Color #2 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-palette-categorical-20": {
+          "$description": "Color #20 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffede2",
+            "light": "#602400",
+          },
+        },
+        "color-charts-palette-categorical-21": {
+          "$description": "Color #21 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#7698fe",
+            "light": "#4066df",
+          },
+        },
+        "color-charts-palette-categorical-22": {
+          "$description": "Color #22 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-palette-categorical-23": {
+          "$description": "Color #23 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-palette-categorical-24": {
+          "$description": "Color #24 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-palette-categorical-25": {
+          "$description": "Color #25 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f27c36",
+            "light": "#bc4d01",
+          },
+        },
+        "color-charts-palette-categorical-26": {
+          "$description": "Color #26 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b1c5ff",
+            "light": "#2c46b1",
+          },
+        },
+        "color-charts-palette-categorical-27": {
+          "$description": "Color #27 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-palette-categorical-28": {
+          "$description": "Color #28 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-palette-categorical-29": {
+          "$description": "Color #29 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-palette-categorical-3": {
+          "$description": "Color #3 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-palette-categorical-30": {
+          "$description": "Color #30 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb68b",
+            "light": "#8a3603",
+          },
+        },
+        "color-charts-palette-categorical-31": {
+          "$description": "Color #31 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfe6ff",
+            "light": "#1f3191",
+          },
+        },
+        "color-charts-palette-categorical-32": {
+          "$description": "Color #32 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-palette-categorical-33": {
+          "$description": "Color #33 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-palette-categorical-34": {
+          "$description": "Color #34 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-palette-categorical-35": {
+          "$description": "Color #35 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffe1cf",
+            "light": "#692801",
+          },
+        },
+        "color-charts-palette-categorical-36": {
+          "$description": "Color #36 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#6384f5",
+            "light": "#5978e3",
+          },
+        },
+        "color-charts-palette-categorical-37": {
+          "$description": "Color #37 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-palette-categorical-38": {
+          "$description": "Color #38 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-palette-categorical-39": {
+          "$description": "Color #39 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-palette-categorical-4": {
+          "$description": "Color #4 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-palette-categorical-40": {
+          "$description": "Color #40 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#de6923",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-palette-categorical-41": {
+          "$description": "Color #41 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#a2b8ff",
+            "light": "#314fbf",
+          },
+        },
+        "color-charts-palette-categorical-42": {
+          "$description": "Color #42 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-palette-categorical-43": {
+          "$description": "Color #43 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-palette-categorical-44": {
+          "$description": "Color #44 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-palette-categorical-45": {
+          "$description": "Color #45 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#fca572",
+            "light": "#983c02",
+          },
+        },
+        "color-charts-palette-categorical-46": {
+          "$description": "Color #46 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d2dcff",
+            "light": "#23379b",
+          },
+        },
+        "color-charts-palette-categorical-47": {
+          "$description": "Color #47 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-palette-categorical-48": {
+          "$description": "Color #48 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-palette-categorical-49": {
+          "$description": "Color #49 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-palette-categorical-5": {
+          "$description": "Color #5 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#c55305",
+            "light": "#e07941",
+          },
+        },
+        "color-charts-palette-categorical-50": {
+          "$description": "Color #50 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffd4bb",
+            "light": "#732c02",
+          },
+        },
+        "color-charts-palette-categorical-6": {
+          "$description": "Color #6 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#8ea9ff",
+            "light": "#3759ce",
+          },
+        },
+        "color-charts-palette-categorical-7": {
+          "$description": "Color #7 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-palette-categorical-8": {
+          "$description": "Color #8 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-palette-categorical-9": {
+          "$description": "Color #9 on the categorical data visualization palette.",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-pink-1000": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd1de",
+            "light": "#81143b",
+          },
+        },
+        "color-charts-pink-1100": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffdfe8",
+            "light": "#780d35",
+          },
+        },
+        "color-charts-pink-1200": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecf1",
+            "light": "#6f062f",
+          },
+        },
+        "color-charts-pink-300": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#c64a70",
+            "light": "#da7596",
+          },
+        },
+        "color-charts-pink-400": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#d56889",
+            "light": "#ce567c",
+          },
+        },
+        "color-charts-pink-500": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#e07f9d",
+            "light": "#c33d69",
+          },
+        },
+        "color-charts-pink-600": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#eb92ad",
+            "light": "#b1325c",
+          },
+        },
+        "color-charts-pink-700": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#f5a2bb",
+            "light": "#a32952",
+          },
+        },
+        "color-charts-pink-800": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb0c8",
+            "light": "#962249",
+          },
+        },
+        "color-charts-pink-900": {
+          "$description": "Color from the 'pink' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc1d4",
+            "light": "#8b1b42",
+          },
+        },
+        "color-charts-purple-1000": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#e8d5ff",
+            "light": "#512994",
+          },
+        },
+        "color-charts-purple-1100": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#efe2ff",
+            "light": "#4a238b",
+          },
+        },
+        "color-charts-purple-1200": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#f5edff",
+            "light": "#431d84",
+          },
+        },
+        "color-charts-purple-300": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#8d59de",
+            "light": "#a783e1",
+          },
+        },
+        "color-charts-purple-400": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#a173ea",
+            "light": "#9469d6",
+          },
+        },
+        "color-charts-purple-500": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#b088f5",
+            "light": "#8456ce",
+          },
+        },
+        "color-charts-purple-600": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#bf9bf9",
+            "light": "#7749bf",
+          },
+        },
+        "color-charts-purple-700": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#cbabfc",
+            "light": "#6b40b2",
+          },
+        },
+        "color-charts-purple-800": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#d6baff",
+            "light": "#6237a7",
+          },
+        },
+        "color-charts-purple-900": {
+          "$description": "Color from the 'purple' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#dfc8ff",
+            "light": "#59309d",
+          },
+        },
+        "color-charts-red-1000": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ffd2cf",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-red-1100": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#ffe0dd",
+            "light": "#721e03",
+          },
+        },
+        "color-charts-red-1200": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffecea",
+            "light": "#671c00",
+          },
+        },
+        "color-charts-red-300": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#ea7158",
+          },
+        },
+        "color-charts-red-400": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#ed5958",
+            "light": "#dc5032",
+          },
+        },
+        "color-charts-red-500": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#d13313",
+          },
+        },
+        "color-charts-red-600": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#ff8a8a",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-red-700": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#ffa09e",
+            "light": "#a82a0c",
+          },
+        },
+        "color-charts-red-800": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#ffb3b0",
+            "light": "#972709",
+          },
+        },
+        "color-charts-red-900": {
+          "$description": "Color from the 'red' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#ffc4c0",
+            "light": "#892407",
+          },
+        },
+        "color-charts-status-critical": {
+          "$description": "Color to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#d63f38",
+            "light": "#7d2105",
+          },
+        },
+        "color-charts-status-high": {
+          "$description": "Color to represent an error status or a high-level of severity. Use this color to represent a default error status when there is only one applicable to a chart. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#fe6e73",
+            "light": "#ba2e0f",
+          },
+        },
+        "color-charts-status-info": {
+          "$description": "Color to represent an informational status. For example: "In-progress" or "Updating"",
+          "$value": {
+            "dark": "#08aad2",
+            "light": "#3184c2",
+          },
+        },
+        "color-charts-status-low": {
+          "$description": "Color to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-status-medium": {
+          "$description": "Color to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#f89256",
+            "light": "#cc5f21",
+          },
+        },
+        "color-charts-status-neutral": {
+          "$description": "Color to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-charts-status-positive": {
+          "$description": "Color to represent a positive status. *For example: "Success" or "Running"",
+          "$value": {
+            "dark": "#69ae34",
+            "light": "#67a353",
+          },
+        },
+        "color-charts-teal-1000": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#ace9db",
+            "light": "#014b44",
+          },
+        },
+        "color-charts-teal-1100": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#c2f0e6",
+            "light": "#01443e",
+          },
+        },
+        "color-charts-teal-1200": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#d7f7f0",
+            "light": "#003e38",
+          },
+        },
+        "color-charts-teal-300": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#018977",
+            "light": "#2ea597",
+          },
+        },
+        "color-charts-teal-400": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#009d89",
+            "light": "#1c8e81",
+          },
+        },
+        "color-charts-teal-500": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#00b09b",
+            "light": "#0d7d70",
+          },
+        },
+        "color-charts-teal-600": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#40bfa9",
+            "light": "#096f64",
+          },
+        },
+        "color-charts-teal-700": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#5fccb7",
+            "light": "#06645a",
+          },
+        },
+        "color-charts-teal-800": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#77d7c3",
+            "light": "#045b52",
+          },
+        },
+        "color-charts-teal-900": {
+          "$description": "Color from the 'teal' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#94e0d0",
+            "light": "#03524a",
+          },
+        },
+        "color-charts-threshold-info": {
+          "$description": "The color to represent an informational threshold to highlight special circumstances that may have or will occur. For example: A forecasted estimate",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#006ce0",
+          },
+        },
+        "color-charts-threshold-negative": {
+          "$description": "The color to represent a threshold with a negative outcome. For example: A maximum limit",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#db0000",
+          },
+        },
+        "color-charts-threshold-neutral": {
+          "$description": "The color to represent a threshold with a neutral outcome. For example: An average or baseline",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#656871",
+          },
+        },
+        "color-charts-threshold-positive": {
+          "$description": "The color to represent a threshold with a positive outcome. For example: A designated pass rate",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#00802f",
+          },
+        },
+        "color-charts-yellow-1000": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 10:1",
+          "$value": {
+            "dark": "#f7db8a",
+            "light": "#553f03",
+          },
+        },
+        "color-charts-yellow-1100": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 11:1",
+          "$value": {
+            "dark": "#fce5a8",
+            "light": "#4d3901",
+          },
+        },
+        "color-charts-yellow-1200": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 12:1",
+          "$value": {
+            "dark": "#ffefc9",
+            "light": "#483300",
+          },
+        },
+        "color-charts-yellow-300": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 3:1",
+          "$value": {
+            "dark": "#977001",
+            "light": "#b2911c",
+          },
+        },
+        "color-charts-yellow-400": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 4:1",
+          "$value": {
+            "dark": "#b08400",
+            "light": "#9c7b0b",
+          },
+        },
+        "color-charts-yellow-500": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 5:1",
+          "$value": {
+            "dark": "#c59600",
+            "light": "#8a6b05",
+          },
+        },
+        "color-charts-yellow-600": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 6:1",
+          "$value": {
+            "dark": "#d3a61c",
+            "light": "#7b5f04",
+          },
+        },
+        "color-charts-yellow-700": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 7:1",
+          "$value": {
+            "dark": "#dfb52c",
+            "light": "#6f5504",
+          },
+        },
+        "color-charts-yellow-800": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 8:1",
+          "$value": {
+            "dark": "#eac33a",
+            "light": "#654d03",
+          },
+        },
+        "color-charts-yellow-900": {
+          "$description": "Color from the 'yellow' data visualization palette at a contrast ratio of 9:1",
+          "$value": {
+            "dark": "#f1cf65",
+            "light": "#5d4503",
+          },
+        },
+        "color-drag-placeholder-active": {
+          "$description": "The color of drag placeholder in active state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-drag-placeholder-hover": {
+          "$description": "The color of drag placeholder in hovered state.",
+          "$value": {
+            "dark": "#006ce0",
+            "light": "#006ce0",
+          },
+        },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-foreground-control-default": {
+          "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-foreground-control-disabled": {
+          "$description": "The color used to mark disabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-foreground-control-read-only": {
+          "$description": "The color used to mark readonly form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-item-selected": {
+          "$description": "The highlight color for selected items. For example: borders of tokens and selected table rows, and check icons in selected dropdown items.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-accent": {
+          "$description": "The accent color used to guide a user. *For example: the highlighted page in the side navigation and active tab text.*",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-avatar": {
+          "$description": "The text and icon color of avatars.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-body-default": {
+          "$description": "The default color of non-heading text and body content. For example: text in a paragraph tag, table cell data, form field labels and values.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-body-secondary": {
+          "$description": "The color of text that is secondary to base text. For example: text in the navigation and tools panels.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-breadcrumb-current": {
+          "$description": "The text color that marks the breadcrumb item for the page the user is currently viewing.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-breadcrumb-icon": {
+          "$description": "The color used for the icon delimiter between breadcrumb items.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-icon-disabled": {
+          "$description": "The color of icon buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-inline-icon-default": {
+          "$description": "The default color of inline button icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-button-inline-icon-disabled": {
+          "$description": "The color of inline button icons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-inline-icon-hover": {
+          "$description": "The color of inline button icons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-button-link-active": {
+          "$description": "The text color of link buttons in active state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-button-link-default": {
+          "$description": "The default text color of link buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-button-link-disabled": {
+          "$description": "The text color of link buttons in disabled state.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-button-link-hover": {
+          "$description": "The text color of link buttons in hover state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-button-normal-active": {
+          "$description": "The active text color of normal buttons. For example: Active text color in normal and link buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-button-normal-default": {
+          "$description": "The default text color of normal buttons.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-button-normal-disabled": {
+          "$description": "The text color of normal buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-normal-hover": {
+          "$description": "The hover text color of normal buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-button-primary-active": {
+          "$description": "The active text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-default": {
+          "$description": "The default text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-button-primary-disabled": {
+          "$description": "The text color of primary buttons in disabled state.",
+          "$value": {
+            "dark": "#8c8c94",
+            "light": "#8c8c94",
+          },
+        },
+        "color-text-button-primary-hover": {
+          "$description": "The hover text color of primary buttons.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-chat-bubble-incoming": {
+          "$description": "Text color of \`incoming\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-chat-bubble-outgoing": {
+          "$description": "Text color of \`outgoing\` chat bubble.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-counter": {
+          "$description": "The default color for counters. For example: counters in table headers",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-dropdown-item-default": {
+          "$description": "The default text color of dropdown items. For example: label and label tag text color for autosuggest, select, and multiselect.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-dropdown-item-disabled": {
+          "$description": "The text color of disabled dropdown items. For example: label, label tag, description, and tag text color of a disabled item in a select, multiselect, and autosuggest.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-dropdown-item-filter-match": {
+          "$description": "The color of text matching a user's query. For example: the text matching a query entered into a table filter, select, multiselect, or autosuggest.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-dropdown-item-highlighted": {
+          "$description": "The text color of hovered or selected dropdown items. *For example: selected day text color in date picker, label text color of the item on hover in a select, multiselect, and autosuggest.*",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-empty": {
+          "$description": "The color of text in non-dropdown empty states. For example: tables, card collections, and attribute editor empty state text.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-default": {
+          "$description": "The default color of form field labels and values. For example: the label in form fields, checkboxes, radio buttons, toggles, and the value in inputs and text areas.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-form-secondary": {
+          "$description": "The color of secondary text in form fields and controls. For example: the description and constraint text in form fields, the descriptions in checkboxes, radio buttons, toggles, and any additional info in an attribute editor.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-group-label": {
+          "$description": "The default color for group labels. For example: group label in dropdown part of button dropdown, select, and multiselect, and group label in table and cards' preferences content selector.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-heading-default": {
+          "$description": "The default color for headings 2-5. For example: headings in containers, form sections, forms, and app layout panels.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-heading-secondary": {
+          "$description": "The default color for secondary heading text such as page and container descriptions. For example: descriptions in containers such as form sections, tables, and card collections, as well as form page descriptions.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-home-header-default": {
+          "$description": "The color of the home header's text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#ebebf0",
+            "light": "#ebebf0",
+          },
+        },
+        "color-text-home-header-secondary": {
+          "$description": "The color of the home header's secondary text, displayed on the Service's home page.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-text-input-disabled": {
+          "$description": "The color of the text value in a disabled input. For example: text in a disabled input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-input-placeholder": {
+          "$description": "The color of placeholder text in an input. For example: placeholder text in an input, autosuggest, datepicker, and the trigger of a select and multiselect.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-interactive-active": {
+          "$description": "The color of clickable elements in their active state. For example: tabs and icons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-default": {
+          "$description": "The color of clickable elements in their default state. *For example: expandable sections, tabs, and icons.*",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-disabled": {
+          "$description": "The color of clickable elements in their disabled state. For example: disabled tabs, button text, and icons.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-text-interactive-hover": {
+          "$description": "The color of clickable elements on hover. *For example: expandable sections, and icons on hover.*",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-interactive-inverted-default": {
+          "$description": "The default color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-interactive-inverted-hover": {
+          "$description": "The hover color of clickable elements in the flashbar. For example: The dismiss icon button in a flashbar.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-label": {
+          "$description": "The default color for non-form labels. For example: the key in key/value pairs and card's sections labels.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-label-gen-ai": {
+          "$description": "The default color for labels indicating that content is produced by generative AI.",
+          "$value": {
+            "dark": "#bf80ff",
+            "light": "#bf80ff",
+          },
+        },
+        "color-text-layout-toggle": {
+          "$description": "The default color of the app layout toggle.",
+          "$value": {
+            "dark": "#ffffff",
+            "light": "#ffffff",
+          },
+        },
+        "color-text-layout-toggle-active": {
+          "$description": "The color of the app layout toggle button when it's active.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-text-layout-toggle-hover": {
+          "$description": "The color of the app layout toggle button on hover.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-layout-toggle-selected": {
+          "$description": "The color of the app layout toggle button when it's selected.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-link-default": {
+          "$description": "The default color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-link-hover": {
+          "$description": "The hover color for links. For example: text in an anchor tag, info links, breadcrumb links, and icon links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-link-info-default": {
+          "$description": "The default color for info links.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-link-info-hover": {
+          "$description": "The hover color for info links.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-link-secondary-default": {
+          "$description": "The default color for secondary links. For example: links with lower visual emphasis or supplementary content.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-link-secondary-hover": {
+          "$description": "The hover color for secondary links. For example: links with lower visual emphasis or supplementary content.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-notification-default": {
+          "$description": "Default text color for notifications. For example: the text on badges and flashes.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-critical": {
+          "$description": "Text color in a notification to represent a critical error or a critically high-level of severity. For example: "Sev-1"",
+          "$value": {
+            "dark": "#000000",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-high": {
+          "$description": "Text color in a notification to represent an error status or a high-level of severity. For example: "Failed" or "Sev-2"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-notification-severity-low": {
+          "$description": "Text color in a notification to represent a warning or a low-level of severity. For example: "Warning" or "Sev-4"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-medium": {
+          "$description": "Text color in a notification to represent a medium-level of severity. For example: "Sev-3"",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-notification-severity-neutral": {
+          "$description": "Text color in a notification to represent a neutral status, a severity level of no impact, or the lowest-level of severity. For example: "Pending" or "Sev-5"",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-segment-active": {
+          "$description": "The text color of the active segment in a segmented control.",
+          "$value": {
+            "dark": "#0f141a",
+            "light": "#0f141a",
+          },
+        },
+        "color-text-segment-default": {
+          "$description": "The text color of inactive segments in a segmented control.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "color-text-segment-hover": {
+          "$description": "The text color of inactive segments in a segmented control on hover.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-status-error": {
+          "$description": "The color of error text and icons. For example: form field error text and error status indicators.",
+          "$value": {
+            "dark": "#ff7a7a",
+            "light": "#ff7a7a",
+          },
+        },
+        "color-text-status-inactive": {
+          "$description": "The color of inactive and loading text and icons. For example: table and card collection loading states icon and text and inactive and pending status indicators.",
+          "$value": {
+            "dark": "#a4a4ad",
+            "light": "#a4a4ad",
+          },
+        },
+        "color-text-status-info": {
+          "$description": "The color of info text and icons. For example: info status indicators and info alert icon.",
+          "$value": {
+            "dark": "#42b4ff",
+            "light": "#42b4ff",
+          },
+        },
+        "color-text-status-success": {
+          "$description": "The color of success text and icons. For example: success status indicators and success alert icon.",
+          "$value": {
+            "dark": "#2bb534",
+            "light": "#2bb534",
+          },
+        },
+        "color-text-status-warning": {
+          "$description": "The color of warning icons.",
+          "$value": {
+            "dark": "#fbd332",
+            "light": "#fbd332",
+          },
+        },
+        "color-text-toggle-button-icon-pressed": {
+          "$description": "The pressed text color of icon toggle buttons.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-text-toggle-button-normal-pressed": {
+          "$description": "The pressed text color of normal toggle buttons.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-text-top-navigation-title": {
+          "$description": "The color of the title in the top navigation.",
+          "$value": {
+            "dark": "#f9f9fa",
+            "light": "#f9f9fa",
+          },
+        },
+        "color-tree-view-connector-line": {
+          "$description": "The color of the tree view connector lines.",
+          "$value": {
+            "dark": "#dedee3",
+            "light": "#dedee3",
+          },
+        },
+        "font-family-base": {
+          "$description": "The default font family that will be applied globally to the product interface.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-display": {
+          "$description": "The font family for display text. Defaults to the base font family.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-heading": {
+          "$description": "The font family for headings and component headers. Defaults to the base font family.",
+          "$value": "'Open Sans', 'Helvetica Neue', Roboto, Arial, sans-serif",
+        },
+        "font-family-monospace": {
+          "$description": "The monospace font family that will be applied globally to the product interface.",
+          "$value": "Monaco, Menlo, Consolas, 'Courier Prime', Courier, 'Courier New', monospace",
+        },
+        "font-size-body-m": {
+          "$description": "The default font size for regular body text. For example, <p> tags in text content, or button text.",
+          "$value": "14px",
+        },
+        "font-size-body-s": {
+          "$description": "The default font size for small body text. For example, form field descriptions, or badge text.",
+          "$value": "12px",
+        },
+        "font-size-display-l": {
+          "$description": "The default font size for large display text.",
+          "$value": "42px",
+        },
+        "font-size-heading-l": {
+          "$description": "The default font size for h2s.",
+          "$value": "20px",
+        },
+        "font-size-heading-m": {
+          "$description": "The default font size for h3s.",
+          "$value": "18px",
+        },
+        "font-size-heading-s": {
+          "$description": "The default font size for h4s.",
+          "$value": "16px",
+        },
+        "font-size-heading-xl": {
+          "$description": "The default font size for h1s.",
+          "$value": "24px",
+        },
+        "font-size-heading-xs": {
+          "$description": "The default font size for h5s.",
+          "$value": "14px",
+        },
+        "font-size-tabs": {
+          "$description": "The default font size for tabs.",
+          "$value": "16px",
+        },
+        "font-weight-alert-header": {
+          "$description": "The default font weight for alert header text.",
+          "$value": "700",
+        },
+        "font-weight-bold": {
+          "$description": "The default bold font weight for body text. For example, <strong> and <b> tags in text content.",
+          "$value": "700",
+        },
+        "font-weight-button": {
+          "$description": "The default font weight for button text.",
+          "$value": "700",
+        },
+        "font-weight-display-l": {
+          "$description": "The default font weight for large display text.",
+          "$value": "700",
+        },
+        "font-weight-flashbar-header": {
+          "$description": "The default font weight for flashbar header text.",
+          "$value": "700",
+        },
+        "font-weight-heading-l": {
+          "$description": "The default font weight for h2s.",
+          "$value": "700",
+        },
+        "font-weight-heading-m": {
+          "$description": "The default font weight for h3s.",
+          "$value": "700",
+        },
+        "font-weight-heading-s": {
+          "$description": "The default font weight for h4s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xl": {
+          "$description": "The default font weight for h1s.",
+          "$value": "700",
+        },
+        "font-weight-heading-xs": {
+          "$description": "The default font weight for h5s.",
+          "$value": "700",
+        },
+        "font-weight-heavy": {
+          "$description": "The default heavy font weight.",
+          "$value": "700",
+        },
+        "font-weight-lighter": {
+          "$description": "The default lighter font weight.",
+          "$value": "300",
+        },
+        "font-weight-normal": {
+          "$description": "The default normal font weight.",
+          "$value": "400",
+        },
+        "font-weight-tabs": {
+          "$description": "The default font weight for tabs.",
+          "$value": "700",
+        },
+        "font-weight-tabs-disabled": {
+          "$description": "The default font weight for disabled tabs.",
+          "$value": "700",
+        },
+        "letter-spacing-display-l": {
+          "$description": "The default letter spacing for large display text.",
+          "$value": "-0.03em",
+        },
+        "letter-spacing-heading-l": {
+          "$description": "The default letter spacing for h2s.",
+          "$value": "-0.015em",
+        },
+        "letter-spacing-heading-m": {
+          "$description": "The default letter spacing for h3s.",
+          "$value": "-0.010em",
+        },
+        "letter-spacing-heading-s": {
+          "$description": "The default letter spacing for h4s.",
+          "$value": "-0.005em",
+        },
+        "letter-spacing-heading-xl": {
+          "$description": "The default letter spacing for h1s.",
+          "$value": "-0.02em",
+        },
+        "letter-spacing-heading-xs": {
+          "$description": "The default letter spacing for h5s.",
+          "$value": "normal",
+        },
+        "line-height-body-m": {
+          "$description": "The default line height for regular body text.",
+          "$value": "20px",
+        },
+        "line-height-body-s": {
+          "$description": "The default line height for small body text.",
+          "$value": "16px",
+        },
+        "line-height-display-l": {
+          "$description": "The default line height for large display text.",
+          "$value": "48px",
+        },
+        "line-height-heading-l": {
+          "$description": "The default line height for h2s.",
+          "$value": "24px",
+        },
+        "line-height-heading-m": {
+          "$description": "The default line height for h3s.",
+          "$value": "22px",
+        },
+        "line-height-heading-s": {
+          "$description": "The default line height for h4s.",
+          "$value": "20px",
+        },
+        "line-height-heading-xl": {
+          "$description": "The default line height for h1s.",
+          "$value": "30px",
+        },
+        "line-height-heading-xs": {
+          "$description": "The default line height for h5s.",
+          "$value": "18px",
+        },
+        "line-height-tabs": {
+          "$description": "The default line height for tabs.",
+          "$value": "20px",
+        },
+        "motion-duration-avatar-gen-ai-gradient": {
+          "$description": "The duration for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "3600ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-avatar-loading-dots": {
+          "$description": "The duration for loading motion of avatars.",
+          "$value": {
+            "default": "1200ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-complex": {
+          "$description": "The duration for drawing more attention or accommodating for more complexity.",
+          "$value": {
+            "default": "250ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-expressive": {
+          "$description": "The duration for accommodating the motion with more expressiveness.",
+          "$value": {
+            "default": "165ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-duration-responsive": {
+          "$description": "The duration for making the motion feel quick and responsive.",
+          "$value": {
+            "default": "115ms",
+            "disabled": "0ms",
+          },
+        },
+        "motion-easing-avatar-gen-ai-gradient": {
+          "$description": "The easing curve for gradient motion of gen-ai avatars.",
+          "$value": {
+            "default": "cubic-bezier(0.7, 0, 0.3, 1)",
+            "disabled": "cubic-bezier(0.7, 0, 0.3, 1)",
+          },
+        },
+        "motion-easing-expressive": {
+          "$description": "The easing curve for drawing a user's attention in an expressive way.",
+          "$value": {
+            "default": "cubic-bezier(0.84, 0, 0.16, 1)",
+            "disabled": "cubic-bezier(0.84, 0, 0.16, 1)",
+          },
+        },
+        "motion-easing-responsive": {
+          "$description": "The easing curve for providing responsive yet smooth visual feedback.",
+          "$value": {
+            "default": "cubic-bezier(0, 0, 0, 1)",
+            "disabled": "cubic-bezier(0, 0, 0, 1)",
+          },
+        },
+        "motion-easing-sticky": {
+          "$description": "The easing curve for making an element sticky to a certain state.",
+          "$value": {
+            "default": "cubic-bezier(1, 0, 0.83, 1)",
+            "disabled": "cubic-bezier(1, 0, 0.83, 1)",
+          },
+        },
+        "motion-keyframes-fade-in": {
+          "$description": "The CSS keyframes for showing an element.",
+          "$value": {
+            "default": "awsui-fade-in-35003c",
+            "disabled": "awsui-fade-in-35003c",
+          },
+        },
+        "motion-keyframes-fade-out": {
+          "$description": "The CSS keyframes for hiding an element.",
+          "$value": {
+            "default": "awsui-fade-out-35003c",
+            "disabled": "awsui-fade-out-35003c",
+          },
+        },
+        "motion-keyframes-scale-popup": {
+          "$description": "The CSS keyframes for scaling up an element to draw the user's attention.",
+          "$value": {
+            "default": "awsui-scale-popup-35003c",
+            "disabled": "awsui-scale-popup-35003c",
+          },
+        },
+        "motion-keyframes-status-icon-error": {
+          "$description": "The CSS keyframes applied to an error status icon to draw the user's attention.",
+          "$value": {
+            "default": "awsui-status-icon-error-35003c",
+            "disabled": "awsui-status-icon-error-35003c",
+          },
+        },
+        "shadow-card": {
+          "$description": "The shadow of a card.",
+          "$value": {
+            "dark": "none",
+            "light": "none",
+          },
+        },
+        "shadow-container-active": {
+          "$description": "Shadow for containers and cards in active state.",
+          "$value": {
+            "dark": "0px 1px 1px 1px #192534, 0px 6px 36px #00040c",
+            "light": "0px 1px 1px 1px #e9ebed, 0px 6px 36px #0007161a",
+          },
+        },
+        "size-vertical-input": {
+          "$description": "The height of form input components. For example: input, select, multiselect, autosuggest, and datepicker.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "28px",
+          },
+        },
+        "space-alert-vertical": {
+          "$description": "The vertical padding inside alert components.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-button-horizontal": {
+          "$description": "The horizontal padding inside buttons.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-button-vertical": {
+          "$description": "The vertical padding inside buttons.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-card-horizontal-default": {
+          "$description": "The default horizontal padding inside a card.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-card-horizontal-embedded": {
+          "$description": "The horizontal padding inside embedded a card.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "10px",
+          },
+        },
+        "space-card-vertical-default": {
+          "$description": "The default vertical padding inside a card.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-card-vertical-embedded": {
+          "$description": "The vertical padding inside embedded a card.",
+          "$value": {
+            "comfortable": "10px",
+            "compact": "8px",
+          },
+        },
+        "space-container-horizontal": {
+          "$description": "The horizontal padding inside a container.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-field-horizontal": {
+          "$description": "The horizontal padding inside field components.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-field-vertical": {
+          "$description": "The vertical padding inside control components.",
+          "$value": {
+            "comfortable": "5px",
+            "compact": "3px",
+          },
+        },
+        "space-option-padding-horizontal": {
+          "$description": "The horizontal padding inside dropdown option items.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-option-padding-vertical": {
+          "$description": "The vertical padding inside dropdown option items.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-l": {
+          "$description": "The L spacing unit which scales between modes. For example: vertical space between form fields.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "16px",
+          },
+        },
+        "space-scaled-m": {
+          "$description": "The M spacing unit which scales between modes. For example: top padding of content inside a container",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "12px",
+          },
+        },
+        "space-scaled-s": {
+          "$description": "The S spacing unit which scales between modes. For example: vertical padding inside a popover.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "8px",
+          },
+        },
+        "space-scaled-xl": {
+          "$description": "The XL spacing unit which scales between modes. For example: horizontal space between wizard navigation and content.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "20px",
+          },
+        },
+        "space-scaled-xs": {
+          "$description": "The XS spacing unit which scales between modes. For example: horizontal space between buttons in an action stripe.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "4px",
+          },
+        },
+        "space-scaled-xxl": {
+          "$description": "The XXL spacing unit which scales between modes. For example: horizontal padding for side navigation and help panel content.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "24px",
+          },
+        },
+        "space-scaled-xxs": {
+          "$description": "The XXS spacing unit which scales between modes. For example: vertical space between form field label and control.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-scaled-xxxl": {
+          "$description": "The XXXL spacing unit which scales between modes. For example: horizontal padding for app layout and split panel content on large screens.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "32px",
+          },
+        },
+        "space-scaled-xxxs": {
+          "$description": "The XXXS spacing unit which scales between modes.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "0px",
+          },
+        },
+        "space-static-l": {
+          "$description": "The static L spacing unit.",
+          "$value": {
+            "comfortable": "20px",
+            "compact": "20px",
+          },
+        },
+        "space-static-m": {
+          "$description": "The static M spacing unit.",
+          "$value": {
+            "comfortable": "16px",
+            "compact": "16px",
+          },
+        },
+        "space-static-s": {
+          "$description": "The static S spacing unit.",
+          "$value": {
+            "comfortable": "12px",
+            "compact": "12px",
+          },
+        },
+        "space-static-xl": {
+          "$description": "The static XL spacing unit.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+        "space-static-xs": {
+          "$description": "The static XS spacing unit.",
+          "$value": {
+            "comfortable": "8px",
+            "compact": "8px",
+          },
+        },
+        "space-static-xxl": {
+          "$description": "The static XXL spacing unit.",
+          "$value": {
+            "comfortable": "32px",
+            "compact": "32px",
+          },
+        },
+        "space-static-xxs": {
+          "$description": "The static XXS spacing unit.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "4px",
+          },
+        },
+        "space-static-xxxl": {
+          "$description": "The static XXXL spacing unit.",
+          "$value": {
+            "comfortable": "40px",
+            "compact": "40px",
+          },
+        },
+        "space-static-xxxs": {
+          "$description": "The static XXXS spacing unit.",
+          "$value": {
+            "comfortable": "2px",
+            "compact": "2px",
+          },
+        },
+        "space-tabs-vertical": {
+          "$description": "The vertical padding inside tabs.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-token-vertical": {
+          "$description": "The vertical padding inside tokens.",
+          "$value": {
+            "comfortable": "4px",
+            "compact": "2px",
+          },
+        },
+        "space-tree-view-indentation": {
+          "$description": "The indentation of tree view items.",
+          "$value": {
+            "comfortable": "24px",
+            "compact": "24px",
+          },
+        },
+      },
+    },
     "top-navigation": {
       "tokens": {
         "border-radius-action-card-default": {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index 3b261097ef..25340c3fe2 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -19042,6 +19042,144 @@ need to be direct children of the group:
 }
 `;
 
+exports[`Components definition for navigation-bar matches the snapshot: navigation-bar 1`] = `
+{
+  "dashCaseName": "navigation-bar",
+  "events": [],
+  "functions": [],
+  "name": "NavigationBar",
+  "properties": [
+    {
+      "description": "Accessible label for the landmark. Required when multiple navigation bars
+exist on the same page to distinguish them for assistive technology.",
+      "name": "ariaLabel",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "ID of an element that labels this landmark. Alternative to \`ariaLabel\`.
+Ignored when \`ariaLabel\` or \`i18nStrings.ariaLabel\` is provided.",
+      "name": "ariaLabelledBy",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "deprecatedTag": "Custom CSS is not supported. For testing and other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).",
+      "description": "Adds the specified classes to the root element of the component.",
+      "name": "className",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "description": "Localized strings required by the component.",
+      "i18nTag": true,
+      "inlineType": {
+        "name": "NavigationBarProps.I18nStrings",
+        "properties": [
+          {
+            "name": "ariaLabel",
+            "optional": true,
+            "type": "string",
+          },
+        ],
+        "type": "object",
+      },
+      "name": "i18nStrings",
+      "optional": true,
+      "type": "NavigationBarProps.I18nStrings",
+    },
+    {
+      "deprecatedTag": "The usage of the \`id\` attribute is reserved for internal use cases. For testing and other use cases,
+use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes). If you must
+use the \`id\` attribute, consider setting it on a parent element instead.",
+      "description": "Adds the specified ID to the root element of the component.",
+      "name": "id",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": "'top'",
+      "description": "Placement relative to container. Controls border edge and content flow.
+
+- \`top\`: Horizontal, border on bottom edge.
+- \`bottom\`: Horizontal, border on top edge.
+- \`start\`: Vertical on start side (left in LTR), border on end edge.
+- \`end\`: Vertical on end side (right in LTR), border on start edge.",
+      "inlineType": {
+        "name": "NavigationBarProps.Placement",
+        "type": "union",
+        "values": [
+          "end",
+          "start",
+          "top",
+          "bottom",
+        ],
+      },
+      "name": "placement",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": "'region'",
+      "description": "Landmark role rendered by the navigation bar.
+
+- \`navigation\`: Renders \`<nav>\`. For bars containing navigation links.
+   Multiple allowed per page; each must have a unique accessible name.
+- \`banner\`: Renders \`<header>\`. For the site-wide header consistent across pages.
+   Only one per page. Should be first in DOM order.
+- \`region\`: Renders \`<section role="region">\`. For tools/actions areas
+   without navigation links. Must have an accessible name.
+
+Role is independent of variant.",
+      "inlineType": {
+        "name": "NavigationBarProps.Role",
+        "type": "union",
+        "values": [
+          "region",
+          "banner",
+          "navigation",
+        ],
+      },
+      "name": "role",
+      "optional": true,
+      "type": "string",
+    },
+    {
+      "defaultValue": "'primary'",
+      "description": "Visual variant of the navigation bar.
+
+- \`primary\`: Default header style. Uses page theme colors.
+- \`primary-accent\`: Inverted/branded header. Applies \`navigation-bar\` visual context
+   so child components auto-adapt to inverted colors.
+- \`secondary\`: Toolbar style with neutral background.
+
+Primary and secondary use identical default tokens (both white background).
+The separation exists for theming — themes can target them independently.",
+      "inlineType": {
+        "name": "NavigationBarProps.Variant",
+        "type": "union",
+        "values": [
+          "secondary",
+          "primary",
+          "primary-accent",
+        ],
+      },
+      "name": "variant",
+      "optional": true,
+      "type": "string",
+    },
+  ],
+  "regions": [
+    {
+      "description": "Content of the navigation bar. Any ReactNode.",
+      "isDefault": false,
+      "name": "content",
+    },
+  ],
+  "releaseStatus": "stable",
+}
+`;
+
 exports[`Components definition for pagination matches the snapshot: pagination 1`] = `
 {
   "dashCaseName": "pagination",
@@ -40998,6 +41136,24 @@ wrapper.selectOptionByValue('option_1');
       ],
       "name": "NavigableGroupWrapper",
     },
+    {
+      "methods": [
+        {
+          "name": "findContent",
+          "parameters": [],
+          "returnType": {
+            "isNullable": true,
+            "name": "ElementWrapper",
+            "typeArguments": [
+              {
+                "name": "HTMLElement",
+              },
+            ],
+          },
+        },
+      ],
+      "name": "NavigationBarWrapper",
+    },
     {
       "methods": [
         {
@@ -50728,6 +50884,19 @@ The dismiss button is only rendered when the \`dismissible\` property is set to
       ],
       "name": "NavigableGroupWrapper",
     },
+    {
+      "methods": [
+        {
+          "name": "findContent",
+          "parameters": [],
+          "returnType": {
+            "isNullable": false,
+            "name": "ElementWrapper",
+          },
+        },
+      ],
+      "name": "NavigationBarWrapper",
+    },
     {
       "methods": [
         {
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index f48b744660..648b00abd1 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -484,6 +484,10 @@ exports[`test-utils selectors 1`] = `
   "navigable-group": [
     "awsui_root_efqlv",
   ],
+  "navigation-bar": [
+    "awsui_content_zll8a",
+    "awsui_root_zll8a",
+  ],
   "pagination": [
     "awsui_button-current_fvjdu",
     "awsui_button_fvjdu",
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
index d98cd076ae..3023a35402 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-wrappers.test.tsx.snap
@@ -64,6 +64,7 @@ import MixedLineBarChartWrapper from './mixed-line-bar-chart';
 import ModalWrapper from './modal';
 import MultiselectWrapper from './multiselect';
 import NavigableGroupWrapper from './navigable-group';
+import NavigationBarWrapper from './navigation-bar';
 import PaginationWrapper from './pagination';
 import PanelLayoutWrapper from './panel-layout';
 import PieChartWrapper from './pie-chart';
@@ -157,6 +158,7 @@ export { MixedLineBarChartWrapper };
 export { ModalWrapper };
 export { MultiselectWrapper };
 export { NavigableGroupWrapper };
+export { NavigationBarWrapper };
 export { PaginationWrapper };
 export { PanelLayoutWrapper };
 export { PieChartWrapper };
@@ -1737,6 +1739,34 @@ findAllNavigableGroups(selector?: string): Array<NavigableGroupWrapper>;
  * @returns {NavigableGroupWrapper | null}
  */
 findClosestNavigableGroup(): NavigableGroupWrapper | null;
+/**
+ * Returns the wrapper of the first NavigationBar that matches the specified CSS selector.
+ * If no CSS selector is specified, returns the wrapper of the first NavigationBar.
+ * If no matching NavigationBar is found, returns \`null\`.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {NavigationBarWrapper | null}
+ */
+findNavigationBar(selector?: string): NavigationBarWrapper | null;
+
+/**
+ * Returns an array of NavigationBar wrapper that matches the specified CSS selector.
+ * If no CSS selector is specified, returns all of the NavigationBars inside the current wrapper.
+ * If no matching NavigationBar is found, returns an empty array.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {Array<NavigationBarWrapper>}
+ */
+findAllNavigationBars(selector?: string): Array<NavigationBarWrapper>;
+
+/**
+ * Returns the wrapper of the closest parent NavigationBar for the current element,
+ * or the element itself if it is an instance of NavigationBar.
+ * If no NavigationBar is found, returns \`null\`.
+ *
+ * @returns {NavigationBarWrapper | null}
+ */
+findClosestNavigationBar(): NavigationBarWrapper | null;
 /**
  * Returns the wrapper of the first Pagination that matches the specified CSS selector.
  * If no CSS selector is specified, returns the wrapper of the first Pagination.
@@ -3464,6 +3494,19 @@ ElementWrapper.prototype.findNavigableGroup = function(selector) {
 ElementWrapper.prototype.findAllNavigableGroups = function(selector) {
   return this.findAllComponents(NavigableGroupWrapper, selector);
 };
+ElementWrapper.prototype.findNavigationBar = function(selector) {
+  let rootSelector = \`.\${NavigationBarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in NavigationBarWrapper && NavigationBarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${NavigationBarWrapper.rootSelector}, .\${NavigationBarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, NavigationBarWrapper);
+};
+
+ElementWrapper.prototype.findAllNavigationBars = function(selector) {
+  return this.findAllComponents(NavigationBarWrapper, selector);
+};
 ElementWrapper.prototype.findPagination = function(selector) {
   let rootSelector = \`.\${PaginationWrapper.rootSelector}\`;
   if("legacyRootSelector" in PaginationWrapper && PaginationWrapper.legacyRootSelector){
@@ -4208,6 +4251,11 @@ ElementWrapper.prototype.findClosestNavigableGroup = function() {
   // https://github.com/microsoft/TypeScript/issues/29132
   return (this as any).findClosestComponent(NavigableGroupWrapper);
 };
+ElementWrapper.prototype.findClosestNavigationBar = function() {
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findClosestComponent(NavigationBarWrapper);
+};
 ElementWrapper.prototype.findClosestPagination = function() {
   // casting to 'any' is needed to avoid this issue with generics
   // https://github.com/microsoft/TypeScript/issues/29132
@@ -4462,6 +4510,7 @@ import MixedLineBarChartWrapper from './mixed-line-bar-chart';
 import ModalWrapper from './modal';
 import MultiselectWrapper from './multiselect';
 import NavigableGroupWrapper from './navigable-group';
+import NavigationBarWrapper from './navigation-bar';
 import PaginationWrapper from './pagination';
 import PanelLayoutWrapper from './panel-layout';
 import PieChartWrapper from './pie-chart';
@@ -4555,6 +4604,7 @@ export { MixedLineBarChartWrapper };
 export { ModalWrapper };
 export { MultiselectWrapper };
 export { NavigableGroupWrapper };
+export { NavigationBarWrapper };
 export { PaginationWrapper };
 export { PanelLayoutWrapper };
 export { PieChartWrapper };
@@ -5530,6 +5580,23 @@ findNavigableGroup(selector?: string): NavigableGroupWrapper;
  * @returns {MultiElementWrapper<NavigableGroupWrapper>}
  */
 findAllNavigableGroups(selector?: string): MultiElementWrapper<NavigableGroupWrapper>;
+/**
+ * Returns a wrapper that matches the NavigationBars with the specified CSS selector.
+ * If no CSS selector is specified, returns a wrapper that matches NavigationBars.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {NavigationBarWrapper}
+ */
+findNavigationBar(selector?: string): NavigationBarWrapper;
+
+/**
+ * Returns a multi-element wrapper that matches NavigationBars with the specified CSS selector.
+ * If no CSS selector is specified, returns a multi-element wrapper that matches NavigationBars.
+ *
+ * @param {string} [selector] CSS Selector
+ * @returns {MultiElementWrapper<NavigationBarWrapper>}
+ */
+findAllNavigationBars(selector?: string): MultiElementWrapper<NavigationBarWrapper>;
 /**
  * Returns a wrapper that matches the Paginations with the specified CSS selector.
  * If no CSS selector is specified, returns a wrapper that matches Paginations.
@@ -6861,6 +6928,19 @@ ElementWrapper.prototype.findNavigableGroup = function(selector) {
 ElementWrapper.prototype.findAllNavigableGroups = function(selector) {
   return this.findAllComponents(NavigableGroupWrapper, selector);
 };
+ElementWrapper.prototype.findNavigationBar = function(selector) {
+  let rootSelector = \`.\${NavigationBarWrapper.rootSelector}\`;
+  if("legacyRootSelector" in NavigationBarWrapper && NavigationBarWrapper.legacyRootSelector){
+    rootSelector = \`:is(.\${NavigationBarWrapper.rootSelector}, .\${NavigationBarWrapper.legacyRootSelector})\`;
+  }
+  // casting to 'any' is needed to avoid this issue with generics
+  // https://github.com/microsoft/TypeScript/issues/29132
+  return (this as any).findComponent(selector ? appendSelector(selector, rootSelector) : rootSelector, NavigationBarWrapper);
+};
+
+ElementWrapper.prototype.findAllNavigationBars = function(selector) {
+  return this.findAllComponents(NavigationBarWrapper, selector);
+};
 ElementWrapper.prototype.findPagination = function(selector) {
   let rootSelector = \`.\${PaginationWrapper.rootSelector}\`;
   if("legacyRootSelector" in PaginationWrapper && PaginationWrapper.legacyRootSelector){
diff --git a/src/navigation-bar/__tests__/navigation-bar.test.tsx b/src/navigation-bar/__tests__/navigation-bar.test.tsx
new file mode 100644
index 0000000000..a4d90aa470
--- /dev/null
+++ b/src/navigation-bar/__tests__/navigation-bar.test.tsx
@@ -0,0 +1,150 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { getVisualContextClassname } from '../../../lib/components/internal/components/visual-context';
+import NavigationBar, { NavigationBarProps } from '../../../lib/components/navigation-bar';
+import NavigationBarWrapper from '../__test-utils__';
+
+import styles from '../../../lib/components/navigation-bar/styles.selectors.js';
+
+function renderNavigationBar(props: Partial<NavigationBarProps> = {}) {
+  const { container } = render(<NavigationBar {...props} />);
+  return new NavigationBarWrapper(container.querySelector(`.${NavigationBarWrapper.rootSelector}`)!);
+}
+
+describe('NavigationBar', () => {
+  test('renders as a section element by default', () => {
+    const wrapper = renderNavigationBar();
+    expect(wrapper.getElement().tagName).toBe('SECTION');
+  });
+
+  test('renders empty when no content provided', () => {
+    const wrapper = renderNavigationBar();
+    expect(wrapper.findContent()).toBeNull();
+  });
+
+  test('renders content', () => {
+    const wrapper = renderNavigationBar({ content: <span>Hello</span> });
+    expect(wrapper.findContent()!.getElement()).toHaveTextContent('Hello');
+  });
+
+  test('applies ariaLabel to root element', () => {
+    const wrapper = renderNavigationBar({ ariaLabel: 'Main navigation' });
+    expect(wrapper.getElement()).toHaveAttribute('aria-label', 'Main navigation');
+  });
+
+  test('i18nStrings.ariaLabel overrides ariaLabel prop', () => {
+    const wrapper = renderNavigationBar({
+      ariaLabel: 'Prop label',
+      i18nStrings: { ariaLabel: 'I18n label' },
+    });
+    expect(wrapper.getElement()).toHaveAttribute('aria-label', 'I18n label');
+  });
+
+  test('no aria-label when neither prop is provided', () => {
+    const wrapper = renderNavigationBar();
+    expect(wrapper.getElement()).not.toHaveAttribute('aria-label');
+  });
+
+  test('passes data attributes to root element', () => {
+    const { container } = render(<NavigationBar data-testid="my-nav" />);
+    expect(container.querySelector('[data-testid="my-nav"]')).toBeTruthy();
+  });
+
+  describe('role prop', () => {
+    test('renders <section role="region"> by default', () => {
+      const { container } = render(<NavigationBar content="test" ariaLabel="Tools" />);
+      const section = container.querySelector('section');
+      expect(section).toBeInTheDocument();
+      expect(section).toHaveAttribute('role', 'region');
+    });
+
+    test('renders <nav> element when role="navigation"', () => {
+      const { container } = render(<NavigationBar role="navigation" content="test" ariaLabel="Main nav" />);
+      expect(container.querySelector('nav')).toBeInTheDocument();
+      expect(container.querySelector('section')).not.toBeInTheDocument();
+    });
+
+    test('renders <header> element when role="banner"', () => {
+      const { container } = render(<NavigationBar role="banner" content="test" ariaLabel="Site header" />);
+      expect(container.querySelector('header')).toBeInTheDocument();
+      expect(container.querySelector('section')).not.toBeInTheDocument();
+    });
+
+    test('does not add explicit role attribute to <nav>', () => {
+      const { container } = render(<NavigationBar role="navigation" content="test" />);
+      expect(container.querySelector('nav')).not.toHaveAttribute('role');
+    });
+
+    test('does not add explicit role attribute to <header>', () => {
+      const { container } = render(<NavigationBar role="banner" content="test" ariaLabel="Header" />);
+      expect(container.querySelector('header')).not.toHaveAttribute('role');
+    });
+  });
+
+  describe('ariaLabelledBy', () => {
+    test('applies aria-labelledby when no aria-label is provided', () => {
+      const { container } = render(<NavigationBar ariaLabelledBy="heading-id" content="test" />);
+      expect(container.querySelector('section')).toHaveAttribute('aria-labelledby', 'heading-id');
+    });
+
+    test('does not apply aria-labelledby when aria-label is provided', () => {
+      const { container } = render(<NavigationBar ariaLabel="Main nav" ariaLabelledBy="heading-id" content="test" />);
+      const el = container.querySelector('section');
+      expect(el).toHaveAttribute('aria-label', 'Main nav');
+      expect(el).not.toHaveAttribute('aria-labelledby');
+    });
+
+    test('i18nStrings.ariaLabel takes precedence over ariaLabelledBy', () => {
+      const { container } = render(
+        <NavigationBar ariaLabelledBy="heading-id" i18nStrings={{ ariaLabel: 'i18n label' }} content="test" />
+      );
+      const el = container.querySelector('section');
+      expect(el).toHaveAttribute('aria-label', 'i18n label');
+      expect(el).not.toHaveAttribute('aria-labelledby');
+    });
+  });
+
+  describe('visual context', () => {
+    test('applies visual context class only for primary-accent variant', () => {
+      const contextClass = getVisualContextClassname('navigation-bar');
+      expect(renderNavigationBar({ variant: 'primary-accent' }).getElement()).toHaveClass(contextClass);
+    });
+
+    test('does not apply visual context for primary variant', () => {
+      const contextClass = getVisualContextClassname('navigation-bar');
+      expect(renderNavigationBar({ variant: 'primary' }).getElement()).not.toHaveClass(contextClass);
+    });
+
+    test('does not apply visual context for secondary variant', () => {
+      const contextClass = getVisualContextClassname('navigation-bar');
+      expect(renderNavigationBar({ variant: 'secondary' }).getElement()).not.toHaveClass(contextClass);
+    });
+  });
+
+  describe('variant', () => {
+    test('defaults to primary variant', () => {
+      const wrapper = renderNavigationBar();
+      expect(wrapper.getElement()).toHaveClass(styles['variant-primary']);
+    });
+
+    test.each(['primary', 'primary-accent', 'secondary'] as const)('applies %s variant class', variant => {
+      const wrapper = renderNavigationBar({ variant });
+      expect(wrapper.getElement()).toHaveClass(styles[`variant-${variant}`]);
+    });
+  });
+
+  describe('placement', () => {
+    test('defaults to top placement', () => {
+      const wrapper = renderNavigationBar();
+      expect(wrapper.getElement()).toHaveClass(styles['placement-top']);
+    });
+
+    test.each(['top', 'bottom', 'start', 'end'] as const)('applies %s placement class', placement => {
+      const wrapper = renderNavigationBar({ placement });
+      expect(wrapper.getElement()).toHaveClass(styles[`placement-${placement}`]);
+    });
+  });
+});
diff --git a/src/navigation-bar/index.tsx b/src/navigation-bar/index.tsx
new file mode 100644
index 0000000000..8af0bbc7b1
--- /dev/null
+++ b/src/navigation-bar/index.tsx
@@ -0,0 +1,34 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+'use client';
+import React from 'react';
+
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { getExternalProps } from '../internal/utils/external-props';
+import { NavigationBarProps } from './interfaces';
+import InternalNavigationBar from './internal';
+
+export { NavigationBarProps };
+
+export default function NavigationBar({
+  variant = 'primary',
+  placement = 'top',
+  role = 'region',
+  ...restProps
+}: NavigationBarProps) {
+  const baseComponentProps = useBaseComponent('NavigationBar', {
+    props: { variant, placement, role },
+  });
+  return (
+    <InternalNavigationBar
+      variant={variant}
+      placement={placement}
+      role={role}
+      {...getExternalProps(restProps)}
+      {...baseComponentProps}
+    />
+  );
+}
+
+applyDisplayName(NavigationBar, 'NavigationBar');
diff --git a/src/navigation-bar/interfaces.ts b/src/navigation-bar/interfaces.ts
new file mode 100644
index 0000000000..85c222ad15
--- /dev/null
+++ b/src/navigation-bar/interfaces.ts
@@ -0,0 +1,82 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ReactNode } from 'react';
+
+import { BaseComponentProps } from '../internal/base-component';
+
+export interface NavigationBarProps extends BaseComponentProps {
+  /**
+   * Visual variant of the navigation bar.
+   *
+   * - `primary`: Default header style. Uses page theme colors.
+   * - `primary-accent`: Inverted/branded header. Applies `navigation-bar` visual context
+   *    so child components auto-adapt to inverted colors.
+   * - `secondary`: Toolbar style with neutral background.
+   *
+   * Primary and secondary use identical default tokens (both white background).
+   * The separation exists for theming — themes can target them independently.
+   *
+   * @default 'primary'
+   */
+  variant?: NavigationBarProps.Variant;
+
+  /**
+   * Landmark role rendered by the navigation bar.
+   *
+   * - `navigation`: Renders `<nav>`. For bars containing navigation links.
+   *    Multiple allowed per page; each must have a unique accessible name.
+   * - `banner`: Renders `<header>`. For the site-wide header consistent across pages.
+   *    Only one per page. Should be first in DOM order.
+   * - `region`: Renders `<section role="region">`. For tools/actions areas
+   *    without navigation links. Must have an accessible name.
+   *
+   * Role is independent of variant.
+   *
+   * @default 'region'
+   */
+  role?: NavigationBarProps.Role;
+
+  /**
+   * Placement relative to container. Controls border edge and content flow.
+   *
+   * - `top`: Horizontal, border on bottom edge.
+   * - `bottom`: Horizontal, border on top edge.
+   * - `start`: Vertical on start side (left in LTR), border on end edge.
+   * - `end`: Vertical on end side (right in LTR), border on start edge.
+   *
+   * @default 'top'
+   */
+  placement?: NavigationBarProps.Placement;
+
+  /** Content of the navigation bar. Any ReactNode. */
+  content?: ReactNode;
+
+  /**
+   * Accessible label for the landmark. Required when multiple navigation bars
+   * exist on the same page to distinguish them for assistive technology.
+   */
+  ariaLabel?: string;
+
+  /**
+   * ID of an element that labels this landmark. Alternative to `ariaLabel`.
+   * Ignored when `ariaLabel` or `i18nStrings.ariaLabel` is provided.
+   */
+  ariaLabelledBy?: string;
+
+  /**
+   * Localized strings required by the component.
+   * @i18n
+   */
+  i18nStrings?: NavigationBarProps.I18nStrings;
+}
+
+export namespace NavigationBarProps {
+  export type Variant = 'primary' | 'primary-accent' | 'secondary';
+  export type Placement = 'top' | 'bottom' | 'start' | 'end';
+  export type Role = 'navigation' | 'banner' | 'region';
+
+  export interface I18nStrings {
+    /** Overrides `ariaLabel` prop. */
+    ariaLabel?: string;
+  }
+}
diff --git a/src/navigation-bar/internal.tsx b/src/navigation-bar/internal.tsx
new file mode 100644
index 0000000000..0d50d63c4b
--- /dev/null
+++ b/src/navigation-bar/internal.tsx
@@ -0,0 +1,59 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+
+import { getBaseProps } from '../internal/base-component';
+import { getVisualContextClassname } from '../internal/components/visual-context';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { SomeRequired } from '../internal/types';
+import { NavigationBarProps } from './interfaces';
+
+import styles from './styles.css.js';
+import testStyles from './test-classes/styles.css.js';
+
+type InternalNavigationBarProps = SomeRequired<NavigationBarProps, 'variant' | 'placement' | 'role'> &
+  InternalBaseComponentProps;
+
+const ROLE_ELEMENT_MAP = {
+  navigation: 'nav',
+  banner: 'header',
+  region: 'section',
+} as const;
+
+export default function InternalNavigationBar({
+  variant,
+  placement,
+  role,
+  content,
+  ariaLabel,
+  ariaLabelledBy,
+  i18nStrings,
+  __internalRootRef,
+  ...restProps
+}: InternalNavigationBarProps) {
+  const baseProps = getBaseProps(restProps);
+  const resolvedAriaLabel = i18nStrings?.ariaLabel ?? ariaLabel;
+  const appliesVisualContext = variant === 'primary-accent';
+  const Element = ROLE_ELEMENT_MAP[role];
+
+  return (
+    <Element
+      {...baseProps}
+      ref={__internalRootRef}
+      role={role === 'region' ? 'region' : undefined}
+      aria-label={resolvedAriaLabel}
+      aria-labelledby={!resolvedAriaLabel ? ariaLabelledBy : undefined}
+      className={clsx(
+        baseProps.className,
+        styles.root,
+        styles[`variant-${variant}`],
+        styles[`placement-${placement}`],
+        testStyles.root,
+        appliesVisualContext && getVisualContextClassname('navigation-bar')
+      )}
+    >
+      {content && <div className={clsx(styles.content, testStyles.content)}>{content}</div>}
+    </Element>
+  );
+}
diff --git a/src/navigation-bar/styles.scss b/src/navigation-bar/styles.scss
new file mode 100644
index 0000000000..2413e919b0
--- /dev/null
+++ b/src/navigation-bar/styles.scss
@@ -0,0 +1,117 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../internal/styles' as styles;
+@use '../internal/styles/tokens' as awsui;
+
+.root {
+  @include styles.styles-reset;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+}
+
+// Variant backgrounds and border colors.
+// Each variant defines its own border-color token so themes can style them independently.
+.variant-primary {
+  background: awsui.$color-background-navigation-bar-primary;
+  border-color: awsui.$color-border-navigation-bar-primary;
+}
+
+.variant-primary-accent {
+  background: awsui.$color-background-navigation-bar-primary;
+  border-color: awsui.$color-border-navigation-bar-primary;
+}
+
+.variant-secondary {
+  background: awsui.$color-background-navigation-bar-secondary;
+  border-color: awsui.$color-border-navigation-bar-secondary;
+}
+
+// Placement controls which edge gets the border.
+// Border color is inherited from the variant class above.
+// We use individual border properties (not shorthand) to avoid resetting border-color.
+.placement-top {
+  flex-direction: row;
+
+  &.variant-primary,
+  &.variant-primary-accent {
+    border-block-end-width: awsui.$border-width-navigation-bar-primary;
+    border-block-end-style: solid;
+  }
+
+  &.variant-secondary {
+    border-block-end-width: awsui.$border-width-navigation-bar-secondary;
+    border-block-end-style: solid;
+  }
+}
+
+.placement-bottom {
+  flex-direction: row;
+
+  &.variant-primary,
+  &.variant-primary-accent {
+    border-block-start-width: awsui.$border-width-navigation-bar-primary;
+    border-block-start-style: solid;
+  }
+
+  &.variant-secondary {
+    border-block-start-width: awsui.$border-width-navigation-bar-secondary;
+    border-block-start-style: solid;
+  }
+}
+
+.placement-start {
+  flex-direction: column;
+  inline-size: fit-content;
+
+  &.variant-primary,
+  &.variant-primary-accent {
+    border-inline-end-width: awsui.$border-width-navigation-bar-primary;
+    border-inline-end-style: solid;
+  }
+
+  &.variant-secondary {
+    border-inline-end-width: awsui.$border-width-navigation-bar-secondary;
+    border-inline-end-style: solid;
+  }
+
+  @include styles.with-motion {
+    transition: inline-size awsui.$motion-duration-refresh-only-medium;
+  }
+}
+
+.placement-end {
+  flex-direction: column;
+  inline-size: fit-content;
+
+  &.variant-primary,
+  &.variant-primary-accent {
+    border-inline-start-width: awsui.$border-width-navigation-bar-primary;
+    border-inline-start-style: solid;
+  }
+
+  &.variant-secondary {
+    border-inline-start-width: awsui.$border-width-navigation-bar-secondary;
+    border-inline-start-style: solid;
+  }
+
+  @include styles.with-motion {
+    transition: inline-size awsui.$motion-duration-refresh-only-medium;
+  }
+}
+
+.content {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-inline-size: 0;
+}
+
+// Vertical content stacks vertically
+.placement-start > .content,
+.placement-end > .content {
+  flex-direction: column;
+}
diff --git a/src/navigation-bar/test-classes/styles.scss b/src/navigation-bar/test-classes/styles.scss
new file mode 100644
index 0000000000..02ed03c27a
--- /dev/null
+++ b/src/navigation-bar/test-classes/styles.scss
@@ -0,0 +1,12 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /* used in test-utils */
+}
+
+.content {
+  /* used in test-utils */
+}
diff --git a/src/test-utils/dom/navigation-bar/index.ts b/src/test-utils/dom/navigation-bar/index.ts
new file mode 100644
index 0000000000..bb8b1addbc
--- /dev/null
+++ b/src/test-utils/dom/navigation-bar/index.ts
@@ -0,0 +1,13 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-core/dom';
+
+import styles from '../../../navigation-bar/test-classes/styles.selectors.js';
+
+export default class NavigationBarWrapper extends ComponentWrapper {
+  static rootSelector: string = styles.root;
+
+  findContent(): ElementWrapper | null {
+    return this.findByClassName(styles.content);
+  }
+}
diff --git a/style-dictionary/classic/colors.ts b/style-dictionary/classic/colors.ts
index 5a6c0e1c4e..855ec6879e 100644
--- a/style-dictionary/classic/colors.ts
+++ b/style-dictionary/classic/colors.ts
@@ -34,6 +34,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundInputDisabled: { dark: '{colorNeutral700}' },
   colorBackgroundItemSelected: { dark: '{colorPrimary1000}' },
   colorBackgroundLayoutMain: { light: '{colorNeutral200}', dark: '{colorNeutral950}' },
+  colorBackgroundNavigationBarPrimary: '{colorBackgroundContainerContent}',
+  colorBackgroundNavigationBarSecondary: '{colorBackgroundLayoutPanelContent}',
   colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}',
   colorBackgroundDrawerBackdrop: { light: '{colorGreyOpaque90}', dark: '{colorGreyOpaque80}' },
   colorBackgroundLayoutMobilePanel: '{colorBackgroundLayoutPanelContent}',
@@ -82,6 +84,9 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderItemFocused: { light: '{colorPrimary600}' },
   colorBorderItemPlaceholder: '{colorTransparent}',
   colorBorderLayout: { light: '{colorNeutral300}', dark: '{colorNeutral700}' },
+  colorBorderNavigationBarPrimary: '{colorBorderDividerDefault}',
+  colorBorderNavigationBarPrimaryAccent: '{colorBorderDividerDefault}',
+  colorBorderNavigationBarSecondary: '{colorBorderDividerDefault}',
   colorBorderNotificationStackBar: '{colorNeutral750}',
   colorBorderPanelHeader: '{colorBorderDividerDefault}',
   colorBorderPopover: { light: '{colorNeutral300}', dark: '{colorNeutral650}' },
diff --git a/style-dictionary/utils/contexts.ts b/style-dictionary/utils/contexts.ts
index 5cdb143be2..9e0193b119 100644
--- a/style-dictionary/utils/contexts.ts
+++ b/style-dictionary/utils/contexts.ts
@@ -75,3 +75,11 @@ export const createAppLayoutToolbarContext = (tokens: TokenCategory<string, Glob
     tokens,
   };
 };
+
+export const createNavigationBarContext = (tokens: TokenCategory<string, GlobalValue | ModeValue>) => {
+  return {
+    id: 'navigation-bar',
+    selector: '.awsui-context-navigation-bar',
+    tokens,
+  };
+};
diff --git a/style-dictionary/utils/token-names.ts b/style-dictionary/utils/token-names.ts
index 3528caa76c..45f4837650 100644
--- a/style-dictionary/utils/token-names.ts
+++ b/style-dictionary/utils/token-names.ts
@@ -556,6 +556,8 @@ export type ColorsTokenName =
   | 'colorBackgroundLayoutToggleSelectedHover'
   | 'colorBackgroundLayoutToggleSelectedActive'
   | 'colorBackgroundModalOverlay'
+  | 'colorBackgroundNavigationBarPrimary'
+  | 'colorBackgroundNavigationBarSecondary'
   | 'colorBackgroundNotificationBlue'
   | 'colorBackgroundNotificationGreen'
   | 'colorBackgroundNotificationGrey'
@@ -653,6 +655,9 @@ export type ColorsTokenName =
   | 'colorBorderItemPlaceholder'
   | 'colorBorderItemSelected'
   | 'colorBorderLayout'
+  | 'colorBorderNavigationBarPrimary'
+  | 'colorBorderNavigationBarPrimaryAccent'
+  | 'colorBorderNavigationBarSecondary'
   | 'colorBorderNotificationStackBar'
   | 'colorBorderPanelHeader'
   | 'colorBorderPopover'
@@ -935,7 +940,9 @@ export type BordersTokenName =
   | 'borderWidthActionCardDefault'
   | 'borderWidthActionCardHover'
   | 'borderWidthActionCardActive'
-  | 'borderWidthActionCardDisabled';
+  | 'borderWidthActionCardDisabled'
+  | 'borderWidthNavigationBarPrimary'
+  | 'borderWidthNavigationBarSecondary';
 export type MotionTokenName =
   | 'motionDurationExtraFast'
   | 'motionDurationExtraSlow'
diff --git a/style-dictionary/visual-refresh/borders.ts b/style-dictionary/visual-refresh/borders.ts
index 3ea0d48025..e6d2a4d163 100644
--- a/style-dictionary/visual-refresh/borders.ts
+++ b/style-dictionary/visual-refresh/borders.ts
@@ -71,4 +71,6 @@ export const tokens: StyleDictionary.BordersDictionary = {
   borderWidthActionCardHover: '{borderWidthCard}',
   borderWidthActionCardActive: '{borderWidthCard}',
   borderWidthActionCardDisabled: '{borderWidthCard}',
+  borderWidthNavigationBarPrimary: '{borderDividerSectionWidth}',
+  borderWidthNavigationBarSecondary: '{borderDividerSectionWidth}',
 };
diff --git a/style-dictionary/visual-refresh/colors.ts b/style-dictionary/visual-refresh/colors.ts
index c3a1e792bd..86b4c3b382 100644
--- a/style-dictionary/visual-refresh/colors.ts
+++ b/style-dictionary/visual-refresh/colors.ts
@@ -60,6 +60,8 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBackgroundInputDisabled: { light: '{colorNeutral250}', dark: '{colorNeutral800}' },
   colorBackgroundItemSelected: { light: '{colorPrimary50}', dark: '{colorPrimary1000}' },
   colorBackgroundLayoutMain: { light: '{colorWhite}', dark: '{colorNeutral850}' },
+  colorBackgroundNavigationBarPrimary: '{colorBackgroundContainerContent}',
+  colorBackgroundNavigationBarSecondary: '{colorBackgroundLayoutPanelContent}',
   colorBackgroundDrawer: '{colorBackgroundLayoutPanelContent}',
   colorBackgroundDrawerBackdrop: '{colorGreyOpaque70}',
   colorBackgroundLayoutMobilePanel: '{colorNeutral950}',
@@ -173,6 +175,9 @@ const tokens: StyleDictionary.ColorsDictionary = {
   colorBorderItemPlaceholder: '{colorBorderItemSelected}',
   colorBorderItemSelected: '{colorItemSelected}',
   colorBorderLayout: { light: '{colorNeutral350}', dark: '{colorNeutral650}' },
+  colorBorderNavigationBarPrimary: '{colorBorderLayout}',
+  colorBorderNavigationBarPrimaryAccent: '{colorBorderLayout}',
+  colorBorderNavigationBarSecondary: '{colorBorderLayout}',
   colorBorderNotificationStackBar: '{colorNeutral750}',
   colorBorderPanelHeader: '{colorBorderDividerDefault}',
   colorBorderPopover: '{colorBorderDropdownContainer}',
diff --git a/style-dictionary/visual-refresh/contexts/navigation-bar.ts b/style-dictionary/visual-refresh/contexts/navigation-bar.ts
new file mode 100644
index 0000000000..980655f941
--- /dev/null
+++ b/style-dictionary/visual-refresh/contexts/navigation-bar.ts
@@ -0,0 +1,26 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import merge from 'lodash/merge.js';
+
+import { expandColorDictionary, pickState } from '../../utils/index.js';
+import { StyleDictionary } from '../../utils/interfaces.js';
+import { tokens as parentTokens } from '../colors.js';
+
+// Navigation bar context applies inverted (dark) colors to child components
+// rendered inside the `primary-accent` variant. This mirrors the approach used
+// by the `top-navigation` context so that child components such as Button,
+// Link, ButtonDropdown, etc. automatically adapt without consumer theming.
+const tokens = {
+  colorBackgroundContainerContent: '{colorNeutral850}',
+  colorBackgroundDropdownItemDefault: '{colorNeutral850}',
+  colorTextLinkDefault: '{colorNeutral100}',
+};
+
+const darkModeValues = pickState(parentTokens, 'dark');
+
+const expandedTokens: StyleDictionary.ExpandedColorScopeDictionary = expandColorDictionary(
+  merge({}, darkModeValues, tokens)
+);
+
+export const mode: StyleDictionary.ModeIdentifier = 'color';
+export { expandedTokens as tokens };
diff --git a/style-dictionary/visual-refresh/index.ts b/style-dictionary/visual-refresh/index.ts
index f838dd584d..fee0e5c9a3 100644
--- a/style-dictionary/visual-refresh/index.ts
+++ b/style-dictionary/visual-refresh/index.ts
@@ -10,6 +10,7 @@ import {
   createFlashbarWarningContext,
   createHeaderAlertContext,
   createHeaderContext,
+  createNavigationBarContext,
   createTopNavigationContext,
 } from '../utils/contexts.js';
 import { StyleDictionary } from '../utils/interfaces.js';
@@ -52,6 +53,7 @@ export async function buildVisualRefresh(builder: ThemeBuilder) {
   builder.addContext(createAlertContext((await import('./contexts/alert.js')).tokens));
   builder.addContext(createHeaderAlertContext((await import('./contexts/header-alert.js')).tokens));
   builder.addContext(createAppLayoutToolbarContext((await import('./contexts/app-layout-toolbar.js')).tokens));
+  builder.addContext(createNavigationBarContext((await import('./contexts/navigation-bar.js')).tokens));
 
   return builder.build();
 }