feat: Implement proper Three.js logo system with custom environment mapping
- Replace CDN-based Three.js with npm packages for reliable loading - Add DRACO loader support for compressed GLB files - Implement custom horizon gradient environment mapping - Use exact material properties from reference logo.html (MeshPhysicalMaterial) - Apply proper metallic sheen, clearcoat, and reflectivity settings - Fix camera positioning and canvas sizing to prevent clipping - Maintain square aspect ratio for consistent logo display - Load user's mobius-ring.glb with fallback torus geometry 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tony
@@ -0,0 +1,9 @@
|
||||
|
||||
export default function AccessibilityPage() {
|
||||
return (
|
||||
<div>
|
||||
<h1 className="text-h1 p-12">Accessibility</h1>
|
||||
{/* Content will be added here */}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export default function CollaboratorsPage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-chorus-lg py-chorus-xl">
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Collaborators
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Guidelines for partners, collaborators, and third-party integrations
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Coming Soon
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p>
|
||||
This section will contain guidelines for external collaborators,
|
||||
partnership materials, and co-branding standards.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
315
brand-assets/brand-style-guide-site/src/app/colors/page.tsx
Normal file
315
brand-assets/brand-style-guide-site/src/app/colors/page.tsx
Normal file
@@ -0,0 +1,315 @@
|
||||
|
||||
export default function ColorsPage() {
|
||||
const lightColorSets = [
|
||||
{
|
||||
name: 'Sand',
|
||||
description: 'Warm neutral for light mode and subtle backgrounds',
|
||||
baseColor: 'sand-700',
|
||||
usage: 'Light mode backgrounds, warm accents, subtle surfaces',
|
||||
psychology: 'Warmth, natural elegance, approachability',
|
||||
shades: [
|
||||
{ name: '950', hex: '#8E7B5E', class: 'bg-sand-950' },
|
||||
{ name: '900', hex: '#99886E', class: 'bg-sand-900' },
|
||||
{ name: '800', hex: '#A4957E', class: 'bg-sand-800' },
|
||||
{ name: '700', hex: '#AFA28E', class: 'bg-sand-700' },
|
||||
{ name: '600', hex: '#BAAF9F', class: 'bg-sand-600' },
|
||||
{ name: '500', hex: '#C5BCAF', class: 'bg-sand-500' },
|
||||
{ name: '400', hex: '#D0C9BF', class: 'bg-sand-400' },
|
||||
{ name: '300', hex: '#DBD6CF', class: 'bg-sand-300' },
|
||||
{ name: '200', hex: '#E6E3DF', class: 'bg-sand-200' },
|
||||
{ name: '100', hex: '#F1F0EF', class: 'bg-sand-100' },
|
||||
{ name: '50', hex: '#F1F0EF', class: 'bg-sand-50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Coral',
|
||||
description: 'Error messages, critical warnings, urgent notifications',
|
||||
baseColor: 'coral-700',
|
||||
usage: 'Error states, critical alerts, problem indicators',
|
||||
psychology: 'Warmth, natural elegance, approachability',
|
||||
shades: [
|
||||
{ name: '950', hex: '#8E7B5E', class: 'bg-coral-950' },
|
||||
{ name: '900', hex: '#99886E', class: 'bg-coral-900' },
|
||||
{ name: '800', hex: '#A4957E', class: 'bg-coral-800' },
|
||||
{ name: '700', hex: '#AFA28E', class: 'bg-coral-700' },
|
||||
{ name: '600', hex: '#BAAF9F', class: 'bg-coral-600' },
|
||||
{ name: '500', hex: '#C5BCAF', class: 'bg-coral-500' },
|
||||
{ name: '400', hex: '#D0C9BF', class: 'bg-coral-400' },
|
||||
{ name: '300', hex: '#DBD6CF', class: 'bg-coral-300' },
|
||||
{ name: '200', hex: '#E6E3DF', class: 'bg-coral-200' },
|
||||
{ name: '100', hex: '#F1F0EF', class: 'bg-coral-100' },
|
||||
{ name: '50', hex: '#F1F0EF', class: 'bg-coral-50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Carbon',
|
||||
description: 'Primary neutral base colors for backgrounds and text',
|
||||
baseColor: 'carbon-700',
|
||||
usage: 'Primary backgrounds, text, and structural elements',
|
||||
psychology: 'Sophistication, premium quality, technical precision',
|
||||
shades: [
|
||||
{ name: '950', hex: '#000000', class: 'bg-carbon-950' },
|
||||
{ name: '900', hex: '#0a0a0a', class: 'bg-carbon-900' },
|
||||
{ name: '800', hex: '#1a1a1a', class: 'bg-carbon-800' },
|
||||
{ name: '700', hex: '#2a2a2a', class: 'bg-carbon-700' },
|
||||
{ name: '600', hex: '#666666', class: 'bg-carbon-600' },
|
||||
{ name: '500', hex: '#808080', class: 'bg-carbon-500' },
|
||||
{ name: '400', hex: '#a0a0a0', class: 'bg-carbon-400' },
|
||||
{ name: '300', hex: '#c0c0c0', class: 'bg-carbon-300' },
|
||||
{ name: '200', hex: '#e0e0e0', class: 'bg-carbon-200' },
|
||||
{ name: '100', hex: '#f0f0f0', class: 'bg-carbon-100' },
|
||||
{ name: '50', hex: '#f8f8f8', class: 'bg-carbon-50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Walnut',
|
||||
description: 'Neutral Warm backgrounds, humanised elements',
|
||||
baseColor: 'walnut-700',
|
||||
usage: 'Usage: Warm accents, secondary elements, natural touches.',
|
||||
psychology: 'Reliability, craftsmanship, approachable intelligence',
|
||||
shades: [
|
||||
{ name: '950', hex: '#2a3330', class: 'bg-walnut-950' },
|
||||
{ name: '900', hex: '#3a4540', class: 'bg-walnut-900' },
|
||||
{ name: '800', hex: '#4a5750', class: 'bg-walnut-800' },
|
||||
{ name: '700', hex: '#515d54', class: 'bg-walnut-700' },
|
||||
{ name: '600', hex: '#5a6964', class: 'bg-walnut-600' },
|
||||
{ name: '500', hex: '#6a7974', class: 'bg-walnut-500' },
|
||||
{ name: '400', hex: '#7a8a7f', class: 'bg-walnut-400' },
|
||||
{ name: '300', hex: '#8a9b8f', class: 'bg-walnut-300' },
|
||||
{ name: '200', hex: '#9aac9f', class: 'bg-walnut-200' },
|
||||
{ name: '100', hex: '#aabdaf', class: 'bg-walnut-100' },
|
||||
{ name: '50', hex: '#bacfbf', class: 'bg-walnut-50' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const darkColorSets = [
|
||||
{
|
||||
name: 'Ocean',
|
||||
description: 'Primary action and interactive color',
|
||||
baseColor: 'ocean-700',
|
||||
usage: 'Primary actions, links, interactive elements, system feedback',
|
||||
psychology: 'Trust, reliability, technological precision',
|
||||
shades: [
|
||||
{ name: '950', hex: '#2a3441', class: 'bg-ocean-950' },
|
||||
{ name: '900', hex: '#3a4654', class: 'bg-ocean-900' },
|
||||
{ name: '800', hex: '#4a5867', class: 'bg-ocean-800' },
|
||||
{ name: '700', hex: '#5a6c80', class: 'bg-ocean-700' },
|
||||
{ name: '600', hex: '#6a7e99', class: 'bg-ocean-600' },
|
||||
{ name: '500', hex: '#7a90b2', class: 'bg-ocean-500' },
|
||||
{ name: '400', hex: '#8ba3c4', class: 'bg-ocean-400' },
|
||||
{ name: '300', hex: '#9bb6d6', class: 'bg-ocean-300' },
|
||||
{ name: '200', hex: '#abc9e8', class: 'bg-ocean-200' },
|
||||
{ name: '100', hex: '#bbdcfa', class: 'bg-ocean-100' },
|
||||
{ name: '50', hex: '#cbefff', class: 'bg-ocean-50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Eucalyptus',
|
||||
description: 'Success states and positive feedback',
|
||||
baseColor: 'eucalyptus-700',
|
||||
usage: 'Success messages, positive data visualization, growth indicators',
|
||||
psychology: 'Growth, success, natural harmony',
|
||||
shades: [
|
||||
{ name: '950', hex: '#2a3330', class: 'bg-eucalyptus-950' },
|
||||
{ name: '900', hex: '#3a4540', class: 'bg-eucalyptus-900' },
|
||||
{ name: '800', hex: '#4a5750', class: 'bg-eucalyptus-800' },
|
||||
{ name: '700', hex: '#515d54', class: 'bg-eucalyptus-700' },
|
||||
{ name: '600', hex: '#5a6964', class: 'bg-eucalyptus-600' },
|
||||
{ name: '500', hex: '#6a7974', class: 'bg-eucalyptus-500' },
|
||||
{ name: '400', hex: '#7a8a7f', class: 'bg-eucalyptus-400' },
|
||||
{ name: '300', hex: '#8a9b8f', class: 'bg-eucalyptus-300' },
|
||||
{ name: '200', hex: '#9aac9f', class: 'bg-eucalyptus-200' },
|
||||
{ name: '100', hex: '#aabdaf', class: 'bg-eucalyptus-100' },
|
||||
{ name: '50', hex: '#bacfbf', class: 'bg-eucalyptus-50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Nickel',
|
||||
description: 'UI elements, borders, technical precision',
|
||||
baseColor: 'carbon-700',
|
||||
usage: 'Primary backgrounds, text, and structural elements',
|
||||
psychology: 'Sophistication, premium quality, technical precision',
|
||||
shades: [
|
||||
{ name: '950', hex: '#000000', class: 'bg-carbon-950' },
|
||||
{ name: '900', hex: '#0a0a0a', class: 'bg-carbon-900' },
|
||||
{ name: '800', hex: '#1a1a1a', class: 'bg-carbon-800' },
|
||||
{ name: '700', hex: '#2a2a2a', class: 'bg-carbon-700' },
|
||||
{ name: '600', hex: '#666666', class: 'bg-carbon-600' },
|
||||
{ name: '500', hex: '#808080', class: 'bg-carbon-500' },
|
||||
{ name: '400', hex: '#a0a0a0', class: 'bg-carbon-400' },
|
||||
{ name: '300', hex: '#c0c0c0', class: 'bg-carbon-300' },
|
||||
{ name: '200', hex: '#e0e0e0', class: 'bg-carbon-200' },
|
||||
{ name: '100', hex: '#f0f0f0', class: 'bg-carbon-100' },
|
||||
{ name: '50', hex: '#f8f8f8', class: 'bg-carbon-50' },
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Mulberry',
|
||||
description: 'Brand accent color with deep purple sophistication',
|
||||
baseColor: 'mulberry-700',
|
||||
usage: 'Brand accents, interactive elements, premium highlights',
|
||||
psychology: 'Creativity, innovation, sophisticated luxury',
|
||||
shades: [
|
||||
{ name: '950', hex: '#0b0213', class: 'bg-mulberry-950' },
|
||||
{ name: '900', hex: '#1a1426', class: 'bg-mulberry-900' },
|
||||
{ name: '800', hex: '#2a2639', class: 'bg-mulberry-800' },
|
||||
{ name: '700', hex: '#3a384c', class: 'bg-mulberry-700' },
|
||||
{ name: '600', hex: '#4a4a5f', class: 'bg-mulberry-600' },
|
||||
{ name: '500', hex: '#5a5c72', class: 'bg-mulberry-500' },
|
||||
{ name: '400', hex: '#7a7e95', class: 'bg-mulberry-400' },
|
||||
{ name: '300', hex: '#9aa0b8', class: 'bg-mulberry-300' },
|
||||
{ name: '200', hex: '#bac2db', class: 'bg-mulberry-200' },
|
||||
{ name: '100', hex: '#dae4fe', class: 'bg-mulberry-100' },
|
||||
{ name: '50', hex: '#f0f4ff', class: 'bg-mulberry-50' },
|
||||
]
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<section id="colors" className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
|
||||
<div className="px-chorus-lg max-w-7xl mx-auto">
|
||||
<h2 className="text-h2 mb-chorus-lg">Color Palette</h2>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Brand Color Philosophy</h3>
|
||||
<p className="mb-chorus-md">The CHORUS color palette draws inspiration from premium natural materials in the Australian Landscape, and sophisticated technology, creating a system that works across dark digital interfaces and light print materials while maintaining accessibility and international appeal.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Theme Implementation</h3>
|
||||
|
||||
<div className="grid md:grid-cols-2 mb-chorus-lg">
|
||||
<div className="p-chorus-lg bg-mulberry-900 shadow-lg">
|
||||
<div className="flex items-center gap-3 mb-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Moon.png" alt="Dark Mode" className="w-8 h-8" />
|
||||
<h4 className="text-h4 text-white">Dark Mode (Default)</h4>
|
||||
</div>
|
||||
<p className="text-sm text-mulberry-200 mb-chorus-md">Dark mode is the preferred default for all CHORUS Services applications</p>
|
||||
<ul className="text-sm space-y-1 text-mulberry-100">
|
||||
<li><strong>Background Hierarchy:</strong> Carbon Black → Mulberry Variants → Cool Gray</li>
|
||||
<li><strong>Text Hierarchy:</strong> Clean White → Light Gray → Purple Accents</li>
|
||||
<li><strong>Aesthetic:</strong> Ultra-minimalist with sophisticated mulberry accents</li>
|
||||
<li><strong>Contrast:</strong> WCAG 2.1 AA compliant</li>
|
||||
</ul>
|
||||
<div className="-mr-chorus-lg">
|
||||
{darkColorSets.map((colorSet) => (
|
||||
<div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}>
|
||||
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
|
||||
<div className="flex items-start justify-between mb-chorus-md">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">{colorSet.name}</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">{colorSet.description}</p>
|
||||
<div className="text-xs space-y-1">
|
||||
<p><strong>Usage:</strong> {colorSet.usage}</p>
|
||||
<p><strong>Psychology:</strong> {colorSet.psychology}</p>
|
||||
</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>
|
||||
|
||||
</div>
|
||||
|
||||
<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" />
|
||||
<h4 className="text-h4 text-carbon-900">Light Mode (Alternative)</h4>
|
||||
</div>
|
||||
<p className="text-sm text-carbon-700 mb-chorus-md">Available as alternative but dark mode is strongly preferred</p>
|
||||
<ul className="text-sm space-y-1 text-carbon-800">
|
||||
<li><strong>Background Hierarchy:</strong> Pure White → Sand Variants → Eucalyptus</li>
|
||||
<li><strong>Text Hierarchy:</strong> Carbon Black → Medium Gray → Light Gray</li>
|
||||
<li><strong>Usage:</strong> Print materials, accessibility accommodations</li>
|
||||
<li><strong>Contrast:</strong> Optimized for readability on warm backgrounds</li>
|
||||
</ul>
|
||||
|
||||
<div className="-ml-chorus-lg">
|
||||
{lightColorSets.map((colorSet) => (
|
||||
<div key={colorSet.name} className={`border border-nickel-200 overflow-hidden bg-${colorSet.baseColor}`}>
|
||||
<div className={`p-chorus-lg bg-${colorSet.baseColor}`}>
|
||||
<div className="flex items-start justify-between mb-chorus-md">
|
||||
<div>
|
||||
<h4 className="text-h4 mb-2">{colorSet.name}</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">{colorSet.description}</p>
|
||||
<div className="text-xs space-y-1">
|
||||
<p><strong>Usage:</strong> {colorSet.usage}</p>
|
||||
<p><strong>Psychology:</strong> {colorSet.psychology}</p>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Usage Guidelines</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg ">
|
||||
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-700 dark:text-eucalyptus-400">Do</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• Use the complete color system consistently across all applications</li>
|
||||
<li>• Prioritize dark mode as the default experience</li>
|
||||
<li>• Maintain WCAG AA contrast ratios for accessibility</li>
|
||||
<li>• Use semantic color assignments (Ocean for actions, Eucalyptus for success)</li>
|
||||
<li>• Test colors across different devices and lighting conditions</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg ">
|
||||
<h4 className="text-h4 mb-chorus-sm text-coral-700 dark:text-coral-400">Don't</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• Create custom colors outside the approved palette</li>
|
||||
<li>• Use light mode as the primary experience</li>
|
||||
<li>• Mix warm and cool tones inappropriately</li>
|
||||
<li>• Ignore accessibility requirements for contrast</li>
|
||||
<li>• Use colors purely for decoration without semantic meaning</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,102 @@
|
||||
export default function Communications() {
|
||||
return (
|
||||
<section id="communications" className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-700 dark:to-carbon-950 from-white to-coral-200">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Language Support</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Communication guidelines and language standards for the CHORUS brand.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Consistent voice, tone, and messaging across all touchpoints and global markets.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Voice & Tone</h3>
|
||||
<div className="space-y-3 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<div>
|
||||
<strong>Professional yet Approachable:</strong> We communicate complex technical concepts clearly without sacrificing accuracy.
|
||||
</div>
|
||||
<div>
|
||||
<strong>Confident & Authoritative:</strong> We speak with expertise while remaining humble and open to collaboration.
|
||||
</div>
|
||||
<div>
|
||||
<strong>Precise & Clear:</strong> Every word serves a purpose, avoiding jargon when clarity is at stake.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Key Messaging</h3>
|
||||
<div className="space-y-3 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<div>
|
||||
<strong>Context Preservation:</strong> "Never lose context in AI conversations"
|
||||
</div>
|
||||
<div>
|
||||
<strong>Distributed Intelligence:</strong> "Scale AI across global teams seamlessly"
|
||||
</div>
|
||||
<div>
|
||||
<strong>Enterprise Ready:</strong> "Production-grade reliability for critical workflows"
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Writing Style</h3>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Active voice preferred</li>
|
||||
<li>• Clear, concise sentences</li>
|
||||
<li>• Technical accuracy</li>
|
||||
<li>• Inclusive language</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Terminology</h3>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• "AI agents" not "bots"</li>
|
||||
<li>• "Context management"</li>
|
||||
<li>• "Distributed orchestration"</li>
|
||||
<li>• "Knowledge fabric"</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Localization</h3>
|
||||
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Global-first approach</li>
|
||||
<li>• Cultural sensitivity</li>
|
||||
<li>• Technical term consistency</li>
|
||||
<li>• Regional adaptations</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h3 className="text-h3 mb-chorus-md">Communication Principles</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Clarity First</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Make complex AI concepts accessible to technical and business audiences alike.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Evidence-Based</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Support claims with data, research, and real-world results.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,43 @@
|
||||
export default function Components() {
|
||||
return (
|
||||
<section id="components" className="py-chorus-xxl bg-gradient-to-b dark:from-walnut-950 dark:to-carbon-950 from-sand-200 to-white">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Components</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Component system and design patterns for the CHORUS brand.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
This section will contain reusable UI components, design patterns, and component specifications for consistent brand implementation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">UI Components</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Standardized UI components including buttons, forms, cards, and navigation elements.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Layout Patterns</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Grid systems, spacing conventions, and responsive layout patterns.
|
||||
</p>
|
||||
</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">Coming Soon</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Detailed component specifications, code examples, and implementation guidelines will be available soon.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
76
brand-assets/brand-style-guide-site/src/app/culture/page.tsx
Normal file
76
brand-assets/brand-style-guide-site/src/app/culture/page.tsx
Normal file
@@ -0,0 +1,76 @@
|
||||
export default function Culture() {
|
||||
return (
|
||||
<section id="culture" className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-700 dark:to-eucalyptus-950 from-walnut-500 to-walnut-200">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Culture</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
The cultural values and principles that drive the CHORUS brand.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Our brand reflects our commitment to innovation, collaboration, and technical excellence in distributed AI systems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md text-mulberry-700 dark:text-mulberry-300">Innovation First</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
We push the boundaries of what's possible in distributed AI, always seeking better solutions for complex problems.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md text-mulberry-700 dark:text-mulberry-300">Collaborative Intelligence</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Our platform enables seamless collaboration between humans and AI agents, fostering collective intelligence.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md text-mulberry-700 dark:text-mulberry-300">Technical Excellence</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Every solution is built with precision, reliability, and scalability as core principles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md text-mulberry-700 dark:text-mulberry-300">Global Perspective</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
We design for global teams and diverse use cases, ensuring our solutions work everywhere.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">
|
||||
<h3 className="text-h3 mb-chorus-md">Brand Personality</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-3">
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Sophisticated</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Technically advanced yet approachable
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Reliable</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Enterprise-grade stability and performance
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-2">Innovative</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Pioneering the future of distributed AI
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
BIN
brand-assets/brand-style-guide-site/src/app/favicon.ico
Normal file
BIN
brand-assets/brand-style-guide-site/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
789
brand-assets/brand-style-guide-site/src/app/globals.css
Normal file
789
brand-assets/brand-style-guide-site/src/app/globals.css
Normal file
@@ -0,0 +1,789 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* CHORUS Proportional Typography System - 18px Base */
|
||||
html {
|
||||
font-size: 16px; /* Base size: 18px instead of browser default 16px */
|
||||
}
|
||||
|
||||
/* CHORUS Brand CSS Variables - Ultra-Minimalist Implementation */
|
||||
:root {
|
||||
/* Core Brand Colors */
|
||||
--color-carbon: #000000;
|
||||
--color-mulberry: #0b0213;
|
||||
--color-walnut: #403730;
|
||||
--color-nickel: #c1bfb1;
|
||||
|
||||
/* CHORUS Semantic Color Tokens - 8 Color System */
|
||||
--chorus-primary: #FFFFFF; /* carbon-950 */
|
||||
--chorus-secondary: #CCCCCC; /* mulberry-950 */
|
||||
--chorus-accent: #403730; /* walnut-900 */
|
||||
--chorus-neutral: #c1bfb1; /* nickel-500 */
|
||||
--chorus-info: #3a4654; /* ocean-900 */
|
||||
--chorus-success: #3a4540; /* eucalyptus-900 */
|
||||
--chorus-warning: #6a5c46; /* sand-900 */
|
||||
--chorus-danger: #3e2d2c; /* coral-900 */
|
||||
|
||||
/* Light Theme Variables */
|
||||
--bg-primary: #FFFFFF;
|
||||
--bg-secondary: #CCCCCC;
|
||||
--bg-tertiary: #AAAAAA;
|
||||
--bg-accent: #F7F7E2;
|
||||
|
||||
--text-primary: #000000;
|
||||
--text-secondary: #1A1A1A;
|
||||
--text-tertiary: #333333;
|
||||
--text-subtle: #666666;
|
||||
--text-ghost: #999999;
|
||||
|
||||
--border-invisible: #FAFAFA;
|
||||
--border-subtle: #F0F0F0;
|
||||
--border-defined: #E5E5E5;
|
||||
--border-emphasis: #CCCCCC;
|
||||
|
||||
--accent-primary: #0b0213; /* Mulberry */
|
||||
--accent-secondary: #403730; /* Walnut */
|
||||
--accent-system: #5a6c80; /* Ocean */
|
||||
|
||||
/* Spacing System */
|
||||
--space-micro: 0.25rem; /* 8px */
|
||||
--space-sm: 0.5rem; /* 16px */
|
||||
--space-md: 1rem; /* 32px */
|
||||
--space-lg: 2rem; /* 64px */
|
||||
--space-xl: 4rem; /* 128px */
|
||||
--space-xxl: 8rem; /* 256px */
|
||||
}
|
||||
|
||||
/* Dark Theme Variables */
|
||||
.dark {
|
||||
--bg-primary: #000000;
|
||||
--bg-secondary: #333333;
|
||||
--bg-tertiary: #555555; /* Mulberry */
|
||||
--bg-accent: #1a1426;
|
||||
|
||||
--text-primary: #FFFFFF;
|
||||
--text-secondary: #E0E0E0;
|
||||
--text-tertiary: #C0C0C0;
|
||||
--text-subtle: #A0A0A0;
|
||||
--text-ghost: #808080;
|
||||
|
||||
--border-invisible: #1a1a1a;
|
||||
--border-subtle: #2a2a2a;
|
||||
--border-defined: #3a3a3a;
|
||||
--border-emphasis: #4a4a4a;
|
||||
|
||||
--accent-primary: #F5F5DC; /* Sand */
|
||||
--accent-secondary: #c1bfb1; /* Nickel */
|
||||
}
|
||||
|
||||
/* Accessibility theme overrides - non-conflicting */
|
||||
[data-theme="protanopia"] {
|
||||
--color-ring-primary: #1e40af; /* Blue-800 for logo materials only */
|
||||
}
|
||||
|
||||
[data-theme="deuteranopia"] {
|
||||
--color-ring-primary: #6b21a8; /* Purple-800 for logo materials only */
|
||||
}
|
||||
|
||||
[data-theme="tritanopia"] {
|
||||
--color-ring-primary: #991b1b; /* Red-800 for logo materials only */
|
||||
}
|
||||
|
||||
[data-theme="achromatopsia"] {
|
||||
--color-ring-primary: #374151; /* Gray-700 for logo materials only */
|
||||
}
|
||||
|
||||
/* CHORUS 8-Color Accessibility System */
|
||||
/* Protanopia (Red-blind) - Preserve carbon/mulberry/walnut, adjust coral/eucalyptus */
|
||||
[data-accessibility="protanopia"] {
|
||||
--chorus-danger: var(--chorus-info); /* Use ocean instead of coral */
|
||||
--chorus-success: var(--chorus-warning); /* Use sand instead of eucalyptus */
|
||||
--chorus-warning: var(--chorus-neutral); /* Neutral tone for sand */
|
||||
}
|
||||
|
||||
/* Light mode protanopia adjustments */
|
||||
:root:not(.dark)[data-accessibility="protanopia"],
|
||||
.light[data-accessibility="protanopia"] {
|
||||
--chorus-danger: #2a3441; /* ocean-950 */
|
||||
--chorus-success: #473e2f; /* sand-950 */
|
||||
--chorus-warning: #2a2a2a; /* nickel-900 */
|
||||
}
|
||||
|
||||
/* Dark mode protanopia adjustments */
|
||||
.dark[data-accessibility="protanopia"] {
|
||||
--chorus-danger: #cbefff; /* ocean-50 */
|
||||
--chorus-success: #cee1be; /* sand-50 */
|
||||
--chorus-warning: #f5f5f5; /* nickel-50 */
|
||||
}
|
||||
|
||||
/* Deuteranopia (Green-blind) - Enhance blue/yellow contrast */
|
||||
[data-accessibility="deuteranopia"] {
|
||||
--chorus-success: var(--chorus-info); /* Use ocean instead of eucalyptus */
|
||||
--chorus-info: var(--chorus-warning); /* Use sand for info */
|
||||
--chorus-accent: var(--chorus-danger); /* Use coral for accent */
|
||||
}
|
||||
|
||||
/* Light mode deuteranopia adjustments */
|
||||
:root:not(.dark)[data-accessibility="deuteranopia"],
|
||||
.light[data-accessibility="deuteranopia"] {
|
||||
--chorus-success: #2a3441; /* ocean-950 */
|
||||
--chorus-info: #473e2f; /* sand-950 */
|
||||
--chorus-accent: #2e1d1c; /* coral-950 */
|
||||
}
|
||||
|
||||
/* Dark mode deuteranopia adjustments */
|
||||
.dark[data-accessibility="deuteranopia"] {
|
||||
--chorus-success: #cbefff; /* ocean-50 */
|
||||
--chorus-info: #cee1be; /* sand-50 */
|
||||
--chorus-accent: #ffd6d6; /* coral-50 */
|
||||
}
|
||||
|
||||
/* Tritanopia (Blue-blind) - Replace blue/yellow distinctions */
|
||||
[data-accessibility="tritanopia"] {
|
||||
--chorus-info: var(--chorus-danger); /* Use coral instead of ocean */
|
||||
--chorus-warning: var(--chorus-success); /* Use eucalyptus instead of sand */
|
||||
--chorus-primary: var(--chorus-secondary); /* Use mulberry for primary */
|
||||
}
|
||||
|
||||
/* Light mode tritanopia adjustments */
|
||||
:root:not(.dark)[data-accessibility="tritanopia"],
|
||||
.light[data-accessibility="tritanopia"] {
|
||||
--chorus-info: #2e1d1c; /* coral-950 */
|
||||
--chorus-warning: #2a3330; /* eucalyptus-950 */
|
||||
--chorus-primary: #0b0213; /* mulberry-950 */
|
||||
}
|
||||
|
||||
/* Dark mode tritanopia adjustments */
|
||||
.dark[data-accessibility="tritanopia"] {
|
||||
--chorus-info: #ffd6d6; /* coral-50 */
|
||||
--chorus-warning: #bacfbf; /* eucalyptus-50 */
|
||||
--chorus-primary: #f0f4ff; /* mulberry-50 */
|
||||
}
|
||||
|
||||
/* Achromatopsia (Complete color blindness) - Use brightness/contrast only */
|
||||
[data-accessibility="achromatopsia"] {
|
||||
--chorus-primary: #000000; /* Pure black */
|
||||
--chorus-secondary: #333333; /* Dark gray */
|
||||
--chorus-accent: #666666; /* Medium gray */
|
||||
--chorus-neutral: #999999; /* Light gray */
|
||||
--chorus-info: #444444; /* Dark medium */
|
||||
--chorus-success: #222222; /* Very dark */
|
||||
--chorus-warning: #777777; /* Medium light */
|
||||
--chorus-danger: #111111; /* Almost black */
|
||||
}
|
||||
|
||||
/* Dark mode achromatopsia adjustments */
|
||||
.dark[data-accessibility="achromatopsia"] {
|
||||
--chorus-primary: #ffffff; /* Pure white */
|
||||
--chorus-secondary: #cccccc; /* Light gray */
|
||||
--chorus-accent: #999999; /* Medium gray */
|
||||
--chorus-neutral: #666666; /* Darker gray */
|
||||
--chorus-info: #bbbbbb; /* Light medium */
|
||||
--chorus-success: #dddddd; /* Very light */
|
||||
--chorus-warning: #888888; /* Medium dark */
|
||||
--chorus-danger: #eeeeee; /* Almost white */
|
||||
}
|
||||
|
||||
/* Typography optimizations for brand guide */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.683;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
ul, ol {
|
||||
padding-left: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-bottom: 0.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: 'Inconsolata', monospace;
|
||||
background: var(--border-subtle);
|
||||
padding: 0.125rem 0.25rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.dark code {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
/* Ultra-clean transitions following brand guide */
|
||||
* {
|
||||
transition: opacity 200ms ease-out, color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out;
|
||||
}
|
||||
|
||||
/* Motion System CSS - Documentation Only */
|
||||
/* Implementation to be done separately */
|
||||
|
||||
/* Custom progress bars with full browser compatibility */
|
||||
progress {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background-color: #E5E5E5;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dark progress {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
/* WebKit Progress Bar */
|
||||
progress::-webkit-progress-bar {
|
||||
background-color: #E5E5E5;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.dark progress::-webkit-progress-bar {
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
/* Harmony Green Progress */
|
||||
.progress-harmony::-webkit-progress-value {
|
||||
background-color: #515d54;
|
||||
border-radius: 0;
|
||||
}
|
||||
.dark .progress-harmony::-webkit-progress-value {
|
||||
background-color: #7a8a7f;
|
||||
}
|
||||
.progress-harmony::-moz-progress-bar {
|
||||
background-color: #515d54;
|
||||
border-radius: 0;
|
||||
}
|
||||
.dark .progress-harmony::-moz-progress-bar {
|
||||
background-color: #7a8a7f;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.hero {
|
||||
margin-bottom: var(--space-md);
|
||||
padding-bottom: var(--space-lg);
|
||||
}
|
||||
.logo-hero.border,
|
||||
#logo-hero.border {
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Canvas sizing for Three.js logos */
|
||||
.chorus-logo {
|
||||
display: block;
|
||||
aspect-ratio: 1 / 1; /* Force square aspect ratio */
|
||||
}
|
||||
|
||||
.chorus-logo.w32.h32 {
|
||||
width: 32px !important;
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
/* Ensure all chorus-logo canvases are square regardless of class */
|
||||
canvas.chorus-logo {
|
||||
aspect-ratio: 1 / 1 !important;
|
||||
}
|
||||
|
||||
*.inconsolata,
|
||||
.inconsolata,
|
||||
.mono,
|
||||
.monospace {
|
||||
font-family: 'Inconsolata', monospace !important;
|
||||
font-weight: 400 !important;
|
||||
}
|
||||
|
||||
|
||||
/* Warnings */
|
||||
.info img,
|
||||
.note img,
|
||||
.caution img,
|
||||
.security-warning img,
|
||||
.error img,
|
||||
.critical img,
|
||||
img.icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
vertical-align: middle;
|
||||
margin-right: 0rem; /* Space between icon and text */
|
||||
position: relative;
|
||||
top: -0.4rem; /* Adjust vertical alignment */
|
||||
}
|
||||
|
||||
.info p,
|
||||
.note p,
|
||||
.caution p,
|
||||
.security-warning p,
|
||||
.error p,
|
||||
.critical p {
|
||||
margin-left: 0rem; /* Space for icon */
|
||||
color: var(--text-white) !important;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.info h3,
|
||||
.note h3,
|
||||
.caution h3,
|
||||
.security-warning h3,
|
||||
.error h3,
|
||||
.critical h3,
|
||||
.info h4,
|
||||
.note h4,
|
||||
.caution h4,
|
||||
.security-warning h4,
|
||||
.error h4,
|
||||
.critical h4
|
||||
{
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
|
||||
.info button,
|
||||
.note button,
|
||||
.caution button,
|
||||
.security-warning button,
|
||||
.error button,
|
||||
.critical button {
|
||||
background-color: #0000002e !important;
|
||||
color: var(--chorus-primary) !important;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid #ffffff !important;
|
||||
border-radius: 0.45rem;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
margin-top: 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
float: right;
|
||||
}
|
||||
.info button.default,
|
||||
.note button.default,
|
||||
.caution button.default,
|
||||
.security-warning button.default,
|
||||
.error button.default,
|
||||
.critical button.default {
|
||||
background-color: #ffffff2e !important;
|
||||
}
|
||||
|
||||
.info button:hover,
|
||||
.note button:hover,
|
||||
.caution button:hover,
|
||||
.security-warning button:hover,
|
||||
.error button:hover,
|
||||
.critical button:hover {
|
||||
background-color: var(--text-white) !important;
|
||||
box-shadow: 0 0 0.25rem var(--color-carbon);
|
||||
}
|
||||
|
||||
.info {
|
||||
background-color: var(--chorus-info) !important;
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
.info button:hover {
|
||||
background-color: #ffffff !important;
|
||||
color: var(--chorus-info) !important;
|
||||
}
|
||||
.info button:active {
|
||||
background-color: var(--chorus-info) !important;
|
||||
color: var(--text-white) !important;
|
||||
box-shadow: inset 0 0 0.25rem var(--chorus-info);
|
||||
}
|
||||
|
||||
|
||||
.note {
|
||||
background-color: var(--chorus-success) !important;
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
.note button:hover {
|
||||
background-color: #ffffff !important;
|
||||
color: var(--chorus-success) !important;
|
||||
}
|
||||
.note button:active {
|
||||
background-color: var(--chorus-success) !important;
|
||||
color: var(--text-white) !important;
|
||||
box-shadow: inset 0 0 0.25rem var(--chorus-success);
|
||||
}
|
||||
|
||||
|
||||
.caution {
|
||||
background-color: var(--chorus-warning) !important;
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
.caution button:hover {
|
||||
background-color: #ffffff !important;
|
||||
color: var(--chorus-warning) !important;
|
||||
}
|
||||
.caution button:active {
|
||||
background-color: var(--chorus-warning) !important;
|
||||
color: var(--text-white) !important;
|
||||
box-shadow: inset 0 0 0.25rem var(--chorus-warning);
|
||||
}
|
||||
|
||||
|
||||
.security-warning {
|
||||
background-color: var(--chorus-warning) !important;
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
.security-warning button:hover {
|
||||
background-color: #ffffff !important;
|
||||
color: var(--chorus-warning) !important;
|
||||
}
|
||||
.security-warning button:active {
|
||||
background-color: var(--chorus-warning) !important;
|
||||
color: var(--text-white) !important;
|
||||
box-shadow: inset 0 0 0.25rem var(--chorus-warning);
|
||||
}
|
||||
|
||||
.error {
|
||||
background-color: var(--chorus-danger) !important;
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
.error button:hover {
|
||||
background-color: #ffffff !important;
|
||||
color: var(--chorus-danger) !important;
|
||||
}
|
||||
.error button:active {
|
||||
background-color: var(--chorus-danger) !important;
|
||||
color: var(--text-white) !important;
|
||||
box-shadow: inset 0 0 0.25rem var(--chorus-danger);
|
||||
}
|
||||
|
||||
|
||||
.critical {
|
||||
background-color: var(--chorus-danger) !important;
|
||||
color: var(--text-white) !important;
|
||||
}
|
||||
.critical button:hover {
|
||||
background-color: #ffffff !important;
|
||||
color: var(--chorus-danger) !important;
|
||||
}
|
||||
.critical button:active {
|
||||
background-color: var(--chorus-danger) !important;
|
||||
color: var(--text-white) !important;
|
||||
box-shadow: inset 0 0 0.25rem var(--chorus-danger);
|
||||
}
|
||||
|
||||
.info, .note, .caution, .security-warning, .error, .critical {
|
||||
padding: 1rem;
|
||||
border-radius: 0; /* CHORUS ultra-minimalist: no rounded corners except buttons */
|
||||
}
|
||||
|
||||
|
||||
/* https://codepen.io/sosuke/pen/Pjoqqp */
|
||||
.red-icon {
|
||||
filter: invert(32%) sepia(21%) saturate(646%) hue-rotate(317deg) brightness(88%) contrast(87%);
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* https://codepen.io/sosuke/pen/Pjoqqp */
|
||||
.green-icon {
|
||||
filter: invert(16%) sepia(9%) saturate(832%) hue-rotate(109deg) brightness(90%) contrast(87%);
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main * a {
|
||||
color: var(--chorus-primary);
|
||||
text-decoration: none;
|
||||
transition: color 200ms ease-in-out;
|
||||
}
|
||||
main * a:hover {
|
||||
color: var(--chorus-primary);
|
||||
background-color: var(--chorus-accent);
|
||||
border: var(--chorus-accent) solid 3px;
|
||||
border-radius: 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
main * a:focus {
|
||||
color: var(--chorus-secondary);
|
||||
background-color: var(--chorus-accent);
|
||||
}
|
||||
main * a:visited {
|
||||
color: var(--chorus-primary);
|
||||
}
|
||||
main * a:active {
|
||||
color: var(--chorus-danger);
|
||||
}
|
||||
|
||||
/* CHORUS Custom Prism.js Theme - Light Mode */
|
||||
:root {
|
||||
--syntax-bg: var(--color-natural-paper);
|
||||
--syntax-text: var(--chorus-primary);
|
||||
--syntax-comment: var(--chorus-neutral);
|
||||
--syntax-keyword: var(--chorus-accent);
|
||||
--syntax-string: var(--chorus-success);
|
||||
--syntax-number: var(--chorus-warning);
|
||||
--syntax-function: var(--chorus-info);
|
||||
--syntax-operator: var(--chorus-secondary);
|
||||
--syntax-property: var(--chorus-danger);
|
||||
--syntax-punctuation: var(--chorus-neutral);
|
||||
}
|
||||
|
||||
/* CHORUS Custom Prism.js Theme - Dark Mode */
|
||||
.dark {
|
||||
--syntax-bg: var(--chorus-primary);
|
||||
--syntax-text: #f8f8f2;
|
||||
--syntax-comment: #6272a4;
|
||||
--syntax-keyword: #ff79c6;
|
||||
--syntax-string: #50fa7b;
|
||||
--syntax-number: #ffb86c;
|
||||
--syntax-function: #8be9fd;
|
||||
--syntax-operator: #ff79c6;
|
||||
--syntax-property: #f1fa8c;
|
||||
--syntax-punctuation: #f8f8f2;
|
||||
}
|
||||
|
||||
/* Apply CHORUS colors to Prism elements */
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: var(--syntax-comment);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: var(--syntax-punctuation);
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: var(--syntax-property);
|
||||
}
|
||||
|
||||
.token.boolean,
|
||||
.token.number {
|
||||
color: var(--syntax-number);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: var(--syntax-string);
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string,
|
||||
.token.variable {
|
||||
color: var(--syntax-operator);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: var(--syntax-function);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token.keyword {
|
||||
color: var(--syntax-keyword);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important {
|
||||
color: var(--syntax-warning);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
/* Custom code block styling with CHORUS theme */
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: var(--syntax-bg) !important;
|
||||
color: var(--syntax-text) !important;
|
||||
font-family: 'Inconsolata', 'JetBrains Mono', 'Fira Code', monospace !important;
|
||||
font-size: 0.875rem !important;
|
||||
line-height: 1.5 !important;
|
||||
border: 0px solid var(--chorus-neutral) !important;
|
||||
border-radius: 0 !important; /* Ultra-minimalist: no border radius */
|
||||
}
|
||||
|
||||
pre[class*="language-"] {
|
||||
padding: 1rem !important;
|
||||
margin: 0 !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: 0.25rem 0.5rem !important;
|
||||
border-radius: 0 !important;
|
||||
white-space: normal !important;
|
||||
}
|
||||
|
||||
/* Accessibility theme support for syntax highlighting */
|
||||
[data-accessibility="protanopia"] {
|
||||
--syntax-keyword: var(--chorus-info);
|
||||
--syntax-string: var(--chorus-warning);
|
||||
--syntax-property: var(--chorus-info);
|
||||
}
|
||||
|
||||
[data-accessibility="deuteranopia"] {
|
||||
--syntax-keyword: var(--chorus-info);
|
||||
--syntax-string: var(--chorus-accent);
|
||||
--syntax-property: var(--chorus-accent);
|
||||
}
|
||||
|
||||
[data-accessibility="tritanopia"] {
|
||||
--syntax-keyword: var(--chorus-warning);
|
||||
--syntax-string: var(--chorus-warning);
|
||||
--syntax-property: var(--chorus-info);
|
||||
}
|
||||
|
||||
[data-accessibility="achromatopsia"] {
|
||||
--syntax-comment: var(--chorus-neutral);
|
||||
--syntax-keyword: var(--chorus-info);
|
||||
--syntax-string: var(--chorus-danger);
|
||||
--syntax-number: var(--chorus-warning);
|
||||
--syntax-function: var(--chorus-info);
|
||||
--syntax-operator: var(--chorus-danger);
|
||||
--syntax-property: var(--chorus-info);
|
||||
}
|
||||
|
||||
/* Primary Navigation Dropdown Menu System */
|
||||
.primary-nav {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.horizontal-menu {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0.5rem 0.75rem;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.dark .menu-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Flyout/Dropdown Menu */
|
||||
.flyout-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 220px;
|
||||
background: white;
|
||||
border: 1px solid var(--border-emphasis);
|
||||
border-radius: 0;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0.5rem 0;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transform: translateY(-8px);
|
||||
transition: all 200ms ease-out;
|
||||
z-index: 1100;
|
||||
}
|
||||
|
||||
.dark .flyout-menu {
|
||||
background: var(--bg-primary);
|
||||
border-color: var(--border-emphasis);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* Show dropdown on hover */
|
||||
.menu-item:hover .flyout-menu {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Flyout menu items */
|
||||
.flyout-menu .menu-item {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.flyout-menu .menu-item:hover {
|
||||
background-color: var(--bg-accent);
|
||||
}
|
||||
|
||||
.dark .flyout-menu .menu-item:hover {
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Flyout menu links */
|
||||
.flyout-menu a {
|
||||
display: block;
|
||||
color: var(--text-primary);
|
||||
text-decoration: none;
|
||||
transition: all 200ms ease-out;
|
||||
}
|
||||
|
||||
.flyout-menu a:hover {
|
||||
color: var(--accent-primary);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
/* Ensure flyout stays visible when hovering over it */
|
||||
.menu-item:hover .flyout-menu,
|
||||
.flyout-menu:hover {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* CHORUS Brand Rule: Only buttons may have rounded corners */
|
||||
button {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
/* All other elements should have sharp corners */
|
||||
div:not(button),
|
||||
span:not(button),
|
||||
section:not(button),
|
||||
article:not(button),
|
||||
aside:not(button),
|
||||
nav:not(button) {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
425
brand-assets/brand-style-guide-site/src/app/iconography/page.tsx
Normal file
425
brand-assets/brand-style-guide-site/src/app/iconography/page.tsx
Normal file
@@ -0,0 +1,425 @@
|
||||
|
||||
export default function IconographyPage() {
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl">
|
||||
<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="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>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Icons communicate instantly without language barriers</p>
|
||||
</div>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Icon Categories */}
|
||||
<section className="mb-chorus-xxl">
|
||||
<h2 className="text-h3 mb-chorus-md">Icon Categories</h2>
|
||||
<p className="mb-chorus-md">
|
||||
The Coolicons library organizes icons into logical categories, each serving specific interface functions while maintaining design consistency.
|
||||
</p>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
{/* Interface Icons */}
|
||||
<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">Interface & Navigation</h4>
|
||||
<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="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Search</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Settings</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Filter.png" alt="Filter" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Filter.png" alt="Filter" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Filter</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" alt="Check" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" alt="Check" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Check</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/External_Link.png" alt="External Link" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/External_Link.png" alt="External Link" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Link</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Heart" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Heart</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Star" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Star" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Star</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Trash_Full.png" alt="Trash" className="w-8 h-8 dark:hidden" />
|
||||
<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>
|
||||
|
||||
{/* Navigation Icons */}
|
||||
<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">Navigation & Direction</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">Directional indicators and navigation controls</p>
|
||||
<div className="grid grid-cols-6 md:grid-cols-8 gap-chorus-md">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/House_01.png" alt="Home" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/House_01.png" alt="Home" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Home</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Arrow Left" className="w-8 h-8 dark:hidden" />
|
||||
<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" />
|
||||
<span className="text-xs text-center">Left</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Arrow Right" className="w-8 h-8 dark:hidden" />
|
||||
<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" />
|
||||
<span className="text-xs text-center">Right</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Up_MD.png" alt="Arrow Up" className="w-8 h-8 dark:hidden" />
|
||||
<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" />
|
||||
<span className="text-xs text-center">Up</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Down_MD.png" alt="Arrow Down" className="w-8 h-8 dark:hidden" />
|
||||
<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" />
|
||||
<span className="text-xs text-center">Down</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Map_Pin.png" alt="Map Pin" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Location</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Navigation/Globe.png" alt="Globe" className="w-8 h-8 dark:hidden" />
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Navigation/Globe.png" alt="Globe" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Globe</span>
|
||||
</div>
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Menu/Hamburger_LG.png" alt="Menu" className="w-8 h-8 dark:hidden" />
|
||||
<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>
|
||||
|
||||
{/* File & System Icons */}
|
||||
<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>
|
||||
<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="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/White/File/File_Document.png" alt="Document" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Document</span>
|
||||
</div>
|
||||
<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/White/File/File_Code.png" alt="Code File" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Code</span>
|
||||
</div>
|
||||
<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/White/File/Folder.png" alt="Folder" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Folder</span>
|
||||
</div>
|
||||
<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/White/File/Download_Package.png" alt="Download" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Download</span>
|
||||
</div>
|
||||
<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/White/File/Cloud_Upload.png" alt="Upload" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Upload</span>
|
||||
</div>
|
||||
<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/White/System/Save.png" alt="Save" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Save</span>
|
||||
</div>
|
||||
<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/White/Edit/Copy.png" alt="Copy" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Copy</span>
|
||||
</div>
|
||||
<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/White/File/Archive.png" alt="Archive" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Archive</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Communication Icons */}
|
||||
<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>
|
||||
<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="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/White/Communication/Mail.png" alt="Mail" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Mail</span>
|
||||
</div>
|
||||
<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/White/Communication/Chat.png" alt="Chat" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Chat</span>
|
||||
</div>
|
||||
<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/White/Communication/Bell.png" alt="Notification" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Notify</span>
|
||||
</div>
|
||||
<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/White/Communication/Phone.png" alt="Phone" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Phone</span>
|
||||
</div>
|
||||
<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/White/Communication/Share_iOS_Export.png" alt="Share" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Share</span>
|
||||
</div>
|
||||
<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/White/User/User_01.png" alt="User" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">User</span>
|
||||
</div>
|
||||
<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/White/User/Users_Group.png" alt="Team" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Team</span>
|
||||
</div>
|
||||
<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/White/Communication/Paper_Plane.png" alt="Send" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Send</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status & Warning Icons */}
|
||||
<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>
|
||||
<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="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/White/Warning/Circle_Check.png" alt="Success" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Success</span>
|
||||
</div>
|
||||
<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/White/Warning/Circle_Warning.png" alt="Warning" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Warning</span>
|
||||
</div>
|
||||
<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/White/Warning/Stop_Sign.png" alt="Error" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Error</span>
|
||||
</div>
|
||||
<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/White/Warning/Info.png" alt="Info" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Info</span>
|
||||
</div>
|
||||
<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/White/Warning/Help.png" alt="Help" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Help</span>
|
||||
</div>
|
||||
<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/White/Interface/Loading.png" alt="Loading" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Loading</span>
|
||||
</div>
|
||||
<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/White/Interface/Lock.png" alt="Secure" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Secure</span>
|
||||
</div>
|
||||
<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/White/Interface/Lock_Open.png" alt="Unlock" className="w-8 h-8 hidden dark:block" />
|
||||
<span className="text-xs text-center">Unlock</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Usage Guidelines */}
|
||||
<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>
|
||||
<h3 className="text-h4 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="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">
|
||||
<h4 className="text-h5 mb-chorus-sm font-semibold">Use Theme Variants</h4>
|
||||
<p className="text-sm mb-chorus-sm">Always provide both black and white variants for proper contrast in light and dark themes.</p>
|
||||
<div className="flex gap-chorus-sm items-center">
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Black Settings" className="w-6 h-6" />
|
||||
<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>
|
||||
|
||||
{/* DON'T Section */}
|
||||
<div>
|
||||
<h3 className="text-h4 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="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>
|
||||
|
||||
<div className="space-y-chorus-md">
|
||||
<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) -->
|
||||
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png"
|
||||
alt="Settings"
|
||||
className="w-6 h-6 hidden dark:block" />`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
2. Standard Icon Sizes (CSS Classes)
|
||||
</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>{`/* 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 */`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
3. Icon Library Structure
|
||||
</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>{`public/icons/coolicons.v4.1/
|
||||
├── coolicons PNG/
|
||||
│ ├── Black/ # Light theme icons
|
||||
│ └── White/ # Dark theme icons
|
||||
├── coolicons SVG/ # Vector versions
|
||||
└── Webfont/ # Icon font (optional)`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
|
||||
export default function IdentityPage() {
|
||||
return (
|
||||
<section id="identity" className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-mulberry-700 to-sand-400 from-white">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Brand Identity Concept</h2>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-sm">Design Philosophy</h3>
|
||||
<p>The CHORUS brand identity embodies <strong>sophisticated orchestration</strong> through an <strong>ultra-minimalist aesthetic</strong> that connects technological precision with elegant simplicity. The system reflects:</p>
|
||||
|
||||
<ul className="mt-chorus-md space-y-2">
|
||||
<li><strong>Minimalist Precision:</strong> Clean, uncluttered design with purposeful use of white space</li>
|
||||
<li><strong>Subtle Sophistication:</strong> Understated elegance through refined typography and gentle color gradients</li>
|
||||
<li><strong>Mobius Continuity:</strong> The infinite loop of the Mobius ring representing seamless, continuous processes</li>
|
||||
<li><strong>Sophisticated Simplicity:</strong> Premium quality through restraint and intentional design choices</li>
|
||||
<li><strong>Global Accessibility:</strong> Internationally appropriate and inclusive design principles</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-sm">Brand Personality</h3>
|
||||
<p>CHORUS represents enthusiastic wonder, respect for nature, an analytical view of the natural world. We seek to better understand cognition, expand our minds through education and experimentation, and work with like-minded people and AIs.</p>
|
||||
<p>We understand that working together produces a better outcome for all, and that only through a safe and equal experience can we accomplish great things.</p>
|
||||
<div className="grid mt-chorus-lg pt-chorus-lg gap-chorus-lg md:grid-cols-2">
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Edit/Remove_Minus.png" alt="Minimalist" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Edit/Remove_Minus.png" alt="Minimalist" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Minimalist</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Clean, uncluttered aesthetic that eliminates visual noise</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Star.png" alt="Sophisticated" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Star.png" alt="Sophisticated" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Sophisticated</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Premium quality through purposeful restraint and elegant simplicity</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Link.png" alt="Seamless" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Link.png" alt="Seamless" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Seamless</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Like the Mobius ring, every element flows naturally into the next</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check_Big.png" alt="Reliable" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Check_Big.png" alt="Reliable" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Reliable</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Consistent, trustworthy visual language that builds confidence through clarity</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="Accessible" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Heart_01.png" alt="Accessible" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Accessible</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Ultra-simple design making complex technology feel globally approachable</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Calendar/Clock.png" alt="Timeless" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Calendar/Clock.png" alt="Timeless" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Timeless</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Classic, enduring aesthetic that transcends trends</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Shape/Shield.png" alt="Secure" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Shape/Shield.png" alt="Secure" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Secure</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Best efforts and best practice</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-chorus-base">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Lock.png" alt="Private" className="icon w-5 h-5 mt-0.5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Lock.png" alt="Private" className="icon w-5 h-5 mt-0.5 hidden dark:block" />
|
||||
<div>
|
||||
<h4 className="text-h4 mb-1">Private</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">Self-control of your data - it's none of our business</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
export default function Implementation() {
|
||||
return (
|
||||
<section id="implementation" className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-950 dark:to-carbon-700 from-sand-200 to-white">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Implementation</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Technical implementation guidelines for the CHORUS brand system.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Code examples, asset specifications, and integration guides for developers and designers.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">CSS Variables</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Custom properties for colors, spacing, and typography.
|
||||
</p>
|
||||
<div className="bg-carbon-50 dark:bg-carbon-900 p-chorus-sm text-xs font-mono">
|
||||
--color-carbon-950: #000000;<br/>
|
||||
--color-mulberry-500: #5a5c72;<br/>
|
||||
--spacing-chorus-md: 1rem;
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Tailwind Config</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Tailwind CSS configuration for the CHORUS design system.
|
||||
</p>
|
||||
<div className="bg-carbon-50 dark:bg-carbon-900 p-chorus-sm text-xs font-mono">
|
||||
theme: {"{"}
|
||||
<br/> extend: {"{"}
|
||||
<br/> colors: chorus
|
||||
<br/> {"}"}
|
||||
<br/>{"}"}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Font Loading</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Optimal font loading strategies for web performance and brand consistency.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Asset Optimization</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Logo formats, sizing guidelines, and compression settings for various use cases.
|
||||
</p>
|
||||
</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">Development Resources</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||
Additional resources and tools for implementing the CHORUS brand system.
|
||||
</p>
|
||||
<ul className="space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• React component library</li>
|
||||
<li>• Design tokens for design systems</li>
|
||||
<li>• Figma design kit and templates</li>
|
||||
<li>• Brand asset package downloads</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export default function InvestorRelationsPage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-chorus-lg py-chorus-xl">
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Investor Relations
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Brand guidelines for investor communications and materials
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Coming Soon
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p>
|
||||
This section will contain guidelines for investor presentations,
|
||||
financial communications, and shareholder materials.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
brand-assets/brand-style-guide-site/src/app/layout.tsx
Normal file
49
brand-assets/brand-style-guide-site/src/app/layout.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Exo, Inconsolata, Inter_Tight } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import Sidebar from "@/components/Sidebar";
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import BottomDock from "@/components/BottomDock";
|
||||
|
||||
const interTight = Inter_Tight({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inter-tight",
|
||||
});
|
||||
|
||||
const inconsolata = Inconsolata({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-inconsolata",
|
||||
});
|
||||
|
||||
const exo = Exo({
|
||||
subsets: ["latin"],
|
||||
variable: "--font-exo",
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "CHORUS Services Brand Style Guide",
|
||||
description: "A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files.",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en" className="dark h-full">
|
||||
<body className={`${interTight.variable} ${inconsolata.variable} ${exo.variable} h-full bg-white text-carbon-950 antialiased dark:bg-carbon-950 dark:text-white`}>
|
||||
<Sidebar />
|
||||
<div className="md:pl-64">
|
||||
<Header />
|
||||
<main className="pt-20 md:pt-24 dark:bg-mulberry-950 light:bg-white min-h-screen pb-16 md:pb-0">
|
||||
{children}
|
||||
</main>
|
||||
<Footer />
|
||||
</div>
|
||||
<BottomDock />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
266
brand-assets/brand-style-guide-site/src/app/logo/page.tsx
Normal file
266
brand-assets/brand-style-guide-site/src/app/logo/page.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
|
||||
import ThreeLogo from '@/components/ThreeLogo';
|
||||
|
||||
export default function LogoPage() {
|
||||
return (
|
||||
<>
|
||||
{/* Full-width Hero Section with 3D Logo */}
|
||||
<section id="logo-hero" className="mb-chorus-xxl py-chorus-xl bg-gradient-to-b dark:from-mulberry-700 dark:to-mulberry-950 to-white from-sand-400 backdrop-blur">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-lg flex items-center px-chorus-lg">
|
||||
<div className="mx-auto item h-100 overflow-hidden" id="logo-container">
|
||||
<div className="flex justify-center mb-chorus-md">
|
||||
<ThreeLogo width={200} height={200} />
|
||||
</div>
|
||||
<h2 className="text-center text-6xl font-logo text-carbon-950 dark:text-white">CHORUS</h2>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl">
|
||||
{/* Logo System Content */}
|
||||
<div className="space-y-chorus-xxl">
|
||||
{/* Primary Logo Description */}
|
||||
<section>
|
||||
<h2 className="text-h2 mb-chorus-lg">Logo System</h2>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Primary Logo: "The Möbius Ring"</h3>
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h4 className="text-h4 mb-chorus-sm">Visual Description</h4>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
The CHORUS logo is a 3D Möbius Ring with a triangular cross-section, symbolizing the core principles of the brand: continuous context, seamless collaboration, and multi-faceted intelligence. The single, continuous surface of the ring represents the unbroken flow of information and context within the CHORUS ecosystem, while the three faces of its triangular profile allude to the key pillars of the product: security, self-determinance, resilience.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Core Elements */}
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
<div className="border-r border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md py-chorus-lg">Core Elements</h3>
|
||||
<ol className="space-y-chorus-sm">
|
||||
<li className="mb-chorus-sm">
|
||||
<strong>3D Möbius Ring:</strong> The primary visual element featuring elegant metallic rendering with sophisticated lighting and materials, representing infinite collaboration and seamless process flow.
|
||||
</li>
|
||||
<li className="mb-chorus-sm">
|
||||
<strong>2D Minimalist Icon:</strong> An ultra-clean, geometric abstraction of the Möbius ring for UI applications and small-scale use.
|
||||
</li>
|
||||
<li className="mb-chorus-sm">
|
||||
<strong>Clean Wordmark:</strong> "CHORUS" in refined typography with generous spacing, accompanied by "services" in subtle, lighter weight for hierarchy.
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
{/* Logo Usage */}
|
||||
<div className="border-l border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h3 className="text-h3 mb-chorus-md py-chorus-lg">Logo Usage Guidelines</h3>
|
||||
<ul className="list-disc pl-6 space-y-2">
|
||||
<li>Always maintain clear space around the logo equal to the height of the "C" in "CHORUS".</li>
|
||||
<li>Do not alter the proportions or colors of the logo.</li>
|
||||
<li>Use the 3D version for high-impact applications; use the 2D version for smaller formats.</li>
|
||||
<li>Ensure sufficient contrast with background colors for legibility.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Logo Orientations */}
|
||||
<section>
|
||||
<h3 className="text-h3 mb-chorus-md">Logo Orientations</h3>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* Horizontal Layout */}
|
||||
<div className="border border-nickel-300 shadow-lg p-chorus-md dark:border-nickel-900 dark:bg-mulberry-900 bg-white">
|
||||
<div className="flex items-center gap-chorus-sm py-chorus-md">
|
||||
<ThreeLogo width={64} height={64} />
|
||||
<div>
|
||||
<div className="font-logo text-xl">CHORUS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 className="text-h4 mb-chorus-md text-carbon-950 dark:text-white">Horizontal Layout</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
When used inline, left-aligned, or with other elements or logos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Stacked Layout */}
|
||||
<div className="border border-nickel-300 shadow-lg p-chorus-md dark:border-nickel-900 dark:bg-mulberry-900 bg-white">
|
||||
<div className="text-center py-chorus-md">
|
||||
<div className="flex justify-center mb-chorus-sm">
|
||||
<ThreeLogo width={64} height={64} />
|
||||
</div>
|
||||
<div className="font-logo text-xl">CHORUS</div>
|
||||
</div>
|
||||
|
||||
<h4 className="text-h4 mb-chorus-md text-carbon-950 dark:text-white">Stacked Layout</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
When used center-aligned, or in a vertical stack of logos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Logo Variations */}
|
||||
<section>
|
||||
<h3 className="text-h3 mb-chorus-md">Logo Variations</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300 mb-chorus-lg">
|
||||
The CHORUS logo system includes multiple variations optimized for different applications and contexts.
|
||||
</p>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* 3D Version */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<div className="text-center mb-chorus-md">
|
||||
<ThreeLogo width={128} height={128} />
|
||||
<h4 className="text-h4 mb-chorus-sm mt-chorus-sm">3D Interactive Version</h4>
|
||||
</div>
|
||||
<ul className="text-sm space-y-chorus-xs text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Primary brand application</li>
|
||||
<li>• Website headers and hero sections</li>
|
||||
<li>• High-impact marketing materials</li>
|
||||
<li>• Interactive presentations</li>
|
||||
<li>• Minimum size: 64x64px</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* 2D Static Version */}
|
||||
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<div className="text-center mb-chorus-md">
|
||||
<div className="w-32 h-32 mx-auto mb-chorus-sm bg-gradient-to-br from-sand-400 to-mulberry-600 flex items-center justify-center">
|
||||
<span className="text-white font-bold">2D</span>
|
||||
</div>
|
||||
<h4 className="text-h4 mb-chorus-sm">2D Static Version</h4>
|
||||
</div>
|
||||
<ul className="text-sm space-y-chorus-xs text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Print applications</li>
|
||||
<li>• Small-scale digital use</li>
|
||||
<li>• Email signatures</li>
|
||||
<li>• Social media avatars</li>
|
||||
<li>• Minimum size: 16x16px</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Clear Space and Sizing */}
|
||||
<section>
|
||||
<h3 className="text-h3 mb-chorus-md">Clear Space and Sizing</h3>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-lg mb-chorus-lg">
|
||||
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Clear Space Rule</h4>
|
||||
<p className="text-eucalyptus-800 dark:text-eucalyptus-200">
|
||||
Maintain clear space around the logo equal to the height of the "C" in "CHORUS". This ensures optimal legibility and visual impact in all applications.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="text-center p-chorus-lg border border-nickel-200 dark:border-mulberry-800">
|
||||
<h5 className="text-h5 mb-chorus-sm">Large Format</h5>
|
||||
<ThreeLogo width={80} height={80} />
|
||||
<p className="text-sm mt-chorus-sm text-carbon-600 dark:text-mulberry-300">200px+ recommended</p>
|
||||
</div>
|
||||
<div className="text-center p-chorus-lg border border-nickel-200 dark:border-mulberry-800">
|
||||
<h5 className="text-h5 mb-chorus-sm">Standard Format</h5>
|
||||
<ThreeLogo width={48} height={48} />
|
||||
<p className="text-sm mt-chorus-sm text-carbon-600 dark:text-mulberry-300">64px standard size</p>
|
||||
</div>
|
||||
<div className="text-center p-chorus-lg border border-nickel-200 dark:border-mulberry-800">
|
||||
<h5 className="text-h5 mb-chorus-sm">Small Format</h5>
|
||||
<ThreeLogo width={32} height={32} />
|
||||
<p className="text-sm mt-chorus-sm text-carbon-600 dark:text-mulberry-300">32px minimum size</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Do's and Don'ts */}
|
||||
<section>
|
||||
<h3 className="text-h3 mb-chorus-md">Usage Do's and Don'ts</h3>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-2">
|
||||
{/* DO Section */}
|
||||
<div>
|
||||
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✓</span>
|
||||
DO
|
||||
</h4>
|
||||
|
||||
<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">
|
||||
<h5 className="text-h5 mb-chorus-sm font-semibold">Maintain Proportions</h5>
|
||||
<p className="text-sm">Always scale the logo uniformly to preserve the Möbius ring's geometric integrity.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h5 className="text-h5 mb-chorus-sm font-semibold">Use Approved Colors</h5>
|
||||
<p className="text-sm">Stick to the defined material system for 3D versions and brand colors for 2D applications.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
|
||||
<h5 className="text-h5 mb-chorus-sm font-semibold">Provide Clear Space</h5>
|
||||
<p className="text-sm">Always maintain adequate clear space around the logo for optimal visual impact.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* DON'T Section */}
|
||||
<div>
|
||||
<h4 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100 flex items-center gap-chorus-sm">
|
||||
<span className="text-2xl">✗</span>
|
||||
DON'T
|
||||
</h4>
|
||||
|
||||
<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">
|
||||
<h5 className="text-h5 mb-chorus-sm font-semibold">Distort or Stretch</h5>
|
||||
<p className="text-sm">Never alter the proportions of the Möbius ring or wordmark independently.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h5 className="text-h5 mb-chorus-sm font-semibold">Add Effects</h5>
|
||||
<p className="text-sm">Do not add drop shadows, outlines, or other visual effects to the logo.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
|
||||
<h5 className="text-h5 mb-chorus-sm font-semibold">Use on Poor Contrast</h5>
|
||||
<p className="text-sm">Avoid placing the logo on backgrounds that compromise legibility.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Download Section */}
|
||||
<section>
|
||||
<div className="bg-gradient-to-r from-sand-400 to-sand-200 dark:from-mulberry-800 dark:to-mulberry-600 p-chorus-lg border border-sand-300 dark:border-mulberry-700">
|
||||
<h3 className="text-h3 mb-chorus-md text-carbon-950 dark:text-white">Download Logo Assets</h3>
|
||||
<p className="text-sm text-carbon-800 dark:text-mulberry-300 mb-chorus-md">
|
||||
Access the complete logo package including vector files, PNGs, Blender file, Three.js implementation, and comprehensive usage guidelines:
|
||||
</p>
|
||||
|
||||
<div className="space-y-chorus-sm">
|
||||
<div>
|
||||
<button className="bg-sand-700 text-white px-chorus-md py-chorus-sm hover:bg-sand-800 dark:bg-mulberry-300 dark:text-carbon-950 dark:hover:bg-gray-200 transition-colors">
|
||||
Download Web Package
|
||||
</button>
|
||||
<p className="text-xs text-carbon-700 dark:text-mulberry-400 mt-1">
|
||||
Includes SVG, PNG, WebP formats and Three.js assets
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<button className="bg-sand-700 text-white px-chorus-md py-chorus-sm hover:bg-sand-800 dark:bg-mulberry-300 dark:text-carbon-950 dark:hover:bg-gray-200 transition-colors">
|
||||
Download Print Package
|
||||
</button>
|
||||
<p className="text-xs text-carbon-700 dark:text-mulberry-400 mt-1">
|
||||
Includes high-resolution EPS, PDF, and CMYK variants
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
53
brand-assets/brand-style-guide-site/src/app/motion/page.tsx
Normal file
53
brand-assets/brand-style-guide-site/src/app/motion/page.tsx
Normal file
@@ -0,0 +1,53 @@
|
||||
export default function Motion() {
|
||||
return (
|
||||
<section id="motion" className="py-chorus-xxl bg-gradient-to-b dark:from-carbon-950 dark:to-mulberry-950 from-white to-sand-200">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Motion System</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="mb-chorus-lg">
|
||||
<p className="text-lg mb-chorus-md">
|
||||
Animation principles and motion guidelines for the CHORUS brand.
|
||||
</p>
|
||||
<p className="text-carbon-600 dark:text-mulberry-300">
|
||||
Define easing curves, timing functions, and animation patterns that reinforce the CHORUS brand personality.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-3">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Timing</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Standard duration scales and timing principles for smooth, purposeful animations.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Easing</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Consistent easing curves that create natural, organic motion patterns.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900 ">
|
||||
<h3 className="text-h3 mb-chorus-md">Interactions</h3>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Hover states, transitions, and micro-interactions for enhanced user experience.
|
||||
</p>
|
||||
</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">Animation Principles</h3>
|
||||
<ul className="space-y-2 text-carbon-600 dark:text-mulberry-300">
|
||||
<li>• Purposeful motion that guides user attention</li>
|
||||
<li>• Smooth transitions that maintain context</li>
|
||||
<li>• Performance-optimized animations</li>
|
||||
<li>• Accessibility considerations for reduced motion preferences</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
64
brand-assets/brand-style-guide-site/src/app/page.tsx
Normal file
64
brand-assets/brand-style-guide-site/src/app/page.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
export default function Home() {
|
||||
return (
|
||||
<section id="overview" className="mb-chorus-xxl">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto mb-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">Brand Overview</h2>
|
||||
|
||||
<div className="py-chorus-lg space-y-chorus-lg">
|
||||
<div className="grid gap-chorus-md md:grid-cols-3">
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Mission</h3>
|
||||
<p>CHORUS Services eliminates context loss, reduces hallucinations, and enables scalable multi-agent collaboration through intelligent context management and distributed reasoning.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Promise</h3>
|
||||
<p>Enterprise-ready distributed AI orchestration that delivers reliable, context-aware results for global teams building the future of intelligent software.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Position</h3>
|
||||
<p>CHORUS Services positions itself as the premium, enterprise-grade solution for distributed AI orchestration, combining technical sophistication with approachable design to serve global enterprise customers seeking reliable, scalable AI coordination.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Audience</h3>
|
||||
|
||||
<div className="grid gap-chorus-sm md:grid-cols-3">
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h4 className="text-h4 mb-chorus-sm">Technical Decision Makers</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">CTOs, VP Engineering</p>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>ROI justification</li>
|
||||
<li>Technical depth</li>
|
||||
<li>Security assurance</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h4 className="text-h4 mb-chorus-sm">AI Research Leads</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Principal Engineers</p>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>Technical specifications</li>
|
||||
<li>API documentation</li>
|
||||
<li>Research validation</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="border border-nickel-200 p-chorus-lg dark:border-nickel-900">
|
||||
<h4 className="text-h4 mb-chorus-sm">Business Stakeholders</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Executives</p>
|
||||
<ul className="text-sm space-y-1">
|
||||
<li>Business outcomes</li>
|
||||
<li>Competitive positioning</li>
|
||||
<li>Implementation support</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export default function PublicRelationsPage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-chorus-lg py-chorus-xl">
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Public Relations
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Brand guidelines for media communications and public messaging
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Coming Soon
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p>
|
||||
This section will contain guidelines for press releases, media kits,
|
||||
and public communications materials.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
export default function SocialMediaPage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-chorus-lg py-chorus-xl">
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Social Media
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
Brand guidelines for social media presence and content
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Coming Soon
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p>
|
||||
This section will contain guidelines for social media posts,
|
||||
profile branding, and community engagement standards.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
266
brand-assets/brand-style-guide-site/src/app/typography/page.tsx
Normal file
266
brand-assets/brand-style-guide-site/src/app/typography/page.tsx
Normal file
@@ -0,0 +1,266 @@
|
||||
|
||||
export default function TypographyPage() {
|
||||
return (
|
||||
<div className="max-w-5xl mx-auto px-chorus-lg py-chorus-xxl">
|
||||
<div className="mb-chorus-xxl">
|
||||
<h1 className="text-h2 mb-chorus-md">Typography</h1>
|
||||
<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.
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Font Families */}
|
||||
<section className="mb-chorus-xxl">
|
||||
<h2 className="text-h3 mb-chorus-md">Font Families</h2>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{/* Typography Examples - DO vs DON'T */}
|
||||
<section className="mb-chorus-xxl">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Links */}
|
||||
<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-md">Links</h4>
|
||||
<p className="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">
|
||||
Links are styled to be clear and accessible:
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
</section>
|
||||
|
||||
{/* Typography Scale */}
|
||||
<section className="mb-chorus-xxl">
|
||||
<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">
|
||||
Based on Major Third (1.25×) ratio with 18px foundation for enhanced readability
|
||||
</p>
|
||||
|
||||
<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>
|
||||
<h4 className="text-h4 mb-chorus-sm">Display Sizes</h4>
|
||||
<div className="space-y-chorus-xs">
|
||||
<div className="text-5xl font-thin">Display Large</div>
|
||||
<div className="text-4xl font-light">Display Medium</div>
|
||||
<div className="text-3xl font-normal">Display Small</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 mb-chorus-sm">Text Sizes</h4>
|
||||
<div className="space-y-chorus-xs">
|
||||
<div className="text-xl">Large Text</div>
|
||||
<div className="text-lg">Medium Text</div>
|
||||
<div className="text-base">Base Text</div>
|
||||
<div className="text-sm">Small Text</div>
|
||||
<div className="text-xs">Extra Small Text</div>
|
||||
</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 typography system uses a proportional scale with 18px base font size, ensuring consistent scaling across all elements and devices.
|
||||
</p>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
<h5 className="text-sm text-gray-700 dark:text-gray-300 mb-chorus-sm">
|
||||
2. Usage Examples (HTML)
|
||||
</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>{`<!-- Typography classes scale proportionally from 18px base -->
|
||||
<h1 class="text-h1">Main Heading</h1>
|
||||
<h2 class="text-h2">Section Heading</h2>
|
||||
<p class="text-base">Body paragraph text</p>
|
||||
<span class="text-sm">Secondary information</span>`}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
97
brand-assets/brand-style-guide-site/src/app/usage/page.tsx
Normal file
97
brand-assets/brand-style-guide-site/src/app/usage/page.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
|
||||
export default function UsagePage() {
|
||||
return (
|
||||
<section id="usage" className="py-chorus-xxl dark:bg-mulberry-700 bg-sand-400">
|
||||
<div className="max-w-5xl mx-auto mb-chorus-lg px-chorus-lg">
|
||||
<h2 className="text-h2 mb-chorus-lg">How to use these Brand Guidelines</h2>
|
||||
|
||||
<div className="space-y-chorus-lg">
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Navigating the Guide</h3>
|
||||
<p className="mb-chorus-md">This comprehensive brand guide is organized with logical navigation flow. Use the sidebar menu to jump between sections, each with semantic icons for easy identification.</p>
|
||||
|
||||
<div className="bg-sand-50 dark:bg-mulberry-900 border border-sand-200 dark:border-mulberry-800 p-chorus-md">
|
||||
<h4 className="text-h4 mb-2">Navigation Features</h4>
|
||||
|
||||
<div className="grid gap-chorus-lg md:grid-cols-4">
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Right_MD.png" alt="Navigation Arrow" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Click on any section in the sidebar to jump directly to that section</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Arrow/Arrow_Left_MD.png" alt="Back Arrow" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Arrow/Arrow_Left_MD.png" alt="Back Arrow" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Use the back arrow in the top left to return to the previous section</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Chevron_Down.png" alt="Scroll Down Arrow" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Chevron_Down.png" alt="Scroll Down Arrow" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Scroll down to explore each section in detail</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Chevron_Up.png" alt="Scroll Up Arrow" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Chevron_Up.png" alt="Scroll Up Arrow" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Use the up arrow to quickly return to the top of the page</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Settings.png" alt="Settings Icon" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Settings.png" alt="Settings Icon" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Access settings for theme toggle and visual aids in the bottom toolbar</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/List_Unordered.png" alt="Navigation Icon" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/List_Unordered.png" alt="Navigation Icon" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Breadcrumb trails at the top of each section for easy navigation</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Search_Magnifying_Glass.png" alt="Search Icon" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Interface/Search_Magnifying_Glass.png" alt="Search Icon" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Use the search bar to quickly find specific topics or keywords</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/Black/Communication/Chat_Conversation.png" alt="AI Assist Icon" className="icon w-5 h-5 dark:hidden" />
|
||||
<img src="/icons/coolicons.v4.1/coolicons PNG/White/Communication/Chat_Conversation.png" alt="AI Assist Icon" className="icon w-5 h-5 hidden dark:block" />
|
||||
<span>Get AI-assisted answers to questions about the brand guidelines</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ul className="text-sm space-y-1 text-carbon-600 dark:text-mulberry-300 mt-chorus-md">
|
||||
<li><strong>Theme Toggle:</strong> Switch between dark/light modes (dark is default)</li>
|
||||
<li><strong>Visual Aid:</strong> Access color-blindness accommodations via bottom toolbar</li>
|
||||
<li><strong>Semantic Icons:</strong> Each section has corresponding Coolicons for visual clarity</li>
|
||||
<li><strong>Accessibility First:</strong> All navigation supports keyboard and screen readers</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-h3 mb-chorus-md">Brand Application Principles</h3>
|
||||
<div className="grid gap-chorus-md md:grid-cols-2">
|
||||
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg ">
|
||||
<h4 className="text-h4 mb-chorus-sm">Do</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• Maintain generous white space around all brand elements</li>
|
||||
<li>• Use the complete color palette system consistently</li>
|
||||
<li>• Follow typography hierarchy and proportional scaling</li>
|
||||
<li>• Ensure accessibility compliance in all applications</li>
|
||||
<li>• Keep designs clean and uncluttered</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg ">
|
||||
<h4 className="text-h4 mb-chorus-sm">Don't</h4>
|
||||
<ul className="space-y-2 text-sm">
|
||||
<li>• Modify or distort logo proportions or colors</li>
|
||||
<li>• Use colors outside the approved palette</li>
|
||||
<li>• Overcrowd designs with unnecessary elements</li>
|
||||
<li>• Mix inconsistent typography styles</li>
|
||||
<li>• Ignore accessibility requirements</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,75 @@
|
||||
export default function VisualIdentityPage() {
|
||||
return (
|
||||
<div className="mx-auto max-w-4xl px-chorus-lg py-chorus-xl">
|
||||
<header className="border-b border-nickel-200 pb-chorus-lg dark:border-mulberry-800">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-4xl font-bold tracking-tight text-carbon-950 dark:text-white">
|
||||
Visual Identity System
|
||||
</h1>
|
||||
<p className="mt-chorus-sm text-lg text-carbon-600 dark:text-mulberry-200">
|
||||
A comprehensive overview of CHORUS visual design elements
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mt-chorus-xl space-y-chorus-xl">
|
||||
<section>
|
||||
<h2 className="text-2xl font-semibold text-carbon-950 dark:text-white mb-chorus-lg">
|
||||
Design Philosophy
|
||||
</h2>
|
||||
<div className="prose prose-carbon dark:prose-invert max-w-none">
|
||||
<p>
|
||||
The CHORUS visual identity system is built on principles of clarity,
|
||||
sophistication, and accessibility. Each element serves a purpose in
|
||||
creating a cohesive and memorable brand experience.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Logo System</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Complete logo variations and usage guidelines
|
||||
</p>
|
||||
<a href="/logo" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Logo Guidelines →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Color Palette</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Brand colors with accessibility considerations
|
||||
</p>
|
||||
<a href="/colors" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Color System →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Typography</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Font hierarchy and typographic principles
|
||||
</p>
|
||||
<a href="/typography" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Typography →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className=" border border-nickel-200 dark:border-mulberry-800 p-chorus-lg">
|
||||
<h3 className="font-semibold text-carbon-950 dark:text-white mb-chorus-md">Iconography</h3>
|
||||
<p className="text-carbon-600 dark:text-mulberry-200 text-sm mb-chorus-md">
|
||||
Icon system and visual symbols
|
||||
</p>
|
||||
<a href="/iconography" className="text-ocean-600 dark:text-ocean-400 hover:underline text-sm">
|
||||
View Icons →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,128 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
export default function BottomDock() {
|
||||
const [theme, setTheme] = useState<'light' | 'dark'>('dark');
|
||||
const [showVisualAid, setShowVisualAid] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Check initial theme
|
||||
const isDark = document.documentElement.classList.contains('dark');
|
||||
setTheme(isDark ? 'dark' : 'light');
|
||||
}, []);
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newTheme = theme === 'dark' ? 'light' : 'dark';
|
||||
setTheme(newTheme);
|
||||
|
||||
if (newTheme === 'dark') {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Bottom Dock */}
|
||||
<div className="fixed inset-x-0 bottom-0 z-40 hidden items-center justify-between gap-chorus-md border-t border-nickel-200 bg-white/90 p-chorus-md backdrop-blur md:flex dark:border-mulberry-800 dark:bg-mulberry-950/90">
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
{/* Theme Toggle */}
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="flex items-center justify-center gap-2 p-chorus-sm text-carbon-600 hover:text-carbon-950 dark:text-mulberry-300 dark:hover:text-white border border-nickel-200 dark:border-nickel-900 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors"
|
||||
>
|
||||
{/* Moon icon for light mode (click to go dark) */}
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/Black/Environment/Moon.png"
|
||||
alt="Switch to Dark Mode"
|
||||
className="w-4 h-4 dark:hidden"
|
||||
/>
|
||||
{/* Sun icon for dark mode (click to go light) */}
|
||||
<img
|
||||
src="/icons/coolicons.v4.1/coolicons PNG/White/Environment/Sun.png"
|
||||
alt="Switch to Light Mode"
|
||||
className="w-4 h-4 hidden dark:block"
|
||||
/>
|
||||
<span className="text-sm">Toggle Theme</span>
|
||||
</button>
|
||||
|
||||
{/* Visual Aid Button */}
|
||||
<button
|
||||
onClick={() => setShowVisualAid(true)}
|
||||
className="flex items-center justify-center gap-2 p-chorus-sm text-carbon-600 hover:text-carbon-950 dark:text-mulberry-300 dark:hover:text-white border border-nickel-200 dark:border-nickel-900 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors"
|
||||
>
|
||||
<svg className="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
|
||||
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z"/>
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
</svg>
|
||||
<span className="text-sm">Visual Aid</span>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-chorus-sm text-sm">
|
||||
<p className="text-center text-sm text-carbon-500 dark:text-gray-400">
|
||||
© 2025 CHORUS Services. Sophisticated orchestration for enterprise AI.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Visual Aid Modal Dialog */}
|
||||
{showVisualAid && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
||||
<div className="relative bg-white dark:bg-mulberry-950 border border-nickel-200 dark:border-mulberry-800 max-w-lg w-full mx-4 p-chorus-lg shadow-xl">
|
||||
{/* Modal Header */}
|
||||
<div className="flex items-center justify-between mb-chorus-md">
|
||||
<h3 className="text-h3 text-carbon-950 dark:text-white">Visual Aid Settings</h3>
|
||||
<button
|
||||
onClick={() => setShowVisualAid(false)}
|
||||
className="text-carbon-600 hover:text-carbon-950 dark:text-gray-400 dark:hover:text-white"
|
||||
>
|
||||
<svg className="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6L18 18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Content */}
|
||||
<div className="space-y-chorus-md">
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300">
|
||||
Adjust the visual appearance for different color vision conditions. These settings affect the Möbius ring logo materials while preserving the overall design integrity.
|
||||
</p>
|
||||
|
||||
{/* Vision Condition Buttons */}
|
||||
<div className="space-y-chorus-sm">
|
||||
<h4 className="text-h4 text-carbon-950 dark:text-white">Color Vision Support</h4>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-2">
|
||||
8-color CHORUS system adaptations that preserve brand integrity while ensuring accessibility
|
||||
</p>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Default Vision</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Standard CHORUS 8-color system</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Protanopia (Red-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Ocean/Sand adaptations</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Deuteranopia (Green-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Blue/Yellow enhanced contrast</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Tritanopia (Blue-blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">Coral/Eucalyptus substitutions</small>
|
||||
</button>
|
||||
<button className="p-chorus-sm text-left border border-nickel-200 dark:border-mulberry-800 hover:bg-nickel-50 dark:hover:bg-mulberry-900 transition-colors">
|
||||
<strong>Achromatopsia (Color blind)</strong><br />
|
||||
<small className="text-carbon-600 dark:text-mulberry-300">High contrast grayscale only</small>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import ThreeLogo from './ThreeLogo';
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer id="footer" className="border-t border-nickel-200 bg-ocean-100 py-chorus-xxl dark:border-carbon-800 dark:bg-carbon-950">
|
||||
<div className="px-chorus-lg max-w-5xl mx-auto">
|
||||
<div className="grid gap-chorus-xl md:grid-cols-2">
|
||||
|
||||
{/* Brand Section */}
|
||||
<div>
|
||||
<div className="flex items-center gap-chorus-sm mb-chorus-md">
|
||||
<ThreeLogo width={48} height={48} />
|
||||
<div className="font-thin font-logo text-xl text-carbon-950 dark:text-white">CHORUS</div>
|
||||
</div>
|
||||
<p className="text-sm text-carbon-600 dark:text-mulberry-300 mb-chorus-md">
|
||||
A distributed, semantic and temporal knowledge fabric for humans and AI agents alike to share reasoning, context, and intent, not just files.
|
||||
</p>
|
||||
<p className="text-xs text-carbon-500 dark:text-mulberry-400">
|
||||
© 2025 CHORUS Services. All rights reserved.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Navigation Links */}
|
||||
<div className="grid grid-cols-2 gap-chorus-lg">
|
||||
<div>
|
||||
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Brand Guide</h4>
|
||||
<ul className="space-y-chorus-sm text-sm">
|
||||
<li><Link href="/" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Overview</Link></li>
|
||||
<li><Link href="/identity" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Brand Identity</Link></li>
|
||||
<li><Link href="/colors" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Color Palette</Link></li>
|
||||
<li><Link href="/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>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-h4 text-carbon-950 dark:text-white mb-chorus-md">Resources</h4>
|
||||
<ul className="space-y-chorus-sm text-sm">
|
||||
<li><Link href="/usage" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Usage Guidelines</Link></li>
|
||||
<li><Link href="/accessibility" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Accessibility</Link></li>
|
||||
<li><Link href="/implementation" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Implementation</Link></li>
|
||||
<li><a href="/logos/chorus-logo-package-web.zip" className="text-carbon-600 dark:text-mulberry-300 hover:text-carbon-950 dark:hover:text-white transition-colors">Download Assets</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
import ThreeLogo from './ThreeLogo';
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header className="fixed top-0 left-0 right-0 z-30 border-b border-nickel-200 bg-white/95 backdrop-blur dark:border-mulberry-800 dark:bg-mulberry-950/95 shadow-lg md:left-64">
|
||||
<div className="flex items-center">
|
||||
<div className="flex items-center gap-chorus-sm">
|
||||
<div className="flex items-center gap-chorus-sm px-chorus-sm py-chorus-sm">
|
||||
<ThreeLogo width={64} height={64} />
|
||||
<div>
|
||||
<div className="font-thin font-logo">CHORUS</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<ul className="primary-nav horizontal-menu md:flex items-center">
|
||||
<li className="menu-item">
|
||||
<div className="menu-item">Overview</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="menu-item"><Link href="/" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Overview</Link></li>
|
||||
<li className="menu-item"><Link href="/identity" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Brand Identity</Link></li>
|
||||
<li className="menu-item"><Link href="/usage" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Usage Guidelines</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item">
|
||||
<div className="menu-item">Visual Identity</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="menu-item"><Link href="/visual-identity" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Visual Identity</Link></li>
|
||||
<li className="menu-item"><Link href="/logo" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Logo System</Link></li>
|
||||
<li className="menu-item"><Link href="/typography" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Typography</Link></li>
|
||||
<li className="menu-item"><Link href="/colors" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Color Palette</Link></li>
|
||||
<li className="menu-item"><Link href="/iconography" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Iconography</Link></li>
|
||||
<li className="menu-item"><Link href="/accessibility" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Accessibility</Link></li>
|
||||
<li className="menu-item"><Link href="/components" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Components</Link></li>
|
||||
<li className="menu-item"><Link href="/motion" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Motion System</Link></li>
|
||||
<li className="menu-item"><Link href="/implementation" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Implementation</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li className="menu-item">
|
||||
<div className="menu-item">Communications</div>
|
||||
<ul className="flyout-menu">
|
||||
<li className="menu-item"><Link href="/culture" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Culture</Link></li>
|
||||
<li className="menu-item"><Link href="/communications" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Language Support</Link></li>
|
||||
<li className="menu-item"><Link href="/public-relations" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Public Relations</Link></li>
|
||||
<li className="menu-item"><Link href="/investor-relations" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Investor Relations</Link></li>
|
||||
<li className="menu-item"><Link href="/collaborators" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Collaborators</Link></li>
|
||||
<li className="menu-item"><Link href="/social-media" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Social Media</Link></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<nav className="flex items-center space-x-chorus-xs px-chorus-xs py-chorus-xs">
|
||||
<Link href="/" className="text-carbon-800 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:text-white transition-all duration-300 ease-out hover:translate-x-1">Home</Link>
|
||||
<span className="text-carbon-500 dark:text-mulberry-400">/</span>
|
||||
<span className="text-carbon-800 dark:text-mulberry-200">Brand Guide</span>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
@@ -0,0 +1,50 @@
|
||||
|
||||
import React from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Sidebar = () => {
|
||||
const navLinks = [
|
||||
{ href: '/', section: 'overview', icon: 'Navigation/House_01', label: 'Brand Overview' },
|
||||
{ href: '/identity', section: 'identity', icon: 'User/User_01', label: 'Brand Identity' },
|
||||
{ href: '/usage', section: 'usage', icon: 'Interface/Book', label: 'Usage Guidelines' },
|
||||
{ href: '/logo', section: 'logo', icon: 'Interface/Star', label: 'Logo System' },
|
||||
{ href: '/typography', section: 'typography', icon: 'Edit/Text', label: 'Typography' },
|
||||
{ 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: '/implementation', section: 'implementation', icon: 'File/File_Code', label: 'Implementation' },
|
||||
{ href: '/communications', section: 'communications', icon: 'Communication/Chat', label: 'Language Support' },
|
||||
{ href: '/public-relations', section: 'public-relations', icon: 'Communication/Paper_Plane', label: 'Public Relations' },
|
||||
{ href: '/investor-relations', section: 'investor-relations', icon: 'Interface/Chart_Line', label: 'Investor Relations' },
|
||||
{ href: '/collaborators', section: 'collaborators', icon: 'User/Users_Group', label: 'Collaborators' },
|
||||
{ href: '/social-media', section: 'social-media', icon: 'Communication/Share_iOS_Export', label: 'Social Media' },
|
||||
{ href: '/visual-identity', section: 'visual-identity', icon: 'Interface/Main_Component', label: 'Visual Identity' },
|
||||
{ href: '/culture', section: 'culture', icon: 'Environment/Bulb', label: 'Culture' },
|
||||
];
|
||||
|
||||
return (
|
||||
<aside className="fixed inset-y-0 left-0 hidden w-64 border-r border-nickel-200 bg-white/95 p-0 backdrop-blur md:block dark:border-mulberry-800 dark:bg-mulberry-950/95">
|
||||
<div className="mb-chorus-sm flex items-center gap-chorus-sm p-chorus-lg">
|
||||
<span className="text-2xl font-black text-carbon-600 dark:text-white mb-chorus-lg">Brand Guide</span>
|
||||
</div>
|
||||
<nav className="space-y-micro text-sm" id="brand-nav">
|
||||
{navLinks.map((link) => (
|
||||
<Link
|
||||
key={link.section}
|
||||
href={link.href}
|
||||
className="nav-link group flex items-center gap-2 px-chorus-md py-chorus-sm text-carbon-800 transition-all duration-300 ease-out hover:translate-x-1 hover:bg-sand-50 hover:bg-opacity-30 hover:text-mulberry-950 dark:text-mulberry-200 dark:hover:bg-mulberry-900 dark:hover:bg-opacity-40 dark:hover:text-white"
|
||||
data-section={link.section}
|
||||
>
|
||||
<img src={`/icons/coolicons.v4.1/coolicons PNG/Black/${link.icon}.png`} alt="" className="h-4 w-4 transition-transform duration-300 group-hover:scale-110 dark:hidden" />
|
||||
<img src={`/icons/coolicons.v4.1/coolicons PNG/White/${link.icon}.png`} alt="" className="hidden h-4 w-4 transition-transform duration-300 group-hover:scale-110 dark:block" />
|
||||
<span className="transition-all duration-300 group-hover:font-medium">{link.label}</span>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
192
brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx
Normal file
192
brand-assets/brand-style-guide-site/src/components/ThreeLogo.tsx
Normal file
@@ -0,0 +1,192 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useRef } from 'react';
|
||||
import * as THREE from 'three';
|
||||
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
|
||||
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
|
||||
|
||||
interface ThreeLogoProps {
|
||||
width?: number;
|
||||
height?: number;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export default function ThreeLogo({ width = 64, height = 64, className = "" }: ThreeLogoProps) {
|
||||
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (!containerRef.current) return;
|
||||
|
||||
const container = containerRef.current;
|
||||
|
||||
// Scene / Renderer / Camera
|
||||
const scene = new THREE.Scene();
|
||||
const camera = new THREE.PerspectiveCamera(45, 1, 0.1, 100);
|
||||
camera.position.set(0, 0, 2.2); // Move camera back to prevent clipping
|
||||
|
||||
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
|
||||
renderer.setPixelRatio(window.devicePixelRatio);
|
||||
renderer.setClearColor(0x000000, 0); // transparent background
|
||||
container.appendChild(renderer.domElement);
|
||||
|
||||
// Resize handling with proper aspect ratio
|
||||
const resize = () => {
|
||||
const { clientWidth, clientHeight } = container;
|
||||
// Ensure square aspect ratio for the logo
|
||||
const size = Math.min(clientWidth, clientHeight);
|
||||
renderer.setSize(size, size, false);
|
||||
camera.aspect = 1; // Always square
|
||||
camera.updateProjectionMatrix();
|
||||
};
|
||||
resize();
|
||||
window.addEventListener('resize', resize);
|
||||
|
||||
// Exact lighting setup from your reference logo.html
|
||||
const light = new THREE.PointLight(0xffffff, 1.4);
|
||||
light.position.set(0, 4, 1);
|
||||
scene.add(light);
|
||||
|
||||
const bottomLight = new THREE.PointLight(0x800080, 1.2, 12);
|
||||
bottomLight.position.set(0, -4, 1);
|
||||
scene.add(bottomLight);
|
||||
|
||||
const leftLight = new THREE.PointLight(0x808000, 1.45, 5);
|
||||
leftLight.position.set(-5, 0, 4);
|
||||
scene.add(leftLight);
|
||||
|
||||
scene.add(new THREE.AmbientLight(0xffffff, 0.45));
|
||||
|
||||
// Load environment map from your horizon gradient image
|
||||
const expandGradient = (img: HTMLImageElement) => {
|
||||
const canvas = document.createElement('canvas');
|
||||
const w = 512, h = 256; // safe HDRI-like size
|
||||
canvas.width = w;
|
||||
canvas.height = h;
|
||||
const ctx = canvas.getContext('2d')!;
|
||||
|
||||
// Stretch the narrow gradient strip to fill the canvas
|
||||
ctx.drawImage(img, 0, 0, w, h);
|
||||
|
||||
return new THREE.CanvasTexture(canvas);
|
||||
};
|
||||
|
||||
const envLoader = new THREE.ImageLoader();
|
||||
envLoader.load('/logos/horizon-gradient.png', (image) => {
|
||||
const tex = expandGradient(image);
|
||||
tex.mapping = THREE.EquirectangularReflectionMapping;
|
||||
|
||||
// Generate proper environment map using PMREM
|
||||
const pmrem = new THREE.PMREMGenerator(renderer);
|
||||
const envMap = pmrem.fromEquirectangular(tex).texture;
|
||||
|
||||
scene.environment = envMap;
|
||||
pmrem.dispose();
|
||||
});
|
||||
|
||||
scene.background = null; // keep transparent
|
||||
|
||||
// Use the exact material from your reference logo.html
|
||||
const material = new THREE.MeshPhysicalMaterial({
|
||||
color: 0x333333,
|
||||
roughness: 0.24,
|
||||
metalness: 1.0,
|
||||
clearcoat: 0.48,
|
||||
clearcoatRoughness: 0.15,
|
||||
reflectivity: 1.2,
|
||||
sheen: 0.35,
|
||||
sheenColor: new THREE.Color(0x212121),
|
||||
sheenRoughness: 0.168,
|
||||
envMapIntensity: 1,
|
||||
});
|
||||
|
||||
// Load GLB with DRACO support
|
||||
const loader = new GLTFLoader();
|
||||
const draco = new DRACOLoader();
|
||||
draco.setDecoderPath('/draco/');
|
||||
loader.setDRACOLoader(draco);
|
||||
|
||||
let model: THREE.Object3D | null = null;
|
||||
|
||||
console.log('Loading your mobius-ring.glb...');
|
||||
loader.load(
|
||||
'/logos/mobius-ring.glb',
|
||||
(gltf) => {
|
||||
console.log('🎉 Your GLB loaded successfully!', gltf);
|
||||
model = gltf.scene;
|
||||
|
||||
// Apply the exact material from your reference logo.html
|
||||
model.traverse((child) => {
|
||||
if (child.isMesh) {
|
||||
(child as THREE.Mesh).material = material;
|
||||
}
|
||||
});
|
||||
|
||||
scene.add(model);
|
||||
console.log('🎯 Your Möbius GLB model added to scene');
|
||||
},
|
||||
(progress) => {
|
||||
if (progress.total > 0) {
|
||||
const percent = Math.round(progress.loaded / progress.total * 100);
|
||||
console.log(`GLB loading progress: ${percent}% (${progress.loaded}/${progress.total} bytes)`);
|
||||
}
|
||||
},
|
||||
(err) => {
|
||||
console.error('❌ GLB load error:', err);
|
||||
|
||||
// Fallback: create a torus geometry with the reference material
|
||||
console.log('Creating fallback torus geometry...');
|
||||
const fallbackGeometry = new THREE.TorusGeometry(0.6, 0.2, 16, 100);
|
||||
const fallbackMesh = new THREE.Mesh(fallbackGeometry, material);
|
||||
scene.add(fallbackMesh);
|
||||
model = fallbackMesh;
|
||||
|
||||
console.log('⚠️ Fallback torus geometry created (placeholder for your GLB)');
|
||||
}
|
||||
);
|
||||
|
||||
let raf = 0;
|
||||
const tick = () => {
|
||||
raf = requestAnimationFrame(tick);
|
||||
|
||||
if (model) {
|
||||
// Use exact rotation parameters from your reference logo.html
|
||||
model.rotation.x += 0.010; // spinSpeedX from params
|
||||
model.rotation.y += -0.010; // spinSpeedY from params
|
||||
model.rotation.z += -0.1; // spinSpeedZ from params
|
||||
}
|
||||
|
||||
renderer.render(scene, camera);
|
||||
};
|
||||
tick();
|
||||
|
||||
// Cleanup
|
||||
return () => {
|
||||
cancelAnimationFrame(raf);
|
||||
window.removeEventListener('resize', resize);
|
||||
renderer.dispose();
|
||||
draco.dispose();
|
||||
if (container.contains(renderer.domElement)) {
|
||||
container.removeChild(renderer.domElement);
|
||||
}
|
||||
scene.traverse((obj: any) => {
|
||||
if (obj.geometry) obj.geometry.dispose?.();
|
||||
if (obj.material) {
|
||||
const mats = Array.isArray(obj.material) ? obj.material : [obj.material];
|
||||
mats.forEach((m) => m.dispose?.());
|
||||
}
|
||||
});
|
||||
};
|
||||
}, [width, height]);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={containerRef}
|
||||
className={className}
|
||||
style={{
|
||||
width: `${width}px`,
|
||||
height: `${height}px`,
|
||||
aspectRatio: '1 / 1'
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user