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 ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function ArtDirectionPage() { export default function ArtDirectionPage() {
return ( 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. <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> </p>
<div className="grid gap-chorus-md md:grid-cols-2"> <DoDontGrid>
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700"> <DoSection>
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Photography Do's</h4> <DoItemCard>High-contrast B&W infrared or false-color IR with natural subjects.</DoItemCard>
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300"> <DoItemCard>Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds).</DoItemCard>
<li>• High-contrast B&W infrared or false-color IR with natural subjects</li> <DoItemCard>Keep tone observational, almost documentary.</DoItemCard>
<li>• Highlight hidden textures (leaf veins, canopy structures, coral, termite mounds)</li> <DoItemCard>Look for mathematical, symmetrical, or self-organizing structure.</DoItemCard>
<li>• Keep tone observational, almost documentary</li> </DoSection>
<li>• Look for mathematical, symmetrical, or self-organizing structure</li> <DontSection>
</ul> <DontItemCard>Avoid stocky, staged human imagery ("smiling people in offices").</DontItemCard>
</div> <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> </div>
</ScrollReveal> </ScrollReveal>
@@ -70,7 +59,17 @@ export default function ArtDirectionPage() {
<ul className="list-disc pl-5 space-y-2"> <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>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>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>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>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> <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> </div>
</ScrollReveal> </ScrollReveal>
<ScrollReveal delay={800} duration={600} direction="up"> <ScrollReveal delay={200} duration={600} direction="up">
<div className="py-chorus-xl"> <div className="py-chorus-xl">
<h2 className="text-h3 mb-chorus-md">Do / Don’t</h2> <h2 className="text-h3 mb-chorus-md">Do / Don’t</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-chorus-lg"> <DoDontGrid>
<div> <DoSection>
<h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Do</h3> <DoItemCard>Use raking light and macro to reveal micro-structure.</DoItemCard>
<ul className="list-disc pl-5 space-y-2"> <DoItemCard>Prefer abstraction over literal “hero animal” portraits.</DoItemCard>
<li>Use raking light and macro to reveal micro-structure.</li> <DoItemCard>Shoot in harsh midday sun when textures pop; underexpose slightly.</DoItemCard>
<li>Prefer abstraction over literal “hero animal” portraits.</li> </DoSection>
<li>Shoot in harsh midday sun when textures pop; underexpose slightly.</li> <DontSection title="Don’t">
</ul> <DontItemCard>Show people, roads, fences, fire trails, boats, or gear.</DontItemCard>
</div> <DontItemCard>Use illustrative icons, neon circuits, fake network lines.</DontItemCard>
<div> <DontItemCard>Tone images (no cyanotypes, warm washes).</DontItemCard>
<h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100">Don’t</h3> </DontSection>
<ul className="list-disc pl-5 space-y-2"> </DoDontGrid>
<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>
</div> </div>
</ScrollReveal> </ScrollReveal>
@@ -237,11 +230,15 @@ export default function ArtDirectionPage() {
</div> </div>
</ScrollReveal> </ScrollReveal>
<ScrollReveal delay={800} duration={600} direction="up"> <ScrollReveal delay={200} duration={600} direction="up">
<div className="py-chorus-xl"> <div className="py-chorus-xl">
<h2 className="text-h3 mb-chorus-md">Do / Don’t</h2> <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> <h3 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100">Do</h3>
<div className="space-y-chorus-md"> <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" /> <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> <li>Shoot in harsh midday sun when textures pop; underexpose slightly.</li>
</ul> </ul>
</div> </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> <h3 className="text-h4 mb-chorus-sm text-coral-900 dark:text-coral-100">Don’t</h3>
<div className="space-y-chorus-md"> <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" /> <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 ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function ColorsPage() { export default function ColorsPage() {
const lightColorSets = [ const lightColorSets = [
{ {
@@ -298,28 +299,22 @@ export default function ColorsPage() {
<div> <div>
<h3 className="text-h3 mb-chorus-md">Usage Guidelines</h3> <h3 className="text-h3 mb-chorus-md">Usage Guidelines</h3>
<div className="grid gap-chorus-md md:grid-cols-2"> <DoDontGrid>
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg "> <DoSection>
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-700 dark:text-eucalyptus-400">Do</h4> <DoItemCard>Use the complete color system consistently across all applications.</DoItemCard>
<ul className="space-y-2 text-sm"> <DoItemCard>Prioritize dark mode as the default experience.</DoItemCard>
<li>• Use the complete color system consistently across all applications</li> <DoItemCard>Maintain WCAG AA contrast ratios for accessibility.</DoItemCard>
<li>• Prioritize dark mode as the default experience</li> <DoItemCard>Use semantic color assignments (Ocean for actions, Eucalyptus for success).</DoItemCard>
<li>• Maintain WCAG AA contrast ratios for accessibility</li> <DoItemCard>Test colors across different devices and lighting conditions.</DoItemCard>
<li>• Use semantic color assignments (Ocean for actions, Eucalyptus for success)</li> </DoSection>
<li>• Test colors across different devices and lighting conditions</li> <DontSection title="Don&apos;t">
</ul> <DontItemCard>Create custom colors outside the approved palette.</DontItemCard>
</div> <DontItemCard>Use light mode as the primary experience.</DontItemCard>
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg "> <DontItemCard>Mix warm and cool tones inappropriately.</DontItemCard>
<h4 className="text-h4 mb-chorus-sm text-coral-700 dark:text-coral-400">Don&apos;t</h4> <DontItemCard>Ignore accessibility requirements for contrast.</DontItemCard>
<ul className="space-y-2 text-sm"> <DontItemCard>Use colors purely for decoration without semantic meaning.</DontItemCard>
<li>• Create custom colors outside the approved palette</li> </DontSection>
<li>• Use light mode as the primary experience</li> </DoDontGrid>
<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> </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() { export default function Copywriting() {
return ( return (
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200"> <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>
</div> </div>
{/* Do's & Don'ts */} {/* Do's & Don'ts (shared component) */}
<div className="grid md:grid-cols-2 gap-chorus-lg"> <DoDontGrid>
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800"> <DoSection>
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2"> <DoItemCard>Use metaphors (ecology, species, hidden structures) as subtle framing devices.</DoItemCard>
<img <DoItemCard>Highlight strengths before mentioning limitations.</DoItemCard>
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" <DoItemCard>Ask questions to spark dialogue, not just broadcast opinions.</DoItemCard>
alt="" <DoItemCard>Keep copy clean, plain, and respectful.</DoItemCard>
className="h-5 w-5" </DoSection>
/> <DontSection>
Do's <DontItemCard>Bash other tools or sound adversarial.</DontItemCard>
</h3> <DontItemCard>Use overblown marketing language ("revolutionary," "game-changing").</DontItemCard>
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300"> <DontItemCard>Fall into jargon-heavy, academic prose.</DontItemCard>
<li>• Use metaphors (ecology, species, hidden structures) as subtle framing devices</li> <DontItemCard>Force metaphors — let them appear naturally.</DontItemCard>
<li>• Highlight strengths before mentioning limitations</li> </DontSection>
<li>• Ask questions to spark dialogue, not just broadcast opinions</li> </DoDontGrid>
<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>
{/* Quick Checklist */} {/* Quick Checklist */}
<div className="bg-sand-50 dark:bg-carbon-800 p-chorus-lg border border-sand-200 dark:border-carbon-700"> <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() { export default function Diagrams() {
return ( return (
<div className="py-chorus-xxl bg-gradient-to-b dark:from-mulberry-800 dark:to-mulberry-950 to-white from-sand-200"> <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. <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> </p>
<div className="grid gap-chorus-md md:grid-cols-2"> <DoDontGrid>
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700"> <DoSection title="DO">
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Illustration Do's</h4> <DoItemCard>Employ hand-drawn copperplate-style linework.</DoItemCard>
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300"> <DoItemCard>Use subtle watercolor washes for grouping/context.</DoItemCard>
<li>• Employ hand-drawn copperplate-style linework</li> <DoItemCard>Annotate with small labels, numbering, or marginalia — like a scientific plate.</DoItemCard>
<li>• Use subtle watercolor washes for grouping/context</li> <DoItemCard>Maintain restraint: diagrams feel studied, not decorative.</DoItemCard>
<li>• Annotate with small labels, numbering, or marginalia — like a scientific plate</li> </DoSection>
<li>• Maintain restraint: diagrams feel studied, not decorative</li> <DontSection title="DON'T">
</ul> <DontItemCard>Avoid cartoonish vector icons or corporate clip-art.</DontItemCard>
</div> <DontItemCard>Don't use bright, flat infographic colors.</DontItemCard>
<DontItemCard>No glossy gradients, 3D bevels, or skeuomorphic UI.</DontItemCard>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700"> </DontSection>
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Illustration Don'ts</h4> </DoDontGrid>
<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>
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700"> <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"> <p className="text-xs text-carbon-600 dark:text-mulberry-300">
@@ -319,42 +314,21 @@ export default function Diagrams() {
</div> </div>
</div> </div>
{/* Do's & Don'ts */} {/* Do's & Don'ts (shared component) */}
<div className="grid md:grid-cols-2 gap-chorus-lg"> <DoDontGrid>
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-lg dark:border-emerald-800"> <DoSection>
<h3 className="text-xl font-semibold text-emerald-800 dark:text-emerald-300 mb-chorus-md flex items-center gap-2"> <DoItemCard>Use watercolor textures to suggest context and environment.</DoItemCard>
<img <DoItemCard>Keep line work clean and precise; avoid cartoonish exaggeration.</DoItemCard>
src="/icons/coolicons.v4.1/coolicons PNG/Black/Interface/Check.png" <DoItemCard>Maintain restraint—diagrams should feel like study plates, not marketing infographics.</DoItemCard>
alt="" <DoItemCard>Include annotations and marginalia like field guide plates.</DoItemCard>
className="h-5 w-5" </DoSection>
/> <DontSection>
Do's <DontItemCard>Use flat, bright corporate vector icons.</DontItemCard>
</h3> <DontItemCard>Overuse color—keep it subdued.</DontItemCard>
<ul className="text-sm space-y-2 text-emerald-700 dark:text-emerald-300"> <DontItemCard>Sacrifice clarity for style; diagrams must be beautiful and functional.</DontItemCard>
<li>• Use watercolor textures to suggest context and environment</li> <DontItemCard>Create glossy, marketing-style infographics.</DontItemCard>
<li>• Keep line work clean and precise, avoiding cartoonish exaggeration</li> </DontSection>
<li>• Maintain a sense of restraint — diagrams should feel like study plates, not marketing infographics</li> </DoDontGrid>
<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>
{/* Tone & Message */} {/* Tone & Message */}
<div className="bg-white dark:bg-mulberry-900 border border-nickel-200 p-chorus-lg dark:border-mulberry-800"> <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 { div } from "three/tsl"
import ScrollReveal from '@/components/ScrollReveal'; import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function IconographyPage() { export default function IconographyPage() {
return ( return (
@@ -303,27 +304,17 @@ export default function IconographyPage() {
<section className="mb-chorus-xxl"> <section className="mb-chorus-xxl">
<h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2> <h2 className="text-h3 mb-chorus-md">Usage Guidelines</h2>
<div className="grid gap-chorus-lg md:grid-cols-2"> <DoDontGrid>
{/* DO Section */} <DoSection>
<div> <DoItemCard title="Use Theme Variants">
<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> <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"> <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/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" /> <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> <span className="text-sm text-carbon-600 dark:text-mulberry-300">Black & White variants</span>
</div> </div>
</div> </DoItemCard>
<DoItemCard title="Standard Sizes">
<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> <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"> <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="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="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" /> <img src="icons/coolicons.v4.1/coolicons PNG/Black/Interface/Heart_01.png" alt="32px" className="w-8 h-8" />
</div> </div>
</div> </DoItemCard>
<DoItemCard title="Semantic Meaning">
<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> <p className="text-sm">Choose icons that clearly represent their function and maintain consistency across similar actions.</p>
</div> </DoItemCard>
</div> </DoSection>
</div> <DontSection>
<DontItemCard title="Mix Icon Styles">
{/* 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> <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"> <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" /> <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> <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> <span className="text-sm text-coral-700 dark:text-coral-300">Mixed styles</span>
</div> </div>
</div> </DontItemCard>
<DontItemCard title="Arbitrary Sizing">
<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> <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"> <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-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" /> <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> <span className="text-sm text-coral-700 dark:text-coral-300">Inconsistent sizes</span>
</div> </div>
</div> </DontItemCard>
<DontItemCard title="Modify or Recolor">
<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> <p className="text-sm">Never alter icon shapes, add effects, or change colors beyond the standard black/white variants.</p>
</div> </DontItemCard>
</div> </DontSection>
</div> </DoDontGrid>
</div>
</section> </section>
</ScrollReveal> </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 ThreeLogo from '@/components/ThreeLogo';
import ScrollReveal from '@/components/ScrollReveal'; import ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function LogoPage() { export default function LogoPage() {
return ( return (
@@ -185,61 +186,35 @@ export default function LogoPage() {
</div> </div>
</section> </section>
{/* Do's and Don'ts */} {/* DO and DO NOTs */}
<section> <section>
<h3 className="text-h3 mb-chorus-md">Usage Do's and Don'ts</h3> <h3 className="text-h3 mb-chorus-md">Usage Do's and Don'ts</h3>
<div className="grid gap-chorus-lg md:grid-cols-2"> <DoDontGrid>
{/* DO Section */} <DoSection>
<div> <DoItemCard title="Maintain Proportions">
<h4 className="text-h4 mb-chorus-sm text-eucalyptus-900 dark:text-eucalyptus-100 flex items-center gap-chorus-sm"> Always scale the logo uniformly to preserve the Möbius ring's geometric integrity.
<span className="text-2xl">✓</span> </DoItemCard>
DO <DoItemCard title="Use Approved Colors">
</h4> 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"> <DontSection>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md"> <DontItemCard title="Distort or Stretch">
<h5 className="text-h5 mb-chorus-sm font-semibold">Maintain Proportions</h5> Never alter the proportions of the Möbius ring or wordmark independently.
<p className="text-sm">Always scale the logo uniformly to preserve the Möbius ring's geometric integrity.</p> </DontItemCard>
</div> <DontItemCard title="Add Effects">
Do not add drop shadows, outlines, or other visual effects to the logo.
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md"> </DontItemCard>
<h5 className="text-h5 mb-chorus-sm font-semibold">Use Approved Colors</h5> <DontItemCard title="Use on Poor Contrast">
<p className="text-sm">Stick to the defined material system for 3D versions and brand colors for 2D applications.</p> Avoid placing the logo on backgrounds that compromise legibility.
</div> </DontItemCard>
</DontSection>
<div className="bg-eucalyptus-50 dark:bg-eucalyptus-950/20 border border-eucalyptus-200 dark:border-eucalyptus-800 p-chorus-md"> </DoDontGrid>
<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> </section>
{/* Download 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 ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function Motion() { export default function Motion() {
return ( return (
@@ -159,28 +160,24 @@ export default function Motion() {
<ScrollReveal delay={600} duration={600} direction="up"> <ScrollReveal delay={600} duration={600} direction="up">
<div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800"> <div className="bg-sand-50 dark:bg-mulberry-900 p-chorus-lg border border-sand-200 dark:border-mulberry-800">
<h3 className="text-h3 mb-chorus-md">Motion Principles</h3> <h3 className="text-h3 mb-chorus-md">Motion Principles</h3>
<div className="grid gap-chorus-md md:grid-cols-2"> <DoDontGrid>
<div> <DoSection>
<h4 className="text-sm font-semibold text-eucalyptus-700 dark:text-eucalyptus-400 mb-2">Design Guidelines</h4> <DoItemCard>Use purposeful motion that guides user attention.</DoItemCard>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300"> <DoItemCard>Use consistent 200–300ms timing for interface elements.</DoItemCard>
<li>• Purposeful motion that guides user attention</li> <DoItemCard>Use ease-out curves for a natural, organic feel.</DoItemCard>
<li>• Consistent 200-300ms timing for interface elements</li> <DoItemCard>Use subtle transforms that enhance without distracting.</DoItemCard>
<li>• Ease-out curves for natural, organic feeling</li> <DoItemCard>Optimize performance with GPU-accelerated properties.</DoItemCard>
<li>• Subtle transforms that enhance without distracting</li> <DoItemCard>Respect <code>prefers-reduced-motion</code> settings.</DoItemCard>
<li>• Performance-optimized with GPU acceleration</li> <DoItemCard>Keep focus indicators clearly visible.</DoItemCard>
</ul> <DoItemCard>Use smooth transitions to preserve context and orientation.</DoItemCard>
</div> </DoSection>
<div> <DontSection>
<h4 className="text-sm font-semibold text-coral-700 dark:text-coral-400 mb-2">Accessibility Considerations</h4> <DontItemCard>Use flashing or rapid animations.</DontItemCard>
<ul className="space-y-2 text-sm text-carbon-600 dark:text-mulberry-300"> <DontItemCard>Make essential information animation‑dependent.</DontItemCard>
<li>• Respects prefers-reduced-motion settings</li> <DontItemCard>Introduce large, attention‑grabbing transforms that distract from tasks.</DontItemCard>
<li>• No flashing or rapid animations</li> <DontItemCard>Mix inconsistent timings for similar interactions.</DontItemCard>
<li>• Focus indicators remain clearly visible</li> </DontSection>
<li>• Essential information never animation-dependent</li> </DoDontGrid>
<li>• Smooth transitions preserve context and orientation</li>
</ul>
</div>
</div>
</div> </div>
</ScrollReveal> </ScrollReveal>
</div> </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 ScrollReveal from '@/components/ScrollReveal';
import { DoDontGrid, DoSection, DontSection, DoItemCard, DontItemCard } from "@/components/DoDont";
export default function TypographyPage() { export default function TypographyPage() {
return ( 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. 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> </p>
<div className="grid gap-chorus-md md:grid-cols-2"> <DoDontGrid>
<div className="bg-emerald-50 dark:bg-emerald-900/20 border border-emerald-200 p-chorus-md dark:border-emerald-700"> <DoSection>
<h4 className="font-semibold text-emerald-800 dark:text-emerald-300 mb-2">Typography Do's</h4> <DoItemCard>Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir).</DoItemCard>
<ul className="text-sm space-y-1 text-emerald-700 dark:text-emerald-300"> <DoItemCard>Emphasize clear hierarchy with grid layouts and generous spacing.</DoItemCard>
<li>• Use approved humanist sans or geometric sans-serifs (Inter, Helvetica Neue, Futura, Avenir)</li> <DoItemCard>Favor all-caps headers with restrained weight OR mixed case with stronger weight.</DoItemCard>
<li>• Emphasize clear hierarchy with grid layouts and generous spacing</li> <DoItemCard>Never mix both approaches in the same document.</DoItemCard>
<li>• Favor all-caps headers with restrained weight OR mixed case with stronger weight</li> </DoSection>
<li>• Never mix both approaches in the same document</li> <DontSection>
</ul> <DontItemCard>Avoid trendy display fonts, script styles, or overuse of italics.</DontItemCard>
</div> <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>
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 p-chorus-md dark:border-red-700"> </DontSection>
<h4 className="font-semibold text-red-800 dark:text-red-300 mb-2">Typography Don'ts</h4> </DoDontGrid>
<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>
<div className="mt-chorus-md p-chorus-sm bg-sand-50 dark:bg-carbon-800 border border-sand-200 dark:border-carbon-700"> <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"> <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"> <ScrollReveal delay={500} duration={600} direction="up">
{/* Typography Examples - DO vs DON'T */} {/* Typography Examples - DO vs DON'T */}
<div className="py-chorus-xl"> <div className="py-chorus-xl">
<div className="grid gap-chorus-lg md:grid-cols-2"> <DoDontGrid>
{/* DO Section */} <DoSection>
<div> <DoItemCard>
<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> <p>This column represents the <strong>correct</strong> typographic approach to font selection, weight, scaling, coloration.</p>
</div> </DoItemCard>
<DoItemCard title="Headings">
{/* 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"> <div className="space-y-chorus-sm">
<h1 className="text-5xl font-logo font-thin">Masthead</h1> <h1 className="text-5xl font-logo font-thin">Masthead</h1>
<h1 className="text-h1">Heading 1</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-h6">Heading 6</h6>
<h6 className="text-h7">Heading 7</h6> <h6 className="text-h7">Heading 7</h6>
</div> </div>
</div> </DoItemCard>
<DoItemCard title="Adjust Weight for Contrast">
{/* 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"> <div className="space-y-chorus-sm">
<p className="font-thin">Thin (100)</p> <p className="font-thin">Thin (100)</p>
<p className="font-extralight">Extra Light (200)</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-semibold">Semi Bold (600)</p>
<p className="font-bold">Bold (700)</p> <p className="font-bold">Bold (700)</p>
</div> </div>
</div> </DoItemCard>
<DoItemCard title="Weight for emphasis">
{/* 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"> <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. This body text has been set for particular emphasis of a single paragraph.
</p> </p>
@@ -172,34 +152,20 @@ export default function TypographyPage() {
<p className="text-sm text-carbon-500 dark:text-mulberry-300"> <p className="text-sm text-carbon-500 dark:text-mulberry-300">
This is smaller body text for secondary information. This is smaller body text for secondary information.
</p> </p>
</div> </DoItemCard>
<DoItemCard title="Links">
{/* Links */} <p className="text-base text-carbon-600 dark:text-mulberry-300 mb-chorus-sm">Links are styled to be clear and accessible:</p>
<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"> <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-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> <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> </ul>
</div> </DoItemCard>
</div> </DoSection>
<DontSection>
{/* DON'T Section */} <DontItemCard>
<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> <p>This column represents <strong>incorrect</strong> approaches to avoid.</p>
</div> </DontItemCard>
<DontItemCard title="Adjust Weights or Sizes">
{/* 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"> <div className="space-y-chorus-sm">
<h1 className="text-3xl font-logo font-bold">Masthead</h1> <h1 className="text-3xl font-logo font-bold">Masthead</h1>
<h1 className="text-h1 font-semibold">Heading 1</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> <h5 className="text-xs">Heading 5</h5>
<h6 className="text-sm">Heading 6</h6> <h6 className="text-sm">Heading 6</h6>
</div> </div>
</div> </DontItemCard>
<DontItemCard title="Color for emphasis">
{/* Wrong Color Usage */} <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>
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg mb-chorus-md"> <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>
<h4 className="text-h4 mb-chorus-md">Color for emphasis</h4> <p className="text-sm text-carbon-500 dark:text-mulberry-300">This is smaller body text for secondary information.</p>
<p className="text-base text-coral-800 dark:text-coral-400 mb-chorus-sm"> </DontItemCard>
Body text should not be colored to emphasise a paragraph. <DontItemCard title="Overset Leading">
</p> <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-sm"> <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>
This is normal paragraph text used throughout the CHORUS design system. <p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">This smaller body text for secondary information appears orphaned.</p>
</p> </DontItemCard>
<p className="text-sm text-carbon-500 dark:text-mulberry-300"> </DontSection>
This is smaller body text for secondary information. </DoDontGrid>
</p>
</div>
{/* Wrong Spacing */}
<div className="bg-coral-50 dark:bg-coral-950/20 border border-coral-200 dark:border-coral-800 p-chorus-lg">
<h4 className="text-h4 mb-chorus-xxl">Overset Leading</h4>
<p className="font-bold text-base text-carbon-600 dark:text-white mb-chorus-xl">
This text has been set with excessive leading for the paragraph and its associated heading.
</p>
<p className="text-base text-carbon-600 dark:text-white mb-chorus-lg">
Paragraphs should have sufficient space to let them 'breathe', while maintaining logical connection.
</p>
<p className="text-sm text-carbon-500 dark:text-mulberry-300 mb-chorus-lg">
This smaller body text for secondary information appears orphaned.
</p>
</div>
</div>
</div>
</div> </div>
</ScrollReveal> </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() { export default function UsagePage() {
return ( return (
@@ -65,31 +67,30 @@ export default function UsagePage() {
</div> </div>
</div> </div>
{/* DO and DO NOTs */}
<ScrollReveal delay={200} duration={600} direction="up">
<div> <div>
<h3 className="text-h3 mb-chorus-md">Brand Application Principles</h3> <h3 className="text-h3 mb-chorus-md">Brand Application Principles</h3>
<div className="grid gap-chorus-md md:grid-cols-2"> <DoDontGrid>
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg "> <DoSection>
<h4 className="text-h4 mb-chorus-sm">Do</h4> <DoItemCard>Maintain generous white space around all brand elements.</DoItemCard>
<ul className="space-y-2 text-sm"> <DoItemCard>Use the complete color palette system consistently.</DoItemCard>
<li>• Maintain generous white space around all brand elements</li> <DoItemCard>Follow typography hierarchy and proportional scaling.</DoItemCard>
<li>• Use the complete color palette system consistently</li> <DoItemCard>Ensure accessibility compliance in all applications.</DoItemCard>
<li>• Follow typography hierarchy and proportional scaling</li> <DoItemCard>Keep designs clean and uncluttered.</DoItemCard>
<li>• Ensure accessibility compliance in all applications</li> </DoSection>
<li>• Keep designs clean and uncluttered</li> <DontSection title="Don't">
</ul> <DontItemCard>Modify or distort logo proportions or colors.</DontItemCard>
</div> <DontItemCard>Use colors outside the approved palette.</DontItemCard>
<div className="bg-white dark:bg-mulberry-800 border border-sand-200 dark:border-mulberry-700 p-chorus-lg "> <DontItemCard>Overcrowd designs with unnecessary elements.</DontItemCard>
<h4 className="text-h4 mb-chorus-sm">Don&apos;t</h4> <DontItemCard>Mix inconsistent typography styles.</DontItemCard>
<ul className="space-y-2 text-sm"> <DontItemCard>Ignore accessibility requirements.</DontItemCard>
<li>• Modify or distort logo proportions or colors</li> </DontSection>
<li>• Use colors outside the approved palette</li> </DoDontGrid>
<li>• Overcrowd designs with unnecessary elements</li>
<li>• Mix inconsistent typography styles</li>
<li>• Ignore accessibility requirements</li>
</ul>
</div>
</div>
</div> </div>
</ScrollReveal>
</div> </div>
</div> </div>
</section> </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>
);
}