From 630d1c26ad2a9b28b6c370bd11418afe5af295ec Mon Sep 17 00:00:00 2001 From: tony Date: Tue, 26 Aug 2025 08:39:48 +1000 Subject: [PATCH] feat: Implement ScrollReveal animations and sync navigation icons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- .../src/app/colors/page.tsx | 116 +-- .../src/app/communications/page.tsx | 24 +- .../src/app/globals.css | 22 +- .../src/app/iconography/page.tsx | 767 +++++++++--------- .../src/app/logo/page.tsx | 33 +- .../src/app/motion/page.tsx | 300 +++---- .../src/app/typography/page.tsx | 414 +++++----- .../src/components/Footer.tsx | 8 +- .../src/components/Header.tsx | 22 +- .../src/components/ScrollReveal.tsx | 62 ++ .../src/components/ThreeLogo.tsx | 2 +- .../src/hooks/useIntersectionObserver.ts | 49 ++ 12 files changed, 1009 insertions(+), 810 deletions(-) create mode 100644 brand-assets/brand-style-guide-site/src/components/ScrollReveal.tsx create mode 100644 brand-assets/brand-style-guide-site/src/hooks/useIntersectionObserver.ts diff --git a/brand-assets/brand-style-guide-site/src/app/colors/page.tsx b/brand-assets/brand-style-guide-site/src/app/colors/page.tsx index 9f0edf3..403671c 100644 --- a/brand-assets/brand-style-guide-site/src/app/colors/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/colors/page.tsx @@ -1,4 +1,4 @@ - +import ScrollReveal from '@/components/ScrollReveal'; export default function ColorsPage() { const lightColorSets = [ { @@ -170,8 +170,10 @@ export default function ColorsPage() {
-

Color Palette

- + +

Color Palette

+ +

Brand Color Philosophy

@@ -183,49 +185,53 @@ export default function ColorsPage() {
-
- Dark Mode -

Dark Mode (Default)

-
-

Dark mode is the preferred default for all CHORUS Services applications

-
    -
  • Background Hierarchy: Carbon Black → Mulberry Variants → Cool Gray
    • -
  • Text Hierarchy: Clean White → Light Gray → Purple Accents
    • -
  • Aesthetic: Ultra-minimalist with sophisticated mulberry accents
    • -
  • Contrast: WCAG 2.1 AA compliant
    • -
+ +
+ Dark Mode +

Dark Mode (Default)

+
+

Dark mode is the preferred default for all CHORUS Services applications

+
    +
  • Background Hierarchy: Carbon Black → Mulberry Variants → Cool Gray
    • +
  • Text Hierarchy: Clean White → Light Gray → Purple Accents
    • +
  • Aesthetic: Ultra-minimalist with sophisticated mulberry accents
    • +
  • Contrast: WCAG 2.1 AA compliant
    • +
+
{darkColorSets.map((colorSet) => (
-
-
-
-

{colorSet.name}

-

{colorSet.description}

-
-

Usage: {colorSet.usage}

-

Psychology: {colorSet.psychology}

-
-
-
-
- -
- {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 ( -
- {colorSet.name.toLowerCase()}-{shade.name} - {shade.hex} + +
+
+
+

{colorSet.name}

+

{colorSet.description}

+
+

Usage: {colorSet.usage}

+

Psychology: {colorSet.psychology}

- ); - })} +
+
+
+ +
+ {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 ( +
+ {colorSet.name.toLowerCase()}-{shade.name} + {shade.hex} +
+ ); + })} +
-
+
))}
@@ -233,21 +239,26 @@ export default function ColorsPage() {
-
- Light Mode -

Light Mode (Alternative)

-
-

Available as alternative but dark mode is strongly preferred

-
    -
  • Background Hierarchy: Pure White → Sand Variants → Eucalyptus
    • -
  • Text Hierarchy: Carbon Black → Medium Gray → Light Gray
    • -
  • Usage: Print materials, accessibility accommodations
    • -
  • Contrast: Optimized for readability on warm backgrounds
    • -
+ + +
+ Light Mode +

Light Mode (Alternative)

+
+

Available as alternative but dark mode is strongly preferred

+
    +
  • Background Hierarchy: Pure White → Sand Variants → Eucalyptus
    • +
  • Text Hierarchy: Carbon Black → Medium Gray → Light Gray
    • +
  • Usage: Print materials, accessibility accommodations
    • +
  • Contrast: Optimized for readability on warm backgrounds
    • +
+
{lightColorSets.map((colorSet) => (
+ +
@@ -277,6 +288,7 @@ export default function ColorsPage() { })}
+
))}
diff --git a/brand-assets/brand-style-guide-site/src/app/communications/page.tsx b/brand-assets/brand-style-guide-site/src/app/communications/page.tsx index 131d2fc..2c2f37d 100644 --- a/brand-assets/brand-style-guide-site/src/app/communications/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/communications/page.tsx @@ -51,30 +51,30 @@ export default function Communications() {

Writing Style

    -
  • • Active voice preferred
    • -
  • • Clear, concise sentences
    • -
  • • Technical accuracy
    • -
  • • Inclusive language
    • +
  • Active voice preferred
    • +
  • Clear, concise sentences
    • +
  • Technical accuracy
    • +
  • Inclusive language

Terminology

    -
  • • "AI agents" not "bots"
    • -
  • • "Context management"
    • -
  • • "Distributed orchestration"
    • -
  • • "Knowledge fabric"
    • +
  • "AI agents" not "bots"
    • +
  • "Context management"
    • +
  • "Distributed orchestration"
    • +
  • "Knowledge fabric"

Localization

    -
  • • Global-first approach
    • -
  • • Cultural sensitivity
    • -
  • • Technical term consistency
    • -
  • • Regional adaptations
    • +
  • Global-first approach
    • +
  • Cultural sensitivity
    • +
  • Technical term consistency
    • +
  • Regional adaptations
diff --git a/brand-assets/brand-style-guide-site/src/app/globals.css b/brand-assets/brand-style-guide-site/src/app/globals.css index b19fd2c..4f67c6b 100644 --- a/brand-assets/brand-style-guide-site/src/app/globals.css +++ b/brand-assets/brand-style-guide-site/src/app/globals.css @@ -790,6 +790,10 @@ pre[class*="language-"] { margin-bottom: 0; } +.secondary-nav { + overflow: hidden !important; +} + .primary-nav { position: relative; font-weight: 600; @@ -1104,6 +1108,22 @@ nav button { &.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 */ [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; } @@ -1130,4 +1150,4 @@ nav button { div.pt-chorus-xxl { padding-top: calc(3.052rem + 70px) !important; } -} \ No newline at end of file +} diff --git a/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx b/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx index 8accbdb..5958cf1 100644 --- a/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/iconography/page.tsx @@ -1,37 +1,47 @@ import { div } from "three/tsl" +import ScrollReveal from '@/components/ScrollReveal'; export default function IconographyPage() { return (
-
-

Iconography System

- -
-

Philosophy

-

- The CHORUS iconography system uses the Coolicons v4.1 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. -

+ +
+

Iconography System

-
-
-

Clarity & Recognition

-

Icons communicate instantly without language barriers

-
-
-

Theme Adaptive

-

Black and white variants ensure perfect contrast in all modes

-
-
-

Consistent Scale

-

Standardized sizing maintains visual harmony

+
+

Philosophy

+

+ The CHORUS iconography system uses the Coolicons v4.1 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. +

+ +
+ +
+

Clarity & Recognition

+

Icons communicate instantly without language barriers

+
+ + +
+

Theme Adaptive

+

Black and white variants ensure perfect contrast in all modes

+
+ + +
+

Consistent Scale

+

Standardized sizing maintains visual harmony

+
+
+
-
- + {/* Icon Categories */} +

Icon Categories

@@ -39,390 +49,401 @@ export default function IconographyPage() {

- {/* Interface Icons */} -
-

Interface & Navigation

-

Core UI elements for user interaction and navigation

-
-
- Search - Search - Search -
-
- Settings - Settings - Settings -
-
- Filter - Filter - Filter -
-
- Check - Check - Check -
-
- External Link - External Link - Link -
-
- Heart - Heart - Heart -
-
- Star - Star - Star -
-
- Trash - Trash - Delete + + {/* Interface Icons */} +
+

Interface & Navigation

+

Core UI elements for user interaction and navigation

+
+
+ Search + Search + Search +
+
+ Settings + Settings + Settings +
+
+ Filter + Filter + Filter +
+
+ Check + Check + Check +
+
+ External Link + External Link + Link +
+
+ Heart + Heart + Heart +
+
+ Star + Star + Star +
+
+ Trash + Trash + Delete +
-
+ - {/* Navigation Icons */} -
-

Navigation & Direction

-

Directional indicators and navigation controls

-
-
- Home - Home - Home -
-
- Arrow Left - Arrow Left - Left -
-
- Arrow Right - Arrow Right - Right -
-
- Arrow Up - Arrow Up - Up -
-
- Arrow Down - Arrow Down - Down -
-
- Map Pin - Map Pin - Location -
-
- Globe - Globe - Globe -
-
- Menu - Menu - Menu + + {/* Navigation Icons */} +
+

Navigation & Direction

+

Directional indicators and navigation controls

+
+
+ Home + Home + Home +
+
+ Arrow Left + Arrow Left + Left +
+
+ Arrow Right + Arrow Right + Right +
+
+ Arrow Up + Arrow Up + Up +
+
+ Arrow Down + Arrow Down + Down +
+
+ Map Pin + Map Pin + Location +
+
+ Globe + Globe + Globe +
+
+ Menu + Menu + Menu +
-
- - {/* File & System Icons */} -
-

File & System Operations

-

File management and system-level actions

-
-
- Document - Document - Document -
-
- Code File - Code File - Code -
-
- Folder - Folder - Folder -
-
- Download - Download - Download -
-
- Upload - Upload - Upload -
-
- Save - Save - Save -
-
- Copy - Copy - Copy -
-
- Archive - Archive - Archive + + + {/* File & System Icons */} +
+

File & System Operations

+

File management and system-level actions

+
+
+ Document + Document + Document +
+
+ Code File + Code File + Code +
+
+ Folder + Folder + Folder +
+
+ Download + Download + Download +
+
+ Upload + Upload + Upload +
+
+ Save + Save + Save +
+
+ Copy + Copy + Copy +
+
+ Archive + Archive + Archive +
-
- - {/* Communication Icons */} -
-

Communication & Social

-

Messaging, notifications, and social interaction

-
-
- Mail - Mail - Mail -
-
- Chat - Chat - Chat -
-
- Notification - Notification - Notify -
-
- Phone - Phone - Phone -
-
- Share - Share - Share -
-
- User - User - User -
-
- Team - Team - Team -
-
- Send - Send - Send + + + {/* Communication Icons */} +
+

Communication & Social

+

Messaging, notifications, and social interaction

+
+
+ Mail + Mail + Mail +
+
+ Chat + Chat + Chat +
+
+ Notification + Notification + Notify +
+
+ Phone + Phone + Phone +
+
+ Share + Share + Share +
+
+ User + User + User +
+
+ Team + Team + Team +
+
+ Send + Send + Send +
-
- - {/* Status & Warning Icons */} -
-

Status & Feedback

-

Status indicators, warnings, and user feedback

-
-
- Success - Success - Success -
-
- Warning - Warning - Warning -
-
- Error - Error - Error -
-
- Info - Info - Info -
-
- Help - Help - Help -
-
- Loading - Loading - Loading -
-
- Secure - Secure - Secure -
-
- Unlock - Unlock - Unlock + + + {/* Status & Warning Icons */} +
+

Status & Feedback

+

Status indicators, warnings, and user feedback

+
+
+ Success + Success + Success +
+
+ Warning + Warning + Warning +
+
+ Error + Error + Error +
+
+ Info + Info + Info +
+
+ Help + Help + Help +
+
+ Loading + Loading + Loading +
+
+ Secure + Secure + Secure +
+
+ Unlock + Unlock + Unlock +
-
+
- {/* Usage Guidelines */} -
-

Usage Guidelines

- -
- {/* DO Section */} -
-

- ✓ - DO -

- -
-
-

Use Theme Variants

-

Always provide both black and white variants for proper contrast in light and dark themes.

-
- Black Settings - White Settings - Black & White variants + + {/* Usage Guidelines */} +
+

Usage Guidelines

+ +
+ {/* DO Section */} +
+

+ ✓ + DO +

+ +
+
+

Use Theme Variants

+

Always provide both black and white variants for proper contrast in light and dark themes.

+
+ Black Settings + White Settings + Black & White variants +
+
+ +
+

Standard Sizes

+

Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.

+
+ 16px + 20px + 24px + 32px +
+
+ +
+

Semantic Meaning

+

Choose icons that clearly represent their function and maintain consistency across similar actions.

+
-
-

Standard Sizes

-

Use consistent sizing: 16px, 20px, 24px, or 32px for different interface contexts.

-
- 16px - 20px - 24px - 32px + {/* DON'T Section */} +
+

+ ✗ + DON'T +

+ +
+
+

Mix Icon Styles

+

Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.

+
+ Coolicon + + +
?
+ Mixed styles +
-
-
-

Semantic Meaning

-

Choose icons that clearly represent their function and maintain consistency across similar actions.

+
+

Arbitrary Sizing

+

Don't use random sizes that break the visual hierarchy and spacing system.

+
+ Wrong sizing + Wrong sizing + Wrong sizing + Inconsistent sizes +
+
+ +
+

Modify or Recolor

+

Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.

+
+
+ - {/* DON'T Section */} -
-

- ✗ - DON'T -

- -
-
-

Mix Icon Styles

-

Avoid mixing Coolicons with other icon libraries as this breaks visual consistency.

-
- Coolicon - + -
?
- Mixed styles -
-
- -
-

Arbitrary Sizing

-

Don't use random sizes that break the visual hierarchy and spacing system.

-
- Wrong sizing - Wrong sizing - Wrong sizing - Inconsistent sizes -
-
- -
-

Modify or Recolor

-

Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.

-
-
-
-
-
- - {/* Implementation Guide */} -
-

Implementation Guide

-

- The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility. -

- -
-

- Implementation Steps -

-

- Use theme-aware icon implementation with automatic dark/light mode switching: + + {/* Implementation Guide */} +

+

Implementation Guide

+

+ The CHORUS iconography system is implemented using the Coolicons v4.1 library with theme-aware variants for optimal accessibility.

-
-
-
- 1. Theme-Aware Icon Implementation (HTML/React) -
-
- 
{`
-Settings
+          

+            

+              Implementation Steps
+            

+            

+              Use theme-aware icon implementation with automatic dark/light mode switching:
+            

+            
+            

+              

+                

+                  1. Theme-Aware Icon Implementation (HTML/React)
+                

+                

+                  
{`
+  Settings
 
-
-Settings`}

+  
+  Settings`}
+
-
-
-
- 2. Standard Icon Sizes (CSS Classes) -
-
- 
{`/* Standard icon sizes following CHORUS spacing system */
-.icon-sm  { width: 1rem; height: 1rem; }    /* 16px */
-.icon-md  { width: 1.25rem; height: 1.25rem; } /* 20px */  
-.icon-lg  { width: 1.5rem; height: 1.5rem; }   /* 24px */
-.icon-xl  { width: 2rem; height: 2rem; }       /* 32px */`}
+
+
+ 2. Standard Icon Sizes (CSS Classes) +
+
+ 
{`/* Standard icon sizes following CHORUS spacing system */
+  .icon-sm  { width: 1rem; height: 1rem; }    /* 16px */
+  .icon-md  { width: 1.25rem; height: 1.25rem; } /* 20px */  
+  .icon-lg  { width: 1.5rem; height: 1.5rem; }   /* 24px */
+  .icon-xl  { width: 2rem; height: 2rem; }       /* 32px */`}
+
-
-
-
- 3. Icon Library Structure -
-
- 
{`public/icons/coolicons.v4.1/
-├── coolicons PNG/
-│   ├── Black/          # Light theme icons
-│   └── White/          # Dark theme icons
-├── coolicons SVG/      # Vector versions
-└── Webfont/           # Icon font (optional)`}
+
+
+ 3. Icon Library Structure +
+
+ 
{`public/icons/coolicons.v4.1/
+  ├── coolicons PNG/
+  │   ├── Black/          # Light theme icons
+  │   └── White/          # Dark theme icons
+  ├── coolicons SVG/      # Vector versions
+  └── Webfont/           # Icon font (optional)`}
+
-
-
+
+
diff --git a/brand-assets/brand-style-guide-site/src/app/logo/page.tsx b/brand-assets/brand-style-guide-site/src/app/logo/page.tsx index 6a61427..bbeca67 100644 --- a/brand-assets/brand-style-guide-site/src/app/logo/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/logo/page.tsx @@ -1,27 +1,37 @@ import ThreeLogo from '@/components/ThreeLogo'; +import ScrollReveal from '@/components/ScrollReveal'; export default function LogoPage() { return ( -
- {/* Full-width Hero Section with 3D Logo */} -
- +
+ {/* Fixed Hero Section with 3D Logo */} +
+ {/* Logo Section */} -
-
+
+

CHORUS

- +
-
+ {/* Spacer to create scroll space */} +
+ + {/* Sliding Content Overlay */} +
+
{/* Logo System Content */}
{/* Primary Logo Description */} -
+ +

Logo System

@@ -64,8 +74,8 @@ export default function LogoPage() {
-
- +
+ {/* Logo Orientations */}

Logo Orientations

@@ -261,6 +271,7 @@ export default function LogoPage() {
+ ); diff --git a/brand-assets/brand-style-guide-site/src/app/motion/page.tsx b/brand-assets/brand-style-guide-site/src/app/motion/page.tsx index dff833b..1e8e500 100644 --- a/brand-assets/brand-style-guide-site/src/app/motion/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/motion/page.tsx @@ -1,3 +1,5 @@ +import ScrollReveal from '@/components/ScrollReveal'; + export default function Motion() { return (
@@ -6,171 +8,181 @@ export default function Motion() {

Motion System

-
-

- The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users. -

-

- Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality. -

-
+ +
+

+ The CHORUS motion system creates sophisticated, purposeful animations that enhance usability without overwhelming users. +

+

+ Our implementation focuses on performance, accessibility, and consistent timing that reinforces the premium CHORUS brand personality. +

+
+ -
-
-

Timing Scale

-
-
- Fast - 200ms + +
+
+

Timing Scale

+
+
+ Fast + 200ms +
+
+ Standard + 300ms +
+
+ Deliberate + 500ms +
-
- Standard - 300ms +
+ +
+

Easing Functions

+
+
+ Primary + ease-out +
+
+ Secondary + ease-in-out +
+
+ Emphasis + cubic-bezier +
-
- Deliberate - 500ms +
+ +
+

Motion Properties

+
+
• Opacity transitions
+
• Color changes
+
• Background shifts
+
• Transform effects
- -
-

Easing Functions

-
-
- Primary - ease-out + + + +
+
+

Interactive Elements

+
+
+

Navigation Links

+

Hover states with lateral translation and color transitions

+
+ hover:translate-x-1 transition-all duration-300 ease-out +
+
+
+

Icons & Elements

+

Scale transformations on hover with rotation for chevrons

+
+ group-hover:scale-110 transition-transform duration-300 +
+
+
+

Dropdowns

+

Vertical slide with opacity fade-in

+
+ translateY(-8px) → translateY(0) opacity transition +
+
-
- Secondary - ease-in-out -
-
- Emphasis - cubic-bezier +
+ +
+

3D Logo Animation

+
+
+

Continuous Rotation

+

Subtle multi-axis rotation using requestAnimationFrame

+
+
rotation.x += 0.010
+
rotation.y += -0.010
+
rotation.z += -0.1
+
+
+
+

Material Transitions

+

Dynamic color changes for accessibility themes

+
+ Custom event-driven material updates +
+
+ -
-

Motion Properties

-
-
• Opacity transitions
-
• Color changes
-
• Background shifts
-
• Transform effects
+ +
+

CSS Implementation

+
+
+

Global Transition Rule

+
+
* {
+
+ transition: opacity 200ms ease-out,
+             color 200ms ease-out,
+             background-color 200ms ease-out,
+             border-color 200ms ease-out; +
+
}
+
+
+
+

Component Transitions

+
+
.nav-link {
+
+ transition-all: duration-300 ease-out;
+ &:hover {
+   transform: translateX(4px);
+ } +
+
}
+
+
-
+ -
+
-

Interactive Elements

-
+

Motion Principles

+
-

Navigation Links

-

Hover states with lateral translation and color transitions

-
- hover:translate-x-1 transition-all duration-300 ease-out -
+

Design Guidelines

+
    +
  • • Purposeful motion that guides user attention
    • +
  • • Consistent 200-300ms timing for interface elements
    • +
  • • Ease-out curves for natural, organic feeling
    • +
  • • Subtle transforms that enhance without distracting
    • +
  • • Performance-optimized with GPU acceleration
    • +
-

Icons & Elements

-

Scale transformations on hover with rotation for chevrons

-
- group-hover:scale-110 transition-transform duration-300 -
-
-
-

Dropdowns

-

Vertical slide with opacity fade-in

-
- translateY(-8px) → translateY(0) opacity transition -
+

Accessibility Considerations

+
    +
  • • Respects prefers-reduced-motion settings
    • +
  • • No flashing or rapid animations
    • +
  • • Focus indicators remain clearly visible
    • +
  • • Essential information never animation-dependent
    • +
  • • Smooth transitions preserve context and orientation
    • +
- -
-

3D Logo Animation

-
-
-

Continuous Rotation

-

Subtle multi-axis rotation using requestAnimationFrame

-
-
rotation.x += 0.010
-
rotation.y += -0.010
-
rotation.z += -0.1
-
-
-
-

Material Transitions

-

Dynamic color changes for accessibility themes

-
- Custom event-driven material updates -
-
-
-
-
- -
-

CSS Implementation

-
-
-

Global Transition Rule

-
-
* {
-
- transition: opacity 200ms ease-out,
-             color 200ms ease-out,
-             background-color 200ms ease-out,
-             border-color 200ms ease-out; -
-
}
-
-
-
-

Component Transitions

-
-
.nav-link {
-
- transition-all: duration-300 ease-out;
- &:hover {
-   transform: translateX(4px);
- } -
-
}
-
-
-
-
- -
-

Motion Principles

-
-
-

Design Guidelines

-
    -
  • • Purposeful motion that guides user attention
    • -
  • • Consistent 200-300ms timing for interface elements
    • -
  • • Ease-out curves for natural, organic feeling
    • -
  • • Subtle transforms that enhance without distracting
    • -
  • • Performance-optimized with GPU acceleration
    • -
-
-
-

Accessibility Considerations

-
    -
  • • Respects prefers-reduced-motion settings
    • -
  • • No flashing or rapid animations
    • -
  • • Focus indicators remain clearly visible
    • -
  • • Essential information never animation-dependent
    • -
  • • Smooth transitions preserve context and orientation
    • -
-
-
-
+
diff --git a/brand-assets/brand-style-guide-site/src/app/typography/page.tsx b/brand-assets/brand-style-guide-site/src/app/typography/page.tsx index c502b15..45eb000 100644 --- a/brand-assets/brand-style-guide-site/src/app/typography/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/typography/page.tsx @@ -1,203 +1,213 @@ +import ScrollReveal from '@/components/ScrollReveal'; export default function TypographyPage() { return (
+ -

Typography

-

- The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices. -

- -
-

✓ Complete System Scaling

-

- All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships. +

Typography

+

+ The CHORUS typography system is designed for clarity, hierarchy, and accessibility across all devices.

-
- - {/* Font Families */} -
-

Font Families

-
-
-

Inter Tight

-

- The primary typeface for CHORUS is Inter Tight, a modern sans-serif font designed for high legibility and versatility. -

-

- Fallback fonts include Arial, Helvetica, sans-serif. -

-

- Inter is available for free under the SIL Open Font License and can be downloaded from{' '} - - rsms.me/inter - . -

-
- -
-

Exo

-

- The logo typeface for CHORUS is Exo, a modern sans-serif font designed for high legibility and versatility. -

-

- Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif. -

-

- Exo is available for free under the SIL Open Font License and can be downloaded from Google Fonts. -

-
- -
-

Inconsolata

-

- The code typeface for CHORUS is Inconsolata, a modern mono-spaced font designed for high legibility at small sizes. -

-

- Fallback fonts include Fira Mono, Monaco, Courier New, monospace. -

-

- Inconsolata is available for free under the SIL Open Font License and can be downloaded from Google Fonts. -

-
-
-
- - - {/* Typography Examples - DO vs DON'T */} -
-
- {/* DO Section */} -
-

- ✓ - DO -

-
-

This column represents the correct typographic approach to font selection, weight, scaling, coloration.

-
- - {/* Headings Example */} -
-

Headings

-
-

Masthead

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
Heading 7
-
-
- - {/* Weight Adjustments */} -
-

Adjust Weight for Contrast

-
-

Thin (100)

-

Extra Light (200)

-

Light (300)

-

Normal (400)

-

Medium (500)

-

Semi Bold (600)

-

Bold (700)

-
-
- - {/* Paragraph Examples */} -
-

Weight for emphasis

-

- This body text has been set for particular emphasis of a single paragraph. -

-

- This is normal paragraph text used throughout the CHORUS design system. It is designed for readability and accessibility. -

-

- This is smaller body text for secondary information. + +

+

✓ Complete System Scaling

+

+ All spacing, sizing, and proportions automatically scale with the 18px base. CHORUS spacing system (chorus-xs, chorus-md, etc.) maintains perfect proportional relationships.

+ - {/* Links */} -
-

Links

-

- Links are styled to be clear and accessible: -

- + + {/* Font Families */} +
+

Font Families

+
+
+

Inter Tight

+

+ The primary typeface for CHORUS is Inter Tight, a modern sans-serif font designed for high legibility and versatility. +

+

+ Fallback fonts include Arial, Helvetica, sans-serif. +

+

+ Inter is available for free under the SIL Open Font License and can be downloaded from{' '} + + rsms.me/inter + . +

+
+ +
+

Exo

+

+ The logo typeface for CHORUS is Exo, a modern sans-serif font designed for high legibility and versatility. +

+

+ Fallback fonts should be avoided but can include Arial, Helvetica, sans-serif. +

+

+ Exo is available for free under the SIL Open Font License and can be downloaded from Google Fonts. +

+
+ +
+

Inconsolata

+

+ The code typeface for CHORUS is Inconsolata, a modern mono-spaced font designed for high legibility at small sizes. +

+

+ Fallback fonts include Fira Mono, Monaco, Courier New, monospace. +

+

+ Inconsolata is available for free under the SIL Open Font License and can be downloaded from Google Fonts. +

+
+
-
+ - {/* DON'T Section */} + + {/* Typography Examples - DO vs DON'T */} +
+
+ {/* DO Section */}
-

- ✗ - DON'T +

+ ✓ + DO

-

This column represents incorrect approaches to avoid.

+

This column represents the correct typographic approach to font selection, weight, scaling, coloration.

- - {/* Wrong Headings Example */} -
-

Adjust Weights or Sizes

+ + {/* Headings Example */} +
+

Headings

-

Masthead

-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
+

Masthead

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
Heading 7
- {/* Wrong Color Usage */} -
-

Color for emphasis

-

- Body text should not be colored to emphasise a paragraph. + {/* Weight Adjustments */} +

+

Adjust Weight for Contrast

+
+

Thin (100)

+

Extra Light (200)

+

Light (300)

+

Normal (400)

+

Medium (500)

+

Semi Bold (600)

+

Bold (700)

+
+
+ + {/* Paragraph Examples */} +
+

Weight for emphasis

+

+ This body text has been set for particular emphasis of a single paragraph.

- 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.

This is smaller body text for secondary information.

- {/* Wrong Spacing */} -
-

Overset Leading

-

- This text has been set with excessive leading for the paragraph and its associated heading. -

-

- Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. -

-

- This smaller body text for secondary information appears orphaned. + {/* Links */} +

+

Links

+

+ Links are styled to be clear and accessible:

+
+ + {/* DON'T Section */} +
+

+ ✗ + DON'T +

+
+

This column represents incorrect approaches to avoid.

+
+ + {/* Wrong Headings Example */} +
+

Adjust Weights or Sizes

+
+

Masthead

+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+
+ + {/* Wrong Color Usage */} +
+

Color for emphasis

+

+ Body text should not be colored to emphasise a paragraph. +

+

+ This is normal paragraph text used throughout the CHORUS design system. +

+

+ This is smaller body text for secondary information. +

+
+ + {/* Wrong Spacing */} +
+

Overset Leading

+

+ This text has been set with excessive leading for the paragraph and its associated heading. +

+

+ Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection. +

+

+ This smaller body text for secondary information appears orphaned. +

+
+
+
-
+ - {/* Typography Scale */} + + {/* Typography Scale */} -

Proportional Font Scale

-

- Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability -

- -
+

Proportional Font Scale

+

+ Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability +

+ + + + +

Display Sizes

@@ -218,50 +228,54 @@ export default function TypographyPage() {
-
+
+ -
-

Implementation Guide

-

- The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices. -

- -
-

- Implementation Steps -

-

- Configure your build system to use the proportional typography scale with 18px base: + +

+

Implementation Guide

+

+ The CHORUS typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.

- -
-
-
- 1. Set Root Font Size (CSS) -
-
- 
{`html {
-      font-size: 18px; /* CHORUS proportional base */
-    }`}
+ +
+

+ Implementation Steps +

+

+ Configure your build system to use the proportional typography scale with 18px base: +

+ +
+
+
+ 1. Set Root Font Size (CSS) +
+
+ 
{`html {
+        font-size: 18px; /* CHORUS proportional base */
+      }`}
+
-
-
-
- 2. Usage Examples (HTML) -
-
- 
{`
-    
Main Heading

-    
Section Heading

-    
Body paragraph text

-    Secondary information`}
+
+
+ 2. Usage Examples (HTML) +
+
+ 
{`
+      
Main Heading

+      
Section Heading

+      
Body paragraph text

+      Secondary information`}
+
+
-
+
diff --git a/brand-assets/brand-style-guide-site/src/components/Footer.tsx b/brand-assets/brand-style-guide-site/src/components/Footer.tsx index 55f299d..e0d6171 100644 --- a/brand-assets/brand-style-guide-site/src/components/Footer.tsx +++ b/brand-assets/brand-style-guide-site/src/components/Footer.tsx @@ -25,10 +25,8 @@ export default function Footer() {

Brand Guide

  • Overview
    • -
  • Brand Identity
    • -
  • Color Palette
    • -
  • Typography
    • -
  • Logo System
    • +
  • Visual Identity
    • +
  • Communications
@@ -46,4 +44,4 @@ export default function Footer() {
); -} \ No newline at end of file +} diff --git a/brand-assets/brand-style-guide-site/src/components/Header.tsx b/brand-assets/brand-style-guide-site/src/components/Header.tsx index 28c9261..5751ef3 100644 --- a/brand-assets/brand-style-guide-site/src/components/Header.tsx +++ b/brand-assets/brand-style-guide-site/src/components/Header.tsx @@ -39,8 +39,8 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => { { href: '/colors', section: 'colors', icon: 'Edit/Swatches_Palette', label: 'Color Palette' }, { href: '/iconography', section: 'iconography', icon: 'Interface/Main_Component', label: 'Iconography' }, { href: '/accessibility', section: 'accessibility', icon: 'Interface/Heart_01', label: 'Accessibility' }, - { href: '/components', section: 'components', icon: 'Interface/Settings', label: 'Components' }, - { href: '/motion', section: 'motion', icon: 'Interface/Link', label: 'Motion System' }, + { href: '/components', section: 'components', icon: 'Environment/Puzzle', label: 'Components' }, + { href: '/motion', section: 'motion', icon: 'Interface/Trending_Up', label: 'Motion System' }, { 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 ${ isActive ? '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} > @@ -131,7 +131,7 @@ const MobileAccordionMenu = ({ onClose }: MobileAccordionMenuProps) => { 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 ${ 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' }`} > @@ -266,7 +266,7 @@ const Header = () => { {/* Desktop primary navigation - hidden on mobile */}