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

refactor(brand-style-guide): unify Do/Don’t blocks with shared components and apply across pages (Logo, Copywriting, Typography, Diagrams incl. Field Journal foundation, Iconography, Usage, Art Direction, Colors, Motion)

Browse Source
This commit is contained in:
tony
2025-09-03 11:19:17 +10:00
parent 284942fb6c
commit 074a82bfb6
10 changed files with 384 additions and 473 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
brand-assets/brand-style-guide-site/src/app/art-direction/page.tsx
View File

@@ -1,4 +1,5 @@
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function ArtDirectionPage() {
return (
@@ -35,32 +36,20 @@ export default function ArtDirectionPage() {
<strong>Infrared photography</strong> is one of our three core visual identity pillars, adding a layer of revelation that suggests we see beneath the obvious surface — uncovering hidden patterns, structures, and truths invisible to the naked eye. This aligns metaphorically with our mission: exposing the invisible scaffolding of reasoning and collaboration.
</p>
<div className="grid gap-chorus-md md:grid-cols-2">
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700">
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Photography Do's</h4>
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300">
<li>• High-contrast B&W infrared or false-color IR with natural subjects</li>
<li>• Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds)</li>
<li>• Keep tone observational, almost documentary</li>
<li>• Look for mathematical, symmetrical, or self-organizing structure</li>
</ul>
</div>
<DoDontGrid>
<DoSection>
<DoItemCard>High-contrast B&W infrared or false-color IR with natural subjects.</DoItemCard>
<DoItemCard>Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds).</DoItemCard>
<DoItemCard>Keep tone observational, almost documentary.</DoItemCard>
<DoItemCard>Look for mathematical, symmetrical, or self-organizing structure.</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard>Avoid stocky, staged human imagery ("smiling people in offices").</DontItemCard>
<DontItemCard>Don't use saturated, lifestyle-style photos — they break the scientific tone.</DontItemCard>
<DontItemCard>No generic tech clichés (server racks, neon circuit boards).</DontItemCard>
</DontSection>
</DoDontGrid>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700">
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Photography Don'ts</h4>
<ul className="text-sm space-y-1 text-red-700 dark:text-red-300">
<li>• Avoid stocky, staged human imagery ("smiling people in offices")</li>
<li>• Don't use saturated, lifestyle-style photos — they break the scientific tone</li>
<li>• No generic tech clichés (server racks, neon circuit boards)</li>
</ul>
</div>
</div>
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
<strong>Cross-reference:</strong> See the <a href="/visual-identity" className="text-ocean-600 dark:text-ocean-400 hover:underline">Visual Identity page</a> for how infrared photography integrates with our complete design philosophy including Bauhaus typography and field journal illustration.
</p>
</div>
</div>
</ScrollReveal>
@@ -70,7 +59,17 @@ export default function ArtDirectionPage() {
<ul className="list-disc pl-5 space-y-2">
<li><strong>Truth-effect:</strong> Real photographs, not illustrations or composites. No synthetic “data” overlays.</li>
<li><strong>Australian, untouched:</strong> Native species, landscapes, textures. No human objects, infrastructure, or tracks.</li>
<li><strong>Metaphor first:</strong> Every subject must embody at least one of our pillars—<strong>structure, intelligence, time, growth, ecosystems, emergence</strong>.</li>
<li>
<p><strong>Metaphor first:</strong></p>
<p>Every subject must embody (at least) one of our pillars:</p>
<ul className="list-disc pl-10 space-y-1">
<li>Structural elegance</li>
<li>Emergent intelligence</li>
<li>Evidence of passage of time</li>
<li>Growth</li>
<li>Ecosystems</li>
</ul>
</li>
<li><strong>High contrast, fine detail:</strong> Deep blacks, crisp midtones, visible micro-texture (grain, fibers, pores).</li>
<li><strong>Modular:</strong> Images should stand alone or grid together without stylistic clash.</li>
<li><strong>Brand echo (optional):</strong> A <strong>subtle circular light falloff</strong> (“ring”) at 2–4% opacity—felt, never seen.</li>
@@ -169,27 +168,21 @@ export default function ArtDirectionPage() {
</div>
</ScrollReveal>
<ScrollReveal delay={800} duration={600} direction="up">
<ScrollReveal delay={200} duration={600} direction="up">
<div className="py-chorus-xl">
<h2 className="text-h3 mb-chorus-md">Do / Don’t</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
<div>
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Do</h3>
<ul className="list-disc pl-5 space-y-2">
<li>Use raking light and macro to reveal micro-structure.</li>
<li>Prefer abstraction over literal “hero animal” portraits.</li>
<li>Shoot in harsh midday sun when textures pop; underexpose slightly.</li>
</ul>
</div>
<div>
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100">Don’t</h3>
<ul className="list-disc pl-5 space-y-2">
<li>Show people, roads, fences, fire trails, boats, or gear.</li>
<li>Use illustrative icons, neon circuits, fake network lines.</li>
<li>Tone images (no cyanotypes, warm washes).</li>
</ul>
</div>
</div>
<DoDontGrid>
<DoSection>
<DoItemCard>Use raking light and macro to reveal micro-structure.</DoItemCard>
<DoItemCard>Prefer abstraction over literal “hero animal” portraits.</DoItemCard>
<DoItemCard>Shoot in harsh midday sun when textures pop; underexpose slightly.</DoItemCard>
</DoSection>
<DontSection title="Don’t">
<DontItemCard>Show people, roads, fences, fire trails, boats, or gear.</DontItemCard>
<DontItemCard>Use illustrative icons, neon circuits, fake network lines.</DontItemCard>
<DontItemCard>Tone images (no cyanotypes, warm washes).</DontItemCard>
</DontSection>
</DoDontGrid>
</div>
</ScrollReveal>
@@ -237,11 +230,15 @@ export default function ArtDirectionPage() {
</div>
</ScrollReveal>
<ScrollReveal delay={800} duration={600} direction="up">
<ScrollReveal delay={200} duration={600} direction="up">
<div className="py-chorus-xl">
<h2 className="text-h3 mb-chorus-md">Do / Don’t</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg">
<div>
{/* DO and DO NOTs */}
<div className="grid gap-chorus-md md:grid-cols-2">
{/* DO Section */}
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Do</h3>
<div className="space-y-chorus-md">
<img src="https://placehold.co/600x400/black/white?text=DO:+Raking+Light" alt="Black-and-white macro shot of stringybark with harsh, raking light revealing deep texture and abstract patterns." className="w-full h-auto rounded-md" />
@@ -253,7 +250,9 @@ export default function ArtDirectionPage() {
<li>Shoot in harsh midday sun when textures pop; underexpose slightly.</li>
</ul>
</div>
<div>
{/* DON'T Section */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-md">
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100">Don’t</h3>
<div className="space-y-chorus-md">
<img src="https://placehold.co/600x400/969696/white?text=DON'T:+Person+on+Path" alt="A color-toned image of a forest with a person walking on a path, illustrating multiple 'don't' examples." className="w-full h-auto rounded-md" />

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

@@ -1,4 +1,5 @@
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function ColorsPage() {
const lightColorSets = [
{
@@ -298,28 +299,22 @@ export default function ColorsPage() {
<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&apos;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>
<DoDontGrid>
<DoSection>
<DoItemCard>Use the complete color system consistently across all applications.</DoItemCard>
<DoItemCard>Prioritize dark mode as the default experience.</DoItemCard>
<DoItemCard>Maintain WCAG AA contrast ratios for accessibility.</DoItemCard>
<DoItemCard>Use semantic color assignments (Ocean for actions, Eucalyptus for success).</DoItemCard>
<DoItemCard>Test colors across different devices and lighting conditions.</DoItemCard>
</DoSection>
<DontSection title="Don&apos;t">
<DontItemCard>Create custom colors outside the approved palette.</DontItemCard>
<DontItemCard>Use light mode as the primary experience.</DontItemCard>
<DontItemCard>Mix warm and cool tones inappropriately.</DontItemCard>
<DontItemCard>Ignore accessibility requirements for contrast.</DontItemCard>
<DontItemCard>Use colors purely for decoration without semantic meaning.</DontItemCard>
</DontSection>
</DoDontGrid>
</div>
</div>
</div>

53
brand-assets/brand-style-guide-site/src/app/copywriting/page.tsx
View File

@@ -1,3 +1,5 @@
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function Copywriting() {
return (
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200">
@@ -196,42 +198,21 @@ export default function Copywriting() {
</div>
</div>
{/* Do's & Don'ts */}
<div className="grid md:grid-cols-2 gap-chorus-lg">
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800">
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2">
<img
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png"
alt=""
className="h-5 w-5"
/>
Do's
</h3>
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300">
<li>• Use metaphors (ecology, species, hidden structures) as subtle framing devices</li>
<li>• Highlight strengths before mentioning limitations</li>
<li>• Ask questions to spark dialogue, not just broadcast opinions</li>
<li>• Keep copy clean, plain, and respectful</li>
</ul>
</div>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-lg dark:border-red-800">
<h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-chorus-md flex items-center gap-2">
<img
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Close.png"
alt=""
className="h-5 w-5"
/>
Don'ts
</h3>
<ul className="text-sm space-y-2 text-red-700 dark:text-red-300">
<li>• Bash other tools or sound adversarial</li>
<li>• Use overblown marketing language ("revolutionary," "game-changing")</li>
<li>• Fall into jargon-heavy, academic prose</li>
<li>• Force metaphors — let them appear naturally</li>
</ul>
</div>
</div>
{/* Do's & Don'ts (shared component) */}
<DoDontGrid>
<DoSection>
<DoItemCard>Use metaphors (ecology, species, hidden structures) as subtle framing devices.</DoItemCard>
<DoItemCard>Highlight strengths before mentioning limitations.</DoItemCard>
<DoItemCard>Ask questions to spark dialogue, not just broadcast opinions.</DoItemCard>
<DoItemCard>Keep copy clean, plain, and respectful.</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard>Bash other tools or sound adversarial.</DontItemCard>
<DontItemCard>Use overblown marketing language ("revolutionary," "game-changing").</DontItemCard>
<DontItemCard>Fall into jargon-heavy, academic prose.</DontItemCard>
<DontItemCard>Force metaphors — let them appear naturally.</DontItemCard>
</DontSection>
</DoDontGrid>
{/* Quick Checklist */}
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700">

86
brand-assets/brand-style-guide-site/src/app/diagrams/page.tsx
View File

@@ -1,3 +1,5 @@
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function Diagrams() {
return (
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200">
@@ -75,26 +77,19 @@ export default function Diagrams() {
<strong>Field journal illustration</strong> is one of our three core visual identity pillars, introducing a human, observational quality. Like naturalist plates, our diagrams are studies of an ecosystem: annotated, contextual, and exploratory. This conveys curiosity and trustworthiness without the sterility of typical corporate diagrams.
</p>
<div className="grid gap-chorus-md md:grid-cols-2">
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700">
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Illustration Do's</h4>
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300">
<li>• Employ hand-drawn copperplate-style linework</li>
<li>• Use subtle watercolor washes for grouping/context</li>
<li>• Annotate with small labels, numbering, or marginalia — like a scientific plate</li>
<li>• Maintain restraint: diagrams feel studied, not decorative</li>
</ul>
</div>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700">
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Illustration Don'ts</h4>
<ul className="text-sm space-y-1 text-red-700 dark:text-red-300">
<li>• Avoid cartoonish vector icons or corporate clip-art</li>
<li>• Don't use bright, flat infographic colors</li>
<li>• No glossy gradients, 3D bevels, or skeuomorphic UI</li>
</ul>
</div>
</div>
<DoDontGrid>
<DoSection title="DO">
<DoItemCard>Employ hand-drawn copperplate-style linework.</DoItemCard>
<DoItemCard>Use subtle watercolor washes for grouping/context.</DoItemCard>
<DoItemCard>Annotate with small labels, numbering, or marginalia — like a scientific plate.</DoItemCard>
<DoItemCard>Maintain restraint: diagrams feel studied, not decorative.</DoItemCard>
</DoSection>
<DontSection title="DON'T">
<DontItemCard>Avoid cartoonish vector icons or corporate clip-art.</DontItemCard>
<DontItemCard>Don't use bright, flat infographic colors.</DontItemCard>
<DontItemCard>No glossy gradients, 3D bevels, or skeuomorphic UI.</DontItemCard>
</DontSection>
</DoDontGrid>
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
@@ -319,42 +314,21 @@ export default function Diagrams() {
</div>
</div>
{/* Do's & Don'ts */}
<div className="grid md:grid-cols-2 gap-chorus-lg">
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800">
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2">
<img
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png"
alt=""
className="h-5 w-5"
/>
Do's
</h3>
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300">
<li>• Use watercolor textures to suggest context and environment</li>
<li>• Keep line work clean and precise, avoiding cartoonish exaggeration</li>
<li>• Maintain a sense of restraint — diagrams should feel like study plates, not marketing infographics</li>
<li>• Include annotations and marginalia like field guide plates</li>
</ul>
</div>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-lg dark:border-red-800">
<h3 className="text-xl font-semibold text-red-800 dark:text-red-300 mb-chorus-md flex items-center gap-2">
<img
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Close.png"
alt=""
className="h-5 w-5"
/>
Don'ts
</h3>
<ul className="text-sm space-y-2 text-red-700 dark:text-red-300">
<li>• Use flat, bright corporate vector icons</li>
<li>• Overuse color — keep it subdued</li>
<li>• Sacrifice clarity for style. The diagrams must be both beautiful and functional</li>
<li>• Create glossy, marketing-style infographics</li>
</ul>
</div>
</div>
{/* Do's & Don'ts (shared component) */}
<DoDontGrid>
<DoSection>
<DoItemCard>Use watercolor textures to suggest context and environment.</DoItemCard>
<DoItemCard>Keep line work clean and precise; avoid cartoonish exaggeration.</DoItemCard>
<DoItemCard>Maintain restraint—diagrams should feel like study plates, not marketing infographics.</DoItemCard>
<DoItemCard>Include annotations and marginalia like field guide plates.</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard>Use flat, bright corporate vector icons.</DontItemCard>
<DontItemCard>Overuse color—keep it subdued.</DontItemCard>
<DontItemCard>Sacrifice clarity for style; diagrams must be beautiful and functional.</DontItemCard>
<DontItemCard>Create glossy, marketing-style infographics.</DontItemCard>
</DontSection>
</DoDontGrid>
{/* Tone & Message */}
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800">

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

@@ -1,5 +1,6 @@
import { div } from "three/tsl"
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function IconographyPage() {
return (
@@ -303,27 +304,17 @@ export default function IconographyPage() {
<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>
<DoDontGrid>
<DoSection>
<DoItemCard title="Use Theme Variants">
<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>
</DoItemCard>
<DoItemCard title="Standard Sizes">
<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" />
@@ -331,25 +322,13 @@ export default function IconographyPage() {
<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>
</DoItemCard>
<DoItemCard title="Semantic Meaning">
<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>
</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard title="Mix Icon Styles">
<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" />
@@ -357,10 +336,8 @@ export default function IconographyPage() {
<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>
</DontItemCard>
<DontItemCard title="Arbitrary Sizing">
<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" />
@@ -368,15 +345,12 @@ export default function IconographyPage() {
<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>
</DontItemCard>
<DontItemCard title="Modify or Recolor">
<p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
</div>
</div>
</div>
</div>
</DontItemCard>
</DontSection>
</DoDontGrid>
</section>
</ScrollReveal>

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

@@ -1,6 +1,7 @@
import ThreeLogo from '@/components/ThreeLogo';
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function LogoPage() {
return (
@@ -185,61 +186,35 @@ export default function LogoPage() {
</div>
</section>
{/* Do's and Don'ts */}
{/* DO and DO NOTs */}
<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>
<DoDontGrid>
<DoSection>
<DoItemCard title="Maintain Proportions">
Always scale the logo uniformly to preserve the Möbius ring's geometric integrity.
</DoItemCard>
<DoItemCard title="Use Approved Colors">
Stick to the defined material system for 3D versions and brand colors for 2D applications.
</DoItemCard>
<DoItemCard title="Provide Clear Space">
Always maintain adequate clear space around the logo for optimal visual impact.
</DoItemCard>
</DoSection>
<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>
<DontSection>
<DontItemCard title="Distort or Stretch">
Never alter the proportions of the Möbius ring or wordmark independently.
</DontItemCard>
<DontItemCard title="Add Effects">
Do not add drop shadows, outlines, or other visual effects to the logo.
</DontItemCard>
<DontItemCard title="Use on Poor Contrast">
Avoid placing the logo on backgrounds that compromise legibility.
</DontItemCard>
</DontSection>
</DoDontGrid>
</section>
{/* Download Section */}

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

@@ -1,4 +1,5 @@
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function Motion() {
return (
@@ -159,28 +160,24 @@ export default function Motion() {
<ScrollReveal delay={600} duration={600} direction="up">
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
<h3 className="text-h3 mb-chorus-md">Motion Principles</h3>
<div className="grid gap-chorus-md md:grid-cols-2">
<div>
<h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• Purposeful motion that guides user attention</li>
<li>• Consistent 200-300ms timing for interface elements</li>
<li>• Ease-out curves for natural, organic feeling</li>
<li>• Subtle transforms that enhance without distracting</li>
<li>• Performance-optimized with GPU acceleration</li>
</ul>
</div>
<div>
<h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300">
<li>• Respects prefers-reduced-motion settings</li>
<li>• No flashing or rapid animations</li>
<li>• Focus indicators remain clearly visible</li>
<li>• Essential information never animation-dependent</li>
<li>• Smooth transitions preserve context and orientation</li>
</ul>
</div>
</div>
<DoDontGrid>
<DoSection>
<DoItemCard>Use purposeful motion that guides user attention.</DoItemCard>
<DoItemCard>Use consistent 200–300ms timing for interface elements.</DoItemCard>
<DoItemCard>Use ease-out curves for a natural, organic feel.</DoItemCard>
<DoItemCard>Use subtle transforms that enhance without distracting.</DoItemCard>
<DoItemCard>Optimize performance with GPU-accelerated properties.</DoItemCard>
<DoItemCard>Respect <code>prefers-reduced-motion</code> settings.</DoItemCard>
<DoItemCard>Keep focus indicators clearly visible.</DoItemCard>
<DoItemCard>Use smooth transitions to preserve context and orientation.</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard>Use flashing or rapid animations.</DontItemCard>
<DontItemCard>Make essential information animation‑dependent.</DontItemCard>
<DontItemCard>Introduce large, attention‑grabbing transforms that distract from tasks.</DontItemCard>
<DontItemCard>Mix inconsistent timings for similar interactions.</DontItemCard>
</DontSection>
</DoDontGrid>
</div>
</ScrollReveal>
</div>

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

@@ -1,4 +1,5 @@
import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function TypographyPage() {
return (
@@ -31,26 +32,19 @@ export default function TypographyPage() {
Our typography is rooted in <strong>Bauhaus principles</strong> — providing rational foundation through clarity, structure, and disciplined hierarchy. This reflects the engineered rigor of our systems while keeping compositions clean, functional, and legible.
</p>
<div className="grid gap-chorus-md md:grid-cols-2">
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700">
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Typography Do's</h4>
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300">
<li>• Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir)</li>
<li>• Emphasize clear hierarchy with grid layouts and generous spacing</li>
<li>• Favor all-caps headers with restrained weight OR mixed case with stronger weight</li>
<li>• Never mix both approaches in the same document</li>
</ul>
</div>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700">
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Typography Don'ts</h4>
<ul className="text-sm space-y-1 text-red-700 dark:text-red-300">
<li>• Avoid trendy display fonts, script styles, or overuse of italics</li>
<li>• Don't mix too many typefaces — consistency is critical</li>
<li>• Never combine all-caps headers with mixed case headers in one document</li>
</ul>
</div>
</div>
<DoDontGrid>
<DoSection>
<DoItemCard>Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir).</DoItemCard>
<DoItemCard>Emphasize clear hierarchy with grid layouts and generous spacing.</DoItemCard>
<DoItemCard>Favor all-caps headers with restrained weight OR mixed case with stronger weight.</DoItemCard>
<DoItemCard>Never mix both approaches in the same document.</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard>Avoid trendy display fonts, script styles, or overuse of italics.</DontItemCard>
<DontItemCard>Don't mix too many typefaces — consistency is critical.</DontItemCard>
<DontItemCard>Never combine all-caps headers with mixed case headers in one document.</DontItemCard>
</DontSection>
</DoDontGrid>
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700">
<p className="text-xs text-carbon-600 dark:text-mulberry-300">
@@ -120,20 +114,12 @@ export default function TypographyPage() {
<ScrollReveal delay={500} duration={600} direction="up">
{/* Typography Examples - DO vs DON'T */}
<div className="py-chorus-xl">
<div className="grid gap-chorus-lg md:grid-cols-2">
{/* DO Section */}
<div>
<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">
<DoDontGrid>
<DoSection>
<DoItemCard>
<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>
</DoItemCard>
<DoItemCard title="Headings">
<div className="space-y-chorus-sm">
<h1 className="text-5xl font-logo font-thin">Masthead</h1>
<h1 className="text-h1">Heading 1</h1>
@@ -144,11 +130,8 @@ export default function TypographyPage() {
<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>
</DoItemCard>
<DoItemCard title="Adjust Weight for Contrast">
<div className="space-y-chorus-sm">
<p className="font-thin">Thin (100)</p>
<p className="font-extralight">Extra Light (200)</p>
@@ -158,11 +141,8 @@ export default function TypographyPage() {
<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>
</DoItemCard>
<DoItemCard title="Weight for emphasis">
<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>
@@ -172,34 +152,20 @@ export default function TypographyPage() {
<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>
</DoItemCard>
<DoItemCard title="Links">
<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">
</DoItemCard>
</DoSection>
<DontSection>
<DontItemCard>
<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>
</DontItemCard>
<DontItemCard title="Adjust Weights or Sizes">
<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>
@@ -209,37 +175,19 @@ export default function TypographyPage() {
<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>
</DontItemCard>
<DontItemCard title="Color for emphasis">
<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>
</DontItemCard>
<DontItemCard title="Overset Leading">
<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>
</DontItemCard>
</DontSection>
</DoDontGrid>
</div>
</ScrollReveal>

45
brand-assets/brand-style-guide-site/src/app/usage/page.tsx
View File

@@ -1,3 +1,5 @@
import ScrollReveal from "@/components/ScrollReveal";
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function UsagePage() {
return (
@@ -65,31 +67,30 @@ export default function UsagePage() {
</div>
</div>
{/* DO and DO NOTs */}
<ScrollReveal delay={200} duration={600} direction="up">
<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&apos;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>
<DoDontGrid>
<DoSection>
<DoItemCard>Maintain generous white space around all brand elements.</DoItemCard>
<DoItemCard>Use the complete color palette system consistently.</DoItemCard>
<DoItemCard>Follow typography hierarchy and proportional scaling.</DoItemCard>
<DoItemCard>Ensure accessibility compliance in all applications.</DoItemCard>
<DoItemCard>Keep designs clean and uncluttered.</DoItemCard>
</DoSection>
<DontSection title="Don't">
<DontItemCard>Modify or distort logo proportions or colors.</DontItemCard>
<DontItemCard>Use colors outside the approved palette.</DontItemCard>
<DontItemCard>Overcrowd designs with unnecessary elements.</DontItemCard>
<DontItemCard>Mix inconsistent typography styles.</DontItemCard>
<DontItemCard>Ignore accessibility requirements.</DontItemCard>
</DontSection>
</DoDontGrid>
</div>
</ScrollReveal>
</div>
</div>
</section>

67
brand-assets/brand-style-guide-site/src/components/DoDont.tsx Normal file
View File

@@ -0,0 +1,67 @@
import React from 'react';
type DoDontItem = {
title?: string;
content?: React.ReactNode;
};
export function DoDontGrid({ children }: { children: React.ReactNode }) {
return <div className="grid gap-chorus-md md:grid-cols-2">{children}</div>;
}
export function DoSection({ items, children, title = 'DO' }: { items?: DoDontItem[]; children?: React.ReactNode; title?: string }) {
return (
<div className="bg-eucalyptus-200/30 dark:bg-eucalyptus-900/40 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-200 flex items-center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Interface/Check.png" className="green-icon icon w-8"/>
{title}
</h4>
<div className="space-y-chorus-md">
{items
? items.map((item, idx) => (
<DoItemCard key={idx} title={item.title}>{item.content}</DoItemCard>
))
: children}
</div>
</div>
);
}
export function DontSection({ items, children, title = "DON'T" }: { items?: DoDontItem[]; children?: React.ReactNode; title?: string }) {
return (
<div className="bg-coral-600/30 dark:bg-coral-900/20 border border-coral-400 dark:border-coral-800/50 p-chorus-lg ">
<h4 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-600 flex items-center gap-chorus-sm">
<img src="icons/coolicons.v4.1/coolicons PNG/White/Warning/Stop_Sign.png" className="red-icon icon w-8"/>
{title}
</h4>
<div className="space-y-chorus-md">
{items
? items.map((item, idx) => (
<DontItemCard key={idx} title={item.title}>{item.content}</DontItemCard>
))
: children}
</div>
</div>
);
}
export function DoItemCard({ title, children }: { title?: string; children?: React.ReactNode }) {
return (
<div className="bg-eucalyptus-200/20 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md">
{title ? <h5 className="text-h5 mb-chorus-sm font-semibold">{title}</h5> : null}
<div className="text-sm">{children}</div>
</div>
);
}
export function DontItemCard({ title, children }: { title?: string; children?: React.ReactNode }) {
return (
<div className="bg-coral-400/50 dark:bg-coral-950/20 border border-coral-600 dark:border-coral-800 p-chorus-md">
{title ? <h5 className="text-h5 mb-chorus-sm font-semibold">{title}</h5> : null}
<div className="text-sm">{children}</div>
</div>
);
}