diff --git a/brand-assets/brand-style-guide-site/public/logos/logo-ring-only.png b/brand-assets/brand-style-guide-site/public/logos/logo-ring-only.png new file mode 100644 index 0000000..96b707f Binary files /dev/null and b/brand-assets/brand-style-guide-site/public/logos/logo-ring-only.png differ diff --git a/brand-assets/brand-style-guide-site/src/app/accessibility/page.tsx b/brand-assets/brand-style-guide-site/src/app/accessibility/page.tsx index 61d0e23..5cea5c1 100644 --- a/brand-assets/brand-style-guide-site/src/app/accessibility/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/accessibility/page.tsx @@ -1,9 +1,13 @@ export default function AccessibilityPage() { return ( -
-

Accessibility

- {/* Content will be added here */} +
+
+
+
+
+
+
); } diff --git a/brand-assets/brand-style-guide-site/src/app/collaborators/page.tsx b/brand-assets/brand-style-guide-site/src/app/collaborators/page.tsx index 087af02..0279ff9 100644 --- a/brand-assets/brand-style-guide-site/src/app/collaborators/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/collaborators/page.tsx @@ -1,32 +1,32 @@ export default function CollaboratorsPage() { return ( -
-
-
-
-

- Collaborators -

-

- Guidelines for partners, collaborators, and third-party integrations -

+
+
+
+
+
+

+ Collaborators +

+

+ Guidelines for partners, collaborators, and third-party integrations +

+
+
+ +
+

+ Coming Soon +

+
+

+ This section will contain guidelines for external collaborators, + partnership materials, and co-branding standards. +

+
-
- -
-
-

- Coming Soon -

-
-

- This section will contain guidelines for external collaborators, - partnership materials, and co-branding standards. -

-
-
-
+
); } \ No newline at end of file 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 3680bba..9f0edf3 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 @@ -167,8 +167,9 @@ export default function ColorsPage() { ]; return ( -
-
+
+
+

Color Palette

@@ -311,5 +312,6 @@ 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 c7d1339..131d2fc 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 @@ -1,6 +1,7 @@ export default function Communications() { return ( -
+
+

Language Support

@@ -98,5 +99,6 @@ export default function Communications() {
+
); } \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/components/page.tsx b/brand-assets/brand-style-guide-site/src/app/components/page.tsx index a6f6119..433e65f 100644 --- a/brand-assets/brand-style-guide-site/src/app/components/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/components/page.tsx @@ -1,6 +1,7 @@ export default function Components() { return ( -
+
+

Components

@@ -39,5 +40,6 @@ export default function Components() {
+
); } \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/culture/page.tsx b/brand-assets/brand-style-guide-site/src/app/culture/page.tsx index b9bd61a..6632b22 100644 --- a/brand-assets/brand-style-guide-site/src/app/culture/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/culture/page.tsx @@ -1,6 +1,7 @@ export default function Culture() { return ( -
+
+

Culture

@@ -72,5 +73,6 @@ export default function Culture() {
+ ); } \ No newline at end of file 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 d9504aa..b19fd2c 100644 --- a/brand-assets/brand-style-guide-site/src/app/globals.css +++ b/brand-assets/brand-style-guide-site/src/app/globals.css @@ -965,9 +965,11 @@ nav button { .logo-group-circular { position: relative; - width: 14rem; - height: 14rem; - margin: 0 0 2rem 0; + display: flex; + align-items: center; /* vertical center */ + justify-content: center; /* horizontal center */ + text-align: center; /* center multi-line text */ + /* margin: 0 0 2rem 0; */ } .logo-group-circular div * { margin: 0; @@ -975,20 +977,24 @@ nav button { } .logo-group-circular h4.text-h4.font-logo { - display: block; + /* background-color: #1e40af33; /*Debugging */ position: absolute; - top: 0 !important; - left: 0; - right: 0; - margin-left: auto; - margin-right: auto; + top: -1.5rem; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; - text-align: center !important; - /* vertical-align: middle; */ - padding-top: 5.65rem; + display: flex; + align-items: center; /* vertical center */ + justify-content: center; /* horizontal center */ + text-align: center; /* center multi-line text */ + /* padding-top: 5.65rem; */ font-weight: 400; + + white-space: nowrap; font-size: 1rem; } +#logo-hero .logo-group-circular h4.text-h4.font-logo {display:none !important;} /* CHORUS Comprehensive Color System Adaptations for Maximum Clarity */ 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 5157268..8accbdb 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,7 +1,10 @@ +import { div } from "three/tsl" export default function IconographyPage() { return ( -
+
+
+

Iconography System

@@ -421,5 +424,7 @@ export default function IconographyPage() {
+ +
); } diff --git a/brand-assets/brand-style-guide-site/src/app/identity/page.tsx b/brand-assets/brand-style-guide-site/src/app/identity/page.tsx index 702ea37..a28eab8 100644 --- a/brand-assets/brand-style-guide-site/src/app/identity/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/identity/page.tsx @@ -1,7 +1,8 @@ export default function IdentityPage() { return ( -
+
+

Brand Identity Concept

@@ -93,5 +94,6 @@ export default function IdentityPage() {
+ ); } diff --git a/brand-assets/brand-style-guide-site/src/app/implementation/page.tsx b/brand-assets/brand-style-guide-site/src/app/implementation/page.tsx index bef91b3..642fc2f 100644 --- a/brand-assets/brand-style-guide-site/src/app/implementation/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/implementation/page.tsx @@ -1,6 +1,9 @@ +import { div } from "three/tsl" + export default function Implementation() { return ( -
+
+

Implementation

@@ -73,5 +76,6 @@ export default function Implementation() {
+ ); } \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/investor-relations/page.tsx b/brand-assets/brand-style-guide-site/src/app/investor-relations/page.tsx index f557df8..b9c80fd 100644 --- a/brand-assets/brand-style-guide-site/src/app/investor-relations/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/investor-relations/page.tsx @@ -1,7 +1,9 @@ export default function InvestorRelationsPage() { return ( -
-
+
+
+
+

@@ -12,10 +14,9 @@ export default function InvestorRelationsPage() {

-
-
+

Coming Soon

@@ -25,8 +26,10 @@ export default function InvestorRelationsPage() { financial communications, and shareholder materials.

- +
+ + ); } \ No newline at end of file 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 9e60d67..6a61427 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 @@ -3,17 +3,18 @@ import ThreeLogo from '@/components/ThreeLogo'; export default function LogoPage() { return ( - <> +
{/* Full-width Hero Section with 3D Logo */} -
-
-
-
- +
+ + {/* Logo Section */} +
+
+ +

CHORUS

-

CHORUS

-
+
@@ -87,11 +88,11 @@ export default function LogoPage() { {/* Stacked Layout */}
-
-
- +
+
+ +

CHORUS

-
CHORUS

Stacked Layout

@@ -114,7 +115,7 @@ export default function LogoPage() {
-

3D Interactive Version

+

3D Animated Version

  • • Primary brand application
    • @@ -128,9 +129,9 @@ export default function LogoPage() { {/* 2D Static Version */}
    -
    - 2D -
    + + CHORUS Logo +

    2D Static Version

      @@ -261,6 +262,6 @@ 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 8a41065..dff833b 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,8 +1,8 @@ export default function Motion() { return ( -
-
-
+
+
+

Motion System

diff --git a/brand-assets/brand-style-guide-site/src/app/public-relations/page.tsx b/brand-assets/brand-style-guide-site/src/app/public-relations/page.tsx index 5fae2c7..166f248 100644 --- a/brand-assets/brand-style-guide-site/src/app/public-relations/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/public-relations/page.tsx @@ -1,6 +1,8 @@ export default function PublicRelationsPage() { return ( -
+
+
+
@@ -15,7 +17,7 @@ export default function PublicRelationsPage() {
-
+

Coming Soon

@@ -25,8 +27,9 @@ export default function PublicRelationsPage() { and public communications materials.

-
+
+
); } \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/app/social-media/page.tsx b/brand-assets/brand-style-guide-site/src/app/social-media/page.tsx index c37c382..4cb8b81 100644 --- a/brand-assets/brand-style-guide-site/src/app/social-media/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/social-media/page.tsx @@ -1,32 +1,33 @@ export default function SocialMediaPage() { return ( -
-
-
-
-

- Social Media -

-

- Brand guidelines for social media presence and content -

-
-
-
+
+
+
+
-
-
-

- Coming Soon -

-
-

- This section will contain guidelines for social media posts, - profile branding, and community engagement standards. -

+
+

+ Social Media +

+

+ Brand guidelines for social media presence and content +

+
-
-
+ +
+

+ Coming Soon +

+
+

+ This section will contain guidelines for social media posts, + profile branding, and community engagement standards. +

+
+
+
+
); } \ No newline at end of file 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 1f88fdd..c502b15 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,72 +1,74 @@ 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 - . + +

+

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

-
-

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

+ {/* 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. +

+
+
-
-

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 */} -
-
+ {/* Typography Examples - DO vs DON'T */} +
+
{/* DO Section */}

@@ -133,129 +135,130 @@ export default function TypographyPage() {

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

- ✗ - DON'T -

-
-

This column represents incorrect approaches to avoid.

-
+ {/* 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 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. +

- - {/* 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 */} -
-

Proportional Font Scale

-

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

- -
-
-
-

Display Sizes

-
-
Display Large
-
Display Medium
-
Display Small
-
-
-
-

Text Sizes

-
-
Large Text
-
Medium Text
-
Base Text
-
Small Text
-
Extra Small Text
-
-
-
-
-
+ {/* Typography Scale */} - {/* Implementation Guide */} -
-

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: +

Proportional Font Scale

+

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

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

Display Sizes

+
+
Display Large
+
Display Medium
+
Display Small
+
+
+
+

Text Sizes

+
+
Large Text
+
Medium Text
+
Base Text
+
Small Text
+
Extra Small Text
+
+
-
-
- 2. Usage Examples (HTML) -
-
- 
{`
-
Main Heading

-
Section Heading

-
Body paragraph text

-Secondary information`}
+ +
+

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: +

+ +
+
+
+ 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`}
+
+
diff --git a/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx b/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx index 62ad52c..56d5d64 100644 --- a/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx +++ b/brand-assets/brand-style-guide-site/src/app/visual-identity/page.tsx @@ -1,6 +1,9 @@ export default function VisualIdentityPage() { return ( -
+
+
+
+
@@ -15,7 +18,7 @@ export default function VisualIdentityPage() {
-
+

Design Philosophy

@@ -26,7 +29,6 @@ export default function VisualIdentityPage() { creating a cohesive and memorable brand experience.

-
@@ -71,5 +73,8 @@ export default function VisualIdentityPage() {
+ +
+
); } \ No newline at end of file diff --git a/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx b/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx index 40d72a5..328883b 100644 --- a/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx +++ b/brand-assets/brand-style-guide-site/src/components/Sidebar.tsx @@ -93,7 +93,7 @@ const Sidebar = () => { return (