tony/chorus-services
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement ScrollReveal animations and sync navigation icons

Browse Source 
- Add ScrollReveal component with Intersection Observer API
- Create useIntersectionObserver hook for scroll-based animations
- Implement progressive scroll animations on motion page (200ms-600ms delays)
- Add CSS animation system with prefers-reduced-motion accessibility support
- Update navigation icons for consistency between sidebar and primary nav
- Use Interface/Trending_Up for Motion System and Environment/Puzzle for Components
- Add GPU-accelerated transforms with will-change optimization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
2025-08-26 08:39:48 +10:00
parent 9cf92f9fcf
commit 630d1c26ad
12 changed files with 1009 additions and 810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
brand-assets/brand-style-guide-site/src/app/colors/page.tsx
View File

@@ -1,4 +1,4 @@
import ScrollReveal from '@/components/ScrollReveal';
export default function ColorsPage() { export default function ColorsPage() {
const lightColorSets = [ const lightColorSets = [
{ {
@@ -170,8 +170,10 @@ export default function ColorsPage() {
<div className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200"> <div className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
<section id="colors" className="pt-chorus-xxl"> <section id="colors" className="pt-chorus-xxl">
<div className="px-chorus-lg max-w-5xl mx-auto"> <div className="px-chorus-lg max-w-5xl mx-auto">
<h2 className="text-h2 mb-chorus-lg">Color Palette</h2> <ScrollReveal delay={300} duration={600} direction="up">
<h2 className="text-h2 mb-chorus-lg">Color Palette</h2>
</ScrollReveal>
<div className="space-y-chorus-lg"> <div className="space-y-chorus-lg">
<div> <div>
<h3 className="text-h3 mb-chorus-md">Brand Color Philosophy</h3> <h3 className="text-h3 mb-chorus-md">Brand Color Philosophy</h3>
@@ -183,49 +185,53 @@ export default function ColorsPage() {
<div className="grid md:grid-cols-2 mb-chorus-lg"> <div className="grid md:grid-cols-2 mb-chorus-lg">
<div className="p-chorus-lg bg-mulberry-900 shadow-lg"> <div className="p-chorus-lg bg-mulberry-900 shadow-lg">
<div className="flex items-center gap-3 mb-chorus-sm"> <ScrollReveal delay={300} duration={600} direction="up">
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Moon.png" alt="Dark Mode" className="w-8 h-8" /> <div className="flex items-center gap-3 mb-chorus-sm">
<h4 className="text-h4 text-white">Dark Mode (Default)</h4> <img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Moon.png" alt="Dark Mode" className="w-8 h-8" />
</div> <h4 className="text-h4 text-white">Dark Mode (Default)</h4>
<p className="text-sm text-mulberry-200 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p> </div>
<ul className="text-sm space-y-1 text-mulberry-100"> <p className="text-sm text-mulberry-200 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p>
<li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray</li> <ul className="text-sm space-y-1 text-mulberry-100">
<li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents</li> <li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray</li>
<li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li> <li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents</li>
<li><strong>Contrast:</strong> WCAG 2.1 AA compliant</li> <li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li>
</ul> <li><strong>Contrast:</strong> WCAG 2.1 AA compliant</li>
</ul>
</ScrollReveal>
<div className="-mr-chorus-lg"> <div className="-mr-chorus-lg">
{darkColorSets.map((colorSet) => ( {darkColorSets.map((colorSet) => (
<div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}> <div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}>
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}> <ScrollReveal delay={300} duration={600} direction="up">
<div className="flex items-start justify-between mb-chorus-md"> <div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
<div> <div className="flex items-start justify-between mb-chorus-md">
<h4 className="text-h4 mb-2">{colorSet.name}</h4> <div>
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">{colorSet.description}</p> <h4 className="text-h4 mb-2">{colorSet.name}</h4>
<div className="text-xs space-y-1"> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">{colorSet.description}</p>
<p><strong>Usage:</strong> {colorSet.usage}</p> <div className="text-xs space-y-1">
<p><strong>Psychology:</strong> {colorSet.psychology}</p> <p><strong>Usage:</strong> {colorSet.usage}</p>
</div> <p><strong>Psychology:</strong> {colorSet.psychology}</p>
</div>
<div className={`w-16 h-16 ${colorSet.baseColor}`}></div>
</div>
<div className="grid grid-cols-1 font-mono text-sm">
{colorSet.shades.map((shade) => {
const isLight = parseInt(shade.name) <= 400;
const textColor = isLight
? (colorSet.name === 'Sand' || colorSet.name === 'Eucalyptus' ? 'text-carbon-800' : `text-${colorSet.name.toLowerCase()}-900`)
: 'text-white';
return (
<div key={shade.name} className={`p-3 flex justify-between items-center ${shade.class} ${textColor}`}>
<span className="font-semibold">{colorSet.name.toLowerCase()}-{shade.name}</span>
<span className="font-mono text-xs">{shade.hex}</span>
</div> </div>
); </div>
})} <div className={`w-16 h-16 ${colorSet.baseColor}`}></div>
</div>
<div className="grid grid-cols-1 font-mono text-sm">
{colorSet.shades.map((shade) => {
const isLight = parseInt(shade.name) <= 400;
const textColor = isLight
? (colorSet.name === 'Sand' || colorSet.name === 'Eucalyptus' ? 'text-carbon-800' : `text-${colorSet.name.toLowerCase()}-900`)
: 'text-white';
return (
<div key={shade.name} className={`p-3 flex justify-between items-center ${shade.class} ${textColor}`}>
<span className="font-semibold">{colorSet.name.toLowerCase()}-{shade.name}</span>
<span className="font-mono text-xs">{shade.hex}</span>
</div>
);
})}
</div>
</div> </div>
</div> </ScrollReveal>
</div> </div>
))} ))}
</div> </div>
@@ -233,21 +239,26 @@ export default function ColorsPage() {
</div> </div>
<div className="p-chorus-lg bg-white shadow-lg"> <div className="p-chorus-lg bg-white shadow-lg">
<div className="flex items-center gap-3 mb-chorus-sm">
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Sun.png" alt="Light Mode" className="w-8 h-8" /> <ScrollReveal delay={300} duration={600} direction="up">
<h4 className="text-h4 text-carbon-900">Light Mode (Alternative)</h4> <div className="flex items-center gap-3 mb-chorus-sm">
</div> <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Sun.png" alt="Light Mode" className="w-8 h-8" />
<p className="text-sm text-carbon-700 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p> <h4 className="text-h4 text-carbon-900">Light Mode (Alternative)</h4>
<ul className="text-sm space-y-1 text-carbon-800"> </div>
<li><strong>Background Hierarchy:</strong> Pure White → Sand Variants → Eucalyptus</li> <p className="text-sm text-carbon-700 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p>
<li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray</li> <ul className="text-sm space-y-1 text-carbon-800">
<li><strong>Usage:</strong> Print materials, accessibility accommodations</li> <li><strong>Background Hierarchy:</strong> Pure White → Sand Variants → Eucalyptus</li>
<li><strong>Contrast:</strong> Optimized for readability on warm backgrounds</li> <li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray</li>
</ul> <li><strong>Usage:</strong> Print materials, accessibility accommodations</li>
<li><strong>Contrast:</strong> Optimized for readability on warm backgrounds</li>
</ul>
</ScrollReveal>
<div className="-ml-chorus-lg"> <div className="-ml-chorus-lg">
{lightColorSets.map((colorSet) => ( {lightColorSets.map((colorSet) => (
<div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}> <div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}>
<ScrollReveal delay={300} duration={600} direction="up">
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}> <div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
<div className="flex items-start justify-between mb-chorus-md"> <div className="flex items-start justify-between mb-chorus-md">
<div> <div>
@@ -277,6 +288,7 @@ export default function ColorsPage() {
})} })}
</div> </div>
</div> </div>
</ScrollReveal>
</div> </div>
))} ))}
</div> </div>

24
brand-assets/brand-style-guide-site/src/app/communications/page.tsx
View File

@@ -51,30 +51,30 @@ export default function Communications() {
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 "> <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
<h3 className="text-h3 mb-chorus-md">Writing Style</h3> <h3 className="text-h3 mb-chorus-md">Writing Style</h3>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300"> <ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• Active voice preferred</li> <li>Active voice preferred</li>
<li>• Clear, concise sentences</li> <li>Clear, concise sentences</li>
<li>• Technical accuracy</li> <li>Technical accuracy</li>
<li>• Inclusive language</li> <li>Inclusive language</li>
</ul> </ul>
</div> </div>
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 "> <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
<h3 className="text-h3 mb-chorus-md">Terminology</h3> <h3 className="text-h3 mb-chorus-md">Terminology</h3>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300"> <ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• "AI agents" not "bots"</li> <li>"AI agents" not "bots"</li>
<li>• "Context management"</li> <li>"Context management"</li>
<li>• "Distributed orchestration"</li> <li>"Distributed orchestration"</li>
<li>• "Knowledge fabric"</li> <li>"Knowledge fabric"</li>
</ul> </ul>
</div> </div>
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 "> <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
<h3 className="text-h3 mb-chorus-md">Localization</h3> <h3 className="text-h3 mb-chorus-md">Localization</h3>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300"> <ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• Global-first approach</li> <li>Global-first approach</li>
<li>• Cultural sensitivity</li> <li>Cultural sensitivity</li>
<li>• Technical term consistency</li> <li>Technical term consistency</li>
<li>• Regional adaptations</li> <li>Regional adaptations</li>
</ul> </ul>
</div> </div>
</div> </div>

22
brand-assets/brand-style-guide-site/src/app/globals.css
View File

@@ -790,6 +790,10 @@ pre[class*="language-"] {
margin-bottom: 0; margin-bottom: 0;
} }
.secondary-nav {
overflow: hidden !important;
}
.primary-nav { .primary-nav {
position: relative; position: relative;
font-weight: 600; font-weight: 600;
@@ -1104,6 +1108,22 @@ nav button {
&.dark .bg-white { background-color: #ffffff !important; } &.dark .bg-white { background-color: #ffffff !important; }
} }
/* Scroll Animation System */
.scroll-reveal {
/* Base styles for scroll animations */
will-change: opacity, transform;
}
/* Accessibility: respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
.scroll-reveal, .scroll-reveal * {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
transform: none !important;
opacity: 1 !important;
}
}
/* Enhanced contrast for accessibility theme selection indicators */ /* Enhanced contrast for accessibility theme selection indicators */
[data-theme="protanopia"] .ring-ocean-500 { box-shadow: 0 0 0 2px #1e40af !important; } [data-theme="protanopia"] .ring-ocean-500 { box-shadow: 0 0 0 2px #1e40af !important; }
[data-theme="deuteranopia"] .ring-eucalyptus-500 { box-shadow: 0 0 0 2px #6b21a8 !important; } [data-theme="deuteranopia"] .ring-eucalyptus-500 { box-shadow: 0 0 0 2px #6b21a8 !important; }
@@ -1130,4 +1150,4 @@ nav button {
div.pt-chorus-xxl { div.pt-chorus-xxl {
padding-top: calc(3.052rem + 70px) !important; padding-top: calc(3.052rem + 70px) !important;
} }
} }

767
brand-assets/brand-style-guide-site/src/app/iconography/page.tsx
View File

@@ -1,37 +1,47 @@
import { div } from "three/tsl" import { div } from "three/tsl"
import ScrollReveal from '@/components/ScrollReveal';
export default function IconographyPage() { export default function IconographyPage() {
return ( return (
<div className="py-chorus-xxl"> <div className="py-chorus-xxl">
<section> <section>
<div className="max-w-5xl mx-auto px-chorus-lg pt-chorus-xxl"> <div className="max-w-5xl mx-auto px-chorus-lg pt-chorus-xxl">
<div className="mb-chorus-xxl"> <ScrollReveal delay={200} duration={600} direction="up">
<h1 className="text-h2 mb-chorus-lg">Iconography System</h1> <div className="mb-chorus-xxl">
<h1 className="text-h2 mb-chorus-lg">Iconography System</h1>
<div className="mb-chorus-lg">
<h2 className="text-h3 mb-chorus-md">Philosophy</h2>
<p className="mb-chorus-md">
The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.
</p>
<div className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg"> <div className="mb-chorus-lg">
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950"> <h2 className="text-h3 mb-chorus-md">Philosophy</h2>
<h4 className="text-h4 mb-chorus-sm">Clarity & Recognition</h4> <p className="mb-chorus-md">
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p> The CHORUS iconography system uses the <strong>Coolicons v4.1</strong> library, providing a comprehensive set of clean, minimalist icons that align with our ultra-modern aesthetic. Icons serve as visual anchors and functional indicators, maintaining clarity across both light and dark themes while supporting our vision-inclusive design principles.
</div> </p>
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
<h4 className="text-h4 mb-chorus-sm">Theme Adaptive</h4> <div className="grid gap-chorus-md md:grid-cols-3 mt-chorus-lg">
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p> <ScrollReveal delay={300} duration={600} direction="up">
</div> <div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950"> <h4 className="text-h4 mb-chorus-sm">Clarity & Recognition</h4>
<h4 className="text-h4 mb-chorus-sm">Consistent Scale</h4> <p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p> </div>
</ScrollReveal>
<ScrollReveal delay={400} duration={600} direction="up">
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
<h4 className="text-h4 mb-chorus-sm">Theme Adaptive</h4>
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Black and white variants ensure perfect contrast in all modes</p>
</div>
</ScrollReveal>
<ScrollReveal delay={500} duration={600} direction="up">
<div className="border border-nickel-200 p-chorus-md dark:border-nickel-900 bg-white dark:bg-mulberry-950">
<h4 className="text-h4 mb-chorus-sm">Consistent Scale</h4>
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Standardized sizing maintains visual harmony</p>
</div>
</ScrollReveal>
</div> </div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
{/* Icon Categories */} {/* Icon Categories */}
<section className="mb-chorus-xxl"> <section className="mb-chorus-xxl">
<h2 className="text-h3 mb-chorus-md">Icon Categories</h2> <h2 className="text-h3 mb-chorus-md">Icon Categories</h2>
<p className="mb-chorus-md"> <p className="mb-chorus-md">
@@ -39,390 +49,401 @@ export default function IconographyPage() {
</p> </p>
<div className="space-y-chorus-lg"> <div className="space-y-chorus-lg">
{/* Interface Icons */} <ScrollReveal delay={500} duration={600} direction="up">
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800"> {/* Interface Icons */}
<h4 className="text-h4 mb-chorus-md">Interface & Navigation</h4> <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p> <h4 className="text-h4 mb-chorus-md">Interface & Navigation</h4>
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md"> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Core UI elements for user interaction and navigation</p>
<div className="flex flex-col items-center gap-2"> <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Search</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Search</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Settings</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Settings</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Filter</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Filter</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Check</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Check</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Link</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Link</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Heart</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Heart</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Star</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Star</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Delete</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Delete</span>
</div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
{/* Navigation Icons */} <ScrollReveal delay={500} duration={600} direction="up">
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800"> {/* Navigation Icons */}
<h4 className="text-h4 mb-chorus-md">Navigation & Direction</h4> <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p> <h4 className="text-h4 mb-chorus-md">Navigation & Direction</h4>
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md"> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
<div className="flex flex-col items-center gap-2"> <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Home</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Home</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Left</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Left</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Right</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Right</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Up</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Up</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Down</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Down</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Location</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Location</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Globe</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" />
</div> <span className="text-xs text-center">Globe</span>
<div className="flex flex-col items-center gap-2"> </div>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" /> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" />
<span className="text-xs text-center">Menu</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Menu</span>
</div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
<ScrollReveal delay={500} duration={600} direction="up">
{/* File & System Icons */} {/* File & System Icons */}
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800"> <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
<h4 className="text-h4 mb-chorus-md">File & System Operations</h4> <h4 className="text-h4 mb-chorus-md">File & System Operations</h4>
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">File management and system-level actions</p> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">File management and system-level actions</p>
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md"> <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Document.png" alt="Document" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Document</span> <span className="text-xs text-center">Document</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code File" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/File_Code.png" alt="Code File" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Code</span> <span className="text-xs text-center">Code</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Folder.png" alt="Folder" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Folder</span> <span className="text-xs text-center">Folder</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Download_Package.png" alt="Download" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Download_Package.png" alt="Download" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Download</span> <span className="text-xs text-center">Download</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Upload</span> <span className="text-xs text-center">Upload</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/System/Save.png" alt="Save" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/System/Save.png" alt="Save" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Save</span> <span className="text-xs text-center">Save</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Copy.png" alt="Copy" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Edit/Copy.png" alt="Copy" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Copy</span> <span className="text-xs text-center">Copy</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/File/Archive.png" alt="Archive" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Archive</span> <span className="text-xs text-center">Archive</span>
</div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
<ScrollReveal delay={500} duration={600} direction="up">
{/* Communication Icons */} {/* Communication Icons */}
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800"> <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
<h4 className="text-h4 mb-chorus-md">Communication & Social</h4> <h4 className="text-h4 mb-chorus-md">Communication & Social</h4>
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Messaging, notifications, and social interaction</p> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Messaging, notifications, and social interaction</p>
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md"> <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Mail.png" alt="Mail" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Mail</span> <span className="text-xs text-center">Mail</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="Chat" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Chat</span> <span className="text-xs text-center">Chat</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notification" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Bell.png" alt="Notification" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Notify</span> <span className="text-xs text-center">Notify</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Phone.png" alt="Phone" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Phone</span> <span className="text-xs text-center">Phone</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Share</span> <span className="text-xs text-center">Share</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="User" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/User/User_01.png" alt="User" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">User</span> <span className="text-xs text-center">User</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="Team" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/User/Users_Group.png" alt="Team" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Team</span> <span className="text-xs text-center">Team</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Send</span> <span className="text-xs text-center">Send</span>
</div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
<ScrollReveal delay={500} duration={600} direction="up">
{/* Status & Warning Icons */} {/* Status & Warning Icons */}
<div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800"> <div className="shadow-lg bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-800">
<h4 className="text-h4 mb-chorus-md">Status & Feedback</h4> <h4 className="text-h4 mb-chorus-md">Status & Feedback</h4>
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Status indicators, warnings, and user feedback</p> <p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Status indicators, warnings, and user feedback</p>
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md"> <div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Success</span> <span className="text-xs text-center">Success</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Warning</span> <span className="text-xs text-center">Warning</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Error</span> <span className="text-xs text-center">Error</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Info.png" alt="Info" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Info</span> <span className="text-xs text-center">Info</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Help.png" alt="Help" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Warning/Help.png" alt="Help" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Help</span> <span className="text-xs text-center">Help</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Loading.png" alt="Loading" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Loading.png" alt="Loading" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Loading</span> <span className="text-xs text-center">Loading</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Secure" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Secure" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Secure</span> <span className="text-xs text-center">Secure</span>
</div> </div>
<div className="flex flex-col items-center gap-2"> <div className="flex flex-col items-center gap-2">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 dark:hidden" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 dark:hidden" />
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" /> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" />
<span className="text-xs text-center">Unlock</span> <span className="text-xs text-center">Unlock</span>
</div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
</div> </div>
</section> </section>
{/* Usage Guidelines */} <ScrollReveal delay={200} duration={600} direction="up">
<section className="mb-chorus-xxl"> {/* Usage Guidelines */}
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2> <section className="mb-chorus-xxl">
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
<div className="grid gap-chorus-lg md:grid-cols-2">
{/* DO Section */} <div className="grid gap-chorus-lg md:grid-cols-2">
<div> {/* DO Section */}
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm"> <div>
<span className="text-2xl">✓</span> <h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
DO <span className="text-2xl">✓</span>
</h3> DO
</h3>
<div className="space-y-chorus-md">
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md"> <div className="space-y-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Use Theme Variants</h4> <div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
<p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p> <h4 className="text-h5 mb-chorus-sm font-semibold">Use Theme Variants</h4>
<div className="flex gap-chorus-sm items-center"> <p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" /> <div className="flex gap-chorus-sm items-center">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="White Settings" className="w-6 h-6 bg-carbon-900 p-1" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" />
<span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span> <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="White Settings" className="w-6 h-6 bg-carbon-900 p-1" />
<span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span>
</div>
</div>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Standard Sizes</h4>
<p className="text-sm mb-chorus-sm">Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.</p>
<div className="flex gap-chorus-sm items-center">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="16px" className="w-4 h-4" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="20px" className="w-5 h-5" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="24px" className="w-6 h-6" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" />
</div>
</div>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Semantic Meaning</h4>
<p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
</div> </div>
</div> </div>
</div>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md"> {/* DON'T Section */}
<h4 className="text-h5 mb-chorus-sm font-semibold">Standard Sizes</h4> <div>
<p className="text-sm mb-chorus-sm">Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.</p> <h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
<div className="flex gap-chorus-sm items-center"> <span className="text-2xl">✗</span>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="16px" className="w-4 h-4" /> DON'T
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="20px" className="w-5 h-5" /> </h3>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="24px" className="w-6 h-6" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" /> <div className="space-y-chorus-md">
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Mix Icon Styles</h4>
<p className="text-sm mb-chorus-sm">Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.</p>
<div className="flex gap-chorus-sm items-center opacity-75">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Coolicon" className="w-6 h-6" />
<span className="text-sm">+</span>
<div className="w-6 h-6 border-2 border-carbon-400 flex items-center justify-center text-xs">?</div>
<span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
</div>
</div> </div>
</div>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md"> <div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Semantic Meaning</h4> <h4 className="text-h5 mb-chorus-sm font-semibold">Arbitrary Sizing</h4>
<p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p> <p className="text-sm mb-chorus-sm">Don't use random sizes that break the visual hierarchy and spacing system.</p>
<div className="flex gap-chorus-sm items-center opacity-75">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-3 h-3" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-7 h-7" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-10 h-10" />
<span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
</div>
</div>
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Modify or Recolor</h4>
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
</div>
</div> </div>
</div> </div>
</div> </div>
</section>
</ScrollReveal>
{/* DON'T Section */} <ScrollReveal delay={200} duration={600} direction="up">
<div> {/* Implementation Guide */}
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm"> <section>
<span className="text-2xl">✗</span> <h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
DON'T <p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
</h3> The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.
<div className="space-y-chorus-md">
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Mix Icon Styles</h4>
<p className="text-sm mb-chorus-sm">Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.</p>
<div className="flex gap-chorus-sm items-center opacity-75">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Coolicon" className="w-6 h-6" />
<span className="text-sm">+</span>
<div className="w-6 h-6 border-2 border-carbon-400 flex items-center justify-center text-xs">?</div>
<span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
</div>
</div>
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Arbitrary Sizing</h4>
<p className="text-sm mb-chorus-sm">Don't use random sizes that break the visual hierarchy and spacing system.</p>
<div className="flex gap-chorus-sm items-center opacity-75">
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-3 h-3" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-7 h-7" />
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Wrong sizing" className="w-10 h-10" />
<span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
</div>
</div>
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h4 className="text-h5 mb-chorus-sm font-semibold">Modify or Recolor</h4>
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
</div>
</div>
</div>
</div>
</section>
{/* Implementation Guide */}
<section>
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.
</p>
<div className="bg-gradient-to-r from-mulberry-50 to-ocean-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-ocean-900/20 dark:border-mulberry-700">
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
Implementation Steps
</h4>
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
Use theme-aware icon implementation with automatic dark/light mode switching:
</p> </p>
<div className="space-y-chorus-md"> <div className="bg-gradient-to-r from-mulberry-50 to-ocean-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-ocean-900/20 dark:border-mulberry-700">
<div> <h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm"> Implementation Steps
1. Theme-Aware Icon Implementation (HTML/React) </h4>
</h5> <p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto"> Use theme-aware icon implementation with automatic dark/light mode switching:
<pre>{`<!-- Light theme icon (visible in light mode) --> </p>
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png"
alt="Settings" <div className="space-y-chorus-md">
className="w-6 h-6 dark:hidden" /> <div>
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
1. Theme-Aware Icon Implementation (HTML/React)
</h5>
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
<pre>{`<!-- Light theme icon (visible in light mode) -->
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png"
alt="Settings"
className="w-6 h-6 dark:hidden" />
<!-- Dark theme icon (visible in dark mode) --> <!-- Dark theme icon (visible in dark mode) -->
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" <img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png"
alt="Settings" alt="Settings"
className="w-6 h-6 hidden dark:block" />`}</pre> className="w-6 h-6 hidden dark:block" />`}</pre>
</div>
</div> </div>
</div>
<div> <div>
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm"> <h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
2. Standard Icon Sizes (CSS Classes) 2. Standard Icon Sizes (CSS Classes)
</h5> </h5>
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto"> <div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
<pre>{`/* Standard icon sizes following CHORUS spacing system */ <pre>{`/* Standard icon sizes following CHORUS spacing system */
.icon-sm { width: 1rem; height: 1rem; } /* 16px */ .icon-sm { width: 1rem; height: 1rem; } /* 16px */
.icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */ .icon-md { width: 1.25rem; height: 1.25rem; } /* 20px */
.icon-lg { width: 1.5rem; height: 1.5rem; } /* 24px */ .icon-lg { width: 1.5rem; height: 1.5rem; } /* 24px */
.icon-xl { width: 2rem; height: 2rem; } /* 32px */`}</pre> .icon-xl { width: 2rem; height: 2rem; } /* 32px */`}</pre>
</div>
</div> </div>
</div>
<div> <div>
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm"> <h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
3. Icon Library Structure 3. Icon Library Structure
</h5> </h5>
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto"> <div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm overflow-x-auto">
<pre>{`public/icons/coolicons.v4.1/ <pre>{`public/icons/coolicons.v4.1/
├── coolicons PNG/ ├── coolicons PNG/
│ ├── Black/ # Light theme icons │ ├── Black/ # Light theme icons
│ └── White/ # Dark theme icons │ └── White/ # Dark theme icons
├── coolicons SVG/ # Vector versions ├── coolicons SVG/ # Vector versions
└── Webfont/ # Icon font (optional)`}</pre> └── Webfont/ # Icon font (optional)`}</pre>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </section>
</section> </ScrollReveal>
</div> </div>
</section> </section>
</div> </div>

33
brand-assets/brand-style-guide-site/src/app/logo/page.tsx
View File

@@ -1,27 +1,37 @@
import ThreeLogo from '@/components/ThreeLogo'; import ThreeLogo from '@/components/ThreeLogo';
import ScrollReveal from '@/components/ScrollReveal';
export default function LogoPage() { export default function LogoPage() {
return ( return (
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400 "> <div className="relative">
{/* Full-width Hero Section with 3D Logo */} {/* Fixed Hero Section with 3D Logo */}
<section id="logo-hero" className="mb-chorus-lg pt-chorus-xl"> <section
id="logo-hero"
className="fixed top-0 left-0 right-0 bottom-0 md:left-64 flex items-center justify-center bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400"
>
<ScrollReveal delay={300} duration={600} direction="up">
{/* Logo Section */} {/* Logo Section */}
<div className="pt-chorus-xs logo-group-circular mx-auto"> <div className="logo-group-circular">
<div className="pb-chorus-md item mx-auto logo-group-circular"> <div className="item logo-group-circular">
<ThreeLogo width={512} height={512} /> <ThreeLogo width={512} height={512} />
<h4 className="text-h4 font-logo">CHORUS</h4> <h4 className="text-h4 font-logo">CHORUS</h4>
</div> </div>
</div> </div>
</ScrollReveal>
</section> </section>
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl"> {/* Spacer to create scroll space */}
<div className="h-screen"></div>
{/* Sliding Content Overlay */}
<div className="relative z-10 bg-white dark:bg-transparent shadow-2xl">
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl">
{/* Logo System Content */} {/* Logo System Content */}
<div className="space-y-chorus-xxl"> <div className="space-y-chorus-xxl">
{/* Primary Logo Description */} {/* Primary Logo Description */}
<section> <ScrollReveal delay={300} duration={600} direction="up">
<section>
<h2 className="text-h2 mb-chorus-lg">Logo System</h2> <h2 className="text-h2 mb-chorus-lg">Logo System</h2>
<div className="space-y-chorus-lg"> <div className="space-y-chorus-lg">
@@ -64,8 +74,8 @@ export default function LogoPage() {
</div> </div>
</div> </div>
</div> </div>
</section> </section>
</ScrollReveal>
{/* Logo Orientations */} {/* Logo Orientations */}
<section> <section>
<h3 className="text-h3 mb-chorus-md">Logo Orientations</h3> <h3 className="text-h3 mb-chorus-md">Logo Orientations</h3>
@@ -261,6 +271,7 @@ export default function LogoPage() {
</div> </div>
</section> </section>
</div> </div>
</div>
</div> </div>
</div> </div>
); );

300
brand-assets/brand-style-guide-site/src/app/motion/page.tsx
View File

@@ -1,3 +1,5 @@
import ScrollReveal from '@/components/ScrollReveal';
export default function Motion() { export default function Motion() {
return ( return (
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-950 from-white to-sand-200"> <div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-950 from-white to-sand-200">
@@ -6,171 +8,181 @@ export default function Motion() {
<h2 className="text-h2 mb-chorus-lg">Motion System</h2> <h2 className="text-h2 mb-chorus-lg">Motion System</h2>
<div className="py-chorus-lg space-y-chorus-lg"> <div className="py-chorus-lg space-y-chorus-lg">
<div className="mb-chorus-lg"> <ScrollReveal delay={200} duration={600} direction="up">
<p className="text-lg mb-chorus-md"> <div className="mb-chorus-lg">
The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users. <p className="text-lg mb-chorus-md">
</p> The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users.
<p className="text-carbon-600 dark:text-mulberry-300"> </p>
Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality. <p className="text-carbon-600 dark:text-mulberry-300">
</p> Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality.
</div> </p>
</div>
</ScrollReveal>
<div className="grid gap-chorus-lg md:grid-cols-3"> <ScrollReveal delay={300} duration={600} direction="up">
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900"> <div className="grid gap-chorus-lg md:grid-cols-3">
<h3 className="text-h3 mb-chorus-md">Timing Scale</h3> <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
<div className="space-y-2 text-sm"> <h3 className="text-h3 mb-chorus-md">Timing Scale</h3>
<div className="flex justify-between"> <div className="space-y-2 text-sm">
<span className="text-carbon-600 dark:text-mulberry-300">Fast</span> <div className="flex justify-between">
<span className="font-mono">200ms</span> <span className="text-carbon-600 dark:text-mulberry-300">Fast</span>
<span className="font-mono">200ms</span>
</div>
<div className="flex justify-between">
<span className="text-carbon-600 dark:text-mulberry-300">Standard</span>
<span className="font-mono">300ms</span>
</div>
<div className="flex justify-between">
<span className="text-carbon-600 dark:text-mulberry-300">Deliberate</span>
<span className="font-mono">500ms</span>
</div>
</div> </div>
<div className="flex justify-between"> </div>
<span className="text-carbon-600 dark:text-mulberry-300">Standard</span>
<span className="font-mono">300ms</span> <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
<h3 className="text-h3 mb-chorus-md">Easing Functions</h3>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-carbon-600 dark:text-mulberry-300">Primary</span>
<span className="font-mono">ease-out</span>
</div>
<div className="flex justify-between">
<span className="text-carbon-600 dark:text-mulberry-300">Secondary</span>
<span className="font-mono">ease-in-out</span>
</div>
<div className="flex justify-between">
<span className="text-carbon-600 dark:text-mulberry-300">Emphasis</span>
<span className="font-mono">cubic-bezier</span>
</div>
</div> </div>
<div className="flex justify-between"> </div>
<span className="text-carbon-600 dark:text-mulberry-300">Deliberate</span>
<span className="font-mono">500ms</span> <div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
<h3 className="text-h3 mb-chorus-md">Motion Properties</h3>
<div className="space-y-2 text-sm">
<div className="text-carbon-600 dark:text-mulberry-300">• Opacity transitions</div>
<div className="text-carbon-600 dark:text-mulberry-300">• Color changes</div>
<div className="text-carbon-600 dark:text-mulberry-300">• Background shifts</div>
<div className="text-carbon-600 dark:text-mulberry-300">• Transform effects</div>
</div> </div>
</div> </div>
</div> </div>
</ScrollReveal>
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
<h3 className="text-h3 mb-chorus-md">Easing Functions</h3> <ScrollReveal delay={400} duration={600} direction="up">
<div className="space-y-2 text-sm"> <div className="grid gap-chorus-lg md:grid-cols-2">
<div className="flex justify-between"> <div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
<span className="text-carbon-600 dark:text-mulberry-300">Primary</span> <h3 className="text-h3 mb-chorus-md">Interactive Elements</h3>
<span className="font-mono">ease-out</span> <div className="space-y-3">
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Navigation Links</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Hover states with lateral translation and color transitions</p>
<div className="font-mono text-xs text-carbon-500">
hover:translate-x-1 transition-all duration-300 ease-out
</div>
</div>
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Icons & Elements</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Scale transformations on hover with rotation for chevrons</p>
<div className="font-mono text-xs text-carbon-500">
group-hover:scale-110 transition-transform duration-300
</div>
</div>
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Dropdowns</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Vertical slide with opacity fade-in</p>
<div className="font-mono text-xs text-carbon-500">
translateY(-8px) → translateY(0) opacity transition
</div>
</div>
</div> </div>
<div className="flex justify-between"> </div>
<span className="text-carbon-600 dark:text-mulberry-300">Secondary</span>
<span className="font-mono">ease-in-out</span> <div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
</div> <h3 className="text-h3 mb-chorus-md">3D Logo Animation</h3>
<div className="flex justify-between"> <div className="space-y-3">
<span className="text-carbon-600 dark:text-mulberry-300">Emphasis</span> <div>
<span className="font-mono">cubic-bezier</span> <h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Continuous Rotation</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Subtle multi-axis rotation using requestAnimationFrame</p>
<div className="font-mono text-xs text-carbon-500 space-y-1">
<div>rotation.x += 0.010</div>
<div>rotation.y += -0.010</div>
<div>rotation.z += -0.1</div>
</div>
</div>
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Material Transitions</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Dynamic color changes for accessibility themes</p>
<div className="font-mono text-xs text-carbon-500">
Custom event-driven material updates
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</ScrollReveal>
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900"> <ScrollReveal delay={500} duration={600} direction="up">
<h3 className="text-h3 mb-chorus-md">Motion Properties</h3> <div className="bg-white dark:bg-carbon-900 p-chorus-lg border border-nickel-200 dark:border-carbon-800">
<div className="space-y-2 text-sm"> <h3 className="text-h3 mb-chorus-md">CSS Implementation</h3>
<div className="text-carbon-600 dark:text-mulberry-300">• Opacity transitions</div> <div className="grid gap-chorus-md md:grid-cols-2">
<div className="text-carbon-600 dark:text-mulberry-300">• Color changes</div> <div>
<div className="text-carbon-600 dark:text-mulberry-300">• Background shifts</div> <h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Global Transition Rule</h4>
<div className="text-carbon-600 dark:text-mulberry-300">• Transform effects</div> <div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">* &#123;</div>
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
transition: opacity 200ms ease-out,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color 200ms ease-out,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color 200ms ease-out,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-color 200ms ease-out;
</div>
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">&#125;</div>
</div>
</div>
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Component Transitions</h4>
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
<div className="text-ocean-700 dark:text-ocean-300">.nav-link &#123;</div>
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
transition-all: duration-300 ease-out;<br />
&amp;:hover &#123;<br />
&nbsp;&nbsp;transform: translateX(4px);<br />
&#125;
</div>
<div className="text-ocean-700 dark:text-ocean-300">&#125;</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
<div className="grid gap-chorus-lg md:grid-cols-2"> <ScrollReveal delay={600} duration={600} direction="up">
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800"> <div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
<h3 className="text-h3 mb-chorus-md">Interactive Elements</h3> <h3 className="text-h3 mb-chorus-md">Motion Principles</h3>
<div className="space-y-3"> <div className="grid gap-chorus-md md:grid-cols-2">
<div> <div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Navigation Links</h4> <h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Hover states with lateral translation and color transitions</p> <ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<div className="font-mono text-xs text-carbon-500"> <li>• Purposeful motion that guides user attention</li>
hover:translate-x-1 transition-all duration-300 ease-out <li>• Consistent 200-300ms timing for interface elements</li>
</div> <li>• Ease-out curves for natural, organic feeling</li>
<li>• Subtle transforms that enhance without distracting</li>
<li>• Performance-optimized with GPU acceleration</li>
</ul>
</div> </div>
<div> <div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Icons & Elements</h4> <h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Scale transformations on hover with rotation for chevrons</p> <ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<div className="font-mono text-xs text-carbon-500"> <li>• Respects prefers-reduced-motion settings</li>
group-hover:scale-110 transition-transform duration-300 <li>• No flashing or rapid animations</li>
</div> <li>• Focus indicators remain clearly visible</li>
</div> <li>• Essential information never animation-dependent</li>
<div> <li>• Smooth transitions preserve context and orientation</li>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Dropdowns</h4> </ul>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Vertical slide with opacity fade-in</p>
<div className="font-mono text-xs text-carbon-500">
translateY(-8px) → translateY(0) opacity transition
</div>
</div> </div>
</div> </div>
</div> </div>
</ScrollReveal>
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
<h3 className="text-h3 mb-chorus-md">3D Logo Animation</h3>
<div className="space-y-3">
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Continuous Rotation</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Subtle multi-axis rotation using requestAnimationFrame</p>
<div className="font-mono text-xs text-carbon-500 space-y-1">
<div>rotation.x += 0.010</div>
<div>rotation.y += -0.010</div>
<div>rotation.z += -0.1</div>
</div>
</div>
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-1">Material Transitions</h4>
<p className="text-xs text-carbon-600 dark:text-mulberry-300 mb-2">Dynamic color changes for accessibility themes</p>
<div className="font-mono text-xs text-carbon-500">
Custom event-driven material updates
</div>
</div>
</div>
</div>
</div>
<div className="bg-white dark:bg-carbon-900 p-chorus-lg border border-nickel-200 dark:border-carbon-800">
<h3 className="text-h3 mb-chorus-md">CSS Implementation</h3>
<div className="grid gap-chorus-md md:grid-cols-2">
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Global Transition Rule</h4>
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">* &#123;</div>
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
transition: opacity 200ms ease-out,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color 200ms ease-out,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background-color 200ms ease-out,<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;border-color 200ms ease-out;
</div>
<div className="text-eucalyptus-700 dark:text-eucalyptus-300">&#125;</div>
</div>
</div>
<div>
<h4 className="text-sm font-semibold text-carbon-950 dark:text-white mb-2">Component Transitions</h4>
<div className="bg-carbon-50 dark:bg-carbon-800 p-3 font-mono text-xs overflow-x-auto">
<div className="text-ocean-700 dark:text-ocean-300">.nav-link &#123;</div>
<div className="pl-4 text-carbon-700 dark:text-carbon-300">
transition-all: duration-300 ease-out;<br />
&amp;:hover &#123;<br />
&nbsp;&nbsp;transform: translateX(4px);<br />
&#125;
</div>
<div className="text-ocean-700 dark:text-ocean-300">&#125;</div>
</div>
</div>
</div>
</div>
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
<h3 className="text-h3 mb-chorus-md">Motion Principles</h3>
<div className="grid gap-chorus-md md:grid-cols-2">
<div>
<h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• Purposeful motion that guides user attention</li>
<li>• Consistent 200-300ms timing for interface elements</li>
<li>• Ease-out curves for natural, organic feeling</li>
<li>• Subtle transforms that enhance without distracting</li>
<li>• Performance-optimized with GPU acceleration</li>
</ul>
</div>
<div>
<h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• Respects prefers-reduced-motion settings</li>
<li>• No flashing or rapid animations</li>
<li>• Focus indicators remain clearly visible</li>
<li>• Essential information never animation-dependent</li>
<li>• Smooth transitions preserve context and orientation</li>
</ul>
</div>
</div>
</div>
</div> </div>
</div> </div>
</section> </section>

414
brand-assets/brand-style-guide-site/src/app/typography/page.tsx
View File

@@ -1,203 +1,213 @@
import ScrollReveal from '@/components/ScrollReveal';
export default function TypographyPage() { export default function TypographyPage() {
return ( return (
<div className="py-chorus-xxl"> <div className="py-chorus-xxl">
<section className="mb-chorus-xxl pt-chorus-xxl"> <section className="mb-chorus-xxl pt-chorus-xxl">
<div className="mb-chorus-xxl max-w-5xl mx-auto px-chorus-lg "> <div className="mb-chorus-xxl max-w-5xl mx-auto px-chorus-lg ">
<ScrollReveal delay={300} duration={600} direction="up">
<h1 className="text-h2 mb-chorus-md">Typography</h1> <h1 className="text-h2 mb-chorus-md">Typography</h1>
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md"> <p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices. The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.
</p>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md mb-chorus-lg">
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">✓ Complete System Scaling</h4>
<p className="text-eucalyptus-800 dark:text-eucalyptus-200">
All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.
</p> </p>
</div>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md mb-chorus-lg">
{/* Font Families */} <h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">✓ Complete System Scaling</h4>
<div className="py-chorus-xl"> <p className="text-eucalyptus-800 dark:text-eucalyptus-200">
<h2 className="text-h3 mb-chorus-md">Font Families</h2> All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.
<div className="grid gap-chorus-lg md:grid-cols-3">
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
<h3 className="font-sans text-3xl mb-chorus-md">Inter Tight</h3>
<p className="mb-chorus-md">
The primary typeface for CHORUS is <strong>Inter Tight</strong>, a modern sans-serif font designed for high legibility and versatility.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
Fallback fonts include Arial, Helvetica, sans-serif.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
Inter is available for free under the SIL Open Font License and can be downloaded from{' '}
<a href="https://rsms.me/inter/" className="text-ocean-600 dark:text-ocean-400 hover:underline">
rsms.me/inter
</a>.
</p>
</div>
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
<h3 className="font-logo text-3xl mb-chorus-md">Exo</h3>
<p className="mb-chorus-md">
The logo typeface for CHORUS is <strong>Exo</strong>, a modern sans-serif font designed for high legibility and versatility.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
Exo is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
</p>
</div>
<div>
<h3 className="font-mono text-3xl mb-chorus-md">Inconsolata</h3>
<p className="mb-chorus-md">
The code typeface for CHORUS is <span className="font-mono">Inconsolata</span>, a modern mono-spaced font designed for high legibility at small sizes.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
Fallback fonts include Fira Mono, Monaco, Courier New, monospace.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
Inconsolata is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
</p>
</div>
</div>
</div>
{/* Typography Examples - DO vs DON'T */}
<div className="py-chorus-xl">
<div className="grid gap-chorus-lg md:grid-cols-2">
{/* DO Section */}
<div>
<h3 className="text-h3 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
<span className="text-2xl">✓</span>
DO
</h3>
<div className="mb-chorus-lg">
<p>This column represents the <strong>correct</strong> typographic approach to font selection, weight, scaling, coloration.</p>
</div>
{/* Headings Example */}
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Headings</h4>
<div className="space-y-chorus-sm">
<h1 className="text-5xl font-logo font-thin">Masthead</h1>
<h1 className="text-h1">Heading 1</h1>
<h2 className="text-h2">Heading 2</h2>
<h3 className="text-h3">Heading 3</h3>
<h4 className="text-h4">Heading 4</h4>
<h5 className="text-h5">Heading 5</h5>
<h6 className="text-h6">Heading 6</h6>
<h6 className="text-h7">Heading 7</h6>
</div>
</div>
{/* Weight Adjustments */}
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Adjust Weight for Contrast</h4>
<div className="space-y-chorus-sm">
<p className="font-thin">Thin (100)</p>
<p className="font-extralight">Extra Light (200)</p>
<p className="font-light">Light (300)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semi Bold (600)</p>
<p className="font-bold">Bold (700)</p>
</div>
</div>
{/* Paragraph Examples */}
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Weight for emphasis</h4>
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-sm">
This body text has been set for particular emphasis of a single paragraph.
</p>
<p className="text-base text-carbon-600 dark:text-white mb-chorus-sm">
This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility.
</p>
<p className="text-sm text-carbon-500 dark:text-mulberry-300">
This is smaller body text for secondary information.
</p> </p>
</div> </div>
</ScrollReveal>
{/* Links */} <ScrollReveal delay={400} duration={600} direction="up">
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg"> {/* Font Families */}
<h4 className="text-h4 mb-chorus-md">Links</h4> <div className="py-chorus-xl">
<p className="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm"> <h2 className="text-h3 mb-chorus-md">Font Families</h2>
Links are styled to be clear and accessible: <div className="grid gap-chorus-lg md:grid-cols-3">
</p> <div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
<ul className="list-disc pl-5 space-y-2"> <h3 className="font-sans text-3xl mb-chorus-md">Inter Tight</h3>
<li><a href="#" className="text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-200 transition-colors">Primary Link</a></li> <p className="mb-chorus-md">
<li><a href="#" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-900 dark:hover:text-white transition-colors">Secondary Link</a></li> The primary typeface for CHORUS is <strong>Inter Tight</strong>, a modern sans-serif font designed for high legibility and versatility.
</ul> </p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
Fallback fonts include Arial, Helvetica, sans-serif.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
Inter is available for free under the SIL Open Font License and can be downloaded from{' '}
<a href="https://rsms.me/inter/" className="text-ocean-600 dark:text-ocean-400 hover:underline">
rsms.me/inter
</a>.
</p>
</div>
<div className="border-r border-nickel-200 dark:border-mulberry-800 pr-chorus-md">
<h3 className="font-logo text-3xl mb-chorus-md">Exo</h3>
<p className="mb-chorus-md">
The logo typeface for CHORUS is <strong>Exo</strong>, a modern sans-serif font designed for high legibility and versatility.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
Exo is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
</p>
</div>
<div>
<h3 className="font-mono text-3xl mb-chorus-md">Inconsolata</h3>
<p className="mb-chorus-md">
The code typeface for CHORUS is <span className="font-mono">Inconsolata</span>, a modern mono-spaced font designed for high legibility at small sizes.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm mb-chorus-sm">
Fallback fonts include Fira Mono, Monaco, Courier New, monospace.
</p>
<p className="text-carbon-500 dark:text-mulberry-300 text-sm">
Inconsolata is available for free under the SIL Open Font License and can be downloaded from Google Fonts.
</p>
</div>
</div>
</div> </div>
</div> </ScrollReveal>
{/* DON'T Section */} <ScrollReveal delay={500} duration={600} direction="up">
{/* Typography Examples - DO vs DON'T */}
<div className="py-chorus-xl">
<div className="grid gap-chorus-lg md:grid-cols-2">
{/* DO Section */}
<div> <div>
<h3 className="text-h3 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm"> <h3 className="text-h3 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
<span className="text-2xl">✗</span> <span className="text-2xl">✓</span>
DON'T DO
</h3> </h3>
<div className="mb-chorus-lg"> <div className="mb-chorus-lg">
<p>This column represents <strong>incorrect</strong> approaches to avoid.</p> <p>This column represents the <strong>correct</strong> typographic approach to font selection, weight, scaling, coloration.</p>
</div> </div>
{/* Wrong Headings Example */} {/* Headings Example */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md"> <div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Adjust Weights or Sizes</h4> <h4 className="text-h4 mb-chorus-md">Headings</h4>
<div className="space-y-chorus-sm"> <div className="space-y-chorus-sm">
<h1 className="text-3xl font-logo font-bold">Masthead</h1> <h1 className="text-5xl font-logo font-thin">Masthead</h1>
<h1 className="text-h1 font-semibold">Heading 1</h1> <h1 className="text-h1">Heading 1</h1>
<h2 className="text-h2 font-medium">Heading 2</h2> <h2 className="text-h2">Heading 2</h2>
<h3 className="text-h3 font-black">Heading 3</h3> <h3 className="text-h3">Heading 3</h3>
<h4 className="text-xl">Heading 4</h4> <h4 className="text-h4">Heading 4</h4>
<h5 className="text-xs">Heading 5</h5> <h5 className="text-h5">Heading 5</h5>
<h6 className="text-sm">Heading 6</h6> <h6 className="text-h6">Heading 6</h6>
<h6 className="text-h7">Heading 7</h6>
</div> </div>
</div> </div>
{/* Wrong Color Usage */} {/* Weight Adjustments */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md"> <div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Color for emphasis</h4> <h4 className="text-h4 mb-chorus-md">Adjust Weight for Contrast</h4>
<p className="text-base text-coral-800 dark:text-coral-400 mb-chorus-sm"> <div className="space-y-chorus-sm">
Body text should not be colored to emphasise a paragraph. <p className="font-thin">Thin (100)</p>
<p className="font-extralight">Extra Light (200)</p>
<p className="font-light">Light (300)</p>
<p className="font-normal">Normal (400)</p>
<p className="font-medium">Medium (500)</p>
<p className="font-semibold">Semi Bold (600)</p>
<p className="font-bold">Bold (700)</p>
</div>
</div>
{/* Paragraph Examples */}
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Weight for emphasis</h4>
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-sm">
This body text has been set for particular emphasis of a single paragraph.
</p> </p>
<p className="text-base text-carbon-600 dark:text-white mb-chorus-sm"> <p className="text-base text-carbon-600 dark:text-white mb-chorus-sm">
This is normal paragraph text used throughout the CHORUS design system. This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility.
</p> </p>
<p className="text-sm text-carbon-500 dark:text-mulberry-300"> <p className="text-sm text-carbon-500 dark:text-mulberry-300">
This is smaller body text for secondary information. This is smaller body text for secondary information.
</p> </p>
</div> </div>
{/* Wrong Spacing */} {/* Links */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg"> <div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
<h4 className="text-h4 mb-chorus-xxl">Overset Leading</h4> <h4 className="text-h4 mb-chorus-md">Links</h4>
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-xl"> <p className="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">
This text has been set with excessive leading for the paragraph and its associated heading. Links are styled to be clear and accessible:
</p>
<p className="text-base text-carbon-600 dark:text-white mb-chorus-lg">
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection.
</p>
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
This smaller body text for secondary information appears orphaned.
</p> </p>
<ul className="list-disc pl-5 space-y-2">
<li><a href="#" className="text-ocean-600 dark:text-ocean-400 hover:text-ocean-800 dark:hover:text-ocean-200 transition-colors">Primary Link</a></li>
<li><a href="#" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-900 dark:hover:text-white transition-colors">Secondary Link</a></li>
</ul>
</div> </div>
</div> </div>
{/* DON'T Section */}
<div>
<h3 className="text-h3 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
<span className="text-2xl">✗</span>
DON'T
</h3>
<div className="mb-chorus-lg">
<p>This column represents <strong>incorrect</strong> approaches to avoid.</p>
</div>
{/* Wrong Headings Example */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Adjust Weights or Sizes</h4>
<div className="space-y-chorus-sm">
<h1 className="text-3xl font-logo font-bold">Masthead</h1>
<h1 className="text-h1 font-semibold">Heading 1</h1>
<h2 className="text-h2 font-medium">Heading 2</h2>
<h3 className="text-h3 font-black">Heading 3</h3>
<h4 className="text-xl">Heading 4</h4>
<h5 className="text-xs">Heading 5</h5>
<h6 className="text-sm">Heading 6</h6>
</div>
</div>
{/* Wrong Color Usage */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md">
<h4 className="text-h4 mb-chorus-md">Color for emphasis</h4>
<p className="text-base text-coral-800 dark:text-coral-400 mb-chorus-sm">
Body text should not be colored to emphasise a paragraph.
</p>
<p className="text-base text-carbon-600 dark:text-white mb-chorus-sm">
This is normal paragraph text used throughout the CHORUS design system.
</p>
<p className="text-sm text-carbon-500 dark:text-mulberry-300">
This is smaller body text for secondary information.
</p>
</div>
{/* Wrong Spacing */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg">
<h4 className="text-h4 mb-chorus-xxl">Overset Leading</h4>
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-xl">
This text has been set with excessive leading for the paragraph and its associated heading.
</p>
<p className="text-base text-carbon-600 dark:text-white mb-chorus-lg">
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection.
</p>
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
This smaller body text for secondary information appears orphaned.
</p>
</div>
</div>
</div>
</div> </div>
</div> </ScrollReveal>
{/* Typography Scale */} <ScrollReveal delay={600} duration={600} direction="up">
{/* Typography Scale */}
<h2 className="text-h3 mb-chorus-md">Proportional Font Scale</h2> <h2 className="text-h3 mb-chorus-md">Proportional Font Scale</h2>
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg"> <p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability
</p> </p>
</ScrollReveal>
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
<ScrollReveal delay={700} duration={600} direction="up">
<div className="bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
<div className="grid gap-chorus-sm md:grid-cols-2"> <div className="grid gap-chorus-sm md:grid-cols-2">
<div> <div>
<h4 className="text-h4 mb-chorus-sm">Display Sizes</h4> <h4 className="text-h4 mb-chorus-sm">Display Sizes</h4>
@@ -218,50 +228,54 @@ export default function TypographyPage() {
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</ScrollReveal>
<div className="pt-chorus-xl"> <ScrollReveal delay={800} duration={600} direction="up">
<h2 className="text-h3 mb-chorus-md">Implementation Guide</h2> <div className="pt-chorus-xl">
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg"> <h2 className="text-h3 mb-chorus-md">Implementation Guide</h2>
The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices. <p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
</p> The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.
<div className="bg-gradient-to-r from-mulberry-50 to-coral-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-coral-900/20 dark:border-mulberry-700">
<h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
Implementation Steps
</h4>
<p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
Configure your build system to use the proportional typography scale with 18px base:
</p> </p>
<div className="space-y-chorus-md"> <div className="bg-gradient-to-r from-mulberry-50 to-coral-50 border border-mulberry-100 p-chorus-lg dark:from-mulberry-900/20 dark:to-coral-900/20 dark:border-mulberry-700">
<div> <h4 className="text-base font-semibold text-mulberry-700 dark:text-mulberry-300 mb-chorus-sm">
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm"> Implementation Steps
1. Set Root Font Size (CSS) </h4>
</h5> <p className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-md">
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm"> Configure your build system to use the proportional typography scale with 18px base:
<pre>{`html { </p>
font-size: 18px; /* CHORUS proportional base */
}`}</pre> <div className="space-y-chorus-md">
<div>
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
1. Set Root Font Size (CSS)
</h5>
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm">
<pre>{`html {
font-size: 18px; /* CHORUS proportional base */
}`}</pre>
</div>
</div> </div>
</div>
<div> <div>
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm"> <h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
2. Usage Examples (HTML) 2. Usage Examples (HTML)
</h5> </h5>
<div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm"> <div className="bg-white dark:bg-carbon-950 p-chorus-md border border-gray-200 dark:border-mulberry-700 font-mono text-sm">
<pre>{`<!-- Typography classes scale proportionally from 18px base --> <pre>{`<!-- Typography classes scale proportionally from 18px base -->
<h1 class="text-h1">Main Heading</h1> <h1 class="text-h1">Main Heading</h1>
<h2 class="text-h2">Section Heading</h2> <h2 class="text-h2">Section Heading</h2>
<p class="text-base">Body paragraph text</p> <p class="text-base">Body paragraph text</p>
<span class="text-sm">Secondary information</span>`}</pre> <span class="text-sm">Secondary information</span>`}</pre>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </ScrollReveal>
</div> </div>
</section> </section>
</div> </div>

8
brand-assets/brand-style-guide-site/src/components/Footer.tsx
View File

@@ -25,10 +25,8 @@ export default function Footer() {
<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-xs 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">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="/visual-identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Visual 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="/communications" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Communications</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="/logo" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Logo System</Link></li>
</ul> </ul>
</div> </div>
<div> <div>
@@ -46,4 +44,4 @@ export default function Footer() {
</div> </div>
</footer> </footer>
); );
} }

22
brand-assets/brand-style-guide-site/src/components/Header.tsx
View File

@@ -39,8 +39,8 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
{ 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' },
] ]
}, },
@@ -95,7 +95,7 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
className={`w-full group flex items-center justify-between gap-2 px-chorus-sm py-chorus-xs text-left transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${ className={`w-full group flex items-center justify-between gap-2 px-chorus-sm py-chorus-xs text-left transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
isActive isActive
? 'bg-sand-100 text-mulberry-950 dark:bg-mulberry-800 dark:text-white font-medium' ? 'bg-sand-100 text-mulberry-950 dark:bg-mulberry-800 dark:text-white font-medium'
: 'text-carbon-700 dark:text-mulberry-300' : 'transparent'
}`} }`}
aria-expanded={isExpanded} aria-expanded={isExpanded}
> >
@@ -131,7 +131,7 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => {
onClick={onClose} onClick={onClose}
className={`p-chorus-sm flex items-center gap-2 px-chorus-sm transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${ className={`p-chorus-sm flex items-center gap-2 px-chorus-sm transition-all duration-300 ease-out hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white ${
isCurrentPage(item.href) isCurrentPage(item.href)
? 'bg-sand-50 text-mulberry-950 dark:bg-mulberry-900 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400' ? 'transparent text-mulberry-950 dark:text-white font-medium border-l-2 border-mulberry-600 dark:border-mulberry-400'
: 'text-carbon-600 dark:text-mulberry-400' : 'text-carbon-600 dark:text-mulberry-400'
}`} }`}
> >
@@ -266,7 +266,7 @@ const Header = () => {
{/* Desktop primary navigation - hidden on mobile */} {/* Desktop primary navigation - hidden on mobile */}
<nav className="primary-nav hidden lg:block"> <nav className="primary-nav hidden lg:block">
<ul className="horizontal-menu"> <ul className="horizontal-menu">
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur"> <li className="item">
<div className="flex items-center gap-2 ml-chorus-sm"> <div className="flex items-center gap-2 ml-chorus-sm">
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" /> <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" /> <img src="/icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
@@ -296,7 +296,7 @@ const Header = () => {
</li> </li>
</ul> </ul>
</li> </li>
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300 backdrop-blur"> <li className="item">
<div className="flex items-center gap-2 ml-chorus-sm"> <div className="flex items-center gap-2 ml-chorus-sm">
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" /> <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Circle.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" /> <img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Circle.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />
@@ -348,15 +348,15 @@ const Header = () => {
</li> </li>
<li className="item"> <li className="item">
<Link href="/components" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2"> <Link href="/components" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" /> <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Puzzle.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" /> <img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Puzzle.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
<span>Components</span> <span>Components</span>
</Link> </Link>
</li> </li>
<li className="item"> <li className="item">
<Link href="/motion" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2"> <Link href="/motion" className="dark:hover:bg-mulberry-700 hover:bg-sand-300 transition-all duration-300 ease-out flex items-center gap-2">
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" /> <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trending_Up.png" alt="" className="icon py-chous-sm h-3 w-3 dark:hidden" />
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" /> <img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Trending_Up.png" alt="" className="icon py-chous-sm hidden h-3 w-3 dark:inline-flex" />
<span>Motion System</span> <span>Motion System</span>
</Link> </Link>
</li> </li>
@@ -369,7 +369,7 @@ const Header = () => {
</li> </li>
</ul> </ul>
</li> </li>
<li className="dark:hover:bg-mulberry-700 hover:bg-sand-300"> <li className="item">
<div className="flex items-center gap-2 ml-chorus-sm"> <div className="flex items-center gap-2 ml-chorus-sm">
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" /> <img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat.png" alt="" className="icon py-chous-sm h-4 w-4 dark:hidden" />
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" /> <img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat.png" alt="" className="icon py-chous-sm hidden h-4 w-4 dark:inline-flex" />

62
brand-assets/brand-style-guide-site/src/components/ScrollReveal.tsx Normal file
View File

@@ -0,0 +1,62 @@
'use client';
import React from 'react';
import { useIntersectionObserver } from '@/hooks/useIntersectionObserver';
interface ScrollRevealProps {
children: React.ReactNode;
delay?: number;
duration?: number;
direction?: 'up' | 'down' | 'left' | 'right';
distance?: number;
className?: string;
}
export default function ScrollReveal({
children,
delay = 0,
duration = 600,
direction = 'up',
distance = 24,
className = '',
}: ScrollRevealProps) {
const { elementRef, isVisible } = useIntersectionObserver({
threshold: 0.1,
rootMargin: '0px 0px -100px 0px',
triggerOnce: true,
});
const getTransform = (visible: boolean) => {
if (visible) return 'translate3d(0, 0, 0)';
switch (direction) {
case 'up':
return `translate3d(0, ${distance}px, 0)`;
case 'down':
return `translate3d(0, -${distance}px, 0)`;
case 'left':
return `translate3d(${distance}px, 0, 0)`;
case 'right':
return `translate3d(-${distance}px, 0, 0)`;
default:
return `translate3d(0, ${distance}px, 0)`;
}
};
const revealStyle = {
opacity: isVisible ? 1 : 0,
transform: getTransform(isVisible),
transition: `opacity ${duration}ms ease-out ${delay}ms, transform ${duration}ms ease-out ${delay}ms`,
willChange: 'opacity, transform',
};
return (
<div
ref={elementRef}
style={revealStyle}
className={`scroll-reveal ${className}`}
>
{children}
</div>
);
}

2
brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx
View File

@@ -22,7 +22,7 @@ export default function ThreeLogo({ width = 64, height = 64, className = "" }: T
// Scene / Renderer / Camera // Scene / Renderer / Camera
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100); const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
camera.position.set(0, 0, 2.2); // Move camera back to prevent clipping camera.position.set(0, 0, 3.0); // Move camera back to prevent clipping
camera.lookAt(0, 0, 0); // Ensure camera looks at exact center camera.lookAt(0, 0, 0); // Ensure camera looks at exact center
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true }); const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });

49
brand-assets/brand-style-guide-site/src/hooks/useIntersectionObserver.ts Normal file
View File

@@ -0,0 +1,49 @@
'use client';
import { useEffect, useRef, useState } from 'react';
interface IntersectionObserverOptions {
threshold?: number;
rootMargin?: string;
triggerOnce?: boolean;
}
export function useIntersectionObserver(
options: IntersectionObserverOptions = {}
) {
const { threshold = 0.1, rootMargin = '0px 0px -100px 0px', triggerOnce = true } = options;
const [isIntersecting, setIsIntersecting] = useState(false);
const [hasIntersected, setHasIntersected] = useState(false);
const elementRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const element = elementRef.current;
if (!element) return;
const observer = new IntersectionObserver(
([entry]) => {
const isVisible = entry.isIntersecting;
setIsIntersecting(isVisible);
if (isVisible && !hasIntersected) {
setHasIntersected(true);
}
},
{
threshold,
rootMargin,
}
);
observer.observe(element);
return () => {
observer.unobserve(element);
};
}, [threshold, rootMargin, hasIntersected]);
return {
elementRef,
isVisible: triggerOnce ? hasIntersected : isIntersecting,
};
}