Claude stuffs up. Time to restore mucked up files.
This commit is contained in:
4
.obsidian/core-plugins.json
vendored
4
.obsidian/core-plugins.json
vendored
@@ -27,5 +27,7 @@
|
|||||||
"file-recovery": true,
|
"file-recovery": true,
|
||||||
"publish": false,
|
"publish": false,
|
||||||
"sync": true,
|
"sync": true,
|
||||||
"webviewer": false
|
"webviewer": false,
|
||||||
|
"footnotes": false,
|
||||||
|
"bases": true
|
||||||
}
|
}
|
||||||
@@ -37,7 +37,7 @@ export default function RootLayout({
|
|||||||
<Sidebar />
|
<Sidebar />
|
||||||
<div className="lg:pl-64">
|
<div className="lg:pl-64">
|
||||||
<Header />
|
<Header />
|
||||||
<main className="pt-chorus-xl md:pt-chorus-xxl dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0">
|
<main className="dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0">
|
||||||
{children}
|
{children}
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@@ -17,17 +17,14 @@ export default function Footer() {
|
|||||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||||
A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files.
|
A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-xs text-carbon-500 dark:text-mulberry-400">
|
|
||||||
© 2025 CHORUS Services. All rights reserved.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Navigation Links */}
|
{/* Navigation Links */}
|
||||||
<div className="grid grid-cols-2 gap-chorus-lg">
|
<div className="grid grid-cols-2 gap-chorus-sm">
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4>
|
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4>
|
||||||
<ul className="space-y-chorus-sm text-sm">
|
<ul className="space-y-chorus-xs text-sm">
|
||||||
<li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Overview</Link></li>
|
<li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Overview</Link></li>
|
||||||
<li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li>
|
<li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li>
|
||||||
<li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li>
|
<li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li>
|
||||||
<li><Link href="/typography" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Typography</Link></li>
|
<li><Link href="/typography" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Typography</Link></li>
|
||||||
@@ -36,11 +33,11 @@ export default function Footer() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Resources</h4>
|
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Resources</h4>
|
||||||
<ul className="space-y-chorus-sm text-sm">
|
<ul className="space-y-chorus-xs text-sm">
|
||||||
<li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Usage Guidelines</Link></li>
|
<li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Help</Link></li>
|
||||||
<li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Accessibility</Link></li>
|
<li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Code</Link></li>
|
||||||
<li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Implementation</Link></li>
|
<li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Downloads</a></li>
|
||||||
<li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Download Assets</a></li>
|
<li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Access</Link></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -39,16 +39,16 @@ const Sidebar = () => {
|
|||||||
{
|
{
|
||||||
id: 'visual-identity',
|
id: 'visual-identity',
|
||||||
label: 'Visual Identity',
|
label: 'Visual Identity',
|
||||||
icon: 'Interface/Main_Component',
|
icon: 'Shape/Circle',
|
||||||
items: [
|
items: [
|
||||||
{ href: '/visual-identity', section: 'visual-identity', icon: 'Interface/Main_Component', label: 'Visual Identity' },
|
{ href: '/visual-identity', section: 'visual-identity', icon: 'Shape/Circle', label: 'Visual Identity' },
|
||||||
{ href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
|
{ href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
|
||||||
{ href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
|
{ href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
|
||||||
{ href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
|
{ href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' },
|
||||||
{ href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
|
{ href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' },
|
||||||
{ href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
|
{ href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' },
|
||||||
{ href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' },
|
{ href: '/components', section: 'components', icon: 'Environment/Puzzle', label: 'Components' },
|
||||||
{ href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' },
|
{ href: '/motion', section: 'motion', icon: 'Interface/Trending_Up', label: 'Motion System' },
|
||||||
{ href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
|
{ href: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@@ -93,17 +93,14 @@ const Sidebar = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/80 p-0 backdrop-blur lg:block dark:border-mulberry-800 dark:bg-mulberry-950/80">
|
<aside className="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/80 p-0 backdrop-blur lg:block dark:border-mulberry-800 dark:bg-mulberry-950/80">
|
||||||
<div className="mb-chorus-xs p-chorus-xs">
|
<div className="mb-chorus-xs pt-chorus-xs flex justify-content logo-group-circular">
|
||||||
<div className="px-chorus-md py-chorus-sm">
|
<div className="pb-chorus-md item mx-auto logo-group-circular">
|
||||||
<ThreeLogo width={128} height={128} />
|
<ThreeLogo width={220} height={220} />
|
||||||
<div>
|
<h4 className="text-h4 font-logo">CHORUS</h4>
|
||||||
<div className="font-logo">CHORUS</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-h3 text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h3>
|
<h4 className="px-chorus-md py-chorus-xs text-h4 text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</h4>
|
||||||
</div>
|
<nav className="text-sm" id="brand-nav">
|
||||||
|
|
||||||
<nav className="space-y-xs text-sm" id="brand-nav">
|
|
||||||
{navCategories.map((category) => {
|
{navCategories.map((category) => {
|
||||||
const isExpanded = expandedSections.includes(category.id);
|
const isExpanded = expandedSections.includes(category.id);
|
||||||
const isActive = isCategoryActive(category);
|
const isActive = isCategoryActive(category);
|
||||||
|
|||||||
@@ -4,6 +4,11 @@
|
|||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<title>CHORUS Services Brand Style Guide</title>
|
<title>CHORUS Services Brand Style Guide</title>
|
||||||
|
<link rel="apple-touch-icon" sizes="180x180" href="favicon_io/apple-touch-icon.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="32x32" href="favicon_io/favicon-32x32.png">
|
||||||
|
<link rel="icon" type="image/png" sizes="16x16" href="favicon_io/favicon-16x16.png">
|
||||||
|
<link rel="manifest" href="favicon_io/site.webmanifest">
|
||||||
|
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
<script>
|
<script>
|
||||||
tailwind.config = {
|
tailwind.config = {
|
||||||
@@ -1037,6 +1042,8 @@
|
|||||||
<header class="md:block inset-y-0 left-0 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg">
|
<header class="md:block inset-y-0 left-0 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<div class="flex items-center gap-chorus-lg">
|
<div class="flex items-center gap-chorus-lg">
|
||||||
|
|
||||||
|
|
||||||
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
<div class="flex items-center gap-chorus-sm px-chorus-md py-chorus-md">
|
||||||
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
<canvas class="chorus-logo" style="width: 64px; height: 64px;"></canvas>
|
||||||
<noscript>
|
<noscript>
|
||||||
@@ -1046,8 +1053,78 @@
|
|||||||
<div class="font-thin font-logo">CHORUS</div>
|
<div class="font-thin font-logo">CHORUS</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<nav class="">
|
||||||
|
<ul class="primary-nav horizontal-menu md:flex items-center space-x-chorus-lg">
|
||||||
|
|
||||||
|
<li class="menu-item">
|
||||||
|
<div class="menu-item">Overview</div>
|
||||||
|
<ul class="flyout-menu">
|
||||||
|
<li class="menu-item"><a href="#overview" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Overview</a></li>
|
||||||
|
<li class="menu-item"><a href="#identity" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Identity</a></li>
|
||||||
|
<li class="menu-item"><a href="#usage" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Usage Guidelines</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="menu-item">
|
||||||
|
<div class="menu-item">Visual Identity</div>
|
||||||
|
<ul class="flyout-menu">
|
||||||
|
<li class="menu-item"><a href="#visual-identity" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Visual Identity</a></li>
|
||||||
|
<li class="menu-item"><a href="#logo" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Logo System</a></li>
|
||||||
|
<li class="menu-item"><a href="#typography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Typography</a></li>
|
||||||
|
<li class="menu-item"><a href="#colors" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Color Palette</a></li>
|
||||||
|
<li class="menu-item"><a href="#iconography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Iconography</a></li>
|
||||||
|
<li class="menu-item"><a href="#accessibility" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Accessibility</a></li>
|
||||||
|
<li class="menu-item"><a href="#components" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Components</a></li>
|
||||||
|
<li class="menu-item"><a href="#motion" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Motion System</a></li>
|
||||||
|
<li class="menu-item"><a href="#implementation" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Implementation</a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="menu-item">
|
||||||
|
<div class="menu-item">Communications</div>
|
||||||
|
<ul class="flyout-menu">
|
||||||
|
<li class="menu-item"><a href="#culture" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Culture</a></li>
|
||||||
|
<li class="menu-item"><a href="#communications" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</a></li>
|
||||||
|
<li class="menu-item"><a href="#public-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</a></li>
|
||||||
|
<li class="menu-item"><a href="#investor-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</a></li>
|
||||||
|
<li class="menu-item"><a href="#collaborators" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</a></li>
|
||||||
|
<li class="menu-item"><a href="#social-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</a></li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<li class="menu-item">
|
||||||
|
<div class="menu-item"></div>
|
||||||
|
<ul class="flyout-menu">
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="#communications" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</a>
|
||||||
|
<a href="#public-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</a>
|
||||||
|
<a href="#investor-relations" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</a>
|
||||||
|
<a href="#collaborators" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</a>
|
||||||
|
<a href="#social-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</a>
|
||||||
|
<a href="#presentations-decks" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Presentations & Decks</a>
|
||||||
|
<a href="#video-capture" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Video Capture</a>
|
||||||
|
<a href="#still-photography" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Still Photography</a>
|
||||||
|
<a href="#ai-generated-imagery" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">AI Generated Imagery</a>
|
||||||
|
<a href="#print-media" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Print Media</a>
|
||||||
|
<a href="#advertising" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Advertising Standards</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Breadcrumb Trail -->
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<nav class="flex items-center space-x-chorus-md px-chorus-lg py-chorus-md">
|
||||||
|
|
||||||
|
<a href="#overview" class="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Home</a>
|
||||||
|
<span class="text-carbon-500 dark:text-mulberry-400">/</span>
|
||||||
|
<span class="text-carbon-800 dark:text-mulberry-200">Brand Guide</span>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Main Content -->
|
<!-- Main Content -->
|
||||||
@@ -1236,12 +1313,64 @@
|
|||||||
|
|
||||||
<div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
|
<div class="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
|
||||||
<h4 class="text-h4 mb-2">Navigation Features</h4>
|
<h4 class="text-h4 mb-2">Navigation Features</h4>
|
||||||
|
|
||||||
|
<div class="grid gap-chorus-lg md:grid-cols-4">
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Click on any section in the sidebar to jump directly to that section</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Back Arrow" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Back Arrow" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Use the back arrow in the top left to return to the previous section</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Arrow_Down.png" alt="Scroll Down Arrow" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Arrow_Down.png" alt="Scroll Down Arrow" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Scroll down to explore each section in detail</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Arrow_Up.png" alt="Scroll Up Arrow" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Arrow_Up.png" alt="Scroll Up Arrow" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Use the up arrow to quickly return to the top of the page</span>
|
||||||
|
</div>
|
||||||
|
<!-- Menu System Navigation -->
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings Icon" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings Icon" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Access settings for theme toggle and visual aids in the bottom toolbar</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Breadcrumb Trails -->
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Breadcrumbs.png" alt="Breadcrumbs Icon" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Breadcrumbs.png" alt="Breadcrumbs Icon" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Breadcrumb trails at the top of each section for easy navigation</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Document Search -->
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search.png" alt="Search Icon" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search.png" alt="Search Icon" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Use the search bar to quickly find specific topics or keywords</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- AI Assisted Answers (RAG) -->
|
||||||
|
<div class="flex items center gap-chorus-sm">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat_Conversation.png" alt="AI Assist Icon" class="icon w-5 h-5 dark:hidden">
|
||||||
|
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat_Conversation.png" alt="AI Assist Icon" class="icon w-5 h-5 hidden dark:block">
|
||||||
|
<span>Get AI-assisted answers to questions about the brand guidelines</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<ul class="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300">
|
<ul class="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300">
|
||||||
<li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
|
<li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
|
||||||
<li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
|
<li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
|
||||||
<li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
|
<li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
|
||||||
<li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
|
<li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user